From c2aa5be8ffeaca5443993ab29c3b4888b4d3c49e Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 14 Jun 2024 16:12:39 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB(frontend)=20e?= =?UTF-8?q?nv=20var=20service-worker=20dev=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a new environment variable to enable or disable the service worker in development mode. By default, the service worker is disabled in development mode, it can cause problems when developing the application with the hmr. It can creates useless log in the console as well. We can easily enable it by setting NEXT_PUBLIC_SW_DEACTIVATED to false in the .env.development file. We will use this new var to not use the service worder with the CI as well. --- src/frontend/apps/impress/.env.development | 1 + src/frontend/apps/impress/next.config.js | 4 +- src/frontend/apps/impress/package.json | 4 +- .../service-worker/__tests__/_app.test.tsx | 71 +++++++++++++++++++ .../apps/impress/src/custom-next.d.ts | 1 + src/frontend/apps/impress/src/pages/_app.tsx | 5 +- 6 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 src/frontend/apps/impress/src/core/service-worker/__tests__/_app.test.tsx diff --git a/src/frontend/apps/impress/.env.development b/src/frontend/apps/impress/.env.development index 06cbc57c..2056c636 100644 --- a/src/frontend/apps/impress/.env.development +++ b/src/frontend/apps/impress/.env.development @@ -1,2 +1,3 @@ NEXT_PUBLIC_API_ORIGIN=http://localhost:8071 NEXT_PUBLIC_SIGNALING_URL=ws://localhost:4444 +NEXT_PUBLIC_SW_DEACTIVATED=true diff --git a/src/frontend/apps/impress/next.config.js b/src/frontend/apps/impress/next.config.js index 41115e4c..e59b6237 100644 --- a/src/frontend/apps/impress/next.config.js +++ b/src/frontend/apps/impress/next.config.js @@ -11,7 +11,7 @@ const nextConfig = { // Enables the styled-components SWC transform styledComponents: true, }, - webpack(config, { isServer, dev }) { + webpack(config, { isServer }) { // Grab the existing rule that handles SVG imports const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'), @@ -33,7 +33,7 @@ const nextConfig = { }, ); - if (!isServer && !dev) { + if (!isServer && process.env.NEXT_PUBLIC_SW_DEACTIVATED !== 'true') { config.plugins.push( new InjectManifest({ swSrc: './src/core/service-worker.ts', diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json index fcc20ca6..e8842507 100644 --- a/src/frontend/apps/impress/package.json +++ b/src/frontend/apps/impress/package.json @@ -5,7 +5,7 @@ "scripts": { "dev": "next dev", "build": "prettier --check . && yarn stylelint && next build", - "build:ci": "cp .env.development .env.local && cross-env NEXT_PUBLIC_CI=true yarn build", + "build:ci": "cp .env.development .env.local && yarn build", "build-theme": "cunningham -g css,ts -o src/cunningham --utility-classes", "start": "npx -y serve@latest out", "lint": "tsc --noEmit && next lint", @@ -21,7 +21,6 @@ "@gouvfr-lasuite/integration": "1.0.1", "@openfun/cunningham-react": "2.9.3", "@tanstack/react-query": "5.48.0", - "cross-env": "*", "i18next": "23.11.5", "lodash": "4.17.21", "luxon": "3.4.4", @@ -49,6 +48,7 @@ "@types/node": "*", "@types/react": "18.3.3", "@types/react-dom": "*", + "cross-env": "*", "dotenv": "16.4.5", "eslint-config-impress": "*", "fetch-mock": "9.11.0", diff --git a/src/frontend/apps/impress/src/core/service-worker/__tests__/_app.test.tsx b/src/frontend/apps/impress/src/core/service-worker/__tests__/_app.test.tsx new file mode 100644 index 00000000..3e83e24e --- /dev/null +++ b/src/frontend/apps/impress/src/core/service-worker/__tests__/_app.test.tsx @@ -0,0 +1,71 @@ +import '@testing-library/jest-dom'; +import { render } from '@testing-library/react'; +import { Router } from 'next/router'; +import { PropsWithChildren, ReactElement } from 'react'; + +import App from '@/pages/_app'; +import { AppWrapper } from '@/tests/utils'; +import { NextPageWithLayout } from '@/types/next'; + +const Page: NextPageWithLayout = () => { + return
Test Page
; +}; + +Page.getLayout = function getLayout(page: ReactElement) { + return
{page}
; +}; + +jest.mock('@/core/', () => ({ + ...jest.requireActual('@/core/'), + AppProvider: ({ children }: PropsWithChildren) =>
{children}
, +})); + +describe('App', () => { + it('checks service-worker is register', () => { + jest.spyOn(console, 'error').mockImplementation(() => {}); + + const registerSpy = jest.fn(); + registerSpy.mockImplementation( + () => + new Promise((reject) => { + reject('error'); + }), + ); + Object.defineProperty(navigator, 'serviceWorker', { + value: { + register: registerSpy, + }, + writable: true, + }); + + render(, { + wrapper: AppWrapper, + }); + + expect(registerSpy).toHaveBeenCalledWith('/service-worker.js'); + }); + + it('checks service-worker is not register', () => { + process.env.NEXT_PUBLIC_SW_DEACTIVATED = 'true'; + + const registerSpy = jest.fn(); + registerSpy.mockImplementation( + () => + new Promise((reject) => { + reject('error'); + }), + ); + Object.defineProperty(navigator, 'serviceWorker', { + value: { + register: registerSpy, + }, + writable: true, + }); + + render(, { + wrapper: AppWrapper, + }); + + expect(registerSpy).not.toHaveBeenCalledWith('/service-worker.js'); + }); +}); diff --git a/src/frontend/apps/impress/src/custom-next.d.ts b/src/frontend/apps/impress/src/custom-next.d.ts index c457a17f..4f84b79c 100644 --- a/src/frontend/apps/impress/src/custom-next.d.ts +++ b/src/frontend/apps/impress/src/custom-next.d.ts @@ -21,5 +21,6 @@ namespace NodeJS { interface ProcessEnv { NEXT_PUBLIC_API_ORIGIN?: string; NEXT_PUBLIC_SIGNALING_URL?: string; + NEXT_PUBLIC_SW_DEACTIVATED?: string; } } diff --git a/src/frontend/apps/impress/src/pages/_app.tsx b/src/frontend/apps/impress/src/pages/_app.tsx index 1123b655..85e87ee0 100644 --- a/src/frontend/apps/impress/src/pages/_app.tsx +++ b/src/frontend/apps/impress/src/pages/_app.tsx @@ -17,7 +17,10 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) { const { t } = useTranslation(); useEffect(() => { - if ('serviceWorker' in navigator && process.env.NEXT_PUBLIC_CI !== 'true') { + if ( + 'serviceWorker' in navigator && + process.env.NEXT_PUBLIC_SW_DEACTIVATED !== 'true' + ) { navigator.serviceWorker.register('/service-worker.js').catch((err) => { console.error('Service worker registration failed:', err); });