DSEGOG-341 Replace jest.clearAllMocks with vi.clearAllMocks and fix a…

…pi unit tests

src/api/channels.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { renderHook, waitFor } from '@testing-library/react';
-import { http } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { FullChannelMetadata, timeChannelName } from '../app.types';
 import { server } from '../mocks/server';
 import { RootState } from '../state/store';
@@ -20,7 +20,7 @@ import {
 
 describe('channels api functions', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('useAvailableColumns', () => {
@@ -77,8 +77,8 @@ describe('channels api functions', () => {
 
     it('returns no columns if no data was present in the request response', async () => {
       server.use(
-        http.get('/channels', (req, res, ctx) => {
-          return res(ctx.status(200), ctx.json({ channels: {} }));
+        http.get('/channels', () => {
+          return HttpResponse.json({ channels: {} }, { status: 200 });
         })
       );
 
@@ -168,8 +168,8 @@ describe('channels api functions', () => {
 
     it('returns no channels if no data was present in the request response', async () => {
       server.use(
-        http.get('/channels', (req, res, ctx) => {
-          return res(ctx.status(200), ctx.json({ channels: {} }));
+        http.get('/channels', () => {
+          return HttpResponse.json({ channels: {} }, { status: 200 });
         })
       );
 

src/api/experiment.test.tsx

@@ -6,7 +6,7 @@ import { useExperiment } from './experiment';
 
 describe('channels api functions', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('useExperiment', () => {

src/api/export.test.tsx

@@ -50,7 +50,7 @@ describe('useExportData', () => {
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     document.createElement = document.originalCreateElement;
     document.body.appendChild = document.body.originalAppendChild;
   });

src/api/images.test.tsx

@@ -5,7 +5,7 @@ import { useColourBar, useColourMaps, useImage } from './images';
 
 describe('images api functions', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('useImage', () => {
@@ -34,7 +34,7 @@ describe('images api functions', () => {
       params.set('original_image', 'true');
 
       expect(result.current.data).toEqual('testObjectUrl');
-      expect(request.url.searchParams).toEqual(params);
+      expect(new URL(request.url).searchParams).toEqual(params);
     });
 
     it('sends request to fetch original image with empty false colour params and returns successful response', async () => {
@@ -56,7 +56,7 @@ describe('images api functions', () => {
       params.set('original_image', 'true');
 
       expect(result.current.data).toEqual('testObjectUrl');
-      expect(request.url.searchParams).toEqual(params);
+      expect(new URL(request.url).searchParams).toEqual(params);
     });
 
     it('sends request to fetch false colour image and returns successful response', async () => {
@@ -88,7 +88,7 @@ describe('images api functions', () => {
       params.set('upper_level', '200');
 
       expect(result.current.data).toEqual('testObjectUrl');
-      expect(request.url.searchParams).toEqual(params);
+      expect(new URL(request.url).searchParams).toEqual(params);
     });
 
     it.todo(
@@ -129,7 +129,7 @@ describe('images api functions', () => {
       params.set('upper_level', '200');
 
       expect(result.current.data).toEqual('testObjectUrl');
-      expect(request.url.searchParams).toEqual(params);
+      expect(new URL(request.url).searchParams).toEqual(params);
     });
 
     it.todo(

src/api/records.test.tsx

@@ -38,7 +38,7 @@ describe('records api functions', () => {
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('useRecordCount', () => {
@@ -103,7 +103,9 @@ describe('records api functions', () => {
         '{"$and":[{"metadata.timestamp":{"$gte":"2022-01-01 00:00:00","$lte":"2022-01-02 00:00:00"}},{"metadata.shotnum":{"$gt":300}}]}'
       );
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
       expect(result.current.data).toEqual(recordsJson.length);
     });
 
@@ -132,7 +134,9 @@ describe('records api functions', () => {
       const request = await pendingRequest;
 
       // We should have made one call to /records/count
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
       expect(incomingRecordCountResult.current.data).toEqual(
         recordsJson.length
       );
@@ -306,7 +310,9 @@ describe('records api functions', () => {
         '{"$and":[{"metadata.timestamp":{"$gte":"2022-01-01 00:00:00","$lte":"2022-01-02 00:00:00"}},{"metadata.shotnum":{"$gt":300}}]}'
       );
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
       expect(result.current.data).toEqual(recordsJson.length);
     });
 
@@ -353,7 +359,9 @@ describe('records api functions', () => {
         '{"$and":[{"metadata.timestamp":{"$gte":"2022-01-01 00:00:00","$lte":"2022-01-02 00:00:00"}},{"metadata.shotnum":{"$gt":300}}]}'
       );
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
       expect(result.current.data).toEqual(recordsJson.length);
     });
 
@@ -387,7 +395,9 @@ describe('records api functions', () => {
       params.append('skip', '0');
       params.append('limit', '25');
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
 
       expect(result.current.data).toMatchSnapshot();
     });
@@ -446,7 +456,9 @@ describe('records api functions', () => {
       params.append('skip', '0');
       params.append('limit', '25');
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
     });
   });
 
@@ -470,7 +482,7 @@ describe('records api functions', () => {
     });
 
     afterEach(() => {
-      jest.clearAllMocks();
+      vi.clearAllMocks();
     });
 
     it('uses a select function to format the results', async () => {
@@ -508,7 +520,9 @@ describe('records api functions', () => {
       params.append('skip', '0');
       params.append('limit', '50');
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
 
       const expectedData: PlotDataset[] = [
         {
@@ -592,7 +606,9 @@ describe('records api functions', () => {
       params.append('skip', '0');
       params.append('limit', '1000');
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
 
       const expectedData: PlotDataset[] = [
         {
@@ -659,7 +675,9 @@ describe('records api functions', () => {
         '{"$or":' + JSON.stringify(existsConditions) + '}'
       );
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
     });
   });
 
@@ -671,7 +689,7 @@ describe('records api functions', () => {
     });
 
     afterEach(() => {
-      jest.clearAllMocks();
+      vi.clearAllMocks();
     });
 
     it('sends request to fetch records with a projection and returns successful response', async () => {
@@ -699,7 +717,9 @@ describe('records api functions', () => {
       params.append('skip', '25');
       params.append('limit', '25');
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
 
       expect(result.current.data).toEqual(recordsJson);
     });
@@ -757,7 +777,9 @@ describe('records api functions', () => {
       params.append('skip', '0');
       params.append('limit', '25');
 
-      expect(request.url.searchParams.toString()).toEqual(params.toString());
+      expect(new URL(request.url).searchParams.toString()).toEqual(
+        params.toString()
+      );
     });
   });
 

src/api/sessions.test.tsx

@@ -22,7 +22,7 @@ describe('session api functions', () => {
     };
   });
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('useSaveSession', () => {

src/api/userPreferences.test.tsx

@@ -10,7 +10,7 @@ describe('user preferences api functions', () => {
   const axiosDelete = jest.spyOn(axios, 'delete');
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('useUserPreference', () => {

src/api/waveforms.test.tsx

@@ -4,7 +4,7 @@ import { useWaveform } from './waveforms';
 
 describe('waveform api functions', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('useWaveform', () => {

src/channels/channelTree.component.test.tsx

@@ -61,7 +61,7 @@ describe('Channel Tree', () => {
   };
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should render correctly for root', () => {

src/channels/channelsDialogue.component.test.tsx

@@ -116,7 +116,7 @@ describe('Channels Dialogue', () => {
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('renders channels dialogue when dialogue is open', async () => {

src/filtering/filterDialogue.component.test.tsx

@@ -34,7 +34,7 @@ describe('Filter dialogue component', () => {
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('renders filter dialogue when dialogue is open', async () => {

src/images/falseColourPanel.component.test.tsx

@@ -20,11 +20,11 @@ describe('False colour panel component', () => {
       changeUpperLevel,
     };
 
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   const createView = () => {
@@ -61,7 +61,7 @@ describe('False colour panel component', () => {
 
     expect(changeColourMap).toHaveBeenCalledWith('cividis');
 
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     // check user can select "default" colourmap
     await user.click(select);
@@ -120,7 +120,7 @@ describe('False colour panel component', () => {
     expect(changeUpperLevel).toHaveBeenCalledWith(undefined);
     expect(extendedColourMapSwitch).toBeDisabled();
 
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     await user.click(falseColourSwitch);
 
@@ -144,7 +144,7 @@ describe('False colour panel component', () => {
     await user.click(within(dropdown).getByRole('option', { name: 'cividis' }));
 
     await user.click(falseColourSwitch);
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     await user.click(falseColourSwitch);
 
     expect(falseColourSwitch).toBeChecked();
@@ -182,7 +182,7 @@ describe('False colour panel component', () => {
     expect(reverseColourSwitch).toBeChecked();
     expect(changeColourMap).toHaveBeenCalledWith('inferno_r');
 
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     const select2 = screen.getByLabelText('Colour Map');
     await user.click(select);
@@ -199,14 +199,14 @@ describe('False colour panel component', () => {
 
     expect(changeColourMap).toHaveBeenCalledWith('cividis_r');
 
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     await user.click(reverseColourSwitch);
     expect(changeColourMap).toHaveBeenCalledWith('cividis');
 
     await user.click(reverseColourSwitch);
 
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     // the reverse colour is disabled when it doesn't exist
 

src/images/imageWindow.component.test.tsx

@@ -39,7 +39,7 @@ describe('Image Window component', () => {
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   const createView = () => {

src/mocks/handlers.ts

@@ -63,7 +63,7 @@ export const handlers = [
 
     const validId = [1, 2, 3, 4];
     if (validId.includes(Number(id))) {
-      return HttpResponse.json(null, { status: 204 });
+      return new HttpResponse(null, { status: 204 });
     } else HttpResponse.json(null, { status: 422 });
   }),
   http.get('/sessions/list', async () => {
@@ -277,7 +277,7 @@ export const handlers = [
     if (typeof preferredColourMap === 'undefined') {
       return HttpResponse.json(
         { detail: 'No such attribute in database' },
-        { status: 200 }
+        { status: 404 }
       );
     } else {
       return HttpResponse.json(preferredColourMap, { status: 200 });