diff --git a/change/@fluentui-react-charting-2020-10-26-17-56-26-pieHeatMapChartsTests.json b/change/@fluentui-react-charting-2020-10-26-17-56-26-pieHeatMapChartsTests.json new file mode 100644 index 0000000000000..21b0ea7d3f86d --- /dev/null +++ b/change/@fluentui-react-charting-2020-10-26-17-56-26-pieHeatMapChartsTests.json @@ -0,0 +1,8 @@ +{ + "type": "none", + "comment": "Charting: Adding tests for HeatMapChart and PieChart.", + "packageName": "@fluentui/react-charting", + "email": "humbertomakotomorimoto@gmail.com", + "dependentChangeType": "none", + "date": "2020-10-27T00:56:26.014Z" +} diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index 1f5ac5a4244d5..76e37a23ce7b3 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -31,7 +31,7 @@ interface IRectRef { refElement: SVGGElement; } type RectanglesGraphData = { [key: string]: FlattenData[] }; -interface IHeatMapChartState { +export interface IHeatMapChartState { /** * determines if the legend any of the legend is selected or not * @default false diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.test.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.test.tsx new file mode 100644 index 0000000000000..51dadbb12a361 --- /dev/null +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.test.tsx @@ -0,0 +1,195 @@ +jest.mock('react-dom'); +import * as React from 'react'; +import * as renderer from 'react-test-renderer'; +import { mount, ReactWrapper } from 'enzyme'; + +import { resetIds } from '../../Utilities'; +import { IHeatMapChartProps, HeatMapChart } from './index'; +import { IHeatMapChartState, HeatMapChartBase } from './HeatMapChart.base'; + +// Wrapper of the HeatMapChart 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 yPoint: string[] = ['p1', 'p2']; + +const xPoint: Date[] = [new Date('2020-03-03'), new Date('2020-03-04')]; +const HeatMapData: IHeatMapChartProps['data'] = [ + { + value: 100, + legend: 'Execllent (0-200)', + data: [ + { + x: xPoint[0], + y: yPoint[0], + value: 50, + rectText: 50, + ratio: [50, 2391], + descriptionMessage: 'a good day to start with in Texas with best air quality', + }, + { + x: xPoint[1], + y: yPoint[1], + value: 25, + rectText: 25, + ratio: [25, 2479], + descriptionMessage: `Due to unexpected heavy rain, all the pollutants are washed + off and people of alaska are hoping for more of this days`, + }, + ], + }, +]; + +describe('HeatMapChart snapShot testing', () => { + it('renders HeatMapChart 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 yAxisTickFormat correctly', () => { + const component = renderer.create( + , + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); + +describe('HeatMapChart - 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(HeatMapChartBase.prototype, 'render'); + const props = { + data: HeatMapData, + domainValuesForColorScale: [0, 600], + rangeValuesForColorScale: ['lightblue', 'darkblue'], + width: 600, + }; + const component = mount(); + component.setProps({ ...props }); + expect(renderMock).toHaveBeenCalledTimes(2); + renderMock.mockRestore(); + }); + + it('prop changes', () => { + const renderMock = jest.spyOn(HeatMapChartBase.prototype, 'render'); + const props = { + data: HeatMapData, + height: 300, + domainValuesForColorScale: [0, 600], + rangeValuesForColorScale: ['lightblue', 'darkblue'], + }; + const component = mount(); + component.setProps({ ...props, width: 600 }); + expect(renderMock).toHaveBeenCalledTimes(2); + renderMock.mockRestore(); + }); +}); diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap new file mode 100644 index 0000000000000..90e74bc363b70 --- /dev/null +++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap @@ -0,0 +1,1101 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = ` + +`; + +exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = ` + +`; + +exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = ` + +`; + +exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = ` + +`; diff --git a/packages/react-charting/src/components/PieChart/PieChart.test.tsx b/packages/react-charting/src/components/PieChart/PieChart.test.tsx new file mode 100644 index 0000000000000..f8d469f53a72e --- /dev/null +++ b/packages/react-charting/src/components/PieChart/PieChart.test.tsx @@ -0,0 +1,95 @@ +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 { IPieChartProps, PieChart } from './index'; +import { PieChartBase } from './PieChart.base'; +import { DefaultPalette } from '@fluentui/react/lib/Styling'; + +// Wrapper of the PieChart 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 chartPoints = [ + { y: 50, x: 'A' }, + { y: 25, x: 'B' }, + { y: 25, x: 'C' }, +]; +const colors = [DefaultPalette.red, DefaultPalette.blue, DefaultPalette.green]; + +describe('PieChart snapShot testing', () => { + it('renders PieChart correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders with colors, width and height data correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); + +describe('PieChart - basic props', () => { + beforeEach(sharedBeforeEach); + afterEach(sharedAfterEach); + + it('Should mount legend when hideLegend false ', () => { + wrapper = mount(); + const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="legendContainer"]'); + 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(PieChartBase.prototype, 'render'); + const props = { + data: chartPoints, + height: 300, + colors: colors, + }; + const component = mount(); + component.setProps({ ...props }); + expect(renderMock).toHaveBeenCalledTimes(2); + renderMock.mockRestore(); + }); + + it('prop changes', () => { + const renderMock = jest.spyOn(PieChartBase.prototype, 'render'); + const props = { + data: chartPoints, + height: 300, + colors: colors, + }; + const component = mount(); + component.setProps({ ...props, width: 600 }); + expect(renderMock).toHaveBeenCalledTimes(2); + renderMock.mockRestore(); + }); +}); diff --git a/packages/react-charting/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap b/packages/react-charting/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap new file mode 100644 index 0000000000000..0a8dc15c4bb1a --- /dev/null +++ b/packages/react-charting/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap @@ -0,0 +1,183 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PieChart snapShot testing renders PieChart correctly 1`] = ` +
+ + + + + + A + - + 50 + + + + + + B + - + 25 + + + + + + C + - + 25 + + + + +
+`; + +exports[`PieChart snapShot testing renders with colors, width and height data correctly 1`] = ` +
+ + + + + + A + - + 50 + + + + + + B + - + 25 + + + + + + C + - + 25 + + + + +
+`;