DSEGOG-341 Update plotting tests

ral-facilities · Aug 14, 2024 · 7c29057 · 7c29057
1 parent f5b060a
commit 7c29057
Show file tree

Hide file tree

Showing 12 changed files with 157 additions and 132 deletions.
diff --git a/src/plotting/__snapshots__/plot.component.test.tsx.snap b/src/plotting/__snapshots__/plot.component.test.tsx.snap
diff --git a/src/plotting/__snapshots__/plotList.component.test.tsx.snap b/src/plotting/__snapshots__/plotList.component.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Plot List component renders plot grid correctly with no plots 1`] = `
+exports[`Plot List component > renders plot grid correctly with no plots 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 MuiGrid-direction-xs-column css-h4ktle-MuiGrid-root"
@@ -23,7 +23,7 @@ exports[`Plot List component renders plot grid correctly with no plots 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Plot List component renders plot grid correctly with some plots 1`] = `
+exports[`Plot List component > renders plot grid correctly with some plots 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 MuiGrid-direction-xs-column css-h4ktle-MuiGrid-root"

diff --git a/src/plotting/plotSettings/__snapshots__/plotSettingsController.component.test.tsx.snap b/src/plotting/plotSettings/__snapshots__/plotSettingsController.component.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Plot Settings component snapshots renders plot settings form correctly (timeseries plot) 1`] = `
+exports[`Plot Settings component > snapshots > renders plot settings form correctly (timeseries plot) 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 MuiGrid-direction-xs-column css-ffjoah-MuiGrid-root"
@@ -196,7 +196,7 @@ changeRemainingColours=undefined
 </DocumentFragment>
 `;
 
-exports[`Plot Settings component snapshots renders plot settings form correctly (x-axis tab selected) 1`] = `
+exports[`Plot Settings component > snapshots > renders plot settings form correctly (x-axis tab selected) 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 MuiGrid-direction-xs-column css-ffjoah-MuiGrid-root"
@@ -360,7 +360,7 @@ changeXMaximum=undefined
 </DocumentFragment>
 `;
 
-exports[`Plot Settings component snapshots renders plot settings form correctly (y-axis tab selected) 1`] = `
+exports[`Plot Settings component > snapshots > renders plot settings form correctly (y-axis tab selected) 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 MuiGrid-direction-xs-column css-ffjoah-MuiGrid-root"

diff --git a/src/plotting/plotSettings/__snapshots__/xAxisTab.component.test.tsx.snap b/src/plotting/plotSettings/__snapshots__/xAxisTab.component.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`x-axis tab renders correctly with arbitrary x axis 1`] = `
+exports[`x-axis tab > renders correctly with arbitrary x axis 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-1w7ngrt-MuiGrid-root"
@@ -336,7 +336,7 @@ exports[`x-axis tab renders correctly with arbitrary x axis 1`] = `
 </DocumentFragment>
 `;
 
-exports[`x-axis tab renders correctly with timestamp x axis 1`] = `
+exports[`x-axis tab > renders correctly with timestamp x axis 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-1w7ngrt-MuiGrid-root"

diff --git a/src/plotting/plotSettings/__snapshots__/yAxisTab.component.test.tsx.snap b/src/plotting/plotSettings/__snapshots__/yAxisTab.component.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`y-axis tab renders correctly 1`] = `
+exports[`y-axis tab > renders correctly 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-1w7ngrt-MuiGrid-root"

diff --git a/src/plotting/plotSettings/moreOptions/__snapshots__/colourPicker.component.test.tsx.snap b/src/plotting/plotSettings/moreOptions/__snapshots__/colourPicker.component.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ColourPicker component renders colour picker when square is clicked 1`] = `
+exports[`ColourPicker component > renders colour picker when square is clicked 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-79elbk"
@@ -68,7 +68,7 @@ exports[`ColourPicker component renders colour picker when square is clicked 1`]
 </DocumentFragment>
 `;
 
-exports[`ColourPicker component renders coloured square when popover is not open 1`] = `
+exports[`ColourPicker component > renders coloured square when popover is not open 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-79elbk"

diff --git a/src/plotting/plotSettings/moreOptions/__snapshots__/moreOptionsBox.component.test.tsx.snap b/src/plotting/plotSettings/moreOptions/__snapshots__/moreOptionsBox.component.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MoreOptionsBox renders correctly 1`] = `
+exports[`MoreOptionsBox > renders correctly 1`] = `
 <DocumentFragment>
   <div>
     <div

diff --git a/...plotting/plotSettings/moreOptions/__snapshots__/moreOptionsToggle.component.test.tsx.snap b/...plotting/plotSettings/moreOptions/__snapshots__/moreOptionsToggle.component.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MoreOptionsToggle renders correctly when options box not open 1`] = `
+exports[`MoreOptionsToggle > renders correctly when options box not open 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-79elbk"
@@ -30,7 +30,7 @@ exports[`MoreOptionsToggle renders correctly when options box not open 1`] = `
 </DocumentFragment>
 `;
 
-exports[`MoreOptionsToggle renders correctly when options box open and passes all props to the child component 1`] = `
+exports[`MoreOptionsToggle > renders correctly when options box open and passes all props to the child component 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-79elbk"

diff --git a/src/plotting/plotSettings/moreOptions/moreOptionsToggle.component.test.tsx b/src/plotting/plotSettings/moreOptions/moreOptionsToggle.component.test.tsx
@@ -6,18 +6,22 @@ import { testPlotDatasets } from '../../../testUtils';
 import type { MoreOptionsProps } from './moreOptionsBox.component';
 import MoreOptionsToggle from './moreOptionsToggle.component';
 
-jest.mock('./moreOptionsBox.component', () => (props) => (
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  <mock-moreOptionsBox data-testid="mock-moreOptionsBox">
-    {Object.entries(props).map(
-      ([propName, propValue]) =>
-        `${propName}=${JSON.stringify(propValue, null, 2)}\n`
-    )}
-    {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-    {/* @ts-ignore */}
-  </mock-moreOptionsBox>
-));
+vi.mock('./moreOptionsBox.component', () => {
+  return {
+    default: (props) => (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      <mock-moreOptionsBox data-testid="mock-moreOptionsBox">
+        {Object.entries(props).map(
+          ([propName, propValue]) =>
+            `${propName}=${JSON.stringify(propValue, null, 2)}\n`
+        )}
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore */}
+      </mock-moreOptionsBox>
+    ),
+  };
+});
 
 describe('MoreOptionsToggle', () => {
   let props: MoreOptionsProps;

diff --git a/src/plotting/plotSettings/plotSettingsController.component.test.tsx b/src/plotting/plotSettings/plotSettingsController.component.test.tsx
@@ -22,11 +22,11 @@ describe('Plot Settings component', () => {
   const changeRightYAxisMaximum = vi.fn();
   const changePlotTitle = vi.fn();
 
-  const createView = () => {
+  const createView = async () => {
     // need to import like this in order for the doMock's to work
     const PlotSettingsController =
       // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require('./plotSettingsController.component').default;
+      (await vi.importActual('./plotSettingsController.component')).default;
     return render(<PlotSettingsController {...props} />);
   };
 
@@ -70,93 +70,109 @@ describe('Plot Settings component', () => {
 
   describe('snapshots', () => {
     beforeAll(() => {
-      jest.resetModules();
-      jest.doMock('./plotSettingsTextField.component', () => (props) => (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        <mock-plotSettingsTextField data-testid="mock-plotSettingsTextField">
-          {Object.entries(props).map(
-            ([propName, propValue]) =>
-              `${propName}=${JSON.stringify(propValue, null, 2)}\n`
-          )}
-          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-          {/* @ts-ignore */}
-        </mock-plotSettingsTextField>
-      ));
-
-      jest.doMock('./chartTypeButtons.component', () => (props) => (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        <mock-chartTypeButtons data-testid="mock-chartTypeButtons">
-          {Object.entries(props).map(
-            ([propName, propValue]) =>
-              `${propName}=${JSON.stringify(propValue, null, 2)}\n`
-          )}
-          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-          {/* @ts-ignore */}
-        </mock-chartTypeButtons>
-      ));
-
-      jest.doMock('./xAxisTab.component', () => (props) => (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        <mock-xAxisTab data-testid="mock-xAxisTab">
-          {Object.entries(props).map(
-            ([propName, propValue]) =>
-              `${propName}=${JSON.stringify(propValue, null, 2)}\n`
-          )}
-          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-          {/* @ts-ignore */}
-        </mock-xAxisTab>
-      ));
-
-      jest.doMock('./yAxisTab.component', () => (props) => (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        <mock-yAxisTab data-testid="mock-yAxisTab">
-          {Object.entries(props).map(
-            ([propName, propValue]) =>
-              `${propName}=${JSON.stringify(propValue, null, 2)}\n`
-          )}
-          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-          {/* @ts-ignore */}
-        </mock-yAxisTab>
-      ));
+      vi.resetModules();
+      vi.doMock('./plotSettingsTextField.component', () => {
+        return {
+          default: (props) => (
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            <mock-plotSettingsTextField data-testid="mock-plotSettingsTextField">
+              {Object.entries(props).map(
+                ([propName, propValue]) =>
+                  `${propName}=${JSON.stringify(propValue, null, 2)}\n`
+              )}
+              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+              {/* @ts-ignore */}
+            </mock-plotSettingsTextField>
+          ),
+        };
+      });
+
+      vi.doMock('./chartTypeButtons.component', () => {
+        return {
+          default: (props) => (
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            <mock-chartTypeButtons data-testid="mock-chartTypeButtons">
+              {Object.entries(props).map(
+                ([propName, propValue]) =>
+                  `${propName}=${JSON.stringify(propValue, null, 2)}\n`
+              )}
+              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+              {/* @ts-ignore */}
+            </mock-chartTypeButtons>
+          ),
+        };
+      });
+
+      vi.doMock('./xAxisTab.component', () => {
+        return {
+          default: (props) => (
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            <mock-xAxisTab data-testid="mock-xAxisTab">
+              {Object.entries(props).map(
+                ([propName, propValue]) =>
+                  `${propName}=${JSON.stringify(propValue, null, 2)}\n`
+              )}
+              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+              {/* @ts-ignore */}
+            </mock-xAxisTab>
+          ),
+        };
+      });
+
+      vi.doMock('./yAxisTab.component', () => {
+        return {
+          default: (props) => (
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            <mock-yAxisTab data-testid="mock-yAxisTab">
+              {Object.entries(props).map(
+                ([propName, propValue]) =>
+                  `${propName}=${JSON.stringify(propValue, null, 2)}\n`
+              )}
+              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+              {/* @ts-ignore */}
+            </mock-yAxisTab>
+          ),
+        };
+      });
     });
 
     afterAll(() => {
-      jest.resetModules();
-      jest.dontMock('./plotSettingsTextField.component');
-      jest.dontMock('./chartTypeButtons.component');
-      jest.dontMock('./xAxisTab.component');
-      jest.dontMock('./yAxisTab.component');
-      jest.resetModules();
+      vi.resetModules();
+      vi.doUnmock('./plotSettingsTextField.component');
+      vi.doUnmock('./chartTypeButtons.component');
+      vi.doUnmock('./xAxisTab.component');
+      vi.doUnmock('./yAxisTab.component');
+      vi.resetModules();
     });
 
-    it('renders plot settings form correctly (timeseries plot)', () => {
+    it('renders plot settings form correctly (timeseries plot)', async () => {
       props.XAxis = 'timestamp';
       props.XAxisScale = 'time';
-      const view = createView();
+      const view = await createView();
 
       expect(view.asFragment()).toMatchSnapshot();
     });
 
-    it('renders plot settings form correctly (x-axis tab selected)', () => {
-      const view = createView();
+    it('renders plot settings form correctly (x-axis tab selected)', async () => {
+      const view = await createView();
 
       expect(view.asFragment()).toMatchSnapshot();
     });
 
     it('renders plot settings form correctly (y-axis tab selected)', async () => {
-      const view = createView();
+      const view = await createView();
       await user.click(screen.getByRole('tab', { name: 'Y' }));
 
       expect(view.asFragment()).toMatchSnapshot();
     });
   });
 
   it('lets user switch between X and Y settings tabs', async () => {
-    createView();
+    await createView();
 
     // should load X tab initially
     expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('X');
@@ -175,7 +191,7 @@ describe('Plot Settings component', () => {
   });
 
   it('sets the correct values when plot variant changed from xy to timeseries', async () => {
-    createView();
+    await createView();
 
     await user.click(screen.getByRole('button', { name: 'Timeseries' }));
 
@@ -188,7 +204,7 @@ describe('Plot Settings component', () => {
   it('sets the correct values when plot variant changed from timeseries to xy', async () => {
     props.XAxis = 'timestamp';
     props.XAxisScale = 'time';
-    createView();
+    await createView();
 
     await user.click(screen.getByRole('button', { name: 'XY' }));