From a1664296830b3ec85c44eb73314b3f893dbc49b1 Mon Sep 17 00:00:00 2001 From: Makoto Morimoto Date: Mon, 26 Oct 2020 14:37:32 -0700 Subject: [PATCH] Charting: Adding tests for LineChart (#15700) Cherry-pick of #15507. --- ...ng-2020-10-26-12-57-10-lineChartTests.json | 8 + .../components/LineChart/LineChart.test.tsx | 145 ++ .../__snapshots__/LineChart.test.tsx.snap | 1993 +++++++++++++++++ 3 files changed, 2146 insertions(+) create mode 100644 change/@fluentui-react-charting-2020-10-26-12-57-10-lineChartTests.json create mode 100644 packages/react-charting/src/components/LineChart/LineChart.test.tsx create mode 100644 packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap diff --git a/change/@fluentui-react-charting-2020-10-26-12-57-10-lineChartTests.json b/change/@fluentui-react-charting-2020-10-26-12-57-10-lineChartTests.json new file mode 100644 index 00000000000000..76531391ceacb9 --- /dev/null +++ b/change/@fluentui-react-charting-2020-10-26-12-57-10-lineChartTests.json @@ -0,0 +1,8 @@ +{ + "type": "none", + "comment": "Charting: Adding tests for LineChart.", + "packageName": "@fluentui/react-charting", + "email": "humbertomakotomorimoto@gmail.com", + "dependentChangeType": "patch", + "date": "2020-10-26T19:57:10.050Z" +} diff --git a/packages/react-charting/src/components/LineChart/LineChart.test.tsx b/packages/react-charting/src/components/LineChart/LineChart.test.tsx new file mode 100644 index 00000000000000..7007f62cc25109 --- /dev/null +++ b/packages/react-charting/src/components/LineChart/LineChart.test.tsx @@ -0,0 +1,145 @@ +jest.mock('react-dom'); +import * as React from 'react'; +import { resetIds } from '../../Utilities'; +import * as renderer from 'react-test-renderer'; +import { mount, ReactWrapper } from 'enzyme'; +import { ILineChartProps, LineChart } from './index'; +import { ILineChartState, LineChartBase } from './LineChart.base'; + +// Wrapper of the LineChart to be tested. +let wrapper: ReactWrapper | undefined; + +function sharedBeforeEach() { + resetIds(); +} + +function sharedAfterEach() { + if (wrapper) { + wrapper.unmount(); + wrapper = undefined; + } + + // Do this after unmounting the wrapper to make sure if any timers cleaned up on unmount are + // cleaned up in fake timers world + // eslint-disable-next-line @typescript-eslint/no-explicit-any + if ((global.setTimeout as any).mock) { + jest.useRealTimers(); + } +} + +const points = [ + { + legend: 'metaData1', + data: [ + { x: 20, y: 50 }, + { x: 40, y: 80 }, + ], + color: 'red', + }, +]; +const chartPoints = { + chartTitle: 'LineChart', + lineChartData: points, +}; + +describe('LineChart snapShot testing', () => { + it('renders LineChart correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders hideLegend correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders hideTooltip correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders enabledLegendsWrapLines correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders showXAxisLablesTooltip correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders wrapXAxisLables correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders yAxisTickFormat correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); + +describe('LineChart - basic props', () => { + beforeEach(sharedBeforeEach); + afterEach(sharedAfterEach); + + it('Should not mount legend when hideLegend true ', () => { + wrapper = mount(); + const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="legendContainer"]'); + expect(hideLegendDOM.length).toBe(0); + }); + + it('Should mount legend when hideLegend false ', () => { + wrapper = mount(); + const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="legendContainer"]'); + expect(hideLegendDOM).toBeDefined(); + }); + + it('Should mount callout when hideTootip false ', () => { + wrapper = mount(); + const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="ms-Layer"]'); + expect(hideLegendDOM).toBeDefined(); + }); + + it('Should not mount callout when hideTootip true ', () => { + wrapper = mount(); + const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="ms-Layer"]'); + expect(hideLegendDOM.length).toBe(0); + }); +}); + +describe('Render calling with respective to props', () => { + it('No prop changes', () => { + const renderMock = jest.spyOn(LineChartBase.prototype, 'render'); + const props = { + data: chartPoints, + height: 300, + width: 600, + }; + const component = mount(); + component.setProps({ ...props }); + expect(renderMock).toHaveBeenCalledTimes(2); + renderMock.mockRestore(); + }); + + it('prop changes', () => { + const renderMock = jest.spyOn(LineChartBase.prototype, 'render'); + const props = { + data: chartPoints, + height: 300, + width: 600, + hideLegend: true, + }; + const component = mount(); + component.setProps({ ...props, hideTooltip: true }); + expect(renderMock).toHaveBeenCalledTimes(2); + renderMock.mockRestore(); + }); +}); diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap new file mode 100644 index 00000000000000..ad7237d551054a --- /dev/null +++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap @@ -0,0 +1,1993 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LineChart snapShot testing renders LineChart correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders hideLegend correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = ` + +`; + +exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = ` + +`;