From fcbb9cda129bb5243b63839b04178248a67c275d Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 6 May 2022 19:46:47 +0200 Subject: [PATCH] Migrated HorizontalBarChart test to react testing library + snapshots for the events on the canvas --- jest.config.js | 6 +- package.json | 2 +- .../visits/charts/HorizontalBarChart.test.tsx | 62 +-- .../HorizontalBarChart.test.tsx.snap | 521 ++++++++++++++++++ 4 files changed, 537 insertions(+), 54 deletions(-) create mode 100644 test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap diff --git a/jest.config.js b/jest.config.js index 70853185..7a2f7fe3 100644 --- a/jest.config.js +++ b/jest.config.js @@ -9,10 +9,10 @@ module.exports = { ], coverageThreshold: { global: { - statements: 85, + statements: 90, branches: 80, - functions: 80, - lines: 85, + functions: 85, + lines: 90, }, }, setupFiles: ['/config/jest/setupBeforeEnzyme.js', '/config/jest/setupEnzyme.js'], diff --git a/package.json b/package.json index 8a272cfa..5c259e5b 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "build:serve": "serve -p 5000 ./build", "test": "jest --env=jsdom --colors --verbose", "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", "mutate": "./node_modules/.bin/stryker run --concurrency 4 --ignoreStatic" }, diff --git a/test/visits/charts/HorizontalBarChart.test.tsx b/test/visits/charts/HorizontalBarChart.test.tsx index b37ffb22..44b2bfde 100644 --- a/test/visits/charts/HorizontalBarChart.test.tsx +++ b/test/visits/charts/HorizontalBarChart.test.tsx @@ -1,58 +1,20 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { Bar } from 'react-chartjs-2'; -import { prettify } from '../../../src/utils/helpers/numbers'; -import { MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../src/utils/theme'; -import { HorizontalBarChart } from '../../../src/visits/charts/HorizontalBarChart'; +import { render } from '@testing-library/react'; +import { HorizontalBarChart, HorizontalBarChartProps } from '../../../src/visits/charts/HorizontalBarChart'; describe('', () => { - let wrapper: ShallowWrapper; - const stats = { - foo: 123, - bar: 456, + const setUp = (props: HorizontalBarChartProps) => { + const { container } = render(); + return container.querySelector('canvas')?.getContext('2d')?.__getEvents(); // eslint-disable-line no-underscore-dangle }; - afterEach(() => wrapper?.unmount()); - - it('renders Bar with expected properties', () => { - wrapper = shallow(); - 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([ - [{ foo: 23 }, [100, 456], [23, 0]], - [{ foo: 50 }, [73, 456], [50, 0]], - [{ bar: 45 }, [123, 411], [0, 45]], - [{ bar: 20, foo: 13 }, [110, 436], [13, 20]], - [undefined, [123, 456], undefined], - ])('splits highlighted data from regular data', (highlightedStats, expectedData, expectedHighlightedData) => { - wrapper = shallow(); - const horizontal = wrapper.find(Bar); + [{ 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 { datasets: [{ data, label }, highlightedData] } = horizontal.prop('data') as any; - - expect(label).toEqual('Visits'); - expect(data).toEqual(expectedData); - expectedHighlightedData && expect(highlightedData.data).toEqual(expectedHighlightedData); - !expectedHighlightedData && expect(highlightedData).toBeUndefined(); + expect(events).toBeTruthy(); + expect(events).toMatchSnapshot(); }); }); diff --git a/test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap b/test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap new file mode 100644 index 00000000..62b5e81f --- /dev/null +++ b/test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap @@ -0,0 +1,521 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` 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[` 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[` 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", + }, +] +`;