Vite browser mode

apps/fp-frontend-app/package.json

@@ -9,9 +9,11 @@
     ".": "./index.html"
   },
   "scripts": {
-    "test": "vitest",
-    "test:watch": "vitest --watch=true",
-    "test:coverage": "vitest --coverage",
+    "test": "vitest --project=jsdom",
+    "test:watch": "vitest --project=jsdom --watch=true",
+    "test:coverage": "vitest --project=jsdom --coverage",
+    "test:browser": "vitest --project=browser",
+    "test:browser:watch": "vitest --project=browser --watch=true",
     "tsc": "tsc --pretty",
     "eslint": "eslint \"src/**/*.ts*\" --color",
     "eslint:fix": "eslint --fix \"src/**/*.ts*\" --color",
@@ -152,8 +154,6 @@
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "eslint": "9.32.0",
-    "msw": "2.10.4",
-    "msw-storybook-addon": "2.0.5",
     "react-test-renderer": "19.1.0",
     "storybook": "9.0.18",
     "stylelint": "16.22.0",

apps/fp-frontend-app/src/aktoer/AktørIndex.spec.tsx

@@ -1,36 +1,46 @@
 import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';
-import { applyRequestHandlers } from 'msw-storybook-addon';
+
+import { mswWrapper } from '@navikt/fp-utils-test';
 
 import * as stories from './AktørIndex.stories';
 
 const { Default, IngenFagsaker, AktørInfoKallFeilet } = composeStories(stories);
 
 describe('AktørIndex', () => {
-  it('skal vise lister med fagsaker', async () => {
-    await applyRequestHandlers(Default.parameters['msw']);
-    render(<Default />);
-
-    expect(await screen.findByText('Espen Utvikler')).toBeInTheDocument();
-    expect(screen.getByText('111111 11111')).toBeInTheDocument();
-    expect(screen.getByText('Foreldrepenger (123) Opprettet')).toBeInTheDocument();
-    expect(screen.getByText('Engangsstønad (252523) Løpende')).toBeInTheDocument();
-  });
-
-  it('skal ikke ha noen fagsaker i fpsak', async () => {
-    await applyRequestHandlers(IngenFagsaker.parameters['msw']);
-    render(<IngenFagsaker />);
-
-    expect(await screen.findByText('Ukjent navn, mangler norsk id-nr')).toBeInTheDocument();
-    expect(screen.getByText('Har ingen fagsaker i fpsak')).toBeInTheDocument();
-  });
+  it(
+    'skal vise lister med fagsaker',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(Default.parameters['msw']);
+      render(<Default />);
+
+      expect(await screen.findByText('Espen Utvikler')).toBeInTheDocument();
+      expect(screen.getByText('111111 11111')).toBeInTheDocument();
+      expect(screen.getByText('Foreldrepenger (123) Opprettet')).toBeInTheDocument();
+      expect(screen.getByText('Engangsstønad (252523) Løpende')).toBeInTheDocument();
+    }),
+  );
+
+  it(
+    'skal ikke ha noen fagsaker i fpsak',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(IngenFagsaker.parameters['msw']);
+      render(<IngenFagsaker />);
+
+      expect(await screen.findByText('Ukjent navn, mangler norsk id-nr')).toBeInTheDocument();
+      expect(screen.getByText('Har ingen fagsaker i fpsak')).toBeInTheDocument();
+    }),
+  );
 
   //TODO Denne feilar av og til
-  it.skip('skal feile på api-kall', async () => {
-    await applyRequestHandlers(AktørInfoKallFeilet.parameters['msw']);
-    await render(<AktørInfoKallFeilet />);
-
-    expect(await screen.findByText(/Det har oppstått en teknisk feil i denne behandlingen./)).toBeInTheDocument();
-    expect(screen.getByText(/Meld feilen i Porten. Ta med feilmeldingsteksten./)).toBeInTheDocument();
-  });
+  it.skip(
+    'skal feile på api-kall',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(AktørInfoKallFeilet.parameters['msw']);
+      await render(<AktørInfoKallFeilet />);
+
+      expect(await screen.findByText(/Det har oppstått en teknisk feil i denne behandlingen./)).toBeInTheDocument();
+      expect(screen.getByText(/Meld feilen i Porten. Ta med feilmeldingsteksten./)).toBeInTheDocument();
+    }),
+  );
 });

apps/fp-frontend-app/src/app/AppIndex.spec.tsx

@@ -2,81 +2,85 @@ import { Context as ResponsiveContext } from 'react-responsive';
 
 import { composeStories } from '@storybook/react';
 import { render, screen, waitFor, within } from '@testing-library/react';
-import { applyRequestHandlers } from 'msw-storybook-addon';
 import { expect } from 'vitest';
 
+import { mswWrapper } from '@navikt/fp-utils-test';
+
 import * as stories from './AppIndex.stories';
 
 const { Default } = composeStories(stories);
 
 describe('AppIndex', () => {
-  it('skal rendre app med korrekt informasjon', async () => {
-    await applyRequestHandlers(Default.parameters['msw']);
-    render(
-      <ResponsiveContext.Provider value={{ width: 1000 }}>
-        <Default />
-      </ResponsiveContext.Provider>,
-    );
+  it(
+    'skal rendre app med korrekt informasjon',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(Default.parameters['msw']);
+      render(
+        <ResponsiveContext.Provider value={{ width: 1000 }}>
+          <Default />
+        </ResponsiveContext.Provider>,
+      );
 
-    expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
-    expect(screen.getByText('Sara Saksbehandler')).toBeInTheDocument();
+      expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
+      expect(screen.getByText('Sara Saksbehandler')).toBeInTheDocument();
 
-    expect(await screen.findByText('Foreldrepenger')).toBeInTheDocument();
-    expect(screen.getByText('100%')).toBeInTheDocument();
-    expect(screen.getByText('1 - Under behandling')).toBeInTheDocument();
-    expect(screen.getByText('Behandlingsmeny')).toBeInTheDocument();
+      expect(await screen.findByText('Foreldrepenger')).toBeInTheDocument();
+      expect(screen.getByText('100%')).toBeInTheDocument();
+      expect(screen.getByText('1 - Under behandling')).toBeInTheDocument();
+      expect(screen.getByText('Behandlingsmeny')).toBeInTheDocument();
 
-    expect(screen.getByText('Førstegangsbehandling')).toBeInTheDocument();
-    expect(screen.getByText('Behandlingsstatus')).toBeInTheDocument();
-    expect(screen.getByText('Behandling utredes')).toBeInTheDocument();
-    expect(screen.getByText('Resultat')).toBeInTheDocument();
-    expect(screen.getByText('Ikke fastsatt')).toBeInTheDocument();
-    expect(screen.getByText('Opprettet')).toBeInTheDocument();
-    expect(screen.getByText('05.03.2025 kl. 16:42')).toBeInTheDocument();
-    expect(screen.getByText('Enhet')).toBeInTheDocument();
-    expect(screen.getByText('4867')).toBeInTheDocument();
+      expect(screen.getByText('Førstegangsbehandling')).toBeInTheDocument();
+      expect(screen.getByText('Behandlingsstatus')).toBeInTheDocument();
+      expect(screen.getByText('Behandling utredes')).toBeInTheDocument();
+      expect(screen.getByText('Resultat')).toBeInTheDocument();
+      expect(screen.getByText('Ikke fastsatt')).toBeInTheDocument();
+      expect(screen.getByText('Opprettet')).toBeInTheDocument();
+      expect(screen.getByText('05.03.2025 kl. 16:42')).toBeInTheDocument();
+      expect(screen.getByText('Enhet')).toBeInTheDocument();
+      expect(screen.getByText('4867')).toBeInTheDocument();
 
-    expect(screen.getByText('Ingen faresignaler oppdaget')).toBeInTheDocument();
+      expect(screen.getByText('Ingen faresignaler oppdaget')).toBeInTheDocument();
 
-    expect(screen.getAllByText('Historikk')).toHaveLength(2);
-    expect(screen.getByText('Filtrer på behandling')).toBeInTheDocument();
-    expect(screen.getByText('Vedlegg er mottatt')).toBeInTheDocument();
-    expect(screen.getByText('Behandling er startet')).toBeInTheDocument();
+      expect(screen.getAllByText('Historikk')).toHaveLength(2);
+      expect(screen.getByText('Filtrer på behandling')).toBeInTheDocument();
+      expect(screen.getByText('Vedlegg er mottatt')).toBeInTheDocument();
+      expect(screen.getByText('Behandling er startet')).toBeInTheDocument();
 
-    expect(screen.getByText('Kristine Kalv')).toBeInTheDocument();
-    expect(screen.getByText('214871 32273')).toBeInTheDocument();
-    expect(screen.getByText('Asbjørn Lemur')).toBeInTheDocument();
-    expect(screen.getByText('215283 17364')).toBeInTheDocument();
-    expect(screen.getByText(/Født 05.03.2025/)).toBeInTheDocument();
+      expect(screen.getByText('Kristine Kalv')).toBeInTheDocument();
+      expect(screen.getByText('214871 32273')).toBeInTheDocument();
+      expect(screen.getByText('Asbjørn Lemur')).toBeInTheDocument();
+      expect(screen.getByText('215283 17364')).toBeInTheDocument();
+      expect(screen.getByText(/Født 05.03.2025/)).toBeInTheDocument();
 
-    // Vent til prosesspanel er ferdig lastet
-    await waitFor(
-      () => {
-        expect(screen.queryByText('Venter…')).not.toBeInTheDocument();
-      },
-      { timeout: 20000 },
-    );
+      // Vent til prosesspanel er ferdig lastet
+      await waitFor(
+        () => {
+          expect(screen.queryByText('Venter…')).not.toBeInTheDocument();
+        },
+        { timeout: 20000 },
+      );
 
-    const prosessMeny = within(await screen.findByTestId('prosess-meny'));
-    expect(prosessMeny.getByText('Opplysningsplikt')).toBeInTheDocument();
-    expect(prosessMeny.getByText('Inngangsvilkår')).toBeInTheDocument();
-    expect(prosessMeny.getByText('Beregning')).toBeInTheDocument();
-    expect(prosessMeny.getByText('Uttak')).toBeInTheDocument();
-    expect(prosessMeny.getByText('Tilkjent ytelse')).toBeInTheDocument();
-    expect(prosessMeny.getByText('Simulering')).toBeInTheDocument();
-    expect(prosessMeny.getByText('Vedtak')).toBeInTheDocument();
+      const prosessMeny = within(await screen.findByTestId('prosess-meny'));
+      expect(prosessMeny.getByText('Opplysningsplikt')).toBeInTheDocument();
+      expect(prosessMeny.getByText('Inngangsvilkår')).toBeInTheDocument();
+      expect(prosessMeny.getByText('Beregning')).toBeInTheDocument();
+      expect(prosessMeny.getByText('Uttak')).toBeInTheDocument();
+      expect(prosessMeny.getByText('Tilkjent ytelse')).toBeInTheDocument();
+      expect(prosessMeny.getByText('Simulering')).toBeInTheDocument();
+      expect(prosessMeny.getByText('Vedtak')).toBeInTheDocument();
 
-    const faktaMeny = within(await screen.findByTestId('fakta-meny'));
-    expect(faktaMeny.getByText('Fakta om')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Saken')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Arbeid og inntekt')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Inntektsmelding')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Ytelser')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Fødsel')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Medlemskap')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Opptjening')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Omsorg og rett')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Beregning')).toBeInTheDocument();
-    expect(faktaMeny.getByText('Uttak')).toBeInTheDocument();
-  });
+      const faktaMeny = within(await screen.findByTestId('fakta-meny'));
+      expect(faktaMeny.getByText('Fakta om')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Saken')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Arbeid og inntekt')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Inntektsmelding')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Ytelser')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Fødsel')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Medlemskap')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Opptjening')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Omsorg og rett')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Beregning')).toBeInTheDocument();
+      expect(faktaMeny.getByText('Uttak')).toBeInTheDocument();
+    }),
+  );
 });

apps/fp-frontend-app/src/app/components/Dekorator.spec.tsx

@@ -1,41 +1,54 @@
 import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';
-import { applyRequestHandlers } from 'msw-storybook-addon';
+
+import { mswWrapper } from '@navikt/fp-utils-test';
 
 import * as stories from './Dekorator.stories';
 
 const { Default, VisFeilmeldingSomLiggIUrl, VisTekniskFeilmelding, SkjulFeilmelding } = composeStories(stories);
 
 describe('Dekorator', () => {
-  it('skal vise dekorator', async () => {
-    await applyRequestHandlers(Default.parameters['msw']);
-    render(<Default />);
-    expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
-    expect(await screen.findByText('Sara Saksbehandler')).toBeInTheDocument();
-  });
-
-  it('skal vise feilmeldinger som ligger i URL', async () => {
-    await applyRequestHandlers(VisFeilmeldingSomLiggIUrl.parameters['msw']);
-    render(<VisFeilmeldingSomLiggIUrl />);
-
-    expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
-    expect(await screen.findByText('Dette er en feilmelding')).toBeInTheDocument();
-  });
-
-  it('skal vise feilmeldinger som oppstår ved kodefeil', async () => {
-    await applyRequestHandlers(VisTekniskFeilmelding.parameters['msw']);
-    render(<VisTekniskFeilmelding />);
-
-    expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
-    expect(await screen.findByText('test is undefined')).toBeInTheDocument();
-  });
-
-  it('skal ikke vise feilmelding når den er skjult manuelt', async () => {
-    await applyRequestHandlers(SkjulFeilmelding.parameters['msw']);
-    render(<SkjulFeilmelding />);
-
-    expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
-    expect(await screen.findByText('Sara Saksbehandler')).toBeInTheDocument();
-    expect(screen.queryByText('test is undefined')).not.toBeInTheDocument();
-  });
+  it(
+    'skal vise dekorator',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(Default.parameters['msw']);
+      render(<Default />);
+      expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
+      expect(await screen.findByText('Sara Saksbehandler')).toBeInTheDocument();
+    }),
+  );
+
+  it(
+    'skal vise feilmeldinger som ligger i URL',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(VisFeilmeldingSomLiggIUrl.parameters['msw']);
+      render(<VisFeilmeldingSomLiggIUrl />);
+
+      expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
+      expect(await screen.findByText('Dette er en feilmelding')).toBeInTheDocument();
+    }),
+  );
+
+  it(
+    'skal vise feilmeldinger som oppstår ved kodefeil',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(VisTekniskFeilmelding.parameters['msw']);
+      render(<VisTekniskFeilmelding />);
+
+      expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
+      expect(await screen.findByText('test is undefined')).toBeInTheDocument();
+    }),
+  );
+
+  it(
+    'skal ikke vise feilmelding når den er skjult manuelt',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(SkjulFeilmelding.parameters['msw']);
+      render(<SkjulFeilmelding />);
+
+      expect(await screen.findByText('Svangerskap, fødsel og adopsjon')).toBeInTheDocument();
+      expect(await screen.findByText('Sara Saksbehandler')).toBeInTheDocument();
+      expect(screen.queryByText('test is undefined')).not.toBeInTheDocument();
+    }),
+  );
 });

apps/fp-frontend-app/src/app/components/Home.spec.tsx

@@ -1,33 +1,46 @@
 import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';
-import { applyRequestHandlers } from 'msw-storybook-addon';
+
+import { mswWrapper } from '@navikt/fp-utils-test';
 
 import * as stories from './Home.stories';
 
 const { VisAktør, VisSøk, VisLosIkkeTilgjengelig, VisSideIkkeFunnet } = composeStories(stories);
 
 describe('Home', () => {
-  it('skal rendre aktør-panel', async () => {
-    await applyRequestHandlers(VisAktør.parameters['msw']);
-    render(<VisAktør />);
-    expect(await screen.findByText('Espen Utvikler')).toBeInTheDocument();
-  });
+  it(
+    'skal rendre aktør-panel',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(VisAktør.parameters['msw']);
+      render(<VisAktør />);
+      expect(await screen.findByText('Espen Utvikler')).toBeInTheDocument();
+    }),
+  );
 
-  it('skal rendre søke-panel', async () => {
-    await applyRequestHandlers(VisSøk.parameters['msw']);
-    render(<VisSøk />);
-    expect(await screen.findByText('Søk på sak eller person')).toBeInTheDocument();
-  });
+  it(
+    'skal rendre søke-panel',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(VisSøk.parameters['msw']);
+      render(<VisSøk />);
+      expect(await screen.findByText('Søk på sak eller person')).toBeInTheDocument();
+    }),
+  );
 
-  it('skal rendre los-ikke-tilgjengelig-panel', async () => {
-    await applyRequestHandlers(VisLosIkkeTilgjengelig.parameters['msw']);
-    render(<VisLosIkkeTilgjengelig />);
-    expect(await screen.findByText('FPLOS er ikke tilgjengelig')).toBeInTheDocument();
-  });
+  it(
+    'skal rendre los-ikke-tilgjengelig-panel',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(VisLosIkkeTilgjengelig.parameters['msw']);
+      render(<VisLosIkkeTilgjengelig />);
+      expect(await screen.findByText('FPLOS er ikke tilgjengelig')).toBeInTheDocument();
+    }),
+  );
 
-  it('skal rendre side-ikke-funnet-panel', async () => {
-    await applyRequestHandlers(VisSideIkkeFunnet.parameters['msw']);
-    render(<VisSideIkkeFunnet />);
-    expect(await screen.findByText('Beklager, vi finner ikke siden du leter etter.')).toBeInTheDocument();
-  });
+  it(
+    'skal rendre side-ikke-funnet-panel',
+    mswWrapper(async ({ setHandlers }) => {
+      setHandlers(VisSideIkkeFunnet.parameters['msw']);
+      render(<VisSideIkkeFunnet />);
+      expect(await screen.findByText('Beklager, vi finner ikke siden du leter etter.')).toBeInTheDocument();
+    }),
+  );
 });