Move shlink-web-component tests to their own folder

shlink-web-component/test/visits/charts/ChartCard.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { ChartCard } from '../../../src/visits/charts/ChartCard';
+
+describe('<ChartCard />', () => {
+  const setUp = (title: Function | string = '', footer?: ReactNode) => render(
+    <ChartCard title={title} footer={footer} />,
+  );
+
+  it.each([
+    ['the title', 'the title'],
+    [() => 'the title from func', 'the title from func'],
+  ])('properly renders title by parsing provided value', (title, expectedTitle) => {
+    setUp(title);
+    expect(screen.getByText(expectedTitle)).toBeInTheDocument();
+  });
+
+  it('renders footer only when provided', () => {
+    setUp('', 'the footer');
+    expect(screen.getByText('the footer')).toBeInTheDocument();
+  });
+});

shlink-web-component/test/visits/charts/DoughnutChart.test.tsx

@@ -0,0 +1,24 @@
+import { screen } from '@testing-library/react';
+import { DoughnutChart } from '../../../src/visits/charts/DoughnutChart';
+import { setUpCanvas } from '../../__helpers__/setUpTest';
+
+describe('<DoughnutChart />', () => {
+  const stats = {
+    foo: 123,
+    bar: 456,
+  };
+
+  it('renders Doughnut with expected props', () => {
+    const { events } = setUpCanvas(<DoughnutChart stats={stats} />);
+
+    expect(events).toBeTruthy();
+    expect(events).toMatchSnapshot();
+  });
+
+  it('renders expected legend', () => {
+    setUpCanvas(<DoughnutChart stats={stats} />);
+
+    expect(screen.getByText('foo')).toBeInTheDocument();
+    expect(screen.getByText('bar')).toBeInTheDocument();
+  });
+});

shlink-web-component/test/visits/charts/DoughnutChartLegend.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { Chart, ChartDataset } from 'chart.js';
+import { DoughnutChartLegend } from '../../../src/visits/charts/DoughnutChartLegend';
+
+describe('<DoughnutChartLegend />', () => {
+  const labels = ['foo', 'bar', 'baz', 'foo2', 'bar2'];
+  const colors = ['green', 'blue', 'yellow'];
+  const defaultColor = 'red';
+  const datasets = [fromPartial<ChartDataset>({ backgroundColor: colors })];
+  const chart = fromPartial<Chart>({
+    config: {
+      data: { labels, datasets },
+      options: { defaultColor } as any,
+    },
+  });
+
+  it('renders the expected amount of items with expected colors and labels', () => {
+    render(<DoughnutChartLegend chart={chart} />);
+
+    const items = screen.getAllByRole('listitem');
+
+    expect.assertions(labels.length * 2 + 1);
+    expect(items).toHaveLength(labels.length);
+
+    labels.forEach((label, index) => {
+      const item = items[index];
+
+      expect(item.querySelector('.doughnut-chart-legend__item-color')).toHaveAttribute(
+        'style',
+        `background-color: ${colors[index] ?? defaultColor};`,
+      );
+      expect(item.querySelector('.doughnut-chart-legend__item-text')).toHaveTextContent(label);
+    });
+  });
+});

shlink-web-component/test/visits/charts/HorizontalBarChart.test.tsx

@@ -0,0 +1,18 @@
+import type { HorizontalBarChartProps } from '../../../src/visits/charts/HorizontalBarChart';
+import { HorizontalBarChart } from '../../../src/visits/charts/HorizontalBarChart';
+import { setUpCanvas } from '../../__helpers__/setUpTest';
+
+describe('<HorizontalBarChart />', () => {
+  const setUp = (props: HorizontalBarChartProps) => setUpCanvas(<HorizontalBarChart {...props} />);
+
+  it.each([
+    [{ foo: 123, bar: 456 }, undefined],
+    [{ one: 999, two: 131313 }, { one: 30, two: 100 }],
+    [{ one: 999, two: 131313, max: 3 }, { one: 30, two: 100 }],
+  ])('renders chart with expected canvas', (stats, highlightedStats) => {
+    const { events } = setUp({ stats, highlightedStats });
+
+    expect(events).toBeTruthy();
+    expect(events).toMatchSnapshot();
+  });
+});

shlink-web-component/test/visits/charts/LineChartCard.test.tsx

@@ -0,0 +1,68 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { formatISO, subDays, subMonths, subYears } from 'date-fns';
+import { LineChartCard } from '../../../src/visits/charts/LineChartCard';
+import type { NormalizedVisit } from '../../../src/visits/types';
+import { setUpCanvas } from '../../__helpers__/setUpTest';
+
+describe('<LineChartCard />', () => {
+  const setUp = (visits: NormalizedVisit[] = [], highlightedVisits: NormalizedVisit[] = []) => ({
+    user: userEvent.setup(),
+    ...setUpCanvas(<LineChartCard title="Cool title" visits={visits} highlightedVisits={highlightedVisits} />),
+  });
+
+  it('renders provided title', () => {
+    setUp();
+    expect(screen.getByRole('heading')).toHaveTextContent('Cool title');
+  });
+
+  it.each([
+    [[], 0],
+    [[{ date: formatISO(subDays(new Date(), 1)) }], 3],
+    [[{ date: formatISO(subDays(new Date(), 3)) }], 2],
+    [[{ date: formatISO(subMonths(new Date(), 2)) }], 1],
+    [[{ date: formatISO(subMonths(new Date(), 6)) }], 1],
+    [[{ date: formatISO(subMonths(new Date(), 7)) }], 0],
+    [[{ date: formatISO(subYears(new Date(), 1)) }], 0],
+  ])('renders group menu and selects proper grouping item based on visits dates', async (
+    visits,
+    expectedActiveIndex,
+  ) => {
+    const { user } = setUp(visits.map((visit) => fromPartial(visit)));
+
+    await user.click(screen.getByRole('button', { name: /Group by/ }));
+
+    const items = screen.getAllByRole('menuitem');
+
+    expect(items).toHaveLength(4);
+    expect(items[0]).toHaveTextContent('Month');
+    expect(items[1]).toHaveTextContent('Week');
+    expect(items[2]).toHaveTextContent('Day');
+    expect(items[3]).toHaveTextContent('Hour');
+    expect(items[expectedActiveIndex]).toHaveAttribute('class', expect.stringContaining('active'));
+  });
+
+  it.each([
+    [undefined, undefined],
+    [[], []],
+    [[fromPartial<NormalizedVisit>({ date: '2016-04-01' })], []],
+    [[fromPartial<NormalizedVisit>({ date: '2016-04-01' })], [fromPartial<NormalizedVisit>({ date: '2016-04-01' })]],
+  ])('renders chart with expected data', (visits, highlightedVisits) => {
+    const { events } = setUp(visits, highlightedVisits);
+
+    expect(events).toBeTruthy();
+    expect(events).toMatchSnapshot();
+  });
+
+  it('includes stats for visits with no dates if selected', async () => {
+    const { getEvents, user } = setUp([
+      fromPartial({ date: '2016-04-01' }),
+      fromPartial({ date: '2016-01-01' }),
+    ]);
+
+    const eventsBefore = getEvents();
+    await user.click(screen.getByLabelText('Skip dates with no visits'));
+    expect(eventsBefore).not.toEqual(getEvents());
+  });
+});

shlink-web-component/test/visits/charts/SortableBarChartCard.test.tsx

@@ -0,0 +1,77 @@
+import { screen } from '@testing-library/react';
+import { range } from 'ramda';
+import type { ReactNode } from 'react';
+import { rangeOf } from '../../../src/utils/helpers';
+import { SortableBarChartCard } from '../../../src/visits/charts/SortableBarChartCard';
+import type { Stats } from '../../../src/visits/types';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<SortableBarChartCard />', () => {
+  const sortingItems = {
+    name: 'Name',
+    amount: 'Amount',
+  };
+  const stats = {
+    Foo: 100,
+    Bar: 50,
+  };
+  const setUp = (withPagination = false, extraStats = {}, extra?: (foo?: string[]) => ReactNode) => renderWithEvents(
+    <SortableBarChartCard
+      title="Foo"
+      stats={{ ...stats, ...extraStats }}
+      sortingItems={sortingItems}
+      withPagination={withPagination}
+      extraHeaderContent={extra}
+    />,
+  );
+
+  it('renders stats unchanged when no ordering is set', () => {
+    const { container } = setUp();
+
+    expect(container.firstChild).not.toBeNull();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it.each([
+    ['Name', 1],
+    ['Amount', 1],
+    ['Name', 2],
+    ['Amount', 2],
+  ])('renders properly ordered stats when ordering is set', async (name, clicks) => {
+    const { user } = setUp();
+
+    await user.click(screen.getByRole('button'));
+    await Promise.all(rangeOf(clicks, async () => user.click(screen.getByRole('menuitem', { name }))));
+
+    expect(screen.getByRole('document')).toMatchSnapshot();
+  });
+
+  it.each([
+    [0],
+    [1],
+    [2],
+    [3],
+  ])('renders properly paginated stats when pagination is set', async (itemIndex) => {
+    const { user } = setUp(true, range(1, 159).reduce<Stats>((accum, value) => {
+      accum[`key_${value}`] = value;
+      return accum;
+    }, {}));
+
+    await user.click(screen.getAllByRole('button')[1]);
+    await user.click(screen.getAllByRole('menuitem')[itemIndex]);
+
+    expect(screen.getByRole('document')).toMatchSnapshot();
+  });
+
+  it('renders extra header content', () => {
+    setUp(false, {}, () => (
+      <span>
+        <span className="foo-span">Foo in header</span>
+        <span className="bar-span">Bar in header</span>
+      </span>
+    ));
+
+    expect(screen.getByText('Foo in header')).toHaveClass('foo-span');
+    expect(screen.getByText('Bar in header')).toHaveClass('bar-span');
+  });
+});

shlink-web-component/test/visits/charts/__snapshots__/DoughnutChart.test.tsx.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<DoughnutChart /> > renders Doughnut with expected props 1`] = `
+[
+  {
+    "props": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "setTransform",
+  },
+]
+`;

shlink-web-component/test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap

@@ -0,0 +1,521 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<HorizontalBarChart /> > renders chart with expected canvas 1`] = `
+[
+  {
+    "props": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "setTransform",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "foo",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "bar",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "0",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "500",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+]
+`;
+
+exports[`<HorizontalBarChart /> > renders chart with expected canvas 2`] = `
+[
+  {
+    "props": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "setTransform",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "one",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "two",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "0",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "200,000",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+]
+`;
+
+exports[`<HorizontalBarChart /> > renders chart with expected canvas 3`] = `
+[
+  {
+    "props": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "setTransform",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "one",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "two",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "max",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "0",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "200,000",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+]
+`;

shlink-web-component/test/visits/charts/__snapshots__/LineChartCard.test.tsx.snap

@@ -0,0 +1,461 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<LineChartCard /> > renders chart with expected data 1`] = `
+[
+  {
+    "props": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "setTransform",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "0",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "1",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+]
+`;
+
+exports[`<LineChartCard /> > renders chart with expected data 2`] = `
+[
+  {
+    "props": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "setTransform",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "0",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "1",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+]
+`;
+
+exports[`<LineChartCard /> > renders chart with expected data 3`] = `
+[
+  {
+    "props": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "setTransform",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "0",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "1",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "2016-04",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+]
+`;
+
+exports[`<LineChartCard /> > renders chart with expected data 4`] = `
+[
+  {
+    "props": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "setTransform",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "0",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "1",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+  {
+    "props": {
+      "text": "2016-04",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "measureText",
+  },
+  {
+    "props": {
+      "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "font",
+  },
+]
+`;