[code-infra] Add testSkipIf and describeSkipIf

packages/x-charts/src/BarChart/checkClickEvent.test.tsx

@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { BarChart } from '@mui/x-charts/BarChart';
+import { testSkipIf, isJSDOM } from 'test/utils/skipIf';
 import { firePointerEvent } from '../tests/firePointerEvent';
 
 const config = {
@@ -23,17 +24,12 @@ const config = {
 // | X X X X
 // ---A---B-
 
-const isJSDOM = /jsdom/.test(window.navigator.userAgent);
-
 describe('BarChart - click event', () => {
   const { render } = createRenderer();
 
   describe('onAxisClick', () => {
-    it('should provide the right context as second argument', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
+    // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
+    testSkipIf(isJSDOM)('should provide the right context as second argument', () => {
       const onAxisClick = spy();
       render(
         <div
@@ -81,62 +77,62 @@ describe('BarChart - click event', () => {
       });
     });
 
-    it('should provide the right context as second argument with layout="horizontal"', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
-      const onAxisClick = spy();
-      render(
-        <div
-          style={{
-            margin: -8, // Removes the body default margins
-            width: 400,
-            height: 400,
-          }}
-        >
-          <BarChart
-            {...config}
-            layout="horizontal"
-            series={[
-              { dataKey: 'v1', id: 's1' },
-              { dataKey: 'v2', id: 's2' },
-            ]}
-            yAxis={[{ scaleType: 'band', dataKey: 'x' }]}
-            onAxisClick={onAxisClick}
-          />
-        </div>,
-      );
-      const svg = document.querySelector<HTMLElement>('svg')!;
-
-      firePointerEvent(svg, 'pointermove', {
-        clientX: 60,
-        clientY: 198,
-      });
-      fireEvent.click(svg);
-
-      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
-        dataIndex: 0,
-        axisValue: 'A',
-        seriesValues: { s1: 4, s2: 2 },
-      });
-
-      firePointerEvent(svg, 'pointermove', {
-        clientX: 60,
-        clientY: 201,
-      });
-      fireEvent.click(svg);
-
-      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
-        dataIndex: 1,
-        axisValue: 'B',
-        seriesValues: { s1: 1, s2: 1 },
-      });
-    });
+    // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
+    testSkipIf(isJSDOM)(
+      'should provide the right context as second argument with layout="horizontal"',
+      () => {
+        const onAxisClick = spy();
+        render(
+          <div
+            style={{
+              margin: -8, // Removes the body default margins
+              width: 400,
+              height: 400,
+            }}
+          >
+            <BarChart
+              {...config}
+              layout="horizontal"
+              series={[
+                { dataKey: 'v1', id: 's1' },
+                { dataKey: 'v2', id: 's2' },
+              ]}
+              yAxis={[{ scaleType: 'band', dataKey: 'x' }]}
+              onAxisClick={onAxisClick}
+            />
+          </div>,
+        );
+        const svg = document.querySelector<HTMLElement>('svg')!;
+
+        firePointerEvent(svg, 'pointermove', {
+          clientX: 60,
+          clientY: 198,
+        });
+        fireEvent.click(svg);
+
+        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+          dataIndex: 0,
+          axisValue: 'A',
+          seriesValues: { s1: 4, s2: 2 },
+        });
+
+        firePointerEvent(svg, 'pointermove', {
+          clientX: 60,
+          clientY: 201,
+        });
+        fireEvent.click(svg);
+
+        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+          dataIndex: 1,
+          axisValue: 'B',
+          seriesValues: { s1: 1, s2: 1 },
+        });
+      },
+    );
   });
 
   describe('onItemClick', () => {
-    it('should add cursor="pointer" to bar elements', function test() {
+    it('should add cursor="pointer" to bar elements', () => {
       render(
         <BarChart
           {...config}
@@ -155,11 +151,8 @@ describe('BarChart - click event', () => {
       ).to.deep.equal(['pointer', 'pointer', 'pointer', 'pointer']);
     });
 
-    it('should provide the right context as second argument', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
+    // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
+    testSkipIf(isJSDOM)('should provide the right context as second argument', () => {
       const onItemClick = spy();
       render(
         <div

packages/x-charts/src/ChartsSurface/ChartsSurface.test.tsx

@@ -2,15 +2,12 @@ import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { expect } from 'chai';
+import { describeSkipIf, isJSDOM } from 'test/utils/skipIf';
 import { SizeProvider } from '../context/SizeProvider';
 import { ChartProvider } from '../context/ChartProvider';
 
-describe('<ChartsSurface />', () => {
-  // JSDOM doesn't implement SVGElement
-  if (/jsdom/.test(window.navigator.userAgent)) {
-    return;
-  }
-
+// JSDOM doesn't implement SVGElement
+describeSkipIf(isJSDOM)('<ChartsSurface />', () => {
   const { render } = createRenderer();
 
   it('should pass ref when it is added directly to component', () => {

packages/x-charts/src/ChartsTooltip/contentDisplayed.test.tsx

@@ -2,6 +2,7 @@ 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 { describeSkipIf, isJSDOM } from 'test/utils/skipIf';
 
 const config = {
   dataset: [
@@ -21,18 +22,12 @@ const config = {
 // | X X X X
 // ---A---B-
 
-const isJSDOM = /jsdom/.test(window.navigator.userAgent);
-
 describe('ChartsTooltip', () => {
   const { render } = createRenderer();
 
-  describe('axis trigger', () => {
-    it('should show right values with vertical layout', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
-
+  // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
+  describeSkipIf(isJSDOM)('axis trigger', () => {
+    it('should show right values with vertical layout on axis', () => {
       render(
         <div
           style={{
@@ -93,12 +88,7 @@ describe('ChartsTooltip', () => {
       ]);
     });
 
-    it('should show right values with horizontal layout', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
-
+    it('should show right values with horizontal layout on axis', () => {
       render(
         <div
           style={{
@@ -161,13 +151,8 @@ describe('ChartsTooltip', () => {
     });
   });
 
-  describe('item trigger', () => {
-    it('should show right values with vertical layout', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
-
+  describeSkipIf(isJSDOM)('item trigger', () => {
+    it('should show right values with vertical layout on item', () => {
       render(
         <div
           style={{
@@ -206,12 +191,7 @@ describe('ChartsTooltip', () => {
       expect([...cells].map((cell) => cell.textContent)).to.deep.equal(['', 'S2', '1']);
     });
 
-    it('should show right values with horizontal layout', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
-
+    it('should show right values with horizontal layout on item', () => {
       render(
         <div
           style={{

packages/x-charts/src/LineChart/checkClickEvent.test.tsx

@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { LineChart } from '@mui/x-charts/LineChart';
+import { testSkipIf, isJSDOM } from 'test/utils/skipIf';
 import { firePointerEvent } from '../tests/firePointerEvent';
 
 const config = {
@@ -17,17 +18,12 @@ const config = {
   height: 400,
 };
 
-const isJSDOM = /jsdom/.test(window.navigator.userAgent);
-
 describe('LineChart - click event', () => {
   const { render } = createRenderer();
 
   describe('onAxisClick', () => {
-    it('should provide the right context as second argument', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
+    // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
+    testSkipIf(isJSDOM)('should provide the right context as second argument', () => {
       const onAxisClick = spy();
       render(
         <div
@@ -77,7 +73,7 @@ describe('LineChart - click event', () => {
   });
 
   describe('onMarkClick', () => {
-    it('should add cursor="pointer" to bar elements', function test() {
+    it('should add cursor="pointer" to bar elements', () => {
       render(
         <LineChart
           {...config}
@@ -103,11 +99,8 @@ describe('LineChart - click event', () => {
       ]);
     });
 
-    it('should provide the right context as second argument', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
+    // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
+    testSkipIf(isJSDOM)('should provide the right context as second argument', () => {
       const onMarkClick = spy();
       render(
         <div
@@ -155,7 +148,7 @@ describe('LineChart - click event', () => {
   });
 
   describe('onAreaClick', () => {
-    it('should add cursor="pointer" to bar elements', function test() {
+    it('should add cursor="pointer" to bar elements', () => {
       render(
         <LineChart
           {...config}
@@ -175,11 +168,8 @@ describe('LineChart - click event', () => {
       ]);
     });
 
-    it('should provide the right context as second argument', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
+    // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
+    testSkipIf(isJSDOM)('should provide the right context as second argument', () => {
       const onAreaClick = spy();
       render(
         <div
@@ -218,7 +208,7 @@ describe('LineChart - click event', () => {
   });
 
   describe('onLineClick', () => {
-    it('should add cursor="pointer" to bar elements', function test() {
+    it('should add cursor="pointer" to bar elements', () => {
       render(
         <LineChart
           {...config}
@@ -238,11 +228,8 @@ describe('LineChart - click event', () => {
       ]);
     });
 
-    it('should provide the right context as second argument', function test() {
-      if (isJSDOM) {
-        // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
-        this.skip();
-      }
+    // can't do Pointer event with JSDom /~https://github.com/jsdom/jsdom/issues/2527
+    testSkipIf(isJSDOM)('should provide the right context as second argument', () => {
       const onLineClick = spy();
       render(
         <div

packages/x-charts/src/PieChart/checkClickEvent.test.tsx

@@ -13,7 +13,7 @@ describe('PieChart - click event', () => {
   const { render } = createRenderer();
 
   describe('onItemClick', () => {
-    it('should add cursor="pointer" to bar elements', function test() {
+    it('should add cursor="pointer" to bar elements', () => {
       render(
         <PieChart
           {...config}
@@ -37,7 +37,7 @@ describe('PieChart - click event', () => {
       ]);
     });
 
-    it('should provide the right context as second argument', function test() {
+    it('should provide the right context as second argument', () => {
       const onItemClick = spy();
       render(
         <PieChart