[charts] Migrate from sinon to Vitest mocking utilities for x-charts* packages

packages/x-charts-premium/src/ChartsRenderer/ChartsRenderer.test.tsx

@@ -1,4 +1,4 @@
-import { spy } from 'sinon';
+import { vi } from 'vitest';
 import { createRenderer } from '@mui/internal-test-utils/createRenderer';
 import { ChartsRenderer } from '@mui/x-charts-premium/ChartsRenderer';
 import { screen } from '@mui/internal-test-utils';
@@ -28,7 +28,7 @@ describe('<ChartsRenderer />', () => {
   });
 
   it('should pass the rendering to the onRender callback', () => {
-    const onRenderSpy = spy();
+    const onRenderSpy = vi.fn();
     render(
       <div data-testid="container">
         <ChartsRenderer
@@ -41,11 +41,11 @@ describe('<ChartsRenderer />', () => {
       </div>,
     );
 
-    expect(onRenderSpy.lastCall.firstArg).to.equal('line');
+    expect(onRenderSpy.mock.lastCall?.[0]).to.equal('line');
   });
 
   it('should compute props for the chart', () => {
-    const onRenderSpy = spy();
+    const onRenderSpy = vi.fn();
     render(
       <div data-testid="container">
         <ChartsRenderer
@@ -58,12 +58,12 @@ describe('<ChartsRenderer />', () => {
       </div>,
     );
 
-    const props = onRenderSpy.lastCall.args[1];
+    const props = onRenderSpy.mock.lastCall?.[1];
     expect(props.colors).to.equal(colorPaletteLookup.get('rainbowSurgePalette'));
   });
 
   it('should override the props if the configuration has an updated value', () => {
-    const onRenderSpy = spy();
+    const onRenderSpy = vi.fn();
     render(
       <div data-testid="container">
         <ChartsRenderer
@@ -78,12 +78,12 @@ describe('<ChartsRenderer />', () => {
       </div>,
     );
 
-    const props = onRenderSpy.lastCall.args[1];
+    const props = onRenderSpy.mock.lastCall?.[1];
     expect(props.colors).to.equal(colorPaletteLookup.get('mangoFusionPalette'));
   });
 
   it('should place dimensions and values to the correct place in the props', () => {
-    const onRenderSpy = spy();
+    const onRenderSpy = vi.fn();
     render(
       <div data-testid="container">
         <ChartsRenderer
@@ -96,7 +96,7 @@ describe('<ChartsRenderer />', () => {
       </div>,
     );
 
-    const props = onRenderSpy.lastCall.args[1];
+    const props = onRenderSpy.mock.lastCall?.[1];
     expect(props.series[0].data).to.deep.equal([1, 2, 3]);
   });
 });

packages/x-charts-pro/src/BarChartPro/BarChartPro.zoom.test.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
 import { isJSDOM } from 'test/utils/skipIf';
-import * as sinon from 'sinon';
+import { vi } from 'vitest';
 import { BarChartPro } from './BarChartPro';
 import { CHART_SELECTOR } from '../tests/constants';
 
@@ -49,7 +49,7 @@ describe.skipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
   };
 
   it('should zoom on wheel', async () => {
-    const onZoomChange = sinon.spy();
+    const onZoomChange = vi.fn();
     const { user } = render(
       <BarChartPro
         {...barChartProps}
@@ -73,20 +73,20 @@ describe.skipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
     fireEvent.wheel(svg, { deltaY: -500, clientX: 0, clientY: 50 });
     await act(async () => new Promise((r) => requestAnimationFrame(r)));
 
-    expect(onZoomChange.callCount).to.equal(1);
+    expect(onZoomChange.mock.calls.length).to.equal(1);
     expect(getAxisTickValues('x')).to.deep.equal(['A', 'B', 'C']);
 
     // scroll back
     fireEvent.wheel(svg, { deltaY: 500, clientX: 0, clientY: 50 });
     await act(async () => new Promise((r) => requestAnimationFrame(r)));
 
-    expect(onZoomChange.callCount).to.equal(2);
+    expect(onZoomChange.mock.calls.length).to.equal(2);
     expect(getAxisTickValues('x')).to.deep.equal(['A', 'B', 'C', 'D']);
   });
 
   ['MouseLeft', 'TouchA'].forEach((pointerName) => {
     it(`should pan on ${pointerName} drag`, async () => {
-      const onZoomChange = sinon.spy();
+      const onZoomChange = vi.fn();
       const { user } = render(
         <BarChartPro
           {...barChartProps}
@@ -121,7 +121,7 @@ describe.skipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
       // Wait the animation frame
       await act(async () => new Promise((r) => requestAnimationFrame(r)));
 
-      expect(onZoomChange.callCount).to.equal(1);
+      expect(onZoomChange.mock.calls.length).to.equal(1);
       expect(getAxisTickValues('x')).to.deep.equal(['C']);
 
       // we drag all the way to the left so A should be visible
@@ -145,13 +145,13 @@ describe.skipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
       // Wait the animation frame
       await act(async () => new Promise((r) => requestAnimationFrame(r)));
 
-      expect(onZoomChange.callCount).to.equal(2);
+      expect(onZoomChange.mock.calls.length).to.equal(2);
       expect(getAxisTickValues('x')).to.deep.equal(['A']);
     });
   });
 
   it('should zoom on pinch', async () => {
-    const onZoomChange = sinon.spy();
+    const onZoomChange = vi.fn();
     const { user } = render(
       <BarChartPro {...barChartProps} onZoomChange={onZoomChange} />,
       options,
@@ -195,12 +195,12 @@ describe.skipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
     ]);
     await act(async () => new Promise((r) => requestAnimationFrame(r)));
 
-    expect(onZoomChange.callCount).to.be.above(0);
+    expect(onZoomChange.mock.calls.length).to.be.above(0);
     expect(getAxisTickValues('x')).to.deep.equal(['B', 'C']);
   });
 
   it('should zoom on tap and drag', async () => {
-    const onZoomChange = sinon.spy();
+    const onZoomChange = vi.fn();
     const { user } = render(
       <BarChartPro
         {...barChartProps}
@@ -245,7 +245,7 @@ describe.skipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
     ]);
     await act(async () => new Promise((r) => requestAnimationFrame(r)));
 
-    expect(onZoomChange.callCount).to.be.above(0);
+    expect(onZoomChange.mock.calls.length).to.be.above(0);
     // Should have zoomed in to show fewer ticks
     expect(getAxisTickValues('x').length).to.be.lessThan(4);
   });

packages/x-charts-pro/src/ChartZoomSlider/ChartZoomSlider.test.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { createRenderer, act } from '@mui/internal-test-utils';
 import { isJSDOM } from 'test/utils/skipIf';
-import * as sinon from 'sinon';
+import { vi } from 'vitest';
 import { LineChartPro, type LineChartProProps } from '../LineChartPro/LineChartPro';
 import { chartAxisZoomSliderThumbClasses } from './internals/chartAxisZoomSliderThumbClasses';
 import { chartAxisZoomSliderTrackClasses } from './internals/chartAxisZoomSliderTrackClasses';
@@ -55,7 +55,7 @@ describe.skipIf(isJSDOM)('<ChartZoomSlider />', () => {
   };
 
   it('should pan when using the slider track', async () => {
-    const onZoomChange = sinon.spy();
+    const onZoomChange = vi.fn();
     const { user } = render(
       <LineChartPro
         {...lineChartProps}
@@ -88,13 +88,13 @@ describe.skipIf(isJSDOM)('<ChartZoomSlider />', () => {
     ]);
     await act(async () => new Promise((r) => requestAnimationFrame(r)));
 
-    expect(onZoomChange.callCount).to.equal(1);
+    expect(onZoomChange.mock.calls.length).to.equal(1);
     // The visible area should have shifted left
     expect(getAxisTickValues('x')).to.deep.equal(['B']);
   });
 
   it('should zoom pulling the slider thumb', async () => {
-    const onZoomChange = sinon.spy();
+    const onZoomChange = vi.fn();
     const { user } = render(
       <LineChartPro {...lineChartProps} onZoomChange={onZoomChange} />,
       options,
@@ -125,11 +125,11 @@ describe.skipIf(isJSDOM)('<ChartZoomSlider />', () => {
     ]);
     await act(async () => new Promise((r) => requestAnimationFrame(r)));
 
-    expect(onZoomChange.callCount).to.be.above(0);
+    expect(onZoomChange.mock.calls.length).to.be.above(0);
     expect(getAxisTickValues('x')).to.not.include('A');
 
     // Reset zoom change spy
-    onZoomChange.resetHistory();
+    onZoomChange.mockClear();
 
     // Move the end thumb to zoom in from the right
     await user.pointer([
@@ -150,7 +150,7 @@ describe.skipIf(isJSDOM)('<ChartZoomSlider />', () => {
     ]);
     await act(async () => new Promise((r) => requestAnimationFrame(r)));
 
-    expect(onZoomChange.callCount).to.be.above(0);
+    expect(onZoomChange.mock.calls.length).to.be.above(0);
     expect(getAxisTickValues('x')).to.not.include('D');
   });
 });

packages/x-charts-pro/src/FunnelChart/checkClickEvent.test.tsx

@@ -1,5 +1,5 @@
 import { createRenderer } from '@mui/internal-test-utils';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
 import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
 import { isJSDOM } from 'test/utils/skipIf';
 import { CHART_SELECTOR } from '../tests/constants';
@@ -50,7 +50,7 @@ describe('FunnelChart - click event', () => {
   describe('onAxisClick', () => {
     // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
     it.skipIf(isJSDOM)('should provide the right context as second argument', async () => {
-      const onAxisClick = spy();
+      const onAxisClick = vi.fn();
       const { user } = render(
         <div
           style={{
@@ -71,7 +71,7 @@ describe('FunnelChart - click event', () => {
         },
       ]);
 
-      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+      expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
         dataIndex: 0,
         axisValue: 0,
         seriesValues: { big: 200, small: 100 },
@@ -85,7 +85,7 @@ describe('FunnelChart - click event', () => {
         },
       ]);
 
-      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+      expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
         dataIndex: 1,
         axisValue: 1,
         seriesValues: { big: 100, small: 50 },
@@ -96,7 +96,7 @@ describe('FunnelChart - click event', () => {
     it.skipIf(isJSDOM)(
       'should provide the right context as second argument with layout="horizontal"',
       async () => {
-        const onAxisClick = spy();
+        const onAxisClick = vi.fn();
         const { user } = render(
           <div
             style={{
@@ -121,7 +121,7 @@ describe('FunnelChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
           dataIndex: 0,
           axisValue: 0,
           seriesValues: { big: 200, small: 100 },
@@ -135,7 +135,7 @@ describe('FunnelChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
           dataIndex: 1,
           axisValue: 1,
           seriesValues: { big: 100, small: 50 },
@@ -147,7 +147,7 @@ describe('FunnelChart - click event', () => {
     it.skipIf(isJSDOM)(
       'should provide the correct axis values when using category axis',
       async () => {
-        const onAxisClick = spy();
+        const onAxisClick = vi.fn();
         const { user } = render(
           <div
             style={{
@@ -172,7 +172,7 @@ describe('FunnelChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
           dataIndex: 0,
           axisValue: 'First',
           seriesValues: { big: 200, small: 100 },
@@ -186,7 +186,7 @@ describe('FunnelChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
           dataIndex: 1,
           axisValue: 'Second',
           seriesValues: { big: 100, small: 50 },
@@ -210,7 +210,7 @@ describe('FunnelChart - click event', () => {
 
     // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
     it.skipIf(isJSDOM)('should provide the right context as second argument', async () => {
-      const onItemClick = spy();
+      const onItemClick = vi.fn();
       const { user } = render(
         <div
           style={{
@@ -228,27 +228,27 @@ describe('FunnelChart - click event', () => {
       );
 
       await user.click(pathsBig[0]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
         type: 'funnel',
         seriesId: 'big',
         dataIndex: 0,
       });
 
       await user.click(pathsBig[1]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
         type: 'funnel',
         seriesId: 'big',
         dataIndex: 1,
       });
 
       await user.click(pathsSmall[0]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
         type: 'funnel',
         seriesId: 'small',
         dataIndex: 0,
       });
       await user.click(pathsSmall[1]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
         type: 'funnel',
         seriesId: 'small',
         dataIndex: 1,