diff --git a/globalSetup.js b/globalSetup.js new file mode 100644 index 00000000..6e1fbf41 --- /dev/null +++ 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 index a43bfae1..d243865c 100644 --- 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 index 9c4140d9..ea53af5a 100644 --- 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 index 96531f88..64328cf2 100644 --- 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`] = `
renders the CustomPickerDay correctly 1`] = `
`; -exports[`DateTime tests renders correctly with input date-time ranges 1`] = ` +exports[`DateTime tests > renders correctly with input date-time ranges 1`] = `
`; -exports[`DateTime tests renders correctly with no input date-time ranges 1`] = ` +exports[`DateTime tests > renders correctly with no input date-time ranges 1`] = `
`; -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`] = ` `; -exports[`renderExperimentPickerDay function renders a PickersDay component when selectedDate is null 1`] = ` +exports[`renderExperimentPickerDay function > renders a PickersDay component when selectedDate is null 1`] = ` `; -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`] = ` renders correctly 1`] = `
renders correctly with a selected value 1`] = `
renders correctly 1`] = `
renders correctly 1`] = `
{ }; 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 index 6b801fd7..cc4df45c 100644 --- 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 index 9e5227e5..ddf1a6c2 100644 --- a/src/testUtils.tsx +++ b/src/testUtils.tsx @@ -213,36 +213,6 @@ export function renderComponentWithStore( export const flushPromises = (): Promise => 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 index 6cf4c979..b3b72a1a 100644 --- 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(); }); diff --git a/vite.config.ts b/vite.config.ts index fc694a84..3f48131e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -137,6 +137,7 @@ export default defineConfig(({ mode }) => { test: { globals: true, environment: 'jsdom', + globalSetup: './globalSetup.js', setupFiles: ['src/setupTests.ts'], coverage: { reporter: [