mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Migrated HorizontalBarChart test to react testing library
This commit is contained in:
parent
4999f982e4
commit
64ee9a39cc
4 changed files with 50 additions and 41 deletions
10
test/__mocks__/setUpCanvas.ts
Normal file
10
test/__mocks__/setUpCanvas.ts
Normal file
|
@ -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 };
|
||||
};
|
|
@ -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 doughnut = wrapper.find(Doughnut);
|
||||
const cols = wrapper.find('.col-sm-12');
|
||||
const { events } = setUpCanvas(<DoughnutChart stats={stats} />);
|
||||
|
||||
expect(doughnut).toHaveLength(1);
|
||||
|
||||
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);
|
||||
expect(events).toBeTruthy();
|
||||
expect(events).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders expected legend', () => {
|
||||
setUpCanvas(<DoughnutChart stats={stats} />);
|
||||
|
||||
expect(screen.getByText('foo')).toBeInTheDocument();
|
||||
expect(screen.getByText('bar')).toBeInTheDocument();
|
||||
})
|
||||
});
|
||||
|
|
|
@ -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 { container } = render(<HorizontalBarChart {...props} />);
|
||||
return container.querySelector('canvas')?.getContext('2d')?.__getEvents(); // eslint-disable-line no-underscore-dangle
|
||||
};
|
||||
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 });
|
||||
const { events } = setUp({ stats, highlightedStats });
|
||||
|
||||
expect(events).toBeTruthy();
|
||||
expect(events).toMatchSnapshot();
|
||||
|
|
25
test/visits/charts/__snapshots__/DoughnutChart.test.tsx.snap
Normal file
25
test/visits/charts/__snapshots__/DoughnutChart.test.tsx.snap
Normal file
|
@ -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",
|
||||
},
|
||||
]
|
||||
`;
|
Loading…
Reference in a new issue