Merge pull request #645 from acelaya-forks/feature/moar-rtl-tests

Feature/moar rtl tests

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/domains/DomainRow.test.tsx

@@ -17,13 +17,17 @@ describe('<DomainRow />', () => {
     ],
   ];
   const setUp = (domain: Domain, defaultRedirects?: ShlinkDomainRedirects) => render(
-    <DomainRow
+    <table>
-      domain={domain}
+      <tbody>
-      defaultRedirects={defaultRedirects}
+        <DomainRow
-      selectedServer={Mock.all<SelectedServer>()}
+          domain={domain}
-      editDomainRedirects={jest.fn()}
+          defaultRedirects={defaultRedirects}
-      checkDomainHealth={jest.fn()}
+          selectedServer={Mock.all<SelectedServer>()}
-    />,
+          editDomainRedirects={jest.fn()}
+          checkDomainHealth={jest.fn()}
+        />
+      </tbody>
+    </table>,
   );
 
   it.each(redirectsCombinations)('shows expected redirects', (redirects) => {

test/visits/charts/ChartCard.test.tsx

@@ -1,46 +1,22 @@
 import { ReactNode } from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { Card, CardBody, CardHeader, CardFooter } from 'reactstrap';
 import { ChartCard } from '../../../src/visits/charts/ChartCard';
 
 describe('<ChartCard />', () => {
-  let wrapper: ShallowWrapper;
+  const setUp = (title: Function | string = '', footer?: ReactNode) => render(
-  const createWrapper = (title: Function | string = '', footer?: ReactNode) => {
+    <ChartCard title={title} footer={footer} />,
-    wrapper = shallow(<ChartCard title={title} footer={footer} />);
+  );
-
-    return wrapper;
-  };
-
-  afterEach(() => wrapper?.unmount());
-
-  it('renders expected components', () => {
-    const wrapper = createWrapper();
-    const card = wrapper.find(Card);
-    const header = wrapper.find(CardHeader);
-    const body = wrapper.find(CardBody);
-    const footer = wrapper.find(CardFooter);
-
-    expect(card).toHaveLength(1);
-    expect(header).toHaveLength(1);
-    expect(body).toHaveLength(1);
-    expect(footer).toHaveLength(0);
-  });
 
   it.each([
     ['the title', 'the title'],
     [() => 'the title from func', 'the title from func'],
   ])('properly renders title by parsing provided value', (title, expectedTitle) => {
-    const wrapper = createWrapper(title);
+    setUp(title);
-    const header = wrapper.find(CardHeader);
+    expect(screen.getByText(expectedTitle)).toBeInTheDocument();
-
-    expect(header.html()).toContain(expectedTitle);
   });
 
   it('renders footer only when provided', () => {
-    const wrapper = createWrapper('', 'the footer');
+    setUp('', 'the footer');
-    const footer = wrapper.find(CardFooter);
+    expect(screen.getByText('the footer')).toBeInTheDocument();
-
-    expect(footer).toHaveLength(1);
-    expect(footer.html()).toContain('the footer');
   });
 });

test/visits/charts/DoughnutChart.test.tsx

@@ -1,47 +1,24 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { screen } from '@testing-library/react';
-import { Doughnut } from 'react-chartjs-2';
-import { keys, values } from 'ramda';
 import { DoughnutChart } from '../../../src/visits/charts/DoughnutChart';
+import { setUpCanvas } from '../../__mocks__/setUpCanvas';
 
 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;
+  it('renders expected legend', () => {
-    const [{ data, backgroundColor, borderColor }] = datasets;
+    setUpCanvas(<DoughnutChart stats={stats} />);
-    const { plugins, scales } = (doughnut.prop('options') ?? {}) as any;
 
-    expect(labels).toEqual(keys(stats));
+    expect(screen.getByText('foo')).toBeInTheDocument();
-    expect(data).toEqual(values(stats));
+    expect(screen.getByText('bar')).toBeInTheDocument();
-    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);
   });
 });

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",
+  },
+]
+`;