From 7c290575c1badf95b46907574502ffa378f35bf9 Mon Sep 17 00:00:00 2001 From: Joel Davies Date: Wed, 14 Aug 2024 10:21:49 +0000 Subject: [PATCH] DSEGOG-341 Update plotting tests --- .../plot.component.test.tsx.snap | 38 ++--- .../plotList.component.test.tsx.snap | 6 +- ...SettingsController.component.test.tsx.snap | 8 +- .../xAxisTab.component.test.tsx.snap | 6 +- .../yAxisTab.component.test.tsx.snap | 4 +- .../colourPicker.component.test.tsx.snap | 6 +- .../moreOptionsBox.component.test.tsx.snap | 4 +- .../moreOptionsToggle.component.test.tsx.snap | 6 +- .../moreOptionsToggle.component.test.tsx | 28 ++-- .../plotSettingsController.component.test.tsx | 152 ++++++++++-------- src/plotting/plotWindow.component.test.tsx | 30 ++-- src/testUtils.tsx | 1 - 12 files changed, 157 insertions(+), 132 deletions(-) diff --git a/src/plotting/__snapshots__/plot.component.test.tsx.snap b/src/plotting/__snapshots__/plot.component.test.tsx.snap index 3b76ce12f..08176f6fa 100644 --- a/src/plotting/__snapshots__/plot.component.test.tsx.snap +++ b/src/plotting/__snapshots__/plot.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[`Plot component renders a canvas element with the correct attributes passed the correct props for a scatter plot 1`] = ` +exports[`Plot component > renders a canvas element with the correct attributes passed the correct props for a scatter plot 1`] = `
`; -exports[`Plot component updates data object correctly by setting borderDash property on dashed lines 1`] = ` +exports[`Plot component > updates data object correctly by setting borderDash property on dashed lines 1`] = `
`; -exports[`Plot component updates data object correctly by setting borderDash, pointRadius and borderCapStyle properties on dotted lines 1`] = ` +exports[`Plot component > updates data object correctly by setting borderDash, pointRadius and borderCapStyle properties on dotted lines 1`] = `
`; -exports[`Plot component updates data object correctly by setting opacity to 0 for lines that are hidden 1`] = ` +exports[`Plot component > updates data object correctly by setting opacity to 0 for lines that are hidden 1`] = `
`; -exports[`Plot component updates data object correctly by setting the y axis correctly for right Y axis selected channels 1`] = ` +exports[`Plot component > updates data object correctly by setting the y axis correctly for right Y axis selected channels 1`] = `
`; -exports[`Plot component updates options object correctly 1`] = ` +exports[`Plot component > updates options object correctly 1`] = `
renders plot grid correctly with no plots 1`] = `
`; -exports[`Plot List component renders plot grid correctly with some plots 1`] = ` +exports[`Plot List component > renders plot grid correctly with some plots 1`] = `
snapshots > renders plot settings form correctly (timeseries plot) 1`] = `
`; -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`] = `
`; -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`] = `
renders correctly with arbitrary x axis 1`] = `
`; -exports[`x-axis tab renders correctly with timestamp x axis 1`] = ` +exports[`x-axis tab > renders correctly with timestamp x axis 1`] = `
renders correctly 1`] = `
renders colour picker when square is clicked 1`] = `
`; -exports[`ColourPicker component renders coloured square when popover is not open 1`] = ` +exports[`ColourPicker component > renders coloured square when popover is not open 1`] = `
renders correctly 1`] = `
renders correctly when options box not open 1`] = `
`; -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`] = `
(props) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - {Object.entries(props).map( - ([propName, propValue]) => - `${propName}=${JSON.stringify(propValue, null, 2)}\n` - )} - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore */} - -)); +vi.mock('./moreOptionsBox.component', () => { + return { + default: (props) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + {Object.entries(props).map( + ([propName, propValue]) => + `${propName}=${JSON.stringify(propValue, null, 2)}\n` + )} + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-ignore */} + + ), + }; +}); describe('MoreOptionsToggle', () => { let props: MoreOptionsProps; diff --git a/src/plotting/plotSettings/plotSettingsController.component.test.tsx b/src/plotting/plotSettings/plotSettingsController.component.test.tsx index ffeeb9691..7de0c7ae3 100644 --- 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(); }; @@ -70,85 +70,101 @@ 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 - - {Object.entries(props).map( - ([propName, propValue]) => - `${propName}=${JSON.stringify(propValue, null, 2)}\n` - )} - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore */} - - )); - - jest.doMock('./chartTypeButtons.component', () => (props) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - {Object.entries(props).map( - ([propName, propValue]) => - `${propName}=${JSON.stringify(propValue, null, 2)}\n` - )} - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore */} - - )); - - jest.doMock('./xAxisTab.component', () => (props) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - {Object.entries(props).map( - ([propName, propValue]) => - `${propName}=${JSON.stringify(propValue, null, 2)}\n` - )} - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore */} - - )); - - jest.doMock('./yAxisTab.component', () => (props) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - {Object.entries(props).map( - ([propName, propValue]) => - `${propName}=${JSON.stringify(propValue, null, 2)}\n` - )} - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore */} - - )); + vi.resetModules(); + vi.doMock('./plotSettingsTextField.component', () => { + return { + default: (props) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + {Object.entries(props).map( + ([propName, propValue]) => + `${propName}=${JSON.stringify(propValue, null, 2)}\n` + )} + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-ignore */} + + ), + }; + }); + + vi.doMock('./chartTypeButtons.component', () => { + return { + default: (props) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + {Object.entries(props).map( + ([propName, propValue]) => + `${propName}=${JSON.stringify(propValue, null, 2)}\n` + )} + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-ignore */} + + ), + }; + }); + + vi.doMock('./xAxisTab.component', () => { + return { + default: (props) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + {Object.entries(props).map( + ([propName, propValue]) => + `${propName}=${JSON.stringify(propValue, null, 2)}\n` + )} + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-ignore */} + + ), + }; + }); + + vi.doMock('./yAxisTab.component', () => { + return { + default: (props) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + {Object.entries(props).map( + ([propName, propValue]) => + `${propName}=${JSON.stringify(propValue, null, 2)}\n` + )} + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-ignore */} + + ), + }; + }); }); 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(); @@ -156,7 +172,7 @@ describe('Plot Settings component', () => { }); 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' })); diff --git a/src/plotting/plotWindow.component.test.tsx b/src/plotting/plotWindow.component.test.tsx index 36334c06a..cec6c48cf 100644 --- a/src/plotting/plotWindow.component.test.tsx +++ b/src/plotting/plotWindow.component.test.tsx @@ -11,21 +11,27 @@ import { } from '../testUtils'; import PlotWindow from './plotWindow.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 - {children} - )); + return { + default: ReactMock.forwardRef(({ children }, ref) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + {children} + )), + }; }); -jest.mock('./plot.component', () => () => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - -)); +vi.mock('./plot.component', () => { + return { + default: () => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + ), + }; +}); describe('Plot Window component', () => { let testPlotConfig: PlotConfig; @@ -89,7 +95,7 @@ describe('Plot Window component', () => { }); it('renders correctly while records and channels are 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); }; diff --git a/src/testUtils.tsx b/src/testUtils.tsx index ddf1a6c2d..da5c492fc 100644 --- a/src/testUtils.tsx +++ b/src/testUtils.tsx @@ -8,7 +8,6 @@ import { Action, ThunkAction } from '@reduxjs/toolkit'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import type { RenderOptions } from '@testing-library/react'; import { render } from '@testing-library/react'; -import 'jest-canvas-mock'; import { matchRequestUrl } from 'msw'; import { Provider } from 'react-redux'; import { staticChannels } from './api/channels';