Tsff 442 - testing med Storybook (#6112)

* Tsff 442 - testing med Storybook

* Reverserer uønskende endringer

* Tar bort unødvendige eslint-ignores

Author: hallvardastark

.dockerignore

@@ -2,7 +2,6 @@
 *Dockerfile*
 *docker-compose*
 **/node_modules
-cypress
 coverage
 .nyc_output
 packages

.gitignore

@@ -10,7 +10,6 @@
 /.eslint_loader_cache/
 /.uglify_plugin_cache/
 .env
-cypress.env.json
 /coverage/
 *.iml
 *.log*

.storybook/preview.tsx

@@ -10,8 +10,6 @@ import { MemoryRouter } from 'react-router-dom';
 // @ts-ignore
 const { VITE_LOCAL_STORYBOOK } = import.meta.env;
 
-// NB: Viss omgåelse av service worker er aktivert i devtools og devtools er opna når ein laster storybook, så oppstår
-// evig loop på grunn av dette kallet.
 initialize({
   onUnhandledRequest: 'bypass',
   serviceWorker: {
@@ -34,7 +32,55 @@ const preview: Preview = {
       );
     },
   ],
-  loaders: [mswLoader],
+  loaders: [
+    async context => {
+      await mswLoader(context);
+      await waitForActivatedServiceWorker();
+    },
+  ],
+};
+
+const waitForActivatedServiceWorker = async () => {
+  // Wait for the worker to be loaded
+  const serviceWorker =
+    navigator.serviceWorker.controller ||
+    (await new Promise((resolve, reject) => {
+      let triesLeft = 10;
+
+      const fn = () => {
+        if (navigator.serviceWorker.controller) {
+          resolve(navigator.serviceWorker.controller);
+        } else {
+          triesLeft -= 1;
+
+          if (triesLeft === 0) {
+            reject(new Error('Timed out waiting for service worker'));
+          } else {
+            setTimeout(fn, 100);
+          }
+        }
+      };
+
+      setTimeout(fn, 100);
+    }));
+
+  if (!serviceWorker) {
+    throw new Error('No service worker found');
+  }
+
+  // Make sure the worker is actually ready to go
+  if (serviceWorker.state !== 'activated') {
+    await new Promise<void>(resolve => {
+      const fn = (e: Event) => {
+        if (e.target && 'state' in e.target && e.target.state === 'activated') {
+          serviceWorker.removeEventListener('statechange', fn);
+          resolve();
+        }
+      };
+
+      serviceWorker.addEventListener('statechange', fn);
+    });
+  }
 };
 
 export default preview;

package.json

@@ -16,6 +16,7 @@
     "test:watch": "vitest --watch --silent=false",
     "test:watch:all": "vitest --watchAll",
     "test:coverage": "vitest --coverage --selectProjects test",
+    "test-storybook": "test-storybook --url http://127.0.0.1:9001 --testTimeout=30_000",
     "ts-check": "tsc  --pretty && tsc --pretty --project packages/v2/tsconfig.json",
     "lint": "eslint --cache packages --ext .ts,.tsx,.js,.jsx",
     "lint:fix": "eslint --fix --cache packages --ext .ts,.tsx,.js,.jsx",
@@ -66,17 +67,17 @@
   },
   "devDependencies": {
     "@sentry/cli": "2.32.1",
-    "@storybook/addon-a11y": "^8.1.4",
-    "@storybook/addon-actions": "^8.1.4",
-    "@storybook/addon-docs": "^8.1.4",
-    "@storybook/addon-essentials": "^8.1.4",
-    "@storybook/addon-interactions": "^8.1.4",
-    "@storybook/cli": "^8.1.4",
-    "@storybook/react": "^8.1.4",
-    "@storybook/react-vite": "^8.1.4",
-    "@storybook/test": "^8.1.4",
-    "@storybook/theming": "^8.1.4",
-    "@testing-library/cypress": "^10.0.1",
+    "@storybook/addon-a11y": "^8.1.5",
+    "@storybook/addon-actions": "^8.1.5",
+    "@storybook/addon-docs": "^8.1.5",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/cli": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-vite": "^8.1.5",
+    "@storybook/test": "^8.1.5",
+    "@storybook/test-runner": "^0.18.2",
+    "@storybook/theming": "^8.1.5",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "14.3.1",
@@ -93,7 +94,6 @@
     "autoprefixer": "^10.4.19",
     "axios-mock-adapter": "1.22.0",
     "cross-env": "7.0.3",
-    "cypress": "^13.10.0",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
@@ -112,7 +112,7 @@
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
     "react-popper": "2.3.0",
-    "storybook": "^8.1.4",
+    "storybook": "^8.1.5",
     "stylelint": "16.6.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "6.0.4",

packages/fakta-etablert-tilsyn/cypress.config.ts

@@ -1,11 +1,12 @@
 /* eslint-disable import/prefer-default-export */
 import { http, HttpResponse } from 'msw';
+import { mockUrlPrepend } from './constants';
 import mockedSykdom from './mocked-data/mockedSykdom';
 import mockedTilsyn from './mocked-data/mockedTilsyn';
 
 export const handlers = [
-  http.get('http://localhost:8082/mock/tilsyn', () => HttpResponse.json(mockedTilsyn, { status: 200 })),
-  http.get('http://localhost:8082/mock/sykdom', () => HttpResponse.json(mockedSykdom, { status: 200 })),
+  http.get(`${mockUrlPrepend}/mock/tilsyn`, () => HttpResponse.json(mockedTilsyn, { status: 200 })),
+  http.get(`${mockUrlPrepend}/mock/sykdom`, () => HttpResponse.json(mockedSykdom, { status: 200 })),
 
-  http.get('http://localhost:8082/mock/sykdomInnleggelse', () => HttpResponse.json({ perioder: [] }, { status: 200 })),
+  http.get(`${mockUrlPrepend}/mock/sykdomInnleggelse`, () => HttpResponse.json({ perioder: [] }, { status: 200 })),
 ];

packages/fakta-etablert-tilsyn/cypress/.eslintrc.json

@@ -0,0 +1,4 @@
+const { DEV: IS_DEV, VITE_LOCAL_STORYBOOK } = import.meta.env;
+const mockUrlPrepend = VITE_LOCAL_STORYBOOK || IS_DEV ? '' : '/k9-sak-web';
+
+export { mockUrlPrepend };

packages/fakta-etablert-tilsyn/cypress/e2e/EtablertTilsyn.cy.js

@@ -7,14 +7,9 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "dev": "vite serve",
-    "cypress:headless": "cypress run",
-    "test:e2e": "start-server-and-test dev http://localhost:5174 cypress:headless"
+    "dev": "vite serve"
   },
   "devDependencies": {
-    "@testing-library/cypress": "^10.0.1",
-    "cypress": "^13.10.0",
-    "eslint-plugin-cypress": "^2.15.2",
     "start-server-and-test": "^2.0.3",
     "vite": "^5.2.12",
     "vite-plugin-node-polyfills": "^0.22.0"

packages/fakta-etablert-tilsyn/cypress/plugins/index.js

@@ -1,14 +1,15 @@
 /* eslint-disable no-console */
 import '@navikt/ds-css';
 import '@navikt/ft-plattform-komponenter/dist/style.css';
+import { mockUrlPrepend } from '../../mock/constants';
 import renderers from '../util/renderers';
 
 const data = {
   readOnly: false,
   endpoints: {
-    tilsyn: 'http://localhost:8082/mock/tilsyn',
-    sykdom: 'http://localhost:8082/mock/sykdom',
-    sykdomInnleggelse: 'http://localhost:8082/mock/sykdomInnleggelse',
+    tilsyn: `${mockUrlPrepend}/mock/tilsyn`,
+    sykdom: `${mockUrlPrepend}/mock/sykdom`,
+    sykdomInnleggelse: `${mockUrlPrepend}/mock/sykdomInnleggelse`,
   },
   onFinished: () => console.log('Aksjonspunkt løst'),
   beredskapMåVurderes: true,