DSEGOG-341 Remove datepicker workaround and update search tests

ral-facilities · Aug 13, 2024 · d42fccc · d42fccc
1 parent f5e6450
commit d42fccc
Show file tree

Hide file tree

Showing 14 changed files with 41 additions and 121 deletions.
diff --git a/globalSetup.js b/globalSetup.js
@@ -0,0 +1,3 @@
+module.exports = async () => {
+  process.env.TZ = 'UTC';
+};
diff --git a/src/filtering/filterDialogue.component.test.tsx b/src/filtering/filterDialogue.component.test.tsx
@@ -275,10 +275,6 @@ describe('Filter dialogue component', () => {
     // Tooltip warning should be present
     await user.hover(screen.getByText('Apply'));
 
-    // for some strange reason, the tooltip is not being found on the first hover
-    // re-trying the hover makes the test pass
-    await user.hover(screen.getByText('Apply'));
-
     expect(await screen.findByRole('tooltip')).toBeInTheDocument();
 
     // // Store should not be updated, indicating search is yet to initiate
@@ -340,10 +336,6 @@ describe('Filter dialogue component', () => {
     // Tooltip warning should be present
     await user.hover(screen.getByText('Apply'));
 
-    // for some strange reason, the tooltip is not being found on the first hover
-    // re-trying the hover makes the test pass
-    await user.hover(screen.getByText('Apply'));
-
     expect(await screen.findByRole('tooltip')).toBeInTheDocument();
   });
 

diff --git a/src/plotting/plotSettings/xAxisTab.component.test.tsx b/src/plotting/plotSettings/xAxisTab.component.test.tsx
@@ -2,11 +2,7 @@ import type { RenderResult } from '@testing-library/react';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { format } from 'date-fns';
-import {
-  applyDatePickerWorkaround,
-  cleanupDatePickerWorkaround,
-  testScalarChannels,
-} from '../../testUtils';
+import { testScalarChannels } from '../../testUtils';
 import type { XAxisTabProps } from './xAxisTab.component';
 import XAxisTab from './xAxisTab.component';
 
@@ -188,15 +184,10 @@ describe('x-axis tab', () => {
 
     describe('date-time values', () => {
       beforeEach(() => {
-        applyDatePickerWorkaround();
         props.XAxis = 'timestamp';
         props.XAxisScale = 'time';
       });
 
-      afterEach(() => {
-        cleanupDatePickerWorkaround();
-      });
-
       it('lets user change the fromDate field and calls relevant onchange method', async () => {
         createView();
 

diff --git a/src/search/components/__snapshots__/dataRefresh.component.test.tsx.snap b/src/search/components/__snapshots__/dataRefresh.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[`DataRefresh renders correctly 1`] = `
+exports[`DataRefresh > renders correctly 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-12b4m5q"

diff --git a/src/search/components/__snapshots__/dateTime.component.test.tsx.snap b/src/search/components/__snapshots__/dateTime.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[`CustomPickersDay function renders the CustomPickerDay correctly 1`] = `
+exports[`CustomPickersDay function > renders the CustomPickerDay correctly 1`] = `
 <body>
   <div>
     <div
@@ -10,7 +10,7 @@ exports[`CustomPickersDay function renders the CustomPickerDay correctly 1`] = `
 </body>
 `;
 
-exports[`DateTime tests renders correctly with input date-time ranges 1`] = `
+exports[`DateTime tests > renders correctly with input date-time ranges 1`] = `
 <DocumentFragment>
   <div
     aria-label="date-time search box"
@@ -156,7 +156,7 @@ exports[`DateTime tests renders correctly with input date-time ranges 1`] = `
 </DocumentFragment>
 `;
 
-exports[`DateTime tests renders correctly with no input date-time ranges 1`] = `
+exports[`DateTime tests > renders correctly with no input date-time ranges 1`] = `
 <DocumentFragment>
   <div
     aria-label="date-time search box"
@@ -302,43 +302,43 @@ exports[`DateTime tests renders correctly with no input date-time ranges 1`] = `
 </DocumentFragment>
 `;
 
-exports[`renderExperimentPickerDay function renders a PickersDay component when selectedDate is not with an experiment 1`] = `
+exports[`renderExperimentPickerDay function > renders a PickersDay component when selectedDate is not with an experiment 1`] = `
 <Memo
   autoFocus={false}
   day={2022-02-05T00:00:00.000Z}
   disabled={false}
   isAnimating={false}
   isFirstVisibleCell={false}
   isLastVisibleCell={false}
-  onBlur={[MockFunction]}
-  onDaySelect={[MockFunction]}
-  onFocus={[MockFunction]}
-  onKeyDown={[MockFunction]}
+  onBlur={[MockFunction spy]}
+  onDaySelect={[MockFunction spy]}
+  onFocus={[MockFunction spy]}
+  onKeyDown={[MockFunction spy]}
   outsideCurrentMonth={true}
   selected={false}
   today={false}
 />
 `;
 
-exports[`renderExperimentPickerDay function renders a PickersDay component when selectedDate is null 1`] = `
+exports[`renderExperimentPickerDay function > renders a PickersDay component when selectedDate is null 1`] = `
 <Memo
   autoFocus={false}
   day={2022-02-05T00:00:00.000Z}
   disabled={false}
   isAnimating={false}
   isFirstVisibleCell={false}
   isLastVisibleCell={false}
-  onBlur={[MockFunction]}
-  onDaySelect={[MockFunction]}
-  onFocus={[MockFunction]}
-  onKeyDown={[MockFunction]}
+  onBlur={[MockFunction spy]}
+  onDaySelect={[MockFunction spy]}
+  onFocus={[MockFunction spy]}
+  onKeyDown={[MockFunction spy]}
   outsideCurrentMonth={true}
   selected={false}
   today={false}
 />
 `;
 
-exports[`renderExperimentPickerDay function renders a PickersDay component when selectedDate is with an experiment 1`] = `
+exports[`renderExperimentPickerDay function > renders a PickersDay component when selectedDate is with an experiment 1`] = `
 <Styled(memo)
   autoFocus={false}
   day={2022-02-05T00:00:00.000Z}
@@ -350,10 +350,10 @@ exports[`renderExperimentPickerDay function renders a PickersDay component when
   isFirstVisibleCell={false}
   isLastDay={false}
   isLastVisibleCell={false}
-  onBlur={[MockFunction]}
-  onDaySelect={[MockFunction]}
-  onFocus={[MockFunction]}
-  onKeyDown={[MockFunction]}
+  onBlur={[MockFunction spy]}
+  onDaySelect={[MockFunction spy]}
+  onFocus={[MockFunction spy]}
+  onKeyDown={[MockFunction spy]}
   outsideCurrentMonth={true}
   selected={false}
   today={false}

diff --git a/src/search/components/__snapshots__/experiment.component.test.tsx.snap b/src/search/components/__snapshots__/experiment.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[`Experiment search renders correctly 1`] = `
+exports[`Experiment search > renders correctly 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-79elbk"

diff --git a/src/search/components/__snapshots__/maxShots.component.test.tsx.snap b/src/search/components/__snapshots__/maxShots.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[`maxShots search renders correctly with a selected value 1`] = `
+exports[`maxShots search > renders correctly with a selected value 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-79elbk"

diff --git a/src/search/components/__snapshots__/shotNumber.component.test.tsx.snap b/src/search/components/__snapshots__/shotNumber.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[`shotNumber search renders correctly 1`] = `
+exports[`shotNumber search > renders correctly 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-79elbk"

diff --git a/src/search/components/__snapshots__/timeframe.component.test.tsx.snap b/src/search/components/__snapshots__/timeframe.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[`timeframe search renders correctly 1`] = `
+exports[`timeframe search > renders correctly 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root css-79elbk"

diff --git a/src/search/components/dateTime.component.test.tsx b/src/search/components/dateTime.component.test.tsx
@@ -5,10 +5,6 @@ import { render, RenderResult, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ExperimentParams } from '../../app.types';
 import experimentsJSON from '../../mocks/experiments.json';
-import {
-  applyDatePickerWorkaround,
-  cleanupDatePickerWorkaround,
-} from '../../testUtils';
 import DateTime, {
   CustomPickersDay,
   datesEqual,
@@ -274,7 +270,6 @@ describe('DateTime tests', () => {
   };
 
   beforeEach(() => {
-    applyDatePickerWorkaround();
     userEvent.setup();
     props = {
       searchParameterFromDate: null,
@@ -295,7 +290,6 @@ describe('DateTime tests', () => {
   });
 
   afterEach(() => {
-    cleanupDatePickerWorkaround();
     vi.clearAllMocks();
   });
 

diff --git a/src/search/searchBar.component.test.tsx b/src/search/searchBar.component.test.tsx
@@ -1,18 +1,13 @@
 import { QueryClient } from '@tanstack/react-query';
 import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { http } from 'msw';
+import { http, HttpResponse } from 'msw';
 import React from 'react';
 import recordsJson from '../mocks/records.json';
 import { server } from '../mocks/server';
 import { formatDateTimeForApi } from '../state/slices/searchSlice';
 import { RootState } from '../state/store';
-import {
-  applyDatePickerWorkaround,
-  cleanupDatePickerWorkaround,
-  getInitialState,
-  renderComponentWithProviders,
-} from '../testUtils';
+import { getInitialState, renderComponentWithProviders } from '../testUtils';
 import { MAX_SHOTS_VALUES } from './components/maxShots.component';
 import SearchBar from './searchBar.component';
 
@@ -31,7 +26,6 @@ describe('searchBar component', () => {
   };
 
   beforeEach(() => {
-    applyDatePickerWorkaround();
     user = userEvent.setup();
     props = {
       expanded: true,
@@ -40,7 +34,6 @@ describe('searchBar component', () => {
   });
 
   afterEach(() => {
-    cleanupDatePickerWorkaround();
     vi.clearAllMocks();
   });
 
@@ -428,9 +421,7 @@ describe('searchBar component', () => {
   it('displays a warning tooltip if record count is over record limit warning and only initiates search on second click', async () => {
     // Mock the returned count query response
     server.use(
-      http.get('/records/count', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(31));
-      })
+      http.get('/records/count', () => HttpResponse.json(31, { status: 200 }))
     );
     const state = {
       ...getInitialState(),
@@ -454,10 +445,6 @@ describe('searchBar component', () => {
     // Tooltip warning should be present
     await user.hover(screen.getByRole('button', { name: 'Search' }));
 
-    // for some strange reason, the tooltip is not being found on the first hover
-    // re-trying the hover makes the test pass
-    await user.hover(screen.getByRole('button', { name: 'Search' }));
-
     expect(await screen.findByRole('tooltip')).toBeInTheDocument();
 
     // Store should not be updated, indicating search is yet to initiate
@@ -489,9 +476,7 @@ describe('searchBar component', () => {
   it('does not show a warning tooltip if record count is over record limit warning but max shots is below record limit warning', async () => {
     // Mock the returned count query response
     server.use(
-      http.get('/records/count', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(100));
-      })
+      http.get('/records/count', () => HttpResponse.json(100, { status: 200 }))
     );
 
     const state = {
@@ -547,9 +532,7 @@ describe('searchBar component', () => {
 
     // Mock the returned count query response
     server.use(
-      http.get('/records/count', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(31));
-      })
+      http.get('/records/count', () => HttpResponse.json(31, { status: 200 }))
     );
 
     await user.clear(dateFilterFromDate);
@@ -560,19 +543,13 @@ describe('searchBar component', () => {
     // Tooltip warning should be present
     await user.hover(screen.getByRole('button', { name: 'Search' }));
 
-    // for some strange reason, the tooltip is not being found on the first hover
-    // re-trying the hover makes the test pass
-    await user.hover(screen.getByRole('button', { name: 'Search' }));
-
     expect(await screen.findByRole('tooltip')).toBeInTheDocument();
   });
 
   it('does not show a warning tooltip for previous searches that already showed it', async () => {
     // Mock the returned count query response
     server.use(
-      http.get('/records/count', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(31));
-      })
+      http.get('/records/count', () => HttpResponse.json(31, { status: 200 }))
     );
 
     const testQueryClient = new QueryClient({

diff --git a/src/testUtils.tsx b/src/testUtils.tsx
@@ -213,36 +213,6 @@ export function renderComponentWithStore(
 export const flushPromises = (): Promise<void> =>
   new Promise((resolve) => setTimeout(resolve));
 
-// MUI date pickers default to mobile versions during testing and so functions
-// like .simulate('change') will not work, this workaround ensures desktop
-// datepickers are used in tests instead
-// https://github.com/mui/material-ui-pickers/issues/2073
-export const applyDatePickerWorkaround = (): void => {
-  // add window.matchMedia
-  // this is necessary for the date picker to be rendered in desktop mode.
-  // if this is not provided, the mobile mode is rendered, which might lead to unexpected behavior
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: (query: string) => ({
-      media: query,
-      // this is the media query that @material-ui/pickers uses to determine if a device is a desktop device
-      matches: query === '(pointer: fine)',
-      onchange: () => undefined,
-      addEventListener: () => undefined,
-      removeEventListener: () => undefined,
-      addListener: () => undefined,
-      removeListener: () => undefined,
-      dispatchEvent: () => false,
-    }),
-  });
-};
-
-export const cleanupDatePickerWorkaround = (): void => {
-  // TODO JOEL: Check if can remove the work around once tests migrated
-  // @ts-ignore
-  delete window.matchMedia;
-};
-
 export const testChannels = [
   ...Object.values(staticChannels),
   ...Object.entries(channelsJson.channels).map(

diff --git a/src/views/recordTable.component.test.tsx b/src/views/recordTable.component.test.tsx
@@ -14,12 +14,7 @@ import recordsJson from '../mocks/records.json';
 import { server } from '../mocks/server';
 import { deselectColumn, selectColumn } from '../state/slices/tableSlice';
 import { RootState } from '../state/store';
-import {
-  applyDatePickerWorkaround,
-  cleanupDatePickerWorkaround,
-  getInitialState,
-  renderComponentWithProviders,
-} from '../testUtils';
+import { getInitialState, renderComponentWithProviders } from '../testUtils';
 import RecordTable, {
   extractChannelsFromTokens,
 } from './recordTable.component';
@@ -40,8 +35,6 @@ describe('Record Table', () => {
   };
 
   beforeEach(() => {
-    applyDatePickerWorkaround();
-
     state = getInitialState();
 
     jest
@@ -50,7 +43,6 @@ describe('Record Table', () => {
   });
 
   afterEach(() => {
-    cleanupDatePickerWorkaround();
     vi.clearAllMocks();
   });