Add tests for hover states

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": "[email protected]",
+  "dependentChangeType": "none"
+}

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",

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;

packages/react-charting/src/components/AreaChart/AreaChart.base.tsx

@@ -95,6 +95,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   // determines if the given area chart has multiple stacked bar charts
   private _isMultiStackChart: boolean;
   private _tooltipId: string;
+  private _highlightedCircleId: string;
 
   public constructor(props: IAreaChartProps) {
     super(props);
@@ -123,6 +124,16 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     this._tooltipId = getId('AreaChartTooltipID');
   }
 
+  public componentDidUpdate() {
+    if (this.state.isShowCalloutPending) {
+      this.setState({
+        refSelected: `#${this._highlightedCircleId}`,
+        isCalloutVisible: true,
+        isShowCalloutPending: false,
+      });
+    }
+  }
+
   public render(): JSX.Element {
     const { lineChartData, chartTitle } = this.props.data;
     const { colors, opacity, stackedInfo, calloutPoints } = this._createSet(this.props.data);
@@ -537,13 +548,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   private _updateCircleFillColor = (xDataPoint: number | Date, lineColor: string, circleId: string): string => {
     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;
       }

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<IAreaChartProps, IAreaChartState, AreaChartBase> | 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(<AreaChart data={chartPoints} calloutProps={{ doNotLayer: true }} />, { 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(<AreaChart data={chartPoints} calloutProps={{ doNotLayer: true }} />, { 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(
+      <AreaChart
+        data={chartPoints}
+        calloutProps={{ doNotLayer: true }}
+        onRenderCalloutPerDataPoint={(props: ICustomizedCalloutData) =>
+          props ? (
+            <div>
+              <pre>{JSON.stringify(props, null, 2)}</pre>
+            </div>
+          ) : 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(
+      <AreaChart
+        data={chartPoints}
+        calloutProps={{ doNotLayer: true }}
+        onRenderCalloutPerStack={(props: ICustomizedCalloutData) =>
+          props ? (
+            <div>
+              <pre>{JSON.stringify(props, null, 2)}</pre>
+            </div>
+          ) : null
+        }
+      />,
+      { attachTo: root },
+    );
+    wrapper.find('rect').simulate('mouseover');
+    const tree = toJson(wrapper, { mode: 'deep' });
+    expect(tree).toMatchSnapshot();
+  });
+});