mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated HorizontalBarChart test to react testing library + snapshots for the events on the canvas

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-06 19:46:47 +02:00
parent 116c36febc
commit fcbb9cda12
4 changed files with 537 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
jest.config.js
View file

@ -9,10 +9,10 @@ module.exports = {
], ],
coverageThreshold: { coverageThreshold: {
global: { global: {
statements: 85, statements: 90,
branches: 80, branches: 80,
functions: 80, functions: 85,
lines: 85, lines: 90,
}, },
}, },
setupFiles: ['<rootDir>/config/jest/setupBeforeEnzyme.js', '<rootDir>/config/jest/setupEnzyme.js'], setupFiles: ['<rootDir>/config/jest/setupBeforeEnzyme.js', '<rootDir>/config/jest/setupEnzyme.js'],

2
package.json
View file

@ -18,7 +18,7 @@
"build:serve": "serve -p 5000 ./build", "build:serve": "serve -p 5000 ./build",
"test": "jest --env=jsdom --colors --verbose", "test": "jest --env=jsdom --colors --verbose",
"test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary", "test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",
"test:ci": "npm run test:coverage -- --coverageReporters=clover", "test:ci": "npm run test:coverage -- --coverageReporters=clover --ci",
"test:pretty": "npm run test:coverage -- --coverageReporters=html", "test:pretty": "npm run test:coverage -- --coverageReporters=html",
"mutate": "./node_modules/.bin/stryker run --concurrency 4 --ignoreStatic" "mutate": "./node_modules/.bin/stryker run --concurrency 4 --ignoreStatic"
}, },

62
test/visits/charts/HorizontalBarChart.test.tsx
View file

@ -1,58 +1,20 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render } from '@testing-library/react';
import { Bar } from 'react-chartjs-2'; import { HorizontalBarChart, HorizontalBarChartProps } from '../../../src/visits/charts/HorizontalBarChart';
import { prettify } from '../../../src/utils/helpers/numbers';
import { MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../src/utils/theme';
import { HorizontalBarChart } from '../../../src/visits/charts/HorizontalBarChart';
describe('<HorizontalBarChart />', () => { describe('<HorizontalBarChart />', () => {
let wrapper: ShallowWrapper; const setUp = (props: HorizontalBarChartProps) => {
const stats = { const { container } = render(<HorizontalBarChart {...props} />);
foo: 123, return container.querySelector('canvas')?.getContext('2d')?.__getEvents(); // eslint-disable-line no-underscore-dangle
bar: 456,
}; };
afterEach(() => wrapper?.unmount());
it('renders Bar with expected properties', () => {
wrapper = shallow(<HorizontalBarChart stats={stats} />);
const horizontal = wrapper.find(Bar);
expect(horizontal).toHaveLength(1);
const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data') as any;
const { plugins, scales } = (horizontal.prop('options') ?? {}) as any;
expect(backgroundColor).toEqual(MAIN_COLOR_ALPHA);
expect(borderColor).toEqual(MAIN_COLOR);
expect(plugins.legend).toEqual({ display: false });
expect(scales).toEqual({
x: {
beginAtZero: true,
stacked: true,
ticks: {
precision: 0,
callback: prettify,
},
},
y: { stacked: true },
});
});
it.each([ it.each([
[{ foo: 23 }, [100, 456], [23, 0]], [{ foo: 123, bar: 456 }, undefined],
[{ foo: 50 }, [73, 456], [50, 0]], [{ one: 999, two: 131313 }, { one: 30, two: 100 }],
[{ bar: 45 }, [123, 411], [0, 45]], [{ one: 999, two: 131313, max: 3 }, { one: 30, two: 100 }],
[{ bar: 20, foo: 13 }, [110, 436], [13, 20]], ])('renders chart with expected canvas', (stats, highlightedStats) => {
[undefined, [123, 456], undefined], const events = setUp({ stats, highlightedStats });
])('splits highlighted data from regular data', (highlightedStats, expectedData, expectedHighlightedData) => {
wrapper = shallow(<HorizontalBarChart stats={stats} highlightedStats={highlightedStats} />);
const horizontal = wrapper.find(Bar);
const { datasets: [{ data, label }, highlightedData] } = horizontal.prop('data') as any; expect(events).toBeTruthy();
expect(events).toMatchSnapshot();
expect(label).toEqual('Visits');
expect(data).toEqual(expectedData);
expectedHighlightedData && expect(highlightedData.data).toEqual(expectedHighlightedData);
!expectedHighlightedData && expect(highlightedData).toBeUndefined();
}); });
}); });

521
test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap Normal file
View file

@ -0,0 +1,521 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<HorizontalBarChart /> renders chart with expected canvas 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",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "foo",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "bar",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "0",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "500",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
]
`;
exports[`<HorizontalBarChart /> renders chart with expected canvas 2`] = `
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",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "one",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "two",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "0",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "200,000",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
]
`;
exports[`<HorizontalBarChart /> renders chart with expected canvas 3`] = `
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",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "one",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "two",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "max",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "0",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
Object {
"props": Object {
"text": "200,000",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "measureText",
},
Object {
"props": Object {
"value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif",
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "font",
},
]
`;