From 7c5d794c8f49a36c8cc87b51d9cef9e0c0289748 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Wed, 3 Aug 2022 14:49:25 +0530 Subject: [PATCH 01/24] Add test case for AreaChart hover state --- .../components/AreaChart/AreaChart.base.tsx | 34 ++++++++++++++----- .../components/AreaChart/AreaChart.test.tsx | 12 +++++++ 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 1753d0ae6c20b5..7ad69f3f2b772a 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -90,6 +90,7 @@ export class AreaChartBase extends React.Component, index: number) => { + if (points.length === index) { + return; + } + singleStackedData.forEach((singlePoint: IDPointType, pointIndex: number) => { + const circleId = `${this._circleId}_${index * this._stackedData[0].length + pointIndex}`; + const xDataPoint = singlePoint.xVal instanceof Date ? singlePoint.xVal.getTime() : singlePoint.xVal; + if (this.state.nearestCircleToHighlight === xDataPoint) { + this.setState({ + refSelected: `#${circleId}`, + isCalloutVisible: true, + isShowCalloutPending: false, + }); + } + }); + }); + } + } + public render(): JSX.Element { const { lineChartData, chartTitle } = this.props.data; const { colors, opacity, stackedInfo, calloutPoints } = this._createSet(this.props.data); @@ -180,6 +204,7 @@ export class AreaChartBase extends React.Component (this._rectRef = e)} id={this._rectId} width={width1} height={rectHeight} @@ -206,7 +231,7 @@ export class AreaChartBase extends React.Component { let fillColor = lineColor; if (this.state.nearestCircleToHighlight === xDataPoint) { - if (this.state.isShowCalloutPending) { - this.setState({ - refSelected: `#${circleId}`, - isCalloutVisible: true, - isShowCalloutPending: false, - }); - } if (!this.state.isCircleClicked) { fillColor = this.props.theme!.palette.white; } diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx index 4cf7a0fd197dc5..bbfe3f6e6c125e 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx @@ -190,3 +190,15 @@ describe('Render calling with respective to props', () => { renderMock.mockRestore(); }); }); + +describe('AreaChart - mouse events', () => { + beforeEach(sharedBeforeEach); + afterEach(sharedAfterEach); + + it('Should render callout on hover', async () => { + wrapper = mount(); + expect(wrapper.find('[id^="toolTip"]').length).toBe(0); + wrapper.find('rect').simulate('mouseover'); + expect(wrapper.find('[id^="toolTip"]').length).toBe(1); + }); +}); From d65052349bc5b2424a19f837d51bc4ae55159edc Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Thu, 4 Aug 2022 16:23:48 +0530 Subject: [PATCH 02/24] Add enzyme-to-json package --- packages/react-charting/jest.config.js | 2 +- packages/react-charting/package.json | 3 +- .../components/AreaChart/AreaChart.test.tsx | 4 +- .../__snapshots__/AreaChart.test.tsx.snap | 349 ++++++++++++++++++ yarn.lock | 16 + 5 files changed, 370 insertions(+), 4 deletions(-) diff --git a/packages/react-charting/jest.config.js b/packages/react-charting/jest.config.js index 7388104706e346..a9839dffb9605f 100644 --- a/packages/react-charting/jest.config.js +++ b/packages/react-charting/jest.config.js @@ -3,7 +3,7 @@ let path = require('path'); const config = createConfig({ setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))], - snapshotSerializers: [resolveMergeStylesSerializer()], + snapshotSerializers: [resolveMergeStylesSerializer(), 'enzyme-to-json/serializer'], }); module.exports = config; diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index a9f04ed384fde4..2a2093285d6a38 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -31,7 +31,8 @@ "@fluentui/react": "^8.91.1", "@types/react-addons-test-utils": "0.14.18", "@fluentui/scripts": "^1.0.0", - "@fluentui/jest-serializer-merge-styles": "^8.0.20" + "@fluentui/jest-serializer-merge-styles": "^8.0.20", + "enzyme-to-json": "3.6.2" }, "dependencies": { "@fluentui/react-focus": "^8.8.2", diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx index bbfe3f6e6c125e..f40249af41f899 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx @@ -6,6 +6,7 @@ import { mount, ReactWrapper } from 'enzyme'; import { IAreaChartProps, AreaChart } from './index'; import { IAreaChartState, AreaChartBase } from './AreaChart.base'; import { ICustomizedCalloutData } from '../../index'; +import toJson from 'enzyme-to-json'; // Wrapper of the AreaChart to be tested. let wrapper: ReactWrapper | undefined; @@ -197,8 +198,7 @@ describe('AreaChart - mouse events', () => { it('Should render callout on hover', async () => { wrapper = mount(); - expect(wrapper.find('[id^="toolTip"]').length).toBe(0); wrapper.find('rect').simulate('mouseover'); - expect(wrapper.find('[id^="toolTip"]').length).toBe(1); + expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot(); }); }); diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap index 03c986af0f0b8d..bbc34bacf43a19 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap @@ -1,5 +1,354 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`AreaChart - mouse events Should render callout on hover 1`] = ` + +`; + exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
Date: Sun, 7 Aug 2022 22:08:04 +0530 Subject: [PATCH 03/24] Remove _rectRef --- .../src/components/AreaChart/AreaChart.base.tsx | 4 +--- .../src/components/AreaChart/AreaChart.test.tsx | 12 +++++++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 7ad69f3f2b772a..c0dc9b071dff00 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -90,7 +90,6 @@ export class AreaChartBase extends React.Component (this._rectRef = e)} id={this._rectId} width={width1} height={rectHeight} @@ -231,7 +229,7 @@ export class AreaChartBase extends React.Component { beforeEach(sharedBeforeEach); afterEach(sharedAfterEach); - it('Should render callout on hover', async () => { - wrapper = mount(); + it('Should render callout on hover', () => { + const root = document.createElement('div'); + document.body.appendChild(root); + + wrapper = mount(, { attachTo: root }); wrapper.find('rect').simulate('mouseover'); - expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot(); + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + + document.body.removeChild(root); }); }); From 12a937222299a2401f1071d7e5228c03437c715e Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Mon, 8 Aug 2022 23:12:30 +0530 Subject: [PATCH 04/24] Add test case for DonutChart hover state --- .../components/DonutChart/DonutChart.test.tsx | 13 + .../__snapshots__/DonutChart.test.tsx.snap | 543 ++++++++++++++++++ 2 files changed, 556 insertions(+) diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx index 533206ab7af8a2..1d40ec4ed18415 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx @@ -6,6 +6,7 @@ import { mount, ReactWrapper } from 'enzyme'; import { IDonutChartProps, DonutChart } from './index'; import { IDonutChartState, DonutChartBase } from './DonutChart.base'; import { IChartProps, IChartDataPoint } from '../../index'; +import toJson from 'enzyme-to-json'; // Wrapper of the DonutChart to be tested. let wrapper: ReactWrapper | undefined; @@ -117,3 +118,15 @@ describe('DonutChart - basic props', () => { expect(renderedDOM!.length).toBe(0); }); }); + +describe('DonutChart - mouse events', () => { + beforeEach(sharedBeforeEach); + afterEach(sharedAfterEach); + + it('Should render callout on hover', () => { + wrapper = mount(); + wrapper.find('path[id^="_Pie_"]').at(0).simulate('mouseover'); + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index e79772eb707d00..57643e579595ec 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -1,5 +1,548 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`DonutChart - mouse events Should render callout on hover 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
Date: Mon, 8 Aug 2022 23:27:57 +0530 Subject: [PATCH 05/24] Update callout snapshot --- .../components/AreaChart/AreaChart.test.tsx | 2 +- .../__snapshots__/AreaChart.test.tsx.snap | 188 +++++++++++++++++- 2 files changed, 186 insertions(+), 4 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx index 2b7eb0ee4bc6b8..408d517386c58e 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx @@ -200,7 +200,7 @@ describe('AreaChart - mouse events', () => { const root = document.createElement('div'); document.body.appendChild(root); - wrapper = mount(, { attachTo: root }); + wrapper = mount(, { attachTo: root }); wrapper.find('rect').simulate('mouseover'); const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap index bbc34bacf43a19..89760f2bbb60c4 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap @@ -343,9 +343,191 @@ exports[`AreaChart - mouse events Should render callout on hover 1`] = `
- +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+
+
+ + metaData1 +
+
+ 50 +
+
+
+
+
+
+
+
+
+
`; From 640ab3d575a92b184690e08509e351854a9f9a53 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Mon, 8 Aug 2022 23:32:01 +0530 Subject: [PATCH 06/24] Add test case for LineChart hover state --- .../components/LineChart/LineChart.test.tsx | 18 + .../__snapshots__/LineChart.test.tsx.snap | 519 ++++++++++++++++++ 2 files changed, 537 insertions(+) diff --git a/packages/react-charting/src/components/LineChart/LineChart.test.tsx b/packages/react-charting/src/components/LineChart/LineChart.test.tsx index 7007f62cc25109..8808ae5a58fdd6 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.test.tsx +++ b/packages/react-charting/src/components/LineChart/LineChart.test.tsx @@ -5,6 +5,7 @@ import * as renderer from 'react-test-renderer'; import { mount, ReactWrapper } from 'enzyme'; import { ILineChartProps, LineChart } from './index'; import { ILineChartState, LineChartBase } from './LineChart.base'; +import toJson from 'enzyme-to-json'; // Wrapper of the LineChart to be tested. let wrapper: ReactWrapper | undefined; @@ -143,3 +144,20 @@ describe('Render calling with respective to props', () => { renderMock.mockRestore(); }); }); + +describe('LineChart - mouse events', () => { + beforeEach(sharedBeforeEach); + afterEach(sharedAfterEach); + + it('Should render callout on hover', () => { + const root = document.createElement('div'); + document.body.appendChild(root); + + wrapper = mount(, { attachTo: root }); + wrapper.find('line[id^="lineID"]').at(0).simulate('mouseover'); + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + + document.body.removeChild(root); + }); +}); 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 index 365dab9034a1c5..c465ba2376f1ca 100644 --- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap +++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap @@ -1,5 +1,524 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`LineChart - mouse events Should render callout on hover 1`] = ` + +`; + exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
Date: Tue, 9 Aug 2022 16:39:53 +0530 Subject: [PATCH 07/24] Add test case for GroupedBarChart hover state --- .../GroupedVerticalBarChart.test.tsx | 13 + .../GroupedVerticalBarChart.test.tsx.snap | 747 ++++++++++++++++++ 2 files changed, 760 insertions(+) diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx index f7946cce162e46..d89e386d1a9819 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx @@ -6,6 +6,7 @@ import { mount, ReactWrapper } from 'enzyme'; import { DefaultPalette } from '@fluentui/react/lib/Styling'; import { IGroupedVerticalBarChartProps, GroupedVerticalBarChart, IGVBarChartSeriesPoint } from '../../index'; import { IGroupedVerticalBarChartState, GroupedVerticalBarChartBase } from './GroupedVerticalBarChart.base'; +import toJson from 'enzyme-to-json'; // Wrapper of the GroupedVerticalBarChart to be tested. let wrapper: @@ -202,3 +203,15 @@ describe('Render calling with respective to props', () => { renderMock.mockRestore(); }); }); + +describe('GroupedVerticalBarChart - mouse events', () => { + beforeEach(sharedBeforeEach); + afterEach(sharedAfterEach); + + it('Should render callout on hover', () => { + wrapper = mount(); + wrapper.find('rect').at(0).simulate('mouseover'); + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap index 18e0a4afabca4f..3015a6a6cd1542 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap @@ -1,5 +1,752 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`GroupedVerticalBarChart - mouse events Should render callout on hover 1`] = ` +