{
},
]);
- 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(
{
);
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,
diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.zoom.test.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.zoom.test.tsx
index a2c942d31e657..e261002ab9bad 100644
--- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.zoom.test.tsx
+++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.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 { LineChartPro } from './LineChartPro';
import { CHART_SELECTOR } from '../tests/constants';
@@ -50,7 +50,7 @@ describe.skipIf(isJSDOM)('
- Zoom', () => {
};
it('should zoom on wheel', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user, container } = render(
,
options,
@@ -71,14 +71,14 @@ describe.skipIf(isJSDOM)('
- Zoom', () => {
fireEvent.wheel(svg, { deltaY: -10, clientX: 15, 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', container)).to.deep.equal(['A', 'B', 'C']);
// scroll back
fireEvent.wheel(svg, { deltaY: 10, clientX: 15, 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', container)).to.deep.equal(['A', 'B', 'C', 'D']);
// zoom on the right side
@@ -93,20 +93,20 @@ describe.skipIf(isJSDOM)('
- Zoom', () => {
fireEvent.wheel(svg, { deltaY: -10, clientX: 90, clientY: 50 });
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(3);
+ expect(onZoomChange.mock.calls.length).to.equal(3);
expect(getAxisTickValues('x', container)).to.deep.equal(['B', 'C']);
// scroll back
fireEvent.wheel(svg, { deltaY: 10, clientX: 90, clientY: 50 });
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(4);
+ expect(onZoomChange.mock.calls.length).to.equal(4);
expect(getAxisTickValues('x', container)).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, container } = render(
- 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', container)).to.deep.equal(['C']);
// we drag all the way to the left so A should be visible
@@ -166,13 +166,13 @@ describe.skipIf(isJSDOM)('
- 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', container)).to.deep.equal(['A']);
});
});
it('should pan with area series enabled', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user, container } = render(
- 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', container)).to.deep.equal(['C']);
// Continue dragging to see more data points
@@ -236,12 +236,12 @@ describe.skipIf(isJSDOM)('
- 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', container)).to.deep.equal(['A']);
});
it('should zoom on pinch', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user, container } = render(
,
options,
@@ -286,12 +286,12 @@ describe.skipIf(isJSDOM)('
- 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', container)).to.deep.equal(['B', 'C']);
});
it('should zoom on tap and drag', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user, container } = render(
- 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', container).length).to.be.lessThan(4);
});
it('should handle extreme deltaY values without breaking zoom (regression test for deltaY < -100)', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user, container } = render(
- Zoom', () => {
});
it('should pan on press and drag', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user, container } = render(
- 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', container)).to.deep.equal(['C']);
});
it('should not pan on press and drag if there is no press', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user, container } = render(
- Zoom', () => {
// Wait the animation frame
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(0);
+ expect(onZoomChange.mock.calls.length).to.equal(0);
expect(getAxisTickValues('x', container)).to.deep.equal(['D']); // no change
});
});
diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.zoom.test.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.zoom.test.tsx
index 7565fb5cccb52..3b313f9a445ba 100644
--- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.zoom.test.tsx
+++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.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 { ScatterChartPro } from './ScatterChartPro';
import { CHART_SELECTOR } from '../tests/constants';
@@ -76,7 +76,7 @@ describe.skipIf(isJSDOM)('
- Zoom', () => {
};
it('should zoom on wheel', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
,
options,
@@ -99,7 +99,7 @@ describe.skipIf(isJSDOM)('
- Zoom', () => {
fireEvent.wheel(svg, { deltaY: -100, clientX: 80, 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(['2']);
expect(getAxisTickValues('y')).to.deep.equal(['20']);
@@ -107,14 +107,14 @@ describe.skipIf(isJSDOM)('
- Zoom', () => {
fireEvent.wheel(svg, { deltaY: 100, clientX: 80, 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(['1', '2', '3']);
expect(getAxisTickValues('y')).to.deep.equal(['10', '20', '30']);
});
['MouseLeft', 'TouchA'].forEach((pointerName) => {
it(`should pan on ${pointerName} drag`, async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
- 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(['2.0', '2.2', '2.4']);
expect(getAxisTickValues('y')).to.deep.equal(['20', '22', '24']);
@@ -178,14 +178,14 @@ describe.skipIf(isJSDOM)('
- 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(['1.0', '1.2', '1.4']);
expect(getAxisTickValues('y')).to.deep.equal(['10', '12', '14']);
});
});
it('should zoom on pinch', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
,
options,
@@ -230,13 +230,13 @@ describe.skipIf(isJSDOM)('
- 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(['2.0']);
expect(getAxisTickValues('y')).to.deep.equal(['20']);
});
it('should zoom on tap and drag', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
- 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(3);
});
diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/ZoomInteractionConfig.test.tsx b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/ZoomInteractionConfig.test.tsx
index 83710f23c1b3a..89763f0dd9182 100644
--- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/ZoomInteractionConfig.test.tsx
+++ b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/ZoomInteractionConfig.test.tsx
@@ -3,7 +3,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 '@mui/x-charts-pro/BarChartPro';
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
import { CHART_SELECTOR } from '../../../tests/constants';
@@ -52,7 +52,7 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
describe('Wheel zoom with key modifiers', () => {
it('should zoom on wheel with Control key pressed', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
{
fireEvent.wheel(svg, { deltaY: -10, clientX: 50, clientY: 50 });
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(0);
+ expect(onZoomChange.mock.calls.length).to.equal(0);
expect(getAxisTickValues('x')).to.deep.equal(['A', 'B', 'C', 'D']);
await user.keyboard('{Control>}');
@@ -88,13 +88,13 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
await act(async () => new Promise((r) => requestAnimationFrame(r)));
await user.keyboard('{/Control}');
- expect(onZoomChange.callCount).to.be.greaterThan(0);
+ expect(onZoomChange.mock.calls.length).to.be.greaterThan(0);
});
});
describe('Pan with key modifiers', () => {
it('should only pan on drag when Alt key is pressed', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
{
]);
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(0);
+ expect(onZoomChange.mock.calls.length).to.equal(0);
expect(getAxisTickValues('x')).to.deep.equal(['D']);
// Drag with Alt key - should pan
@@ -154,13 +154,13 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
await user.keyboard('{/Alt}');
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(1);
+ expect(onZoomChange.mock.calls.length).to.equal(1);
// Should have panned to show a different tick
expect(getAxisTickValues('x')).to.not.deep.equal(['D']);
});
it('should only pan on drag with multiple key modifiers', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
{
await user.keyboard('{/Shift}');
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(0);
+ expect(onZoomChange.mock.calls.length).to.equal(0);
expect(getAxisTickValues('x')).to.deep.equal(['D']);
// Drag with both Shift and Control keys - should pan
@@ -222,7 +222,7 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
await user.keyboard('{/Control}{/Shift}');
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(1);
+ expect(onZoomChange.mock.calls.length).to.equal(1);
// Should have panned to show a different tick
expect(getAxisTickValues('x')).to.not.deep.equal(['D']);
});
@@ -230,7 +230,7 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
describe('Interaction modes', () => {
it('should only pan on drag with mouse mode', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
{
]);
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(1);
+ expect(onZoomChange.mock.calls.length).to.equal(1);
// Should have panned to show a different tick
expect(getAxisTickValues('x')).to.deep.equal(['C']);
@@ -290,12 +290,12 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
]);
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']);
});
it('should only zoom when specific interactions are enabled', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
{
fireEvent.wheel(svg, { deltaY: -30, clientX: 50, clientY: 50 });
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(0);
+ expect(onZoomChange.mock.calls.length).to.equal(0);
expect(getAxisTickValues('x')).to.deep.equal(['A', 'B', 'C', 'D']);
// Pinch - should zoom
@@ -353,7 +353,7 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
]);
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.be.greaterThan(0);
+ expect(onZoomChange.mock.calls.length).to.be.greaterThan(0);
// Should have zoomed in to show fewer ticks
expect(getAxisTickValues('x').length).to.be.lessThan(4);
});
@@ -361,7 +361,7 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
describe('Zoom and Pan with reversed axis', () => {
it('should zoom at the correct position with reversed x-axis', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
{
fireEvent.wheel(svg, { deltaY: -500, clientX: 15, clientY: 50 });
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.be.greaterThan(0);
+ expect(onZoomChange.mock.calls.length).to.be.greaterThan(0);
const ticksAfterZoom = getAxisTickValues('x');
expect(ticksAfterZoom).to.deep.equal(['B', 'C', 'D']);
});
it('should pan in the correct direction with reversed x-axis on drag', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
{
]);
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.be.greaterThan(0);
+ expect(onZoomChange.mock.calls.length).to.be.greaterThan(0);
const ticksAfterDrag = getAxisTickValues('x');
expect(ticksAfterDrag).to.deep.equal(['C', 'D']);
@@ -475,7 +475,7 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
describe('Zoom on brush', () => {
it('should zoom into the brushed area on x-axis', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
{
]);
await act(async () => new Promise((r) => requestAnimationFrame(r)));
- expect(onZoomChange.callCount).to.equal(1);
+ expect(onZoomChange.mock.calls.length).to.equal(1);
const ticksAfterZoom = getAxisTickValues('x');
// Should have zoomed in, so 'A' should not be visible anymore
@@ -522,7 +522,7 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
describe('Pan on wheel (side scrolling)', () => {
it('should pan horizontally on wheel scroll', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
render(
{
await act(async () => new Promise((r) => requestAnimationFrame(r)));
// Should trigger zoom change (pan)
- expect(onZoomChange.callCount).to.be.greaterThan(0);
+ expect(onZoomChange.mock.calls.length).to.be.greaterThan(0);
expect(getAxisTickValues('x')).to.deep.equal(['C', 'D']);
});
it('should pan diagonally on wheel scroll with xy', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
render(
{
await act(async () => new Promise((r) => requestAnimationFrame(r)));
// Should trigger zoom change (pan)
- expect(onZoomChange.callCount).to.be.greaterThan(0);
+ expect(onZoomChange.mock.calls.length).to.be.greaterThan(0);
expect(getAxisTickValues('x')).to.deep.equal(['0', '10']);
expect(getAxisTickValues('y')).to.deep.equal(['0', '10']);
});
it('should not pan when required keys are not pressed', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
const { user } = render(
{
await act(async () => new Promise((r) => requestAnimationFrame(r)));
// Should not trigger zoom change because Alt key is required but not pressed
- expect(onZoomChange.callCount).to.equal(0);
+ expect(onZoomChange.mock.calls.length).to.equal(0);
// Simulate wheel scroll with Alt key
await user.keyboard('{Alt>}');
@@ -630,12 +630,12 @@ describe.skipIf(isJSDOM)('ZoomInteractionConfig Keys and Modes', () => {
await act(async () => new Promise((r) => requestAnimationFrame(r)));
// Should trigger zoom change (pan)
- expect(onZoomChange.callCount).to.be.greaterThan(0);
+ expect(onZoomChange.mock.calls.length).to.be.greaterThan(0);
expect(getAxisTickValues('x')).to.deep.equal(['C', 'D']);
});
it('should pan to the correct side when axis is reversed', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
render(
{
await act(async () => new Promise((r) => requestAnimationFrame(r)));
// With reversed axis, should pan to show higher value ticks
- expect(onZoomChange.callCount).to.be.greaterThan(0);
+ expect(onZoomChange.mock.calls.length).to.be.greaterThan(0);
expect(getAxisTickValues('x')).to.deep.equal(['A', 'B']);
});
it('should be enabled by default when only x-axis has zoom', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
render(
{
await act(async () => new Promise((r) => requestAnimationFrame(r)));
// Should trigger pan
- expect(onZoomChange.callCount).to.be.greaterThan(0);
+ expect(onZoomChange.mock.calls.length).to.be.greaterThan(0);
expect(getAxisTickValues('x')).to.not.deep.equal(['B', 'C']);
});
it('should be disabled by default when both axes have zoom', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
render(
{
await act(async () => new Promise((r) => requestAnimationFrame(r)));
// Should not trigger pan
- expect(onZoomChange.callCount).to.equal(0);
+ expect(onZoomChange.mock.calls.length).to.equal(0);
expect(getAxisTickValues('x')).to.deep.equal(initialXTicks);
});
it('should be disabled by default when only y-axis has zoom', async () => {
- const onZoomChange = sinon.spy();
+ const onZoomChange = vi.fn();
render(
{
await act(async () => new Promise((r) => requestAnimationFrame(r)));
// Should not trigger pan
- expect(onZoomChange.callCount).to.equal(0);
+ expect(onZoomChange.mock.calls.length).to.equal(0);
expect(getAxisTickValues('x')).to.deep.equal(initialXTicks);
});
});
diff --git a/packages/x-charts/src/BarChart/checkClickEvent.test.tsx b/packages/x-charts/src/BarChart/checkClickEvent.test.tsx
index fdb0ee2f6dee1..70e4084b60972 100644
--- a/packages/x-charts/src/BarChart/checkClickEvent.test.tsx
+++ b/packages/x-charts/src/BarChart/checkClickEvent.test.tsx
@@ -1,5 +1,5 @@
import { createRenderer } from '@mui/internal-test-utils';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
import { BarChart } from '@mui/x-charts/BarChart';
import { isJSDOM } from 'test/utils/skipIf';
import { CHART_SELECTOR } from '../tests/constants';
@@ -30,7 +30,7 @@ describe('BarChart - 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(
{
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 0,
axisValue: 'A',
seriesValues: { s1: 4, s2: 2 },
@@ -73,7 +73,7 @@ describe('BarChart - click event', () => {
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 1,
axisValue: 'B',
seriesValues: { s1: 1, s2: 1 },
@@ -84,7 +84,7 @@ describe('BarChart - 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(
{
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 0,
axisValue: 'A',
seriesValues: { s1: 4, s2: 2 },
@@ -128,7 +128,7 @@ describe('BarChart - click event', () => {
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 1,
axisValue: 'B',
seriesValues: { s1: 1, s2: 1 },
@@ -159,7 +159,7 @@ describe('BarChart - 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(
{
const rectangles = document.querySelectorAll
('rect.MuiBarElement-root');
await user.click(rectangles[0]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'bar',
seriesId: 's1',
dataIndex: 0,
});
await user.click(rectangles[1]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'bar',
seriesId: 's1',
dataIndex: 1,
});
await user.click(rectangles[2]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'bar',
seriesId: 's2',
dataIndex: 0,
diff --git a/packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx b/packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx
index 3bb6dfaf6cbc0..0a16da79303e1 100644
--- a/packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx
+++ b/packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
import { createRenderer } from '@mui/internal-test-utils';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { useChartsLocalization } from '@mui/x-charts/hooks';
@@ -24,7 +24,7 @@ describe('', () => {
const { render } = createRenderer();
it('should respect localeText from the theme', () => {
- const handleContextChange = spy();
+ const handleContextChange = vi.fn();
const theme = createTheme({
components: {
@@ -44,13 +44,13 @@ describe('', () => {
,
);
- const localeText: ChartsLocaleText = handleContextChange.lastCall.args[0].localeText;
+ const localeText: ChartsLocaleText = handleContextChange.mock.lastCall?.[0].localeText;
expect(localeText.noData).to.equal('Pas de data');
expect(localeText.loading).to.equal('Loading data…');
});
it('should prioritize localeText key passed on LocalizationProvider compared to key passed from the theme', () => {
- const handleContextChange = spy();
+ const handleContextChange = vi.fn();
const theme = createTheme({
components: {
@@ -70,12 +70,12 @@ describe('', () => {
,
);
- const localeText: ChartsLocaleText = handleContextChange.lastCall.args[0].localeText;
+ const localeText: ChartsLocaleText = handleContextChange.mock.lastCall?.[0].localeText;
expect(localeText.noData).to.equal('Prioritized');
});
it('should prioritize deepest LocalizationProvider when using nested ones', () => {
- const handleContextChange = spy();
+ const handleContextChange = vi.fn();
render(
@@ -85,12 +85,12 @@ describe('', () => {
,
);
- const localeText: ChartsLocaleText = handleContextChange.lastCall.args[0].localeText;
+ const localeText: ChartsLocaleText = handleContextChange.mock.lastCall?.[0].localeText;
expect(localeText.noData).to.equal('Prioritized');
});
it("should not lose locales from higher LocalizationProvider when deepest one don't have the translation key", () => {
- const handleContextChange = spy();
+ const handleContextChange = vi.fn();
render(
@@ -100,7 +100,7 @@ describe('', () => {
,
);
- const localeText: ChartsLocaleText = handleContextChange.lastCall.args[0].localeText;
+ const localeText: ChartsLocaleText = handleContextChange.mock.lastCall?.[0].localeText;
expect(localeText.noData).to.equal('Prioritized');
expect(localeText.loading).to.equal('Other Locale');
});
diff --git a/packages/x-charts/src/LineChart/checkClickEvent.test.tsx b/packages/x-charts/src/LineChart/checkClickEvent.test.tsx
index 21cd432c5ab99..faa767da78692 100644
--- a/packages/x-charts/src/LineChart/checkClickEvent.test.tsx
+++ b/packages/x-charts/src/LineChart/checkClickEvent.test.tsx
@@ -1,5 +1,5 @@
import { createRenderer } from '@mui/internal-test-utils';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
import { LineChart } from '@mui/x-charts/LineChart';
import { isJSDOM } from 'test/utils/skipIf';
import { CHART_SELECTOR } from '../tests/constants';
@@ -24,7 +24,7 @@ describe('LineChart - 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(
{
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 1,
axisValue: 20,
seriesValues: { s1: 5, s2: 8 },
@@ -67,7 +67,7 @@ describe('LineChart - click event', () => {
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 2,
axisValue: 30,
seriesValues: { s1: 8, s2: 5 },
@@ -104,7 +104,7 @@ describe('LineChart - 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 onMarkClick = spy();
+ const onMarkClick = vi.fn();
const { user } = render(
{
const marks = document.querySelectorAll
('.MuiMarkElement-root');
await user.click(marks[0]);
- expect(onMarkClick.lastCall.args[1]).to.deep.equal({
+ expect(onMarkClick.mock.lastCall?.[1]).to.deep.equal({
type: 'line',
seriesId: 's1',
dataIndex: 0,
});
await user.click(marks[1]);
- expect(onMarkClick.lastCall.args[1]).to.deep.equal({
+ expect(onMarkClick.mock.lastCall?.[1]).to.deep.equal({
type: 'line',
seriesId: 's1',
dataIndex: 1,
});
await user.click(marks[4]);
- expect(onMarkClick.lastCall.args[1]).to.deep.equal({
+ expect(onMarkClick.mock.lastCall?.[1]).to.deep.equal({
type: 'line',
seriesId: 's2',
dataIndex: 0,
@@ -172,7 +172,7 @@ describe('LineChart - 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 onAreaClick = spy();
+ const onAreaClick = vi.fn();
const { user } = render(
{
const areas = document.querySelectorAll
('path.MuiAreaElement-root');
await user.click(areas[0]);
- expect(onAreaClick.lastCall.args[1]).to.deep.equal({
+ expect(onAreaClick.mock.lastCall?.[1]).to.deep.equal({
type: 'line',
seriesId: 's1',
});
await user.click(areas[1]);
- expect(onAreaClick.lastCall.args[1]).to.deep.equal({
+ expect(onAreaClick.mock.lastCall?.[1]).to.deep.equal({
type: 'line',
seriesId: 's2',
});
@@ -231,7 +231,7 @@ describe('LineChart - 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 onLineClick = spy();
+ const onLineClick = vi.fn();
const { user } = render(
{
const lines = document.querySelectorAll
('path.MuiLineElement-root');
await user.click(lines[0]);
- expect(onLineClick.lastCall.args[1]).to.deep.equal({
+ expect(onLineClick.mock.lastCall?.[1]).to.deep.equal({
type: 'line',
seriesId: 's1',
});
await user.click(lines[1]);
- expect(onLineClick.lastCall.args[1]).to.deep.equal({
+ expect(onLineClick.mock.lastCall?.[1]).to.deep.equal({
type: 'line',
seriesId: 's2',
});
diff --git a/packages/x-charts/src/PieChart/checkClickEvent.test.tsx b/packages/x-charts/src/PieChart/checkClickEvent.test.tsx
index 4f6b9a9c8bd37..67a9d24d229fb 100644
--- a/packages/x-charts/src/PieChart/checkClickEvent.test.tsx
+++ b/packages/x-charts/src/PieChart/checkClickEvent.test.tsx
@@ -1,5 +1,5 @@
import { createRenderer } from '@mui/internal-test-utils';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
import { PieChart } from '@mui/x-charts/PieChart';
const config = {
@@ -39,7 +39,7 @@ describe('PieChart - click event', () => {
});
it('should provide the right context as second argument', async () => {
- const onItemClick = spy();
+ const onItemClick = vi.fn();
const { user } = render(
{
const slices = document.querySelectorAll('path.MuiPieArc-root');
await user.click(slices[0]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'pie',
seriesId: 's1',
dataIndex: 0,
});
await user.click(slices[1]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'pie',
seriesId: 's1',
dataIndex: 1,
diff --git a/packages/x-charts/src/RadarChart/RadarChart.test.tsx b/packages/x-charts/src/RadarChart/RadarChart.test.tsx
index 2b87ffc170b20..b18be6649e883 100644
--- a/packages/x-charts/src/RadarChart/RadarChart.test.tsx
+++ b/packages/x-charts/src/RadarChart/RadarChart.test.tsx
@@ -1,7 +1,7 @@
import { createRenderer, screen } from '@mui/internal-test-utils/createRenderer';
import { describeConformance } from 'test/utils/describeConformance';
import { Unstable_RadarChart as RadarChart, RadarChartProps } from '@mui/x-charts/RadarChart';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
import { isJSDOM } from 'test/utils/skipIf';
import { CHART_SELECTOR } from '../tests/constants';
@@ -44,13 +44,13 @@ describe('', () => {
// svg.createSVGPoint not supported by JSDom https://github.com/jsdom/jsdom/issues/300
it.skipIf(isJSDOM)('should call onHighlightChange', async () => {
- const onHighlightChange = spy();
+ const onHighlightChange = vi.fn();
const { user } = render();
const path = document.querySelector('svg .MuiRadarSeriesPlot-area')!;
await user.pointer({ target: path });
- expect(onHighlightChange.callCount).to.equal(1);
+ expect(onHighlightChange.mock.calls.length).to.equal(1);
});
it.skipIf(isJSDOM)('should highlight axis on hover', async () => {
diff --git a/packages/x-charts/src/RadarChart/checkClickEvent.test.tsx b/packages/x-charts/src/RadarChart/checkClickEvent.test.tsx
index 6bd83a3c062f2..48c4547a7b9eb 100644
--- a/packages/x-charts/src/RadarChart/checkClickEvent.test.tsx
+++ b/packages/x-charts/src/RadarChart/checkClickEvent.test.tsx
@@ -1,5 +1,5 @@
import { createRenderer } from '@mui/internal-test-utils';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
import { RadarChart, RadarChartProps } from '@mui/x-charts/RadarChart';
import { isJSDOM } from 'test/utils/skipIf';
import { CHART_SELECTOR } from '../tests/constants';
@@ -23,7 +23,7 @@ describe('RadarChart - 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(
{
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 0,
axisValue: 'A',
seriesValues: { s1: 2, s2: 6 },
@@ -58,7 +58,7 @@ describe('RadarChart - click event', () => {
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 1,
axisValue: 'B',
seriesValues: { s1: 3, s2: 5 },
@@ -69,7 +69,7 @@ describe('RadarChart - click event', () => {
it.skipIf(isJSDOM)(
'should provide the right context as second argument with startAngle=90',
async () => {
- const onAxisClick = spy();
+ const onAxisClick = vi.fn();
const { user } = render(
{
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 3,
axisValue: 'D',
seriesValues: { s1: 5, s2: 1 },
@@ -108,7 +108,7 @@ describe('RadarChart - click event', () => {
},
]);
- expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+ expect(onAxisClick.mock.lastCall?.[1]).to.deep.equal({
dataIndex: 0,
axisValue: 'A',
seriesValues: { s1: 2, s2: 6 },
@@ -136,7 +136,7 @@ describe('RadarChart - 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(
{
const marks = document.querySelectorAll
('circle.MuiRadarSeriesPlot-mark');
await user.click(marks[0]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'radar',
seriesId: 's1',
dataIndex: 0,
});
await user.click(marks[1]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'radar',
seriesId: 's1',
dataIndex: 1,
});
await user.click(marks[4]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'radar',
seriesId: 's2',
dataIndex: 0,
@@ -186,7 +186,7 @@ describe('RadarChart - 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(
{
coords: { clientX: 50, clientY: 45 },
},
]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'radar',
seriesId: 's1',
dataIndex: 0,
@@ -220,7 +220,7 @@ describe('RadarChart - click event', () => {
coords: { clientX: 50, clientY: 55 },
},
]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'radar',
seriesId: 's2',
dataIndex: 2,
diff --git a/packages/x-charts/src/ScatterChart/checkClickEvent.test.tsx b/packages/x-charts/src/ScatterChart/checkClickEvent.test.tsx
index d89d908477343..d6489fef4844b 100644
--- a/packages/x-charts/src/ScatterChart/checkClickEvent.test.tsx
+++ b/packages/x-charts/src/ScatterChart/checkClickEvent.test.tsx
@@ -1,5 +1,5 @@
import { createRenderer } from '@mui/internal-test-utils';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { isJSDOM } from 'test/utils/skipIf';
import { CHART_SELECTOR } from '../tests/constants';
@@ -33,7 +33,7 @@ describe('ScatterChart - click event', () => {
// svg.createSVGPoint not supported by JSDom https://github.com/jsdom/jsdom/issues/300
describe.skipIf(isJSDOM)('onItemClick - using voronoi', () => {
it('should provide the right context as second argument when clicking svg', async () => {
- const onItemClick = spy();
+ const onItemClick = vi.fn();
const { user } = render(
{
coords: { clientX: 10, clientY: 10 },
},
]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'scatter',
dataIndex: 0,
seriesId: 's1',
@@ -70,17 +70,17 @@ describe('ScatterChart - click event', () => {
coords: { clientX: 30, clientY: 30 },
},
]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'scatter',
dataIndex: 4,
seriesId: 's1',
});
- expect(onItemClick.callCount).to.equal(2);
+ expect(onItemClick.mock.calls.length).to.equal(2);
});
it('should provide the right context as second argument when clicking mark', async () => {
- const onItemClick = spy();
+ const onItemClick = vi.fn();
const { user } = render(
{
},
},
]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'scatter',
dataIndex: 1,
seriesId: 's1',
});
- expect(onItemClick.callCount).to.equal(1); // Make sure voronoi + item click does not duplicate event triggering
+ expect(onItemClick.mock.calls.length).to.equal(1); // Make sure voronoi + item click does not duplicate event triggering
});
});
describe('onItemClick - disabling voronoi', () => {
it('should not call onItemClick when clicking the SVG', async () => {
- const onItemClick = spy();
+ const onItemClick = vi.fn();
const { user } = render(
{
coords: { clientX: 10, clientY: 10 },
},
]);
- expect(onItemClick.callCount).to.equal(0);
+ expect(onItemClick.mock.calls.length).to.equal(0);
});
it('should provide the right context as second argument when clicking mark', async () => {
- const onItemClick = spy();
+ const onItemClick = vi.fn();
const { user } = render(
{
},
]);
- expect(onItemClick.lastCall.args[1]).to.deep.equal({
+ expect(onItemClick.mock.lastCall?.[1]).to.deep.equal({
type: 'scatter',
dataIndex: 1,
seriesId: 's1',
});
- expect(onItemClick.callCount).to.equal(1); // Make sure voronoi + item click does not duplicate event triggering
+ expect(onItemClick.mock.calls.length).to.equal(1); // Make sure voronoi + item click does not duplicate event triggering
});
});
});
diff --git a/packages/x-charts/src/internals/animation/useAnimate.test.tsx b/packages/x-charts/src/internals/animation/useAnimate.test.tsx
index 3bf4b4ec6e551..24b3f07faab0c 100644
--- a/packages/x-charts/src/internals/animation/useAnimate.test.tsx
+++ b/packages/x-charts/src/internals/animation/useAnimate.test.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
import { createRenderer, reactMajor, screen, waitFor } from '@mui/internal-test-utils';
import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
// It's not publicly exported, so, using a relative import
@@ -19,16 +19,16 @@ describe('useAnimate', () => {
return (t: number) => ({ width: interpolate(t) });
}
- const applyProps = spy((element: SVGPathElement, props: { width: number }) => {
+ const applyProps = vi.fn((element: SVGPathElement, props: { width: number }) => {
element.setAttribute('width', props.width.toString());
});
- const lastCallWidth = () => applyProps.lastCall?.args[1].width;
- const firstCallWidth = () => applyProps.firstCall?.args[1].width;
- const callCount = () => applyProps.callCount;
+ const lastCallWidth = () => applyProps.mock.lastCall?.[1].width;
+ const firstCallWidth = () => applyProps.mock.calls[0]?.[1].width;
+ const callCount = () => applyProps.mock.calls.length;
afterEach(() => {
- applyProps.resetHistory();
+ applyProps.mockClear();
});
it('starts animating from initial props', async () => {
@@ -116,7 +116,7 @@ describe('useAnimate', () => {
await waitNextFrame();
expect(callCount()).to.be.equal(1);
- const lastIncreasingCall = lastCallWidth();
+ const lastIncreasingCall = lastCallWidth()!;
// Should be animating from 1000 to 2000
expect(lastCallWidth()).to.be.greaterThan(1000);
expect(lastCallWidth()).to.be.lessThan(2000);
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx
index 8e4d62c7823aa..1318eef5febf7 100644
--- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx
+++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx
@@ -1,4 +1,4 @@
-import { spy } from 'sinon';
+import { vi } from 'vitest';
import { createRenderer, waitFor } from '@mui/internal-test-utils';
import { isJSDOM } from 'test/utils/skipIf';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
@@ -13,7 +13,7 @@ describe.skipIf(isJSDOM)('useChartCartesianAxis - axis highlight', () => {
const { render } = createRenderer();
it('should call onHighlightedAxisChange when crossing any value', async () => {
- const onHighlightedAxisChange = spy();
+ const onHighlightedAxisChange = vi.fn();
const { user } = render(
plugins={[useChartInteraction, useChartCartesianAxis]}
@@ -32,7 +32,7 @@ describe.skipIf(isJSDOM)('useChartCartesianAxis - axis highlight', () => {
await user.pointer([{ keys: '[TouchA>]', target: svg, coords: { clientX: 75, clientY: 60 } }]);
- await waitFor(() => expect(onHighlightedAxisChange.callCount).to.equal(1));
+ await waitFor(() => expect(onHighlightedAxisChange.mock.calls.length).to.equal(1));
await user.pointer([
{
@@ -50,28 +50,28 @@ describe.skipIf(isJSDOM)('useChartCartesianAxis - axis highlight', () => {
},
]);
- expect(onHighlightedAxisChange.callCount).to.equal(4);
+ expect(onHighlightedAxisChange.mock.calls.length).to.equal(4);
- expect(onHighlightedAxisChange.getCall(0).firstArg).to.deep.equal([
+ expect(onHighlightedAxisChange.mock.calls[0][0]).to.deep.equal([
{ axisId: 'x-axis', dataIndex: 1 },
{ axisId: 'y-axis', dataIndex: 1 },
]);
- expect(onHighlightedAxisChange.getCall(1).firstArg).to.deep.equal([
+ expect(onHighlightedAxisChange.mock.calls[1][0]).to.deep.equal([
{ axisId: 'x-axis', dataIndex: 0 },
{ axisId: 'y-axis', dataIndex: 1 },
]);
- expect(onHighlightedAxisChange.getCall(2).firstArg).to.deep.equal([
+ expect(onHighlightedAxisChange.mock.calls[2][0]).to.deep.equal([
{ axisId: 'x-axis', dataIndex: 0 },
{ axisId: 'y-axis', dataIndex: 0 },
]);
- expect(onHighlightedAxisChange.getCall(3).firstArg).to.deep.equal([]);
+ expect(onHighlightedAxisChange.mock.calls[3][0]).to.deep.equal([]);
});
it('should call onHighlightedAxisChange when axis got modified', async () => {
- const onHighlightedAxisChange = spy();
+ const onHighlightedAxisChange = vi.fn();
const { user, setProps } = render(
plugins={[useChartInteraction, useChartCartesianAxis]}
@@ -90,8 +90,8 @@ describe.skipIf(isJSDOM)('useChartCartesianAxis - axis highlight', () => {
await user.pointer([{ keys: '[TouchA>]', target: svg, coords: { clientX: 45, clientY: 60 } }]);
- await waitFor(() => expect(onHighlightedAxisChange.callCount).to.equal(1));
- expect(onHighlightedAxisChange.lastCall.firstArg).to.deep.equal([
+ await waitFor(() => expect(onHighlightedAxisChange.mock.calls.length).to.equal(1));
+ expect(onHighlightedAxisChange.mock.lastCall?.[0]).to.deep.equal([
{ axisId: 'x-axis', dataIndex: 0 },
]);
@@ -99,14 +99,14 @@ describe.skipIf(isJSDOM)('useChartCartesianAxis - axis highlight', () => {
xAxis: [{ id: 'x-axis', scaleType: 'band', data: ['A', 'B', 'C'], position: 'none' }],
});
- expect(onHighlightedAxisChange.callCount).to.equal(2);
- expect(onHighlightedAxisChange.lastCall.firstArg).to.deep.equal([
+ expect(onHighlightedAxisChange.mock.calls.length).to.equal(2);
+ expect(onHighlightedAxisChange.mock.lastCall?.[0]).to.deep.equal([
{ axisId: 'x-axis', dataIndex: 1 },
]);
});
it('should not call onHighlightedAxisChange when axis got modified but highlighted item stay the same', async () => {
- const onHighlightedAxisChange = spy();
+ const onHighlightedAxisChange = vi.fn();
const { user, setProps } = render(
plugins={[useChartInteraction, useChartCartesianAxis]}
@@ -125,8 +125,8 @@ describe.skipIf(isJSDOM)('useChartCartesianAxis - axis highlight', () => {
await user.pointer([{ keys: '[TouchA>]', target: svg, coords: { clientX: 10, clientY: 60 } }]);
- await waitFor(() => expect(onHighlightedAxisChange.callCount).to.equal(1));
- expect(onHighlightedAxisChange.lastCall.firstArg).to.deep.equal([
+ await waitFor(() => expect(onHighlightedAxisChange.mock.calls.length).to.equal(1));
+ expect(onHighlightedAxisChange.mock.lastCall?.[0]).to.deep.equal([
{ axisId: 'x-axis', dataIndex: 0 },
]);
@@ -134,11 +134,11 @@ describe.skipIf(isJSDOM)('useChartCartesianAxis - axis highlight', () => {
xAxis: [{ id: 'x-axis', scaleType: 'band', data: ['A', 'B', 'C'], position: 'none' }],
});
- expect(onHighlightedAxisChange.callCount).to.equal(1);
+ expect(onHighlightedAxisChange.mock.calls.length).to.equal(1);
});
it('should call onHighlightedAxisChange when highlighted axis got removed', async () => {
- const onHighlightedAxisChange = spy();
+ const onHighlightedAxisChange = vi.fn();
const { user, setProps } = render(
plugins={[useChartInteraction, useChartCartesianAxis]}
@@ -157,8 +157,8 @@ describe.skipIf(isJSDOM)('useChartCartesianAxis - axis highlight', () => {
await user.pointer([{ keys: '[TouchA>]', target: svg, coords: { clientX: 10, clientY: 60 } }]);
- await waitFor(() => expect(onHighlightedAxisChange.callCount).to.equal(1));
- expect(onHighlightedAxisChange.lastCall.firstArg).to.deep.equal([
+ await waitFor(() => expect(onHighlightedAxisChange.mock.calls.length).to.equal(1));
+ expect(onHighlightedAxisChange.mock.lastCall?.[0]).to.deep.equal([
{ axisId: 'x-axis', dataIndex: 0 },
]);
@@ -166,8 +166,8 @@ describe.skipIf(isJSDOM)('useChartCartesianAxis - axis highlight', () => {
xAxis: [{ id: 'new-axis', scaleType: 'band', data: ['A', 'B'], position: 'none' }],
});
- expect(onHighlightedAxisChange.callCount).to.equal(2);
- expect(onHighlightedAxisChange.lastCall.firstArg).to.deep.equal([
+ expect(onHighlightedAxisChange.mock.calls.length).to.equal(2);
+ expect(onHighlightedAxisChange.mock.lastCall?.[0]).to.deep.equal([
{ axisId: 'new-axis', dataIndex: 0 },
]);
});