DSEGOG-341 Update traces and views tests

src/traces/__snapshots__/tracePlot.component.test.tsx.snap

@@ -1,13 +1,13 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Trace plot component renders a canvas element with the correct attributes passed the correct props 1`] = `
+exports[`Trace plot component > renders a canvas element with the correct attributes passed the correct props 1`] = `
 <DocumentFragment>
   <div
     style="flex: 1 0 0px; max-height: calc(100vh - 38px); max-width: calc(100% - 150px);"
   >
     <canvas
-      data-data="{\\"labels\\":[1,2,3],\\"datasets\\":[{\\"data\\":[5,6,4],\\"borderColor\\":\\"#1F77B4\\",\\"borderWidth\\":1.5,\\"pointRadius\\":0,\\"pointHitRadius\\":4}]}"
-      data-options="{\\"responsive\\":true,\\"maintainAspectRatio\\":false,\\"interaction\\":{\\"mode\\":\\"point\\",\\"intersect\\":false},\\"plugins\\":{\\"title\\":{\\"display\\":true,\\"text\\":\\"scatter plot\\"},\\"zoom\\":{\\"zoom\\":{\\"drag\\":{\\"enabled\\":true,\\"threshold\\":15},\\"wheel\\":{\\"enabled\\":true},\\"pinch\\":{\\"enabled\\":true},\\"mode\\":\\"xy\\"},\\"pan\\":{\\"enabled\\":true,\\"mode\\":\\"xy\\",\\"modifierKey\\":\\"shift\\"},\\"limits\\":{\\"x\\":{\\"min\\":1,\\"max\\":3},\\"y\\":{\\"min\\":4,\\"max\\":6}}},\\"legend\\":{\\"display\\":false}},\\"scales\\":{\\"x\\":{\\"type\\":\\"linear\\",\\"min\\":1,\\"max\\":3},\\"y\\":{\\"type\\":\\"linear\\",\\"display\\":true,\\"position\\":\\"left\\",\\"min\\":4,\\"max\\":6}},\\"transitions\\":{\\"zoom\\":{\\"animation\\":{\\"duration\\":250}}}}"
+      data-data="{"labels":[1,2,3],"datasets":[{"data":[5,6,4],"borderColor":"#1F77B4","borderWidth":1.5,"pointRadius":0,"pointHitRadius":4}]}"
+      data-options="{"responsive":true,"maintainAspectRatio":false,"interaction":{"mode":"point","intersect":false},"plugins":{"title":{"display":true,"text":"scatter plot"},"zoom":{"zoom":{"drag":{"enabled":true,"threshold":15},"wheel":{"enabled":true},"pinch":{"enabled":true},"mode":"xy"},"pan":{"enabled":true,"mode":"xy","modifierKey":"shift"},"limits":{"x":{"min":1,"max":3},"y":{"min":4,"max":6}}},"legend":{"display":false}},"scales":{"x":{"type":"linear","min":1,"max":3},"y":{"type":"linear","display":true,"position":"left","min":4,"max":6}},"transitions":{"zoom":{"animation":{"duration":250}}}}"
       data-type="line"
       data-view="false"
       height="400"
@@ -18,14 +18,14 @@ exports[`Trace plot component renders a canvas element with the correct attribut
 </DocumentFragment>
 `;
 
-exports[`Trace plot component updates data object correctly when points are set to visible 1`] = `
+exports[`Trace plot component > updates data object correctly when points are set to visible 1`] = `
 <DocumentFragment>
   <div
     style="flex: 1 0 0px; max-height: calc(100vh - 38px); max-width: calc(100% - 150px);"
   >
     <canvas
-      data-data="{\\"labels\\":[1,2,3],\\"datasets\\":[{\\"data\\":[5,6,4],\\"borderColor\\":\\"#1F77B4\\",\\"borderWidth\\":1.5,\\"pointRadius\\":3,\\"pointHitRadius\\":4}]}"
-      data-options="{\\"responsive\\":true,\\"maintainAspectRatio\\":false,\\"interaction\\":{\\"mode\\":\\"point\\",\\"intersect\\":false},\\"plugins\\":{\\"title\\":{\\"display\\":true,\\"text\\":\\"scatter plot\\"},\\"zoom\\":{\\"zoom\\":{\\"drag\\":{\\"enabled\\":true,\\"threshold\\":15},\\"wheel\\":{\\"enabled\\":true},\\"pinch\\":{\\"enabled\\":true},\\"mode\\":\\"xy\\"},\\"pan\\":{\\"enabled\\":true,\\"mode\\":\\"xy\\",\\"modifierKey\\":\\"shift\\"},\\"limits\\":{\\"x\\":{\\"min\\":1,\\"max\\":3},\\"y\\":{\\"min\\":4,\\"max\\":6}}},\\"legend\\":{\\"display\\":false}},\\"scales\\":{\\"x\\":{\\"type\\":\\"linear\\",\\"min\\":1,\\"max\\":3},\\"y\\":{\\"type\\":\\"linear\\",\\"display\\":true,\\"position\\":\\"left\\",\\"min\\":4,\\"max\\":6}},\\"transitions\\":{\\"zoom\\":{\\"animation\\":{\\"duration\\":250}}}}"
+      data-data="{"labels":[1,2,3],"datasets":[{"data":[5,6,4],"borderColor":"#1F77B4","borderWidth":1.5,"pointRadius":3,"pointHitRadius":4}]}"
+      data-options="{"responsive":true,"maintainAspectRatio":false,"interaction":{"mode":"point","intersect":false},"plugins":{"title":{"display":true,"text":"scatter plot"},"zoom":{"zoom":{"drag":{"enabled":true,"threshold":15},"wheel":{"enabled":true},"pinch":{"enabled":true},"mode":"xy"},"pan":{"enabled":true,"mode":"xy","modifierKey":"shift"},"limits":{"x":{"min":1,"max":3},"y":{"min":4,"max":6}}},"legend":{"display":false}},"scales":{"x":{"type":"linear","min":1,"max":3},"y":{"type":"linear","display":true,"position":"left","min":4,"max":6}},"transitions":{"zoom":{"animation":{"duration":250}}}}"
       data-type="line"
       data-view="false"
       height="400"

src/traces/traceWindow.component.test.tsx

@@ -7,21 +7,23 @@ import { TraceOrImageWindow } from '../state/slices/windowSlice';
 import { renderComponentWithProviders } from '../testUtils';
 import TraceWindow from './traceWindow.component';
 
-jest.mock('../windows/windowPortal.component', () => {
+vi.mock('../windows/windowPortal.component', () => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const ReactMock = require('react');
-  return ReactMock.forwardRef(({ children }, ref) => (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    <mock-WindowPortal>{children}</mock-WindowPortal>
-  ));
+  return {
+    default: ReactMock.forwardRef(({ children }, ref) => (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      <mock-WindowPortal>{children}</mock-WindowPortal>
+    )),
+  };
 });
 
-jest.mock('./tracePlot.component', () => () => (
+vi.mock('./tracePlot.component', () => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  <mock-TracePlot data-testid="mock-trace-plot" />
-));
+  return { default: () => <mock-TracePlot data-testid="mock-trace-plot" /> };
+});
 
 describe('Trace Window component', () => {
   let testTraceConfig: TraceOrImageWindow;
@@ -55,7 +57,7 @@ describe('Trace Window component', () => {
   });
 
   it('renders correctly while waveform is loading', () => {
-    const loadingHandler = (req, res, ctx) => {
+    const loadingHandler = () => {
       // taken from https://github.com/mswjs/msw/issues/778 - a way of mocking pending promises without breaking jest
       return new Promise(() => undefined);
     };

src/views/__snapshots__/recordTable.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[`Record Table renders correctly 1`] = `
+exports[`Record Table > renders correctly 1`] = `
 <DocumentFragment>
   <div>
     <div
@@ -1238,7 +1238,7 @@ exports[`Record Table renders correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Record Table renders correctly while data count is zero 1`] = `
+exports[`Record Table > renders correctly while data count is zero 1`] = `
 <DocumentFragment>
   <div>
     <div
@@ -1532,7 +1532,7 @@ exports[`Record Table renders correctly while data count is zero 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Record Table renders correctly while loading 1`] = `
+exports[`Record Table > renders correctly while loading 1`] = `
 <DocumentFragment>
   <div>
     <div

src/views/__snapshots__/tableButtons.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[`Table buttons renders the buttons 1`] = `
+exports[`Table buttons > renders the buttons 1`] = `
 <DocumentFragment>
   <div
     class="MuiButtonGroup-root MuiButtonGroup-outlined css-edsu1d-MuiButtonGroup-root"

src/views/__snapshots__/viewTabs.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[`View Tabs renders correctly 1`] = `
+exports[`View Tabs > renders correctly 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-kepn0o"

src/views/recordTable.component.test.tsx

@@ -7,7 +7,7 @@ import {
   within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { http } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { DEFAULT_WINDOW_VARS } from '../app.types';
 import { operators, type Token } from '../filtering/filterParser';
 import recordsJson from '../mocks/records.json';
@@ -37,9 +37,9 @@ describe('Record Table', () => {
   beforeEach(() => {
     state = getInitialState();
 
-    jest
-      .spyOn(global.crypto, 'randomUUID')
-      .mockImplementation(() => `${++uuidCount}`);
+    vi.spyOn(global.crypto, 'randomUUID').mockImplementation(
+      () => `${++uuidCount}`
+    );
   });
 
   afterEach(() => {
@@ -57,7 +57,7 @@ describe('Record Table', () => {
   });
 
   it('renders correctly while loading', () => {
-    const loadingHandler = (req, res, ctx) => {
+    const loadingHandler = () => {
       // taken from https://github.com/mswjs/msw/issues/778 - a way of mocking pending promises without breaking jest
       return new Promise(() => undefined);
     };
@@ -73,12 +73,8 @@ describe('Record Table', () => {
 
   it('renders correctly while data count is zero', async () => {
     server.use(
-      http.get('/records', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json([]));
-      }),
-      http.get('/records/count', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(0));
-      })
+      http.get('/records', () => HttpResponse.json([], { status: 200 })),
+      http.get('/records/count', () => HttpResponse.json(0, { status: 200 }))
     );
 
     const view = createView();
@@ -95,9 +91,9 @@ describe('Record Table', () => {
       const user = userEvent.setup();
 
       server.use(
-        http.get('/records', (req, res, ctx) => {
-          return res(ctx.status(200), ctx.json(recordsJson.slice(0, 3)));
-        })
+        http.get('/records', () =>
+          HttpResponse.json(recordsJson.slice(0, 3), { status: 200 })
+        )
       );
       const { store } = createView({
         table: { ...state.table },
@@ -120,9 +116,9 @@ describe('Record Table', () => {
     it('can select single and multiple rows', async () => {
       const user = userEvent.setup();
       server.use(
-        http.get('/records', (req, res, ctx) => {
-          return res(ctx.status(200), ctx.json(recordsJson));
-        })
+        http.get('/records', () =>
+          HttpResponse.json(recordsJson, { status: 200 })
+        )
       );
       const { store } = createView({
         table: { ...state.table },
@@ -270,9 +266,9 @@ describe('Record Table', () => {
       ...recordsJson.slice(recordToModifyIndex + 1),
     ];
     server.use(
-      http.get('/records', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(modifiedRecords));
-      })
+      http.get('/records', () =>
+        HttpResponse.json(modifiedRecords, { status: 200 })
+      )
     );
 
     createView({

src/windows/__snapshots__/openWindows.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[`Open Windows component renders windows for each open window 1`] = `
+exports[`Open Windows component > renders windows for each open window 1`] = `
 <DocumentFragment>
   <mock-plotwindow
     data-testid="mock-plotWindow"

src/windows/__snapshots__/thumbnailSelector.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[`Thumbnail selector component renders correctly when loading 1`] = `
+exports[`Thumbnail selector component > renders correctly when loading 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column css-1r907rv-MuiGrid-root"
@@ -115,7 +115,7 @@ exports[`Thumbnail selector component renders correctly when loading 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Thumbnail selector component renders list of thumbnails and pagination controls 1`] = `
+exports[`Thumbnail selector component > renders list of thumbnails and pagination controls 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column css-1r907rv-MuiGrid-root"

src/windows/__snapshots__/windowButtons.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[`Window buttons components Image buttons component renders image buttons group 1`] = `
+exports[`Window buttons components > Image buttons component > renders image buttons group 1`] = `
 <DocumentFragment>
   <div
     aria-label="plot actions"
@@ -31,7 +31,7 @@ exports[`Window buttons components Image buttons component renders image buttons
 </DocumentFragment>
 `;
 
-exports[`Window buttons components Plot buttons component renders plot buttons group 1`] = `
+exports[`Window buttons components > Plot buttons component > renders plot buttons group 1`] = `
 <DocumentFragment>
   <div
     aria-label="plot actions"
@@ -102,7 +102,7 @@ exports[`Window buttons components Plot buttons component renders plot buttons g
 </DocumentFragment>
 `;
 
-exports[`Window buttons components Trace buttons component renders trace buttons group 1`] = `
+exports[`Window buttons components > Trace buttons component > renders trace buttons group 1`] = `
 <DocumentFragment>
   <div
     aria-label="plot actions"

src/windows/__snapshots__/windowPortal.component.test.tsx.snap

@@ -1,14 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Window portal component renders child in separate document and initialises event listeners & scripts, and handles unmounting correctly 1`] = `
+exports[`Window portal component > renders child in separate document and initialises event listeners & scripts, and handles unmounting correctly 1`] = `
 <body>
   <div>
-    <style
-      data-emotion="external-global"
-      data-s=""
-    >
-      
-    </style>
     <div
       id="test"
     >
@@ -22,15 +16,9 @@ exports[`Window portal component renders child in separate document and initiali
 </body>
 `;
 
-exports[`Window portal component renders with theme inherited from ThemeProvider 1`] = `
+exports[`Window portal component > renders with theme inherited from ThemeProvider 1`] = `
 <body>
   <div>
-    <style
-      data-emotion="external-global"
-      data-s=""
-    >
-      
-    </style>
     <div
       id="test"
     >

src/windows/openWindows.component.test.tsx

@@ -8,46 +8,58 @@ import {
 import OpenWindows from './openWindows.component';
 
 // need to mock to avoid errors
-jest.mock('../plotting/plotWindow.component', () => (props) => (
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  <mock-plotWindow data-testid="mock-plotWindow">
-    {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-plotWindow>
-));
+vi.mock('../plotting/plotWindow.component', () => {
+  return {
+    default: (props) => (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      <mock-plotWindow data-testid="mock-plotWindow">
+        {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-plotWindow>
+    ),
+  };
+});
 
 // need to mock to avoid errors
-jest.mock('../traces/traceWindow.component', () => (props) => (
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  <mock-traceWindow data-testid="mock-traceWindow">
-    {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-traceWindow>
-));
+vi.mock('../traces/traceWindow.component', () => {
+  return {
+    default: (props) => (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      <mock-traceWindow data-testid="mock-traceWindow">
+        {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-traceWindow>
+    ),
+  };
+});
 
 // need to mock to avoid errors
-jest.mock('../images/imageWindow.component', () => (props) => (
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  <mock-imageWindow data-testid="mock-imageWindow">
-    {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-imageWindow>
-));
+vi.mock('../images/imageWindow.component', () => {
+  return {
+    default: (props) => (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      <mock-imageWindow data-testid="mock-imageWindow">
+        {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-imageWindow>
+    ),
+  };
+});
 
 describe('Open Windows component', () => {
   let state: RootState;