Charting: Adding tests for HeatMapChart and PieChart (microsoft#15711)

Cherry-pick of microsoft#15640.

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"
+}

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

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<IHeatMapChartProps, IHeatMapChartState, HeatMapChartBase> | 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(
+ <HeatMapChart
+ data={HeatMapData}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ />,
+ );
+ const tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders hideLegend correctly', () => {
+ const component = renderer.create(
+ <HeatMapChart
+ data={HeatMapData}
+ hideLegend={true}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ />,
+ );
+ const tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders hideTooltip correctly', () => {
+ const component = renderer.create(
+ <HeatMapChart
+ data={HeatMapData}
+ hideTooltip={true}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ />,
+ );
+ const tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders yAxisTickFormat correctly', () => {
+ const component = renderer.create(
+ <HeatMapChart
+ data={HeatMapData}
+ yAxisTickFormat={'/%d'}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ />,
+ );
+ 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(
+ <HeatMapChart
+ data={HeatMapData}
+ hideLegend={true}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ />,
+ );
+ const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="legendContainer"]');
+ expect(hideLegendDOM!.length).toBe(0);
+ });
+
+ it('Should mount legend when hideLegend false ', () => {
+ wrapper = mount(
+ <HeatMapChart
+ data={HeatMapData}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ />,
+ );
+ const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="legendContainer"]');
+ expect(hideLegendDOM).toBeDefined();
+ });
+
+ it('Should mount callout when hideTootip false ', () => {
+ wrapper = mount(
+ <HeatMapChart
+ data={HeatMapData}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ />,
+ );
+ const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="ms-Layer"]');
+ expect(hideLegendDOM).toBeDefined();
+ });
+
+ it('Should not mount callout when hideTootip true ', () => {
+ wrapper = mount(
+ <HeatMapChart
+ data={HeatMapData}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ hideTooltip={true}
+ />,
+ );
+ 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(<HeatMapChart {...props} />);
+ 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(<HeatMapChart {...props} />);
+ component.setProps({ ...props, width: 600 });
+ expect(renderMock).toHaveBeenCalledTimes(2);
+ renderMock.mockRestore();
+ });
+});