[charts] Fix ScatterChart tooltip wrong defaults (#15537)

mui · Nov 21, 2024 · 9ebf586 · 9ebf586
1 parent 8ee87b5
commit 9ebf586
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 9 deletions.
diff --git a/packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx b/packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { firePointerEvent } from '../tests/firePointerEvent';
 
 const config = {
   dataset: [
@@ -55,7 +54,7 @@ describe('ChartsTooltip', () => {
       const svg = document.querySelector<HTMLElement>('svg')!;
 
       fireEvent.pointerEnter(svg); // Trigger the tooltip
-      firePointerEvent(svg, 'pointermove', {
+      fireEvent.pointerMove(svg, {
         clientX: 198,
         clientY: 60,
       });
@@ -74,7 +73,7 @@ describe('ChartsTooltip', () => {
         '2',
       ]);
 
-      firePointerEvent(svg, 'pointermove', {
+      fireEvent.pointerMove(svg, {
         clientX: 201,
         clientY: 60,
       });
@@ -122,7 +121,7 @@ describe('ChartsTooltip', () => {
       const svg = document.querySelector<HTMLElement>('svg')!;
 
       fireEvent.pointerEnter(svg); // Trigger the tooltip
-      firePointerEvent(svg, 'pointermove', {
+      fireEvent.pointerMove(svg, {
         clientX: 150,
         clientY: 60,
       });
@@ -141,7 +140,7 @@ describe('ChartsTooltip', () => {
         '2',
       ]);
 
-      firePointerEvent(svg, 'pointermove', {
+      fireEvent.pointerMove(svg, {
         clientX: 150,
         clientY: 220,
       });
@@ -194,7 +193,7 @@ describe('ChartsTooltip', () => {
       fireEvent.pointerEnter(rectangles[0]);
 
       fireEvent.pointerEnter(svg); // Trigger the tooltip
-      firePointerEvent(svg, 'pointermove', {
+      fireEvent.pointerMove(svg, {
         clientX: 150,
         clientY: 60,
       }); // Only to set the tooltip position
@@ -239,7 +238,7 @@ describe('ChartsTooltip', () => {
       fireEvent.pointerEnter(rectangles[0]);
 
       fireEvent.pointerEnter(svg); // Trigger the tooltip
-      firePointerEvent(svg, 'pointermove', {
+      fireEvent.pointerMove(svg, {
         clientX: 150,
         clientY: 60,
       }); // Only to set the tooltip position

diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { createRenderer } from '@mui/internal-test-utils/createRenderer';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils/createRenderer';
 import { describeConformance } from 'test/utils/describeConformance';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { expect } from 'chai';
+
+const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<ScatterChart />', () => {
   const { render } = createRenderer();
@@ -38,4 +41,49 @@ describe('<ScatterChart />', () => {
       ],
     }),
   );
+
+  const config = {
+    dataset: [
+      { id: 1, x: 0, y: 10 },
+      { id: 2, x: 10, y: 10 },
+      { id: 3, x: 10, y: 0 },
+      { id: 4, x: 0, y: 0 },
+      { id: 5, x: 5, y: 5 },
+    ],
+    margin: { top: 0, left: 0, bottom: 0, right: 0 },
+    width: 100,
+    height: 100,
+  };
+
+  it('should show the tooltip without errors in default config', function test() {
+    if (isJSDOM) {
+      // svg.createSVGPoint not supported by JSDom https://github.com/jsdom/jsdom/issues/300
+      this.skip();
+    }
+    render(
+      <div
+        style={{
+          margin: -8, // Removes the body default margins
+          width: 100,
+          height: 100,
+        }}
+      >
+        <ScatterChart {...config} series={[{ id: 's1', data: config.dataset }]} />
+      </div>,
+    );
+    const svg = document.querySelector<HTMLElement>('svg')!;
+    const marks = document.querySelectorAll<HTMLElement>('circle');
+
+    fireEvent.pointerEnter(marks[0]);
+
+    fireEvent.pointerEnter(svg); // Trigger the tooltip
+    fireEvent.pointerMove(marks[0]); // Only to set the tooltip position
+
+    let cells = document.querySelectorAll<HTMLElement>('.MuiChartsTooltip-root td');
+    expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', '', '(0, 10)']);
+
+    fireEvent.pointerEnter(marks[4]);
+    cells = document.querySelectorAll<HTMLElement>('.MuiChartsTooltip-root td');
+    expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', '', '(5, 5)']);
+  });
 });
diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
@@ -135,7 +135,7 @@ const ScatterChart = React.forwardRef(function ScatterChart(
         <ChartsOverlay {...overlayProps} />
         {!props.hideLegend && <ChartsLegend {...legendProps} />}
         <ChartsAxisHighlight {...axisHighlightProps} />
-        {!props.loading && <Tooltip {...props.slotProps?.tooltip} />}
+        {!props.loading && <Tooltip trigger="item" {...props.slotProps?.tooltip} />}
         {children}
       </ZAxisContextProvider>
     </ChartContainer>