From d20ee8fb728af77e6050418e9e6e73fb50b66175 Mon Sep 17 00:00:00 2001 From: Joel Davies Date: Tue, 3 Sep 2024 09:24:11 +0000 Subject: [PATCH] DSEGOG-341 Fix yarn preview:build:dev and address comments --- package.json | 4 +--- src/images/imageWindow.component.test.tsx | 1 - src/main.tsx | 1 - src/plotting/plot.component.tsx | 2 -- .../plotSettingsController.component.test.tsx | 6 +++--- .../plotSettings/yAxisTab.component.tsx | 17 +++++------------ src/plotting/plotWindow.component.test.tsx | 1 - src/testUtils.tsx | 9 +-------- src/traces/tracePlot.component.tsx | 2 -- src/traces/traceWindow.component.test.tsx | 1 - vite.config.ts | 6 +++++- 11 files changed, 15 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 752fbfd0..e2a01979 100644 --- a/package.json +++ b/package.json @@ -78,9 +78,7 @@ ] }, "browserslist": [ - ">0.2%", - "not dead", - "not op_mini all" + "defaults" ], "packageManager": "yarn@4.3.1", "devDependencies": { diff --git a/src/images/imageWindow.component.test.tsx b/src/images/imageWindow.component.test.tsx index 8466c6b6..ec6a65eb 100644 --- a/src/images/imageWindow.component.test.tsx +++ b/src/images/imageWindow.component.test.tsx @@ -6,7 +6,6 @@ import { renderComponentWithProviders } from '../testUtils'; import ImageWindow from './imageWindow.component'; vi.mock('../windows/windowPortal.component', async () => { - // eslint-disable-next-line @typescript-eslint/no-var-requires const ReactMock = await vi.importActual('react'); return { default: ReactMock.forwardRef(({ children }, ref) => ( diff --git a/src/main.tsx b/src/main.tsx index 1adb332b..07e107bc 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -198,7 +198,6 @@ async function prepare() { import.meta.env.VITE_APP_INCLUDE_MSW === 'true' || settingsResult?.apiUrl === '' ) { - // Need to use require instead of import as import breaks when loaded in SG const { worker } = await import('./mocks/browser'); return worker.start({ onUnhandledRequest(request, print) { diff --git a/src/plotting/plot.component.tsx b/src/plotting/plot.component.tsx index a66664b8..2bca686f 100644 --- a/src/plotting/plot.component.tsx +++ b/src/plotting/plot.component.tsx @@ -8,8 +8,6 @@ import { } from '../app.types'; // only import types as we don't actually run any chart.js code in React import type { ChartDataset, ChartOptions } from 'chart.js'; -// we import this even though we don't use it so we can get typescript info added to ChartOptions -// eslint-disable-next-line @typescript-eslint/no-unused-vars export interface PlotProps { datasets: PlotDataset[]; diff --git a/src/plotting/plotSettings/plotSettingsController.component.test.tsx b/src/plotting/plotSettings/plotSettingsController.component.test.tsx index 7de0c7ae..9597c9c3 100644 --- a/src/plotting/plotSettings/plotSettingsController.component.test.tsx +++ b/src/plotting/plotSettings/plotSettingsController.component.test.tsx @@ -24,9 +24,9 @@ describe('Plot Settings component', () => { 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 - (await vi.importActual('./plotSettingsController.component')).default; + const PlotSettingsController = ( + await vi.importActual('./plotSettingsController.component') + ).default; return render(); }; diff --git a/src/plotting/plotSettings/yAxisTab.component.tsx b/src/plotting/plotSettings/yAxisTab.component.tsx index d7cb3f90..f829c847 100644 --- a/src/plotting/plotSettings/yAxisTab.component.tsx +++ b/src/plotting/plotSettings/yAxisTab.component.tsx @@ -468,18 +468,11 @@ const YAxisTab = (props: YAxisTabProps) => { { - // eslint-disable-next-line @typescript-eslint/no-var-requires const ReactMock = await vi.importActual('react'); return { default: ReactMock.forwardRef(({ children }, ref) => ( diff --git a/src/testUtils.tsx b/src/testUtils.tsx index 1d1027cc..b12d1d64 100644 --- a/src/testUtils.tsx +++ b/src/testUtils.tsx @@ -1,15 +1,9 @@ -import React from 'react'; -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; -// need to mock for plotting 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 { matchRequestUrl } from 'msw'; +import React from 'react'; import { Provider } from 'react-redux'; import { staticChannels } from './api/channels'; import { @@ -45,7 +39,6 @@ import { * @param url string representing the URL match for the route * @returns a promise of the matching request * */ -// TODO: Could this be replaced using an axios spy for the search params instead? export function waitForRequest(method: string, url: string) { let newRequestId = ''; diff --git a/src/traces/tracePlot.component.tsx b/src/traces/tracePlot.component.tsx index 9bd96c3e..a2db988e 100644 --- a/src/traces/tracePlot.component.tsx +++ b/src/traces/tracePlot.component.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { Waveform } from '../app.types'; // only import types as we don't actually run any chart.js code in React import type { ChartData, ChartOptions } from 'chart.js'; -// we import this even though we don't use it so we can get typescript info added to ChartOptions -// eslint-disable-next-line @typescript-eslint/no-unused-vars export interface TracePlotProps { trace: Waveform; diff --git a/src/traces/traceWindow.component.test.tsx b/src/traces/traceWindow.component.test.tsx index 537af601..44374e55 100644 --- a/src/traces/traceWindow.component.test.tsx +++ b/src/traces/traceWindow.component.test.tsx @@ -6,7 +6,6 @@ import { renderComponentWithProviders } from '../testUtils'; import TraceWindow from './traceWindow.component'; vi.mock('../windows/windowPortal.component', async () => { - // eslint-disable-next-line @typescript-eslint/no-var-requires const ReactMock = await vi.importActual('react'); return { default: ReactMock.forwardRef(({ children }, ref) => ( diff --git a/vite.config.ts b/vite.config.ts index 8df4867d..2c089cbc 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -93,7 +93,11 @@ export default defineConfig(({ mode }) => { // Config for deployment in SciGateway config.build = { lib: { - // https://github.com/vitejs/vite/issues/7130 + // We use `umd` here as `es` causes some import statements to leak into the main.js, breaking the build + // removing this entirely uses a default of both, which for build results in `umd` taking precedence but when + // using --watch, `es` appears to replace it intermittently. Hopefully this can be fixed in the future and we + // can use `es` instead. + formats: ['umd'], entry: 'src/main.tsx', name: 'operationsgateway', },