From 3a32c37af297300d2362097506c49ef7c35d87fa Mon Sep 17 00:00:00 2001 From: Joel Davies Date: Mon, 12 Aug 2024 14:52:15 +0000 Subject: [PATCH] DSEGOG-341 Fix remaining tsc errors and add preview:build for SciGateway --- .gitignore | 2 +- package.json | 3 ++ src/App.tsx | 18 ++++++------ src/mocks/handlers.ts | 2 ++ src/setupTests.tsx | 68 +++++++++++++++++++++++++++++-------------- src/vite-env.d.ts | 4 +++ vite.config.ts | 2 +- 7 files changed, 66 insertions(+), 33 deletions(-) diff --git a/.gitignore b/.gitignore index 818d16938..e713687ba 100644 --- a/.gitignore +++ b/.gitignore @@ -22,7 +22,7 @@ screenshots/ **/cypress/fixtures/example.json # production -/build +dist # misc .DS_Store diff --git a/package.json b/package.json index dcb7ab59f..3859d1715 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,9 @@ "scripts": { "dev": "vite --open", "build": "tsc --project tsconfig.build.json && vite build", + "preview": "vite preview", + "preview:build": "yarn build && yarn preview", + "preview:build:dev": "yarn build --watch & yarn preview", "lint:js": "eslint --max-warnings=0 --ext=tsx --ext=ts --ext=js --ext=jsx --fix ./src", "serve:build": "yarn build && serve -l 5001 build", "test": "craco test --env=jsdom --coverage --watchAll=false", diff --git a/src/App.tsx b/src/App.tsx index 3dced5e73..dce0c5115 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,21 +1,21 @@ -import React from 'react'; -import ViewTabs from './views/viewTabs.component'; import { + QueryCache, QueryClient, QueryClientProvider, - QueryCache, } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; -import { configureApp } from './state/slices/configSlice'; -import { requestPluginRerender } from './state/scigateway.actions'; +import React from 'react'; +import { connect, Provider } from 'react-redux'; +import './App.css'; import { MicroFrontendId } from './app.types'; import OGThemeProvider from './ogThemeProvider.component'; -import OpenWindows from './windows/openWindows.component'; -import { store, RootState } from './state/store'; -import { connect, Provider } from 'react-redux'; import Preloader from './preloader/preloader.component'; -import './App.css'; import SettingsMenuItems from './settingsMenuItems.component'; +import { requestPluginRerender } from './state/scigateway.actions'; +import { configureApp } from './state/slices/configSlice'; +import { RootState, store } from './state/store'; +import ViewTabs from './views/viewTabs.component'; +import OpenWindows from './windows/openWindows.component'; const queryClient = new QueryClient({ defaultOptions: { diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 32985a37e..a10d58612 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -291,6 +291,8 @@ export const handlers = [ } ), http.post('/users/preferences', async ({ request }) => { + // Ignoring here as don't have types defined for these endpoints + // @ts-ignore preferredColourMap = (await request.json()).value; return HttpResponse.json(preferredColourMap, { status: 200 }); }), diff --git a/src/setupTests.tsx b/src/setupTests.tsx index d9a6d77cc..c92f04697 100644 --- a/src/setupTests.tsx +++ b/src/setupTests.tsx @@ -73,36 +73,60 @@ if (typeof window.URL.revokeObjectURL === 'undefined') { * @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 requestId = ''; - - return new Promise((resolve, reject) => { - const onRequestStart = (req) => { - const matchesMethod = req.method.toLowerCase() === method.toLowerCase(); - - const matchesUrl = matchRequestUrl(req.url, url).matches; + let newRequestId = ''; + + return new Promise((resolve, reject) => { + const onRequestStart = ({ + request, + requestId, + }: { + request: Request; + requestId: string; + }) => { + const requestURL = new URL(request.url); + const matchesMethod = + request.method.toLowerCase() === method.toLowerCase(); + + const matchesUrl = matchRequestUrl(requestURL, url).matches; if (matchesMethod && matchesUrl) { - requestId = req.id; + newRequestId = requestId; } }; - const onRequestMatch = (req) => { - if (req.id === requestId) { + const onRequestMatch = ({ + request, + requestId, + }: { + request: Request; + requestId: string; + }) => { + if (requestId === newRequestId) { server.events.removeListener('request:start', onRequestStart); server.events.removeListener('request:match', onRequestMatch); server.events.removeListener('request:unhandled', onRequestUnhandled); - resolve(req); + resolve(request); } }; - const onRequestUnhandled = (req) => { - if (req.id === requestId) { + const onRequestUnhandled = ({ + request, + requestId, + }: { + request: Request; + requestId: string; + }) => { + const requestURL = new URL(request.url); + if (requestId === newRequestId) { server.events.removeListener('request:start', onRequestStart); server.events.removeListener('request:match', onRequestMatch); server.events.removeListener('request:unhandled', onRequestUnhandled); reject( - new Error(`The ${req.method} ${req.url.href} request was unhandled.`) + new Error( + `The ${request.method} ${requestURL.href} request was unhandled.` + ) ); } }; @@ -189,11 +213,6 @@ export const createTestQueryClient = (): QueryClient => staleTime: 300000, }, }, - logger: { - log: console.log, - warn: console.warn, - error: jest.fn(), - }, }); export const hooksWrapperWithProviders = ( @@ -202,7 +221,7 @@ export const hooksWrapperWithProviders = ( ) => { const testQueryClient = queryClient ?? createTestQueryClient(); const store = setupStore(state); - const wrapper = ({ children }) => ( + const wrapper = ({ children }: { children: React.ReactNode }) => ( {children} @@ -286,6 +305,8 @@ export const applyDatePickerWorkaround = (): void => { }; export const cleanupDatePickerWorkaround = (): void => { + // TODO JOEL: Check if can remove the work around once tests migrated + // @ts-ignore delete window.matchMedia; }; @@ -300,10 +321,13 @@ export const testChannels = [ ), ]; +// TODO JOEL: Verify working with tests - previously had staticChannels included as is export const testScalarChannels: FullScalarChannelMetadata[] = [ - ...Object.values(staticChannels), + ...Object.values(staticChannels).filter( + (channel) => channel.type === 'scalar' + ), ...Object.entries(channelsJson.channels) - .filter(([systemName, channel]) => channel.type === 'scalar') + .filter(([_systemName, channel]) => channel.type === 'scalar') .map( ([systemName, channel]) => ({ diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe2a..ac84ca87e 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,5 @@ /// + +// Needed to recognise overridden plugins types in ChartOptions +// see https://github.com/chartjs/chartjs-plugin-zoom/issues/763 +/// diff --git a/vite.config.ts b/vite.config.ts index 1403343e6..504f84cbc 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -84,7 +84,7 @@ export default defineConfig(({ mode }) => { lib: { // https://github.com/vitejs/vite/issues/7130 entry: 'src/main.tsx', - name: 'inventory-management-system', + name: 'operationsgateway', }, rollupOptions: { external: ['react', 'react-dom'].concat(rollupExternals),