Migrated HorizontalBarChart test to react testing library

test/__mocks__/setUpCanvas.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { render } from '@testing-library/react';
+
+export const setUpCanvas = (element: ReactElement) => {
+  const result = render(element);
+  const { container } = result;
+  const events = container.querySelector('canvas')?.getContext('2d')?.__getEvents(); // eslint-disable-line no-underscore-dangle
+
+  return { ...result, events };
+};

test/visits/charts/DoughnutChart.test.tsx

@@ -1,47 +1,24 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { Doughnut } from 'react-chartjs-2';
-import { keys, values } from 'ramda';
 import { DoughnutChart } from '../../../src/visits/charts/DoughnutChart';
+import { setUpCanvas } from '../../__mocks__/setUpCanvas';
+import { screen } from '@testing-library/react';
 
 describe('<DoughnutChart />', () => {
-  let wrapper: ShallowWrapper;
   const stats = {
     foo: 123,
     bar: 456,
   };
 
-  afterEach(() => wrapper?.unmount());
-
   it('renders Doughnut with expected props', () => {
-    wrapper = shallow(<DoughnutChart stats={stats} />);
+    const { events } = setUpCanvas(<DoughnutChart stats={stats} />);
-    const doughnut = wrapper.find(Doughnut);
-    const cols = wrapper.find('.col-sm-12');
 
-    expect(doughnut).toHaveLength(1);
+    expect(events).toBeTruthy();
-
+    expect(events).toMatchSnapshot();
-    const { labels, datasets } = doughnut.prop('data') as any;
-    const [{ data, backgroundColor, borderColor }] = datasets;
-    const { plugins, scales } = (doughnut.prop('options') ?? {}) as any;
-
-    expect(labels).toEqual(keys(stats));
-    expect(data).toEqual(values(stats));
-    expect(datasets).toHaveLength(1);
-    expect(backgroundColor).toEqual([
-      '#97BBCD',
-      '#F7464A',
-      '#46BFBD',
-      '#FDB45C',
-      '#949FB1',
-      '#57A773',
-      '#414066',
-      '#08B2E3',
-      '#B6C454',
-      '#DCDCDC',
-      '#463730',
-    ]);
-    expect(borderColor).toEqual('white');
-    expect(plugins.legend).toEqual({ display: false });
-    expect(scales).toBeUndefined();
-    expect(cols).toHaveLength(2);
   });
+
+  it('renders expected legend', () => {
+    setUpCanvas(<DoughnutChart stats={stats} />);
+
+    expect(screen.getByText('foo')).toBeInTheDocument();
+    expect(screen.getByText('bar')).toBeInTheDocument();
+  })
 });

test/visits/charts/HorizontalBarChart.test.tsx

@@ -1,18 +1,15 @@
-import { render } from '@testing-library/react';
 import { HorizontalBarChart, HorizontalBarChartProps } from '../../../src/visits/charts/HorizontalBarChart';
+import { setUpCanvas } from '../../__mocks__/setUpCanvas';
 
 describe('<HorizontalBarChart />', () => {
-  const setUp = (props: HorizontalBarChartProps) => {
+  const setUp = (props: HorizontalBarChartProps) => setUpCanvas(<HorizontalBarChart {...props} />);
-    const { container } = render(<HorizontalBarChart {...props} />);
-    return container.querySelector('canvas')?.getContext('2d')?.__getEvents(); // eslint-disable-line no-underscore-dangle
-  };
 
   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 });
+    const { events } = setUp({ stats, highlightedStats });
 
     expect(events).toBeTruthy();
     expect(events).toMatchSnapshot();

test/visits/charts/__snapshots__/DoughnutChart.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DoughnutChart /> renders Doughnut with expected props 1`] = `
+Array [
+  Object {
+    "props": Object {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "setTransform",
+  },
+]
+`;