diff --git a/change/@fluentui-react-charting-dfdb7954-3e89-4f57-8428-742aa68c065a.json b/change/@fluentui-react-charting-dfdb7954-3e89-4f57-8428-742aa68c065a.json new file mode 100644 index 00000000000000..a047a648f370d4 --- /dev/null +++ b/change/@fluentui-react-charting-dfdb7954-3e89-4f57-8428-742aa68c065a.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Add tests for hover states", + "packageName": "@fluentui/react-charting", + "email": "kumarkshitij@microsoft.com", + "dependentChangeType": "none" +} diff --git a/package.json b/package.json index 99860546313537..4873abdf4d49db 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "@types/dedent": "0.7.0", "@types/doctrine": "0.0.5", "@types/enhanced-resolve": "3.0.7", - "@types/enzyme": "3.10.3", + "@types/enzyme": "3.10.7", "@types/eslint": "7.2.13", "@types/express": "4.17.2", "@types/fs-extra": "8.0.1", @@ -176,6 +176,7 @@ "enhanced-resolve": "5.8.2", "enquirer": "2.3.6", "enzyme": "3.10.0", + "enzyme-to-json": "3.6.2", "esbuild": "0.14.27", "esbuild-loader": "2.18.0", "eslint": "7.25.0", 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/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 1753d0ae6c20b5..5b656e4121c5a0 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -95,6 +95,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, - }); - } + this._highlightedCircleId = circleId; 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..08aed2d4459789 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; @@ -190,3 +191,80 @@ describe('Render calling with respective to props', () => { renderMock.mockRestore(); }); }); + +describe('AreaChart - mouse events', () => { + let root: HTMLDivElement | null; + + beforeEach(() => { + sharedBeforeEach(); + + root = document.createElement('div'); + document.body.appendChild(root); + }); + + afterEach(() => { + sharedAfterEach(); + + if (root) { + document.body.removeChild(root); + root = null; + } + }); + + it('Should render callout correctly on mouseover', () => { + // document.getElementbyId() returns null if component is not attached to DOM + wrapper = mount(, { attachTo: root }); + wrapper.find('rect').simulate('mouseover'); + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + }); + + it('Should render callout correctly on mousemove', () => { + wrapper = mount(, { attachTo: root }); + wrapper.find('rect').simulate('mousemove', { clientX: 40, clientY: 0 }); + const html1 = wrapper.html(); + wrapper.find('rect').simulate('mousemove', { clientX: -20, clientY: 0 }); + const html2 = wrapper.html(); + expect(html1).not.toBe(html2); + }); + + it('Should render customized callout on mouseover', () => { + wrapper = mount( + + props ? ( +
+ 
{JSON.stringify(props, null, 2)}
+
+ ) : null + } + />, + { attachTo: root }, + ); + wrapper.find('rect').simulate('mouseover'); + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + }); + + it('Should render customized callout per stack on mouseover', () => { + wrapper = mount( + + props ? ( +
+ 
{JSON.stringify(props, null, 2)}
+
+ ) : null + } + />, + { 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 03c986af0f0b8d..0e2e1a6b19f50b 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,1392 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`AreaChart - mouse events Should render callout correctly on mouseover 1`] = ` + +`; + +exports[`AreaChart - mouse events Should render customized callout on mouseover 1`] = ` + +`; + +exports[`AreaChart - mouse events Should render customized callout per stack on mouseover 1`] = ` + +`; + exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
legendContainerHeight - ? container.getBoundingClientRect().height - : 350; - const shouldResize = - containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight - legendContainerHeight; - if (shouldResize) { - this.setState({ - containerWidth: currentContainerWidth, - containerHeight: currentContainerHeight - legendContainerHeight, - }); + if (this.props.parentRef || this.chartContainer) { + const container = this.props.parentRef ? this.props.parentRef : this.chartContainer; + const currentContainerWidth = container.getBoundingClientRect().width; + const currentContainerHeight = + container.getBoundingClientRect().height > legendContainerHeight + ? container.getBoundingClientRect().height + : 350; + const shouldResize = + containerWidth !== currentContainerWidth || + containerHeight !== currentContainerHeight - legendContainerHeight; + if (shouldResize) { + this.setState({ + containerWidth: currentContainerWidth, + containerHeight: currentContainerHeight - legendContainerHeight, + }); + } } }); } diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx index 533206ab7af8a2..1477ef848e737f 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,45 @@ describe('DonutChart - basic props', () => { expect(renderedDOM!.length).toBe(0); }); }); + +describe('DonutChart - mouse events', () => { + beforeEach(sharedBeforeEach); + afterEach(sharedAfterEach); + + it('Should render callout correctly on mouseover', () => { + wrapper = mount(); + wrapper.find('path[id^="_Pie_"]').at(0).simulate('mouseover'); + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + }); + + it('Should render callout correctly on mousemove', () => { + wrapper = mount(); + wrapper.find('path[id^="_Pie_"]').at(0).simulate('mousemove'); + const html1 = wrapper.html(); + wrapper.find('path[id^="_Pie_"]').at(0).simulate('mouseleave'); + wrapper.find('path[id^="_Pie_"]').at(1).simulate('mousemove'); + const html2 = wrapper.html(); + expect(html1).not.toBe(html2); + }); + + it('Should render customized callout on mouseover', () => { + wrapper = mount( + + props ? ( +
+ 
{JSON.stringify(props, null, 2)}
+
+ ) : null + } + />, + ); + 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..0ae06e0d48fee6 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,1009 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`DonutChart - mouse events Should render callout correctly on mouseover 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart - mouse events Should render customized callout on mouseover 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
{ renderMock.mockRestore(); }); }); + +describe('GroupedVerticalBarChart - mouse events', () => { + beforeEach(sharedBeforeEach); + afterEach(sharedAfterEach); + + it('Should render callout correctly on mouseover', () => { + wrapper = mount(); + wrapper.find('rect').at(0).simulate('mouseover'); + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + }); + + it('Should render callout correctly on mousemove', () => { + wrapper = mount(); + wrapper.find('rect').at(2).simulate('mousemove'); + const html1 = wrapper.html(); + wrapper.find('rect').at(3).simulate('mousemove'); + const html2 = wrapper.html(); + expect(html1).not.toBe(html2); + }); + + it('Should render customized callout on mouseover', () => { + wrapper = mount( + + props ? ( +
+ 
{JSON.stringify(props, null, 2)}
+
+ ) : null + } + />, + ); + 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..fb4896075789d7 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,1419 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`GroupedVerticalBarChart - mouse events Should render callout correctly on mouseover 1`] = ` +