diff --git a/package-lock.json b/package-lock.json index d74a7c38b..6cd7d087e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -70,7 +70,8 @@ "react-dom": "~18.3.1", "react-intl": "6.8.7", "react-redux": "^9.1.2", - "react-router-dom": "^6.28.0", + "react-router": "^7.0.1", + "react-router-dom": "^7.0.1", "rollup-plugin-visualizer": "^5.12.0", "sass": "^1.81.0", "start-server-and-test": "^2.0.8", @@ -2829,15 +2830,6 @@ } } }, - "node_modules/@remix-run/router": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", - "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", - "dev": true, - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/@rollup/pluginutils": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", @@ -11845,35 +11837,54 @@ } }, "node_modules/react-router": { - "version": "6.28.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", - "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.1.tgz", + "integrity": "sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==", "dev": true, + "license": "MIT", "dependencies": { - "@remix-run/router": "1.21.0" + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" }, "engines": { - "node": ">=14.0.0" + "node": ">=20.0.0" }, "peerDependencies": { - "react": ">=16.8" + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } } }, "node_modules/react-router-dom": { - "version": "6.28.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", - "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.1.tgz", + "integrity": "sha512-duBzwAAiIabhFPZfDjcYpJ+f08TMbPMETgq254GWne2NW1ZwRHhZLj7tpSp8KGb7JvZzlLcjGUnqLxpZQVEPng==", "dev": true, + "license": "MIT", "dependencies": { - "@remix-run/router": "1.21.0", - "react-router": "6.28.0" + "react-router": "7.0.1" }, "engines": { - "node": ">=14.0.0" + "node": ">=20.0.0" }, "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/react-router/node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "dev": true, + "engines": { + "node": ">=18" } }, "node_modules/read-pkg": { @@ -12956,6 +12967,12 @@ "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", "dev": true }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "dev": true + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -14575,6 +14592,12 @@ "node": "*" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "dev": true + }, "node_modules/tweetnacl": { "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", diff --git a/package.json b/package.json index c52403caa..39b581078 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,8 @@ "react-dom": "~18.3.1", "react-intl": "6.8.7", "react-redux": "^9.1.2", - "react-router-dom": "^6.28.0", + "react-router": "^7.0.1", + "react-router-dom": "^7.0.1", "rollup-plugin-visualizer": "^5.12.0", "sass": "^1.81.0", "start-server-and-test": "^2.0.8", diff --git a/src/components/Grunnlag/Grunnlag.tsx b/src/components/Grunnlag/Grunnlag.tsx index 901733c44..9655c4219 100644 --- a/src/components/Grunnlag/Grunnlag.tsx +++ b/src/components/Grunnlag/Grunnlag.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { Accordion, diff --git a/src/components/Grunnlag/GrunnlagAFP/__tests__/GrunnlagAFP.test.tsx b/src/components/Grunnlag/GrunnlagAFP/__tests__/GrunnlagAFP.test.tsx index bcab1f764..9577763c7 100644 --- a/src/components/Grunnlag/GrunnlagAFP/__tests__/GrunnlagAFP.test.tsx +++ b/src/components/Grunnlag/GrunnlagAFP/__tests__/GrunnlagAFP.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { add, endOfDay, format } from 'date-fns' import { GrunnlagAFP } from '..' @@ -14,6 +12,15 @@ import { userInputInitialState } from '@/state/userInput/userInputReducer' import { render, screen, userEvent } from '@/test-utils' import { DATE_BACKEND_FORMAT } from '@/utils/dates' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('Grunnlag - AFP', () => { it('Når brukeren har valgt AFP offentlig og samtykket til beregning av den, viser riktig tittel med formatert inntekt og tekst', async () => { const user = userEvent.setup() @@ -106,10 +113,6 @@ describe('Grunnlag - AFP', () => { it('Når brukeren har valgt uten AFP, viser riktig tittel med formatert inntekt, tekst og lenke', async () => { const goToStartMock = vi.fn() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const user = userEvent.setup() render(, { @@ -417,10 +420,6 @@ describe('Grunnlag - AFP', () => { it('Når hen har valgt uten AFP, viser riktig tittel med formatert inntekt, tekst og lenke', async () => { const goToStartMock = vi.fn() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const user = userEvent.setup() render(, { diff --git a/src/components/Grunnlag/GrunnlagUtenlandsopphold/GrunnlagUtenlandsopphold.tsx b/src/components/Grunnlag/GrunnlagUtenlandsopphold/GrunnlagUtenlandsopphold.tsx index 247a23464..73c52cef7 100644 --- a/src/components/Grunnlag/GrunnlagUtenlandsopphold/GrunnlagUtenlandsopphold.tsx +++ b/src/components/Grunnlag/GrunnlagUtenlandsopphold/GrunnlagUtenlandsopphold.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons' import { BodyLong, Button, Link, Modal } from '@navikt/ds-react' diff --git a/src/components/Grunnlag/GrunnlagUtenlandsopphold/__tests__/GrunnlagUtenlandsopphold.test.tsx b/src/components/Grunnlag/GrunnlagUtenlandsopphold/__tests__/GrunnlagUtenlandsopphold.test.tsx index c26b717b4..30902e9a2 100644 --- a/src/components/Grunnlag/GrunnlagUtenlandsopphold/__tests__/GrunnlagUtenlandsopphold.test.tsx +++ b/src/components/Grunnlag/GrunnlagUtenlandsopphold/__tests__/GrunnlagUtenlandsopphold.test.tsx @@ -1,10 +1,17 @@ -import * as ReactRouterUtils from 'react-router' - import { GrunnlagUtenlandsopphold } from '..' import { fulfilledGetLoependeVedtakLoependeAlderspensjon } from '@/mocks/mockedRTKQueryApiCalls' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { render, screen, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('GrunnlagUtenlandsopphold', () => { describe('Gitt at brukeren har svart "nei" på spørsmålet om opphold i utlandet', () => { it('viser riktig tittel og innhold og liste over utenlandsopphold vises ikke', async () => { @@ -164,11 +171,6 @@ describe('GrunnlagUtenlandsopphold', () => { }) it('Når man klikker på lenken for å endre opphold, sendes man til Utenlandsoppholdsteget', async () => { - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) - const user = userEvent.setup() render(, { diff --git a/src/components/Grunnlag/__tests__/Grunnlag.test.tsx b/src/components/Grunnlag/__tests__/Grunnlag.test.tsx index 2944ed30b..7cb4fc2b9 100644 --- a/src/components/Grunnlag/__tests__/Grunnlag.test.tsx +++ b/src/components/Grunnlag/__tests__/Grunnlag.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { Grunnlag } from '@/components/Grunnlag' import { fulfilledGetLoependeVedtak0Ufoeregrad } from '@/mocks/mockedRTKQueryApiCalls' import { mockErrorResponse, mockResponse } from '@/mocks/server' @@ -8,6 +6,15 @@ import { userInputInitialState } from '@/state/userInput/userInputReducer' import * as userInputReducerUtils from '@/state/userInput/userInputReducer' import { render, screen, userEvent, waitFor } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('Grunnlag', () => { const renderGrunnlagMedPreloadedState = ( headingLevel: '1' | '2' | '3', @@ -104,10 +111,6 @@ describe('Grunnlag', () => { userInputReducerUtils.userInputActions, 'flushCurrentSimulationUtenomUtenlandsperioder' ) - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const user = userEvent.setup() renderGrunnlagMedPreloadedState('2', 'enkel') @@ -266,10 +269,6 @@ describe('Grunnlag', () => { userInputReducerUtils.userInputActions, 'flush' ) - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const user = userEvent.setup() renderGrunnlagMedPreloadedState('2', 'enkel', { diff --git a/src/components/GrunnlagForbehold/GrunnlagForbehold.tsx b/src/components/GrunnlagForbehold/GrunnlagForbehold.tsx index cbba2ef55..bd39061f3 100644 --- a/src/components/GrunnlagForbehold/GrunnlagForbehold.tsx +++ b/src/components/GrunnlagForbehold/GrunnlagForbehold.tsx @@ -1,5 +1,5 @@ import { FormattedMessage, useIntl } from 'react-intl' -import { Link as ReactRouterLink } from 'react-router-dom' +import { Link as ReactRouterLink } from 'react-router' import { ExternalLinkIcon } from '@navikt/aksel-icons' import { BodyLong, Heading, HeadingProps, Link } from '@navikt/ds-react' diff --git a/src/components/GrunnlagForbehold/__tests__/__snapshots__/GrunnlagForbehold.test.tsx.snap b/src/components/GrunnlagForbehold/__tests__/__snapshots__/GrunnlagForbehold.test.tsx.snap index 0262a3fe7..506d54e09 100644 --- a/src/components/GrunnlagForbehold/__tests__/__snapshots__/GrunnlagForbehold.test.tsx.snap +++ b/src/components/GrunnlagForbehold/__tests__/__snapshots__/GrunnlagForbehold.test.tsx.snap @@ -16,6 +16,7 @@ exports[`GrunnlagForbehold > rendrer riktig 1`] = ` grunnlag.forbehold.ingress_1 diff --git a/src/components/LightBlueFooter/LightBlueFooter.tsx b/src/components/LightBlueFooter/LightBlueFooter.tsx index 066b14c45..7f27d416e 100644 --- a/src/components/LightBlueFooter/LightBlueFooter.tsx +++ b/src/components/LightBlueFooter/LightBlueFooter.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { Button, Modal } from '@navikt/ds-react' diff --git a/src/components/LightBlueFooter/__tests__/LightBlueFooter.test.tsx b/src/components/LightBlueFooter/__tests__/LightBlueFooter.test.tsx index d47ae5619..ea2d784f1 100644 --- a/src/components/LightBlueFooter/__tests__/LightBlueFooter.test.tsx +++ b/src/components/LightBlueFooter/__tests__/LightBlueFooter.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { LightBlueFooter } from '..' @@ -7,6 +5,15 @@ import { paths } from '@/router/constants' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { render, screen, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('LightBlueFooter', () => { it('rendrer med riktig tekst og knapper', () => { const { asFragment } = render() @@ -17,10 +24,6 @@ describe('LightBlueFooter', () => { describe('Gitt at brukeren klikker på knappen, åpnes det modalen og brukeren kan avbryte eller gå tilbake til start ved bekreftelse', async () => { it('Når brukeren bekrefter, nullstiller input fra brukeren og redirigerer til første steg av stegvisning', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const { store } = render(, { preloadedState: { diff --git a/src/components/Pensjonsavtaler/Pensjonsavtaler.tsx b/src/components/Pensjonsavtaler/Pensjonsavtaler.tsx index 3cdd1e656..24498dca1 100644 --- a/src/components/Pensjonsavtaler/Pensjonsavtaler.tsx +++ b/src/components/Pensjonsavtaler/Pensjonsavtaler.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { ExclamationmarkTriangleFillIcon, diff --git a/src/components/Pensjonsavtaler/__tests__/Pensjonsavtaler.test.tsx b/src/components/Pensjonsavtaler/__tests__/Pensjonsavtaler.test.tsx index e721a8bce..6b6dd66ad 100644 --- a/src/components/Pensjonsavtaler/__tests__/Pensjonsavtaler.test.tsx +++ b/src/components/Pensjonsavtaler/__tests__/Pensjonsavtaler.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { Pensjonsavtaler } from '../Pensjonsavtaler' @@ -13,6 +11,15 @@ import { } from '@/state/userInput/userInputReducer' import { render, screen, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('Pensjonsavtaler', () => { const currentSimulation: Simulation = { utenlandsperioder: [], @@ -32,10 +39,6 @@ describe('Pensjonsavtaler', () => { describe('Gitt at brukeren ikke har samtykket', () => { it('viser riktig header og melding med lenke tilbake til start, og skjuler ingress, tabell og info om offentlig tjenestepensjon', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const { store } = render(, { preloadedState: { diff --git a/src/components/SavnerDuNoe/SavnerDuNoe.tsx b/src/components/SavnerDuNoe/SavnerDuNoe.tsx index f7a799a11..0f210995d 100644 --- a/src/components/SavnerDuNoe/SavnerDuNoe.tsx +++ b/src/components/SavnerDuNoe/SavnerDuNoe.tsx @@ -1,5 +1,5 @@ import { FormattedMessage, useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { Button } from '@navikt/ds-react' import { BodyLong, Heading, HeadingProps } from '@navikt/ds-react' diff --git a/src/components/SavnerDuNoe/__tests__/SavnerDuNoe.test.tsx b/src/components/SavnerDuNoe/__tests__/SavnerDuNoe.test.tsx index b63d01820..ad510012c 100644 --- a/src/components/SavnerDuNoe/__tests__/SavnerDuNoe.test.tsx +++ b/src/components/SavnerDuNoe/__tests__/SavnerDuNoe.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { SavnerDuNoe } from '..' @@ -7,6 +5,15 @@ import { paths } from '@/router/constants' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { render, screen, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('SavnerDuNoe', () => { describe('Gitt at brukeren ikke har noe vedtak om alderspensjon', () => { it('Når showAvansert er true, rendrer med riktig tekst og knapper', () => { @@ -39,10 +46,7 @@ describe('SavnerDuNoe', () => { it('nullstiller input fra brukeren og redirigerer til avansert beregning når brukeren klikker på knappen', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render( , { diff --git a/src/components/TidligstMuligUttaksalder/TidligstMuligUttaksalder.tsx b/src/components/TidligstMuligUttaksalder/TidligstMuligUttaksalder.tsx index d26b9b67a..487ed87b7 100644 --- a/src/components/TidligstMuligUttaksalder/TidligstMuligUttaksalder.tsx +++ b/src/components/TidligstMuligUttaksalder/TidligstMuligUttaksalder.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { Alert, BodyLong, Link } from '@navikt/ds-react' diff --git a/src/components/TidligstMuligUttaksalder/__tests__/TidligstMuligUttaksalder.test.tsx b/src/components/TidligstMuligUttaksalder/__tests__/TidligstMuligUttaksalder.test.tsx index 588a76997..3a8b0d8c9 100644 --- a/src/components/TidligstMuligUttaksalder/__tests__/TidligstMuligUttaksalder.test.tsx +++ b/src/components/TidligstMuligUttaksalder/__tests__/TidligstMuligUttaksalder.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it } from 'vitest' import { TidligstMuligUttaksalder } from '..' @@ -9,6 +7,15 @@ import * as userInputReducerUtils from '@/state/userInput/userInputReducer' import { render, screen, waitFor, userEvent } from '@/test-utils' import { loggerTeardown } from '@/utils/__tests__/logging-stub' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('TidligstMuligUttaksalder', () => { afterEach(() => { loggerTeardown() @@ -257,10 +264,6 @@ describe('TidligstMuligUttaksalder', () => { userInputReducerUtils.userInputActions, 'flushCurrentSimulationUtenomUtenlandsperioder' ) - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const user = userEvent.setup() render( diff --git a/src/components/common/PageFramework/PageFramework.tsx b/src/components/common/PageFramework/PageFramework.tsx index 58a6b43a1..c87bc26d4 100644 --- a/src/components/common/PageFramework/PageFramework.tsx +++ b/src/components/common/PageFramework/PageFramework.tsx @@ -1,11 +1,12 @@ import React from 'react' import { useIntl } from 'react-intl' -import { useLocation, Await } from 'react-router-dom' +import { useLoaderData, useLocation } from 'react-router' +import { Await } from 'react-router' import { Loader } from '@/components/common/Loader' import { HOST_BASEURL } from '@/paths' import { LoginContext } from '@/router/loaders' -import { useDeferAuthenticationAccessData } from '@/router/loaders' +import { AuthenticationGuardLoader } from '@/router/loaders' import { CheckLoginOnFocus } from './CheckLoginOnFocus' import { FrameComponent } from './FrameComponent' @@ -46,44 +47,64 @@ export const PageFramework: React.FC<{ const { shouldRedirectNonAuthenticated = true, children, ...rest } = props const intl = useIntl() const { pathname } = useLocation() - const loaderData = useDeferAuthenticationAccessData() + + const { authResponse } = useLoaderData() as AuthenticationGuardLoader React.useEffect(() => { window.scrollTo(0, 0) }, [pathname]) return ( - <> - + + } + > + {/* Når det oppstår er en feil ved fetch: Hvis det er påkrevd å være + pålogget rediriger til login, hvis ikke "fails silently" og vis siden som + vanlig og sett isLoggedIn til false */} + + ) : ( + + {children && + React.cloneElement(children, { + context: { + isLoggedIn: false, + } satisfies LoginContext, + })} + + ) } > - - {(oauth2Query: Response) => { - return shouldRedirectNonAuthenticated && !oauth2Query.ok ? ( - - ) : ( - - - {children && - React.cloneElement(children, { - context: { - isLoggedIn: oauth2Query.ok, - } satisfies LoginContext, - })} - - - ) - }} - - - + {(resp: Response) => { + return shouldRedirectNonAuthenticated && !resp.ok ? ( + + ) : ( + + + {children && + React.cloneElement(children, { + context: { + isLoggedIn: resp.ok, + } satisfies LoginContext, + })} + + + ) + }} + + ) } + +export default PageFramework diff --git a/src/components/common/PageFramework/__tests__/PageFramework.test.tsx b/src/components/common/PageFramework/__tests__/PageFramework.test.tsx index 8c9d1bc4f..f1d418321 100644 --- a/src/components/common/PageFramework/__tests__/PageFramework.test.tsx +++ b/src/components/common/PageFramework/__tests__/PageFramework.test.tsx @@ -1,8 +1,8 @@ -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { describe, it, vi } from 'vitest' -import { PageFramework } from '..' +import { PageFramework } from '../PageFramework' import { mockErrorResponse } from '@/mocks/server' import { HOST_BASEURL } from '@/paths' import { render, screen, userEvent, waitFor } from '@/test-utils' diff --git a/src/components/stegvisning/AFP/AFP.tsx b/src/components/stegvisning/AFP/AFP.tsx index a3a8c9e19..d697dbc00 100644 --- a/src/components/stegvisning/AFP/AFP.tsx +++ b/src/components/stegvisning/AFP/AFP.tsx @@ -1,7 +1,7 @@ import { FormEvent } from 'react' import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { Alert, diff --git a/src/components/stegvisning/AFP/__tests__/AFP.test.tsx b/src/components/stegvisning/AFP/__tests__/AFP.test.tsx index fc42059d3..42cda78c4 100644 --- a/src/components/stegvisning/AFP/__tests__/AFP.test.tsx +++ b/src/components/stegvisning/AFP/__tests__/AFP.test.tsx @@ -1,20 +1,23 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { AFP } from '..' import { screen, render, waitFor, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('stegvisning - AFP', () => { const onCancelMock = vi.fn() const onPreviousMock = vi.fn() const onNextMock = vi.fn() it('kaller navigate når shouldRedirectTo er angitt', async () => { - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const randomPath = '/random-path' render( diff --git a/src/components/stegvisning/Sivilstand/Sivilstand.tsx b/src/components/stegvisning/Sivilstand/Sivilstand.tsx index 0d00dfe94..08822ae3c 100644 --- a/src/components/stegvisning/Sivilstand/Sivilstand.tsx +++ b/src/components/stegvisning/Sivilstand/Sivilstand.tsx @@ -1,7 +1,7 @@ import React from 'react' import { FormEvent, useMemo, useState } from 'react' import { FormattedMessage, useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { BodyLong, Button, Heading, Radio, RadioGroup } from '@navikt/ds-react' diff --git a/src/components/stegvisning/Sivilstand/__tests__/Sivilstand.test.tsx b/src/components/stegvisning/Sivilstand/__tests__/Sivilstand.test.tsx index 96f543478..19b7c8a2b 100644 --- a/src/components/stegvisning/Sivilstand/__tests__/Sivilstand.test.tsx +++ b/src/components/stegvisning/Sivilstand/__tests__/Sivilstand.test.tsx @@ -1,11 +1,18 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { Sivilstand } from '..' import { RootState } from '@/state/store' import { screen, render, waitFor, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('stegvisning - Sivilstand', () => { const onCancelMock = vi.fn() const onPreviousMock = vi.fn() @@ -36,10 +43,6 @@ describe('stegvisning - Sivilstand', () => { }) it('kaller navigate når shouldRedirectTo er angitt', async () => { - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const randomPath = '/random-path' render( diff --git a/src/components/stegvisning/Start/Start.tsx b/src/components/stegvisning/Start/Start.tsx index c52ae9aa1..476e615d1 100644 --- a/src/components/stegvisning/Start/Start.tsx +++ b/src/components/stegvisning/Start/Start.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useIntl, FormattedMessage } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { ExternalLinkIcon } from '@navikt/aksel-icons' import { BodyLong, Button, Heading, Link } from '@navikt/ds-react' @@ -9,7 +9,6 @@ import FridaPortrett from '../../../assets/frida.svg' import { Card } from '@/components/common/Card' import { InfoOmFremtidigVedtak } from '@/components/InfoOmFremtidigVedtak' import { externalUrls } from '@/router/constants' - import { isLoependeVedtakEndring } from '@/utils/loependeVedtak' import { logOpenLink, wrapLogger } from '@/utils/logging' import { getFormatMessageValues } from '@/utils/translations' diff --git a/src/components/stegvisning/Start/__tests__/Start.test.tsx b/src/components/stegvisning/Start/__tests__/Start.test.tsx index fda996f14..d8f95274a 100644 --- a/src/components/stegvisning/Start/__tests__/Start.test.tsx +++ b/src/components/stegvisning/Start/__tests__/Start.test.tsx @@ -1,10 +1,17 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { Start } from '..' import { render, screen, waitFor, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('stegvisning - Start', () => { const onCancelMock = vi.fn() const onNextMock = vi.fn() @@ -17,10 +24,6 @@ describe('stegvisning - Start', () => { } it('kaller navigate når shouldRedirectTo er angitt', async () => { - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const randomPath = '/random-path' render( diff --git a/src/components/stegvisning/__tests__/stegvisning-hooks.test.tsx b/src/components/stegvisning/__tests__/stegvisning-hooks.test.tsx index ba8649883..4722d61b6 100644 --- a/src/components/stegvisning/__tests__/stegvisning-hooks.test.tsx +++ b/src/components/stegvisning/__tests__/stegvisning-hooks.test.tsx @@ -1,5 +1,4 @@ import { Provider } from 'react-redux' -import * as ReactRouterUtils from 'react-router' import { RootState, setupStore } from '../../../state/store' import { useStegvisningNavigation } from '../stegvisning-hooks' @@ -12,6 +11,15 @@ import { userInputInitialState } from '@/state/userInput/userInputReducer' import * as userInputReducerUtils from '@/state/userInput/userInputReducer' import { renderHook } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('stegvisning - hooks', () => { describe('useStegvisningNavigation', () => { describe('Gitt at brukeren ikke har noe vedtak om alderspensjon eller AFP', () => { @@ -20,10 +28,6 @@ describe('stegvisning - hooks', () => { userInputReducerUtils.userInputActions, 'flush' ) - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const mockedState = { api: { @@ -68,10 +72,6 @@ describe('stegvisning - hooks', () => { userInputReducerUtils.userInputActions, 'flush' ) - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const mockedState = { api: { diff --git a/src/components/stegvisning/stegvisning-hooks.tsx b/src/components/stegvisning/stegvisning-hooks.tsx index 6265a7048..e75bcd23a 100644 --- a/src/components/stegvisning/stegvisning-hooks.tsx +++ b/src/components/stegvisning/stegvisning-hooks.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { paths, diff --git a/src/main.tsx b/src/main.tsx index 0e00e90eb..959337122 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Provider } from 'react-redux' -import { createBrowserRouter, RouterProvider } from 'react-router-dom' +import { createBrowserRouter, RouterProvider } from 'react-router' import ReactDOM from 'react-dom/client' @@ -33,6 +33,10 @@ if (process.env.NODE_ENV === 'development') { const router = createBrowserRouter(routes, { basename: BASE_PATH, + future: { + v7_fetcherPersist: true, + v7_normalizeFormMethod: true, + }, }) initializeLogs() diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index f02e9ef11..f2e3097a9 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -20,7 +20,10 @@ const TEST_DELAY = process.env.NODE_ENV === 'test' ? 0 : 30 export const getHandlers = (baseUrl: string = API_PATH) => [ http.get(`${HOST_BASEURL}/oauth2/session`, async () => { await delay(1500) - return HttpResponse.json({ data: 'OK' }) + return HttpResponse.json({ + session: { active: true, created_at: 'lorem', ends_in_seconds: 21592 }, + tokens: { expire_at: 'lorem', expire_in_seconds: 3592 }, + }) }), http.get(`${baseUrl}/inntekt`, async () => { diff --git a/src/mocks/mockedRTKQueryApiCalls.ts b/src/mocks/mockedRTKQueryApiCalls.ts index 8f89290a9..efdf6071f 100644 --- a/src/mocks/mockedRTKQueryApiCalls.ts +++ b/src/mocks/mockedRTKQueryApiCalls.ts @@ -418,3 +418,16 @@ export const rejectedGetOmstillingsstoenadOgGjenlevende = { }, }, } + +export const rejectedGetLoependeVedtak = { + ['getLoependeVedtak(undefined)']: { + status: 'rejected', + endpointName: 'getLoependeVedtak', + requestId: 'aVfT2Ly4YtGoIOvDdZfmG', + startedTimeStamp: 1714725265404, + error: { + status: 'FETCH_ERROR', + error: 'TypeError: Failed to fetch', + }, + }, +} diff --git a/src/pages/Beregning/Beregning.tsx b/src/pages/Beregning/Beregning.tsx index 8e2263f15..8c2a6f767 100644 --- a/src/pages/Beregning/Beregning.tsx +++ b/src/pages/Beregning/Beregning.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { Button, Modal, ToggleGroup } from '@navikt/ds-react' diff --git a/src/pages/Beregning/BeregningAvansert.tsx b/src/pages/Beregning/BeregningAvansert.tsx index 768a01504..5c318edba 100644 --- a/src/pages/Beregning/BeregningAvansert.tsx +++ b/src/pages/Beregning/BeregningAvansert.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FormattedMessage } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { PencilIcon } from '@navikt/aksel-icons' import { Button, Heading } from '@navikt/ds-react' diff --git a/src/pages/Beregning/BeregningEnkel.tsx b/src/pages/Beregning/BeregningEnkel.tsx index 3c7550756..3978b7efb 100644 --- a/src/pages/Beregning/BeregningEnkel.tsx +++ b/src/pages/Beregning/BeregningEnkel.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { Alert, Heading } from '@navikt/ds-react' import { FetchBaseQueryError } from '@reduxjs/toolkit/query' diff --git a/src/pages/Beregning/__tests__/Beregning.test.tsx b/src/pages/Beregning/__tests__/Beregning.test.tsx index c215bfadb..9b0edcece 100644 --- a/src/pages/Beregning/__tests__/Beregning.test.tsx +++ b/src/pages/Beregning/__tests__/Beregning.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, expect, it, vi } from 'vitest' import { Beregning } from '../Beregning' @@ -18,6 +16,15 @@ import * as userInputReducerUtils from '@/state/userInput/userInputReducer' import { fireEvent, render, screen, userEvent, waitFor } from '@/test-utils' const previousWindow = window +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('Beregning', () => { const preloadedQueries = { api: { @@ -182,10 +189,6 @@ describe('Beregning', () => { }) it('når brukeren begynner å fylle ut skjema på Avansert og bytter fane, gir Modalen muligheten til å avbryte eller avslutte beregningen', async () => { - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const user = userEvent.setup() const flushCurrentSimulationMock = vi.spyOn( userInputReducerUtils.userInputActions, @@ -509,10 +512,6 @@ describe('Beregning', () => { }) it('når brukeren med vedtak om alderspensjon er på resultatside etter en Avansert simulering og trykker på tilbakeknappen, vises Avbryt-Modalen og brukeren sendes til /start ved bekreftelse', async () => { - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const user = userEvent.setup() const flushCurrentSimulationMock = vi.spyOn( userInputReducerUtils.userInputActions, diff --git a/src/pages/Beregning/__tests__/BeregningAvansert.test.tsx b/src/pages/Beregning/__tests__/BeregningAvansert.test.tsx index 15461e6d5..de24f9d8a 100644 --- a/src/pages/Beregning/__tests__/BeregningAvansert.test.tsx +++ b/src/pages/Beregning/__tests__/BeregningAvansert.test.tsx @@ -1,5 +1,4 @@ -import * as ReactRouterUtils from 'react-router' -import { createMemoryRouter, RouterProvider } from 'react-router-dom' +import { createMemoryRouter, RouterProvider } from 'react-router' import { describe, expect, it, vi } from 'vitest' @@ -27,6 +26,15 @@ import { UserInputState } from '@/state/userInput/userInputReducer' import { fireEvent, render, screen, userEvent, waitFor } from '@/test-utils' import * as loggerUtils from '@/utils/logging' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('BeregningAvansert', () => { const contextMockedValues = { avansertSkjemaModus: 'resultat' as AvansertBeregningModus, @@ -645,11 +653,6 @@ describe('BeregningAvansert', () => { }) it('Når simulering svarer med errorcode 503, vises ErrorPageUnexpected ', async () => { - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) - // Må bruke mockResponse for å få riktig status (mockErrorResponse returnerer "originalStatus") mockResponse('/v7/alderspensjon/simulering', { status: 503, diff --git a/src/pages/Beregning/__tests__/BeregningEnkel.test.tsx b/src/pages/Beregning/__tests__/BeregningEnkel.test.tsx index 227dc7b34..e38dc552f 100644 --- a/src/pages/Beregning/__tests__/BeregningEnkel.test.tsx +++ b/src/pages/Beregning/__tests__/BeregningEnkel.test.tsx @@ -1,5 +1,4 @@ -import * as ReactRouterUtils from 'react-router' -import { createMemoryRouter, RouterProvider } from 'react-router-dom' +import { createMemoryRouter, RouterProvider } from 'react-router' import { describe, expect, it, vi } from 'vitest' @@ -21,6 +20,15 @@ import * as apiSliceUtils from '@/state/api/apiSlice' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { render, screen, userEvent, waitFor } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('BeregningEnkel', () => { describe('Gitt at en bruker ikke mottar uføretrygd', () => { it('kalles endepunktet for tidligst mulig uttaksalder med riktig request body', async () => { @@ -735,11 +743,6 @@ describe('BeregningEnkel', () => { }) it('viser ErrorPageUnexpected når simulering svarer med errorcode 503', async () => { - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) - const user = userEvent.setup() // Må bruke mockResponse for å få riktig status (mockErrorResponse returnerer "originalStatus") mockResponse('/v7/alderspensjon/simulering', { diff --git a/src/pages/Henvisning/Henvisning.tsx b/src/pages/Henvisning/Henvisning.tsx index a105eae4d..2cdf337df 100644 --- a/src/pages/Henvisning/Henvisning.tsx +++ b/src/pages/Henvisning/Henvisning.tsx @@ -1,6 +1,7 @@ import React from 'react' import { useIntl } from 'react-intl' -import { useNavigate, useParams } from 'react-router-dom' +import { useParams } from 'react-router' +import { useNavigate } from 'react-router' import { Card } from '../../components/common/Card' import { externalUrls, paths, henvisningUrlParams } from '@/router/constants' diff --git a/src/pages/Henvisning/__tests__/Henvisning.test.tsx b/src/pages/Henvisning/__tests__/Henvisning.test.tsx index c071350bf..7deab07ad 100644 --- a/src/pages/Henvisning/__tests__/Henvisning.test.tsx +++ b/src/pages/Henvisning/__tests__/Henvisning.test.tsx @@ -1,5 +1,4 @@ -import * as ReactRouterUtils from 'react-router' -import { createMemoryRouter, RouterProvider } from 'react-router-dom' +import { createMemoryRouter, RouterProvider } from 'react-router' import { describe, it, vi } from 'vitest' @@ -15,12 +14,14 @@ import * as userInputReducerUtils from '@/state/userInput/userInputReducer' import { render, screen, userEvent } from '@/test-utils' const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) describe('Henvisning ', async () => { - beforeEach(() => { - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) - }) afterEach(() => { navigateMock.mockReset() }) diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index ef746ff1f..01b39d96f 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -1,6 +1,11 @@ import React from 'react' import { FormattedMessage, useIntl } from 'react-intl' -import { Await, useNavigate, useOutletContext } from 'react-router-dom' +import { + Await, + useLoaderData, + useNavigate, + useOutletContext, +} from 'react-router' import { ExternalLinkIcon } from '@navikt/aksel-icons' import { @@ -14,7 +19,7 @@ import { import { Loader } from '@/components/common/Loader' import { externalUrls, paths } from '@/router/constants' -import { LoginContext, useLandingPageAccessData } from '@/router/loaders' +import { LoginContext, LandingPageAccessGuardLoader } from '@/router/loaders' import { logOpenLink, wrapLogger } from '@/utils/logging' import styles from './LandingPage.module.scss' @@ -23,7 +28,7 @@ export const LandingPage = () => { const intl = useIntl() const { isLoggedIn } = useOutletContext() - const loaderData = useLandingPageAccessData() + const { shouldRedirectTo } = useLoaderData() as LandingPageAccessGuardLoader const navigate = useNavigate() React.useEffect(() => { @@ -60,16 +65,14 @@ export const LandingPage = () => { id: 'landingsside.button.enkel_kalkulator_utlogget', }) - const TopSection: React.FC<{ shouldRedirectTo?: string }> = ({ - shouldRedirectTo, - }) => { + const TopSection: React.FC<{ navigateTo?: string }> = ({ navigateTo }) => { React.useEffect(() => { - if (shouldRedirectTo) { - navigate(shouldRedirectTo) + if (navigateTo) { + navigate(navigateTo) } - }, [shouldRedirectTo]) + }, [navigateTo]) - if (shouldRedirectTo) { + if (navigateTo) { return null } @@ -177,14 +180,16 @@ export const LandingPage = () => { /> } > - - {(shouldRedirectTo: string) => ( -
- - - -
- )} + + {(resp: string) => { + return ( +
+ + + +
+ ) + }}
) : ( diff --git a/src/pages/LandingPage/__tests__/LandingPage.test.tsx b/src/pages/LandingPage/__tests__/LandingPage.test.tsx index 190113dab..9ef0bd426 100644 --- a/src/pages/LandingPage/__tests__/LandingPage.test.tsx +++ b/src/pages/LandingPage/__tests__/LandingPage.test.tsx @@ -1,5 +1,4 @@ -import * as ReactRouterUtils from 'react-router' -import { createMemoryRouter, RouterProvider } from 'react-router-dom' +import { createMemoryRouter, RouterProvider } from 'react-router' import { describe, it, vi } from 'vitest' @@ -13,6 +12,15 @@ import { render, screen, userEvent, waitFor } from '@/test-utils' const initialGetState = store.getState +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('LandingPage', () => { afterEach(() => { vi.clearAllMocks() @@ -112,10 +120,6 @@ describe('LandingPage', () => { }) const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const open = vi.fn() vi.stubGlobal('open', open) diff --git a/src/pages/LandingPage/__tests__/__snapshots__/LandingPage.test.tsx.snap b/src/pages/LandingPage/__tests__/__snapshots__/LandingPage.test.tsx.snap index 40a915f6a..c28dc545c 100644 --- a/src/pages/LandingPage/__tests__/__snapshots__/LandingPage.test.tsx.snap +++ b/src/pages/LandingPage/__tests__/__snapshots__/LandingPage.test.tsx.snap @@ -111,7 +111,7 @@ exports[`LandingPage > rendrer innlogget side 1`] = ` > landingsside.link.personopplysninger rendrer innlogget side 1`] = ` xmlns="http://www.w3.org/2000/svg" > application.global.external_link @@ -277,7 +277,7 @@ exports[`LandingPage > rendrer utlogget side 1`] = ` > landingsside.link.personopplysninger rendrer utlogget side 1`] = ` xmlns="http://www.w3.org/2000/svg" > application.global.external_link diff --git a/src/pages/StepAFP/StepAFP.tsx b/src/pages/StepAFP/StepAFP.tsx index d49e624b7..3e44e906f 100644 --- a/src/pages/StepAFP/StepAFP.tsx +++ b/src/pages/StepAFP/StepAFP.tsx @@ -1,12 +1,12 @@ import React from 'react' import { useIntl } from 'react-intl' -import { Await } from 'react-router-dom' +import { Await, useLoaderData } from 'react-router' import { Loader } from '@/components/common/Loader' import { AFP } from '@/components/stegvisning/AFP' import { useStegvisningNavigation } from '@/components/stegvisning/stegvisning-hooks' import { paths } from '@/router/constants' -import { useStepAFPAccessData } from '@/router/loaders' +import { StepAFPAccessGuardLoader } from '@/router/loaders' import { useAppDispatch, useAppSelector } from '@/state/hooks' import { selectAfp, selectIsVeileder } from '@/state/userInput/selectors' import { userInputActions } from '@/state/userInput/userInputReducer' @@ -14,7 +14,7 @@ import { userInputActions } from '@/state/userInput/userInputReducer' export function StepAFP() { const intl = useIntl() const dispatch = useAppDispatch() - const loaderData = useStepAFPAccessData() + const { shouldRedirectTo } = useLoaderData() as StepAFPAccessGuardLoader const previousAfp = useAppSelector(selectAfp) const isVeileder = useAppSelector(selectIsVeileder) @@ -47,11 +47,11 @@ export function StepAFP() { } > - - {(shouldRedirectTo: string) => { + + {(resp: string) => { return ( { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('StepAFP', () => { beforeEach(() => { store.getState = vi.fn().mockImplementation(() => ({ @@ -94,10 +102,6 @@ describe('StepAFP', () => { ) const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const router = createMemoryRouter(routes, { basename: BASE_PATH, initialEntries: [`${BASE_PATH}${paths.afp}`], @@ -124,10 +128,7 @@ describe('StepAFP', () => { it('navigerer tilbake når brukeren klikker på Tilbake', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const router = createMemoryRouter(routes, { basename: BASE_PATH, initialEntries: [`${BASE_PATH}${paths.afp}`], diff --git a/src/pages/StepFeil/__tests__/StepFeil.test.tsx b/src/pages/StepFeil/__tests__/StepFeil.test.tsx index a52fd450c..4c5fbef73 100644 --- a/src/pages/StepFeil/__tests__/StepFeil.test.tsx +++ b/src/pages/StepFeil/__tests__/StepFeil.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { StepFeil } from '..' @@ -7,6 +5,15 @@ import { paths } from '@/router/constants' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { screen, render, userEvent, waitFor } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('Step Feil', () => { it('har riktig sidetittel', () => { render() @@ -24,10 +31,7 @@ describe('Step Feil', () => { it('redirigerer til landingssiden når brukeren klikker på knappen', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render(, { preloadedState: { userInput: { diff --git a/src/pages/StepSamtykkeOffentligAFP/__tests__/StepSamtykkeOffentligAFP.test.tsx b/src/pages/StepSamtykkeOffentligAFP/__tests__/StepSamtykkeOffentligAFP.test.tsx index 38fada392..3054984ad 100644 --- a/src/pages/StepSamtykkeOffentligAFP/__tests__/StepSamtykkeOffentligAFP.test.tsx +++ b/src/pages/StepSamtykkeOffentligAFP/__tests__/StepSamtykkeOffentligAFP.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { StepSamtykkeOffentligAFP } from '..' @@ -8,6 +6,15 @@ import { paths } from '@/router/constants' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { screen, render, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('StepSamtykkeOffentligAFP', () => { it('har riktig sidetittel', () => { render() @@ -19,10 +26,7 @@ describe('StepSamtykkeOffentligAFP', () => { describe('Gitt at brukeren svarer Ja på spørsmål om samtykke til beregning av offentlig AFP', async () => { it('registrerer samtykke og navigerer videre til riktig side når brukeren klikker på Neste', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render(, { preloadedState: { api: { @@ -46,10 +50,7 @@ describe('StepSamtykkeOffentligAFP', () => { describe('Gitt at brukeren svarer Nei på spørsmål om samtykke til beregning av offentlig AFP', async () => { it('registrerer samtykke og navigerer videre til riktig side når brukeren klikker på Neste', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render(, { preloadedState: { api: { @@ -72,10 +73,7 @@ describe('StepSamtykkeOffentligAFP', () => { it('nullstiller input fra brukeren og navigerer tilbake når brukeren klikker på Tilbake', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render(, { preloadedState: { userInput: { ...userInputInitialState, samtykkeOffentligAFP: null }, diff --git a/src/pages/StepSamtykkePensjonsavtaler/StepSamtykkePensjonsavtaler.tsx b/src/pages/StepSamtykkePensjonsavtaler/StepSamtykkePensjonsavtaler.tsx index f6a478e08..faae862ff 100644 --- a/src/pages/StepSamtykkePensjonsavtaler/StepSamtykkePensjonsavtaler.tsx +++ b/src/pages/StepSamtykkePensjonsavtaler/StepSamtykkePensjonsavtaler.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { SamtykkePensjonsavtaler } from '@/components/stegvisning/SamtykkePensjonsavtaler' import { useStegvisningNavigation } from '@/components/stegvisning/stegvisning-hooks' diff --git a/src/pages/StepSamtykkePensjonsavtaler/__tests__/StepSamtykkePensjonsavtaler.test.tsx b/src/pages/StepSamtykkePensjonsavtaler/__tests__/StepSamtykkePensjonsavtaler.test.tsx index 5a049eda8..912ad98c1 100644 --- a/src/pages/StepSamtykkePensjonsavtaler/__tests__/StepSamtykkePensjonsavtaler.test.tsx +++ b/src/pages/StepSamtykkePensjonsavtaler/__tests__/StepSamtykkePensjonsavtaler.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { StepSamtykkePensjonsavtaler } from '..' @@ -15,6 +13,15 @@ import { selectHarHentetTpoMedlemskap } from '@/state/userInput/selectors' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { screen, render, userEvent, waitFor } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('StepSamtykkePensjonsavtaler', () => { it('har riktig sidetittel', async () => { render() @@ -25,11 +32,6 @@ describe('StepSamtykkePensjonsavtaler', () => { it('registrerer samtykke og navigerer videre til riktig side når brukeren klikker på Neste', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) - const { store } = render(, { preloadedState: { api: { @@ -56,10 +58,6 @@ describe('StepSamtykkePensjonsavtaler', () => { apiSliceUtils.apiSlice.util.invalidateTags, 'match' ) - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const user = userEvent.setup() @@ -102,11 +100,6 @@ describe('StepSamtykkePensjonsavtaler', () => { it('nullstiller input fra brukeren og navigerer et hakk tilbake.', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) - const { store } = render(, { preloadedState: { userInput: { ...userInputInitialState, afp: 'ja_offentlig' }, @@ -125,11 +118,6 @@ describe('StepSamtykkePensjonsavtaler', () => { it('nullstiller input fra brukeren og navigerer to hakk tilbake dersom brukeren har uføretrygd og er fylt minimum uttaksalder', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) - const { store } = render(, { preloadedState: { api: { diff --git a/src/pages/StepSivilstand/StepSivilstand.tsx b/src/pages/StepSivilstand/StepSivilstand.tsx index fea0f6708..5e978a23f 100644 --- a/src/pages/StepSivilstand/StepSivilstand.tsx +++ b/src/pages/StepSivilstand/StepSivilstand.tsx @@ -1,12 +1,12 @@ import React from 'react' import { useIntl } from 'react-intl' -import { Await } from 'react-router-dom' +import { Await, useLoaderData } from 'react-router' import { Loader } from '@/components/common/Loader' import { Sivilstand } from '@/components/stegvisning/Sivilstand' import { useStegvisningNavigation } from '@/components/stegvisning/stegvisning-hooks' import { paths } from '@/router/constants' -import { useStepSivilstandAccessData } from '@/router/loaders' +import { StepSivilstandAccessGuardLoader } from '@/router/loaders' import { useAppDispatch, useAppSelector } from '@/state/hooks' import { selectIsVeileder, @@ -18,7 +18,9 @@ export function StepSivilstand() { const intl = useIntl() const dispatch = useAppDispatch() - const loaderData = useStepSivilstandAccessData() + + const { getPersonQuery, shouldRedirectTo } = + useLoaderData() as StepSivilstandAccessGuardLoader const isVeileder = useAppSelector(selectIsVeileder) const samboerSvar = useAppSelector(selectSamboerFraBrukerInput) @@ -51,20 +53,12 @@ export function StepSivilstand() { } > - - {(queries: [GetPersonQuery, string]) => { - const getPersonQuery = queries[0] - const shouldRedirectTo = queries[1] - + + {(resp: [GetPersonQuery, string]) => { return ( { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('StepSivilstand', () => { beforeEach(() => { store.getState = vi.fn().mockImplementation(() => ({ @@ -71,14 +79,10 @@ describe('StepSivilstand', () => { it('registrerer sivilstand og navigerer videre til neste steg når brukeren svarer og klikker på Neste', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() const setSamboerMock = vi.spyOn( userInputReducerUtils.userInputActions, 'setSamboer' ) - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const router = createMemoryRouter(routes, { basename: BASE_PATH, initialEntries: [`${BASE_PATH}${paths.sivilstand}`], @@ -105,10 +109,6 @@ describe('StepSivilstand', () => { it('nullstiller input fra brukeren og navigerer tilbake når brukeren klikker på Tilbake', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) const router = createMemoryRouter(routes, { basename: BASE_PATH, initialEntries: [`${BASE_PATH}${paths.sivilstand}`], diff --git a/src/pages/StepStart/StepStart.tsx b/src/pages/StepStart/StepStart.tsx index 7197303c4..52eb262e0 100644 --- a/src/pages/StepStart/StepStart.tsx +++ b/src/pages/StepStart/StepStart.tsx @@ -1,19 +1,20 @@ import React from 'react' import { useIntl } from 'react-intl' -import { Await } from 'react-router-dom' +import { Await, useLoaderData } from 'react-router' import { Loader } from '@/components/common/Loader' import { Start } from '@/components/stegvisning/Start' import { useStegvisningNavigation } from '@/components/stegvisning/stegvisning-hooks' import { paths } from '@/router/constants' -import { useStepStartAccessData } from '@/router/loaders' +import { StepStartAccessGuardLoader } from '@/router/loaders' import { useAppSelector } from '@/state/hooks' import { selectIsVeileder } from '@/state/userInput/selectors' export function StepStart() { const intl = useIntl() - const loaderData = useStepStartAccessData() + const { getPersonQuery, getLoependeVedtakQuery, shouldRedirectTo } = + useLoaderData() as StepStartAccessGuardLoader const [{ onStegvisningNext, onStegvisningCancel }] = useStegvisningNavigation( paths.start @@ -42,27 +43,27 @@ export function StepStart() { > - {(queries: [GetPersonQuery, GetLoependeVedtakQuery, string]) => { - const getPersonQuery = queries[0] - const getVedtakQuery = queries[1] - const shouldRedirectTo = queries[2] - + {({ + 0: getPersonQueryResponse, + 1: getLoependeVedtakQueryResponse, + 2: shouldRedirectToResponse, + }: [GetPersonQuery, GetLoependeVedtakQuery, string]) => { return ( ) }} diff --git a/src/pages/StepStart/__tests__/StepStart.test.tsx b/src/pages/StepStart/__tests__/StepStart.test.tsx index e145e7d0b..05c993a24 100644 --- a/src/pages/StepStart/__tests__/StepStart.test.tsx +++ b/src/pages/StepStart/__tests__/StepStart.test.tsx @@ -1,9 +1,13 @@ -import * as ReactRouterUtils from 'react-router' -import { createMemoryRouter, RouterProvider } from 'react-router-dom' +import { createMemoryRouter, RouterProvider } from 'react-router' import { describe, it, vi } from 'vitest' -import { fulfilledGetLoependeVedtak0Ufoeregrad } from '@/mocks/mockedRTKQueryApiCalls' +import { + rejectedGetPerson, + fulfilledGetLoependeVedtak0Ufoeregrad, + fulfilledGetPerson, + rejectedGetLoependeVedtak, +} from '@/mocks/mockedRTKQueryApiCalls' import { mockResponse, mockErrorResponse } from '@/mocks/server' import { BASE_PATH, paths } from '@/router/constants' import { routes } from '@/router/routes' @@ -14,6 +18,15 @@ import { userEvent, render, screen, waitFor } from '@/test-utils' const initialGetState = store.getState +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('StepStart', () => { afterEach(() => { store.dispatch(apiSliceUtils.apiSlice.util.resetApiState()) @@ -60,20 +73,40 @@ describe('StepStart', () => { expect(screen.getByText('stegvisning.start.title Aprikos!')).toBeVisible() }) - it('rendrer ikke siden når henting av personopplysninger feiler', async () => { + it('rendrer ikke siden når henting av personopplysninger feiler og redirigerer til /uventet-feil', async () => { mockErrorResponse('/v2/person') + const mockedState = { + api: { + queries: { + ...rejectedGetPerson, + ...fulfilledGetLoependeVedtak0Ufoeregrad, + }, + }, + userInput: { ...userInputInitialState, samtykke: null }, + } + store.getState = vi.fn().mockImplementation(() => { + return mockedState + }) + const router = createMemoryRouter(routes, { basename: BASE_PATH, initialEntries: [`${BASE_PATH}${paths.start}`], }) render(, { + // @ts-ignore + preloadedState: { + ...mockedState, + }, hasRouter: false, }) - await waitFor(() => { - expect(screen.getByText('error.global.title')).toBeVisible() + + await waitFor(async () => { + expect(await screen.findByText('pageframework.title')).toBeVisible() }) + expect(navigateMock).toHaveBeenCalledWith(paths.uventetFeil) }) }) + describe('Gitt at brukeren har et vedtak om alderspensjon eller AFP', () => { it('viser informasjon om dagens alderspensjon og AFP i tillegg til hilsen med navnet til brukeren', async () => { mockResponse('/v2/vedtak/loepende-vedtak', { @@ -108,27 +141,44 @@ describe('StepStart', () => { }) }) - it('rendrer ikke siden når henting av loepende-vedtak feiler', async () => { + it('rendrer ikke siden når henting av loepende vedtak feiler og redirigerer til /uventet-feil', async () => { mockErrorResponse('/v2/vedtak/loepende-vedtak') + const mockedState = { + api: { + queries: { + ...fulfilledGetPerson, + ...rejectedGetLoependeVedtak, + }, + }, + userInput: { ...userInputInitialState, samtykke: null }, + } + store.getState = vi.fn().mockImplementation(() => { + return mockedState + }) + const router = createMemoryRouter(routes, { basename: BASE_PATH, initialEntries: [`${BASE_PATH}${paths.start}`], }) render(, { + // @ts-ignore + preloadedState: { + ...mockedState, + }, hasRouter: false, }) - await waitFor(() => { - expect(screen.getByText('error.global.title')).toBeVisible() + + await waitFor(async () => { + expect(await screen.findByText('pageframework.title')).toBeVisible() }) + + expect(navigateMock).toHaveBeenCalledWith(paths.uventetFeil) }) }) it('sender videre til neste steg når brukeren klikker på Neste', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const router = createMemoryRouter(routes, { basename: BASE_PATH, initialEntries: [`${BASE_PATH}${paths.start}`], diff --git a/src/pages/StepUfoeretrygdAFP/__tests__/StepUfoeretrygdAFP.test.tsx b/src/pages/StepUfoeretrygdAFP/__tests__/StepUfoeretrygdAFP.test.tsx index 3daffbc25..3eedcb63a 100644 --- a/src/pages/StepUfoeretrygdAFP/__tests__/StepUfoeretrygdAFP.test.tsx +++ b/src/pages/StepUfoeretrygdAFP/__tests__/StepUfoeretrygdAFP.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { StepUfoeretrygdAFP } from '..' @@ -8,6 +6,15 @@ import { paths } from '@/router/constants' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { screen, render, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('StepUfoeretrygdAFP', () => { it('har riktig sidetittel', () => { render() @@ -16,10 +23,7 @@ describe('StepUfoeretrygdAFP', () => { it('sender til neste steg når brukeren klikker på Neste', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + render(, { preloadedState: { api: { @@ -37,10 +41,6 @@ describe('StepUfoeretrygdAFP', () => { it('navigerer tilbake når brukeren klikker på Tilbake', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) render() await user.click(await screen.findByText('stegvisning.tilbake')) expect(navigateMock).toHaveBeenCalledWith(-1) diff --git a/src/pages/StepUtenlandsopphold/StepUtenlandsopphold.tsx b/src/pages/StepUtenlandsopphold/StepUtenlandsopphold.tsx index 2eeceb893..bb9fd54a0 100644 --- a/src/pages/StepUtenlandsopphold/StepUtenlandsopphold.tsx +++ b/src/pages/StepUtenlandsopphold/StepUtenlandsopphold.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useIntl } from 'react-intl' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { useStegvisningNavigation } from '@/components/stegvisning/stegvisning-hooks' import { Utenlandsopphold } from '@/components/stegvisning/Utenlandsopphold' diff --git a/src/pages/StepUtenlandsopphold/__tests__/StepUtenlandsopphold.test.tsx b/src/pages/StepUtenlandsopphold/__tests__/StepUtenlandsopphold.test.tsx index 46db70ca8..cf95e316e 100644 --- a/src/pages/StepUtenlandsopphold/__tests__/StepUtenlandsopphold.test.tsx +++ b/src/pages/StepUtenlandsopphold/__tests__/StepUtenlandsopphold.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { StepUtenlandsopphold } from '..' @@ -10,6 +8,15 @@ import { apiSlice } from '@/state/api/apiSlice' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { screen, render, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('StepUtenlandsopphold', () => { it('har riktig sidetittel', () => { render() @@ -20,10 +27,7 @@ describe('StepUtenlandsopphold', () => { it('Når brukeren svarer ja på utenlandsopphold, registreres det svaret og brukeren kan gå til neste steg når hen klikker på Neste', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render(, { preloadedState: { api: { @@ -46,10 +50,7 @@ describe('StepUtenlandsopphold', () => { it('Når brukeren svarer nei på utenlandsopphold, registreres det svaret, slettes utenlandsoppholdene og brukeren er sendt videre til riktig side når hen klikker på Neste', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render(, { preloadedState: { api: { @@ -95,10 +96,7 @@ describe('StepUtenlandsopphold', () => { it('Gitt at brukeren ikke har samboer, nullstiller input fra brukeren og navigerer tilbake når brukeren klikker på Tilbake', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render(, { preloadedState: { userInput: { ...userInputInitialState, harUtenlandsopphold: null }, @@ -126,10 +124,7 @@ describe('StepUtenlandsopphold', () => { }) const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render(, { preloadedState: { userInput: { ...userInputInitialState, harUtenlandsopphold: null }, diff --git a/src/pages/VeilederInput/VeilederInput.tsx b/src/pages/VeilederInput/VeilederInput.tsx index de5215f98..6f2e54596 100644 --- a/src/pages/VeilederInput/VeilederInput.tsx +++ b/src/pages/VeilederInput/VeilederInput.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { RouterProvider, createBrowserRouter } from 'react-router-dom' +import { RouterProvider, createBrowserRouter } from 'react-router' import { Alert, diff --git a/src/router/RouteErrorBoundary/ErrorPage404.tsx b/src/router/RouteErrorBoundary/ErrorPage404.tsx index a51142f67..e4096b86e 100644 --- a/src/router/RouteErrorBoundary/ErrorPage404.tsx +++ b/src/router/RouteErrorBoundary/ErrorPage404.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FormattedMessage } from 'react-intl' -import { Link as ReactRouterLink } from 'react-router-dom' +import { Link as ReactRouterLink } from 'react-router' import { BodyLong, Link, List, VStack } from '@navikt/ds-react' diff --git a/src/router/RouteErrorBoundary/RouteErrorBoundary.tsx b/src/router/RouteErrorBoundary/RouteErrorBoundary.tsx index 6ab66a8d6..353c6da6b 100644 --- a/src/router/RouteErrorBoundary/RouteErrorBoundary.tsx +++ b/src/router/RouteErrorBoundary/RouteErrorBoundary.tsx @@ -1,4 +1,4 @@ -import { useRouteError, isRouteErrorResponse } from 'react-router-dom' +import { useRouteError, isRouteErrorResponse } from 'react-router' import { ErrorPage404 } from './ErrorPage404' import { ErrorPageUnexpected } from './ErrorPageUnexpected' diff --git a/src/router/RouteErrorBoundary/__tests__/ErrorPage404.test.tsx b/src/router/RouteErrorBoundary/__tests__/ErrorPage404.test.tsx index 545a6a380..7dc37bd38 100644 --- a/src/router/RouteErrorBoundary/__tests__/ErrorPage404.test.tsx +++ b/src/router/RouteErrorBoundary/__tests__/ErrorPage404.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { ErrorPage404 } from '../ErrorPage404' @@ -22,16 +20,10 @@ describe('ErrorPage404', () => { }) it('sender brukeren til landingside når brukeren klikker på første lenke', async () => { - const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) render() + const btn = screen.getByText('error.404.button.link_1') - await user.click(screen.getByText('error.404.button.link_1')) - - expect(navigateMock.mock.lastCall?.[0]).toBe(paths.login) + expect(btn).toHaveAttribute('href', paths.login) }) it('sender brukeren til Din Pensjon når brukeren klikker på andre lenke', async () => { diff --git a/src/router/RouteErrorBoundary/__tests__/ErrorPageUnexpected.test.tsx b/src/router/RouteErrorBoundary/__tests__/ErrorPageUnexpected.test.tsx index c1321cc58..77e8783a2 100644 --- a/src/router/RouteErrorBoundary/__tests__/ErrorPageUnexpected.test.tsx +++ b/src/router/RouteErrorBoundary/__tests__/ErrorPageUnexpected.test.tsx @@ -1,5 +1,3 @@ -import * as ReactRouterUtils from 'react-router' - import { describe, it, vi } from 'vitest' import { ErrorPageUnexpected } from '../ErrorPageUnexpected' @@ -7,6 +5,15 @@ import { paths } from '@/router/constants' import { userInputInitialState } from '@/state/userInput/userInputReducer' import { render, screen, userEvent } from '@/test-utils' +const navigateMock = vi.fn() +vi.mock(import('react-router'), async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + useNavigate: () => navigateMock, + } +}) + describe('ErrorPageUnexpected', () => { it('rendrer med riktig tekst og knapper', () => { const { asFragment } = render() @@ -16,10 +23,7 @@ describe('ErrorPageUnexpected', () => { it('sender brukeren til landingside og tømmer storen når brukeren klikker på knappen', async () => { const user = userEvent.setup() - const navigateMock = vi.fn() - vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation( - () => navigateMock - ) + const { store } = render(, { preloadedState: { userInput: { diff --git a/src/router/RouteErrorBoundary/__tests__/RouteErrorBoundary.test.tsx b/src/router/RouteErrorBoundary/__tests__/RouteErrorBoundary.test.tsx index 4098b1f22..f6acaf088 100644 --- a/src/router/RouteErrorBoundary/__tests__/RouteErrorBoundary.test.tsx +++ b/src/router/RouteErrorBoundary/__tests__/RouteErrorBoundary.test.tsx @@ -1,4 +1,4 @@ -import { createMemoryRouter, RouterProvider } from 'react-router-dom' +import { createMemoryRouter, RouterProvider } from 'react-router' import { describe, expect, it } from 'vitest' diff --git a/src/router/RouteErrorBoundary/__tests__/__snapshots__/ErrorPage404.test.tsx.snap b/src/router/RouteErrorBoundary/__tests__/__snapshots__/ErrorPage404.test.tsx.snap index 81749f343..2d9151fd1 100644 --- a/src/router/RouteErrorBoundary/__tests__/__snapshots__/ErrorPage404.test.tsx.snap +++ b/src/router/RouteErrorBoundary/__tests__/__snapshots__/ErrorPage404.test.tsx.snap @@ -112,6 +112,7 @@ exports[`ErrorPage404 > rendrer med riktig tekst og knapper 1`] = ` > error.404.button.link_1 diff --git a/src/router/__tests__/__snapshots__/loaders.test.tsx.snap b/src/router/__tests__/__snapshots__/loaders.test.tsx.snap deleted file mode 100644 index 0b41017a0..000000000 --- a/src/router/__tests__/__snapshots__/loaders.test.tsx.snap +++ /dev/null @@ -1,250 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Loaders > stepAFPAccessGuard > returnerer redirect til /start location når ingen api kall er registrert 1`] = ` -Response { - Symbol(state): { - "aborted": false, - "cacheState": "", - "headersList": HeadersList { - "cookies": null, - Symbol(headers map): Map { - "location" => { - "name": "location", - "value": "/start", - }, - }, - Symbol(headers map sorted): null, - }, - "rangeRequested": false, - "requestIncludesCredentials": false, - "status": 302, - "statusText": "", - "timingAllowPassed": false, - "timingInfo": null, - "type": "default", - "urlList": [], - }, - Symbol(headers): Headers {}, -} -`; - -exports[`Loaders > stepSamtykkeOffentligAFPAccessGuard > Når brukeren har uføretrygd og har valgt ja_offentlig til spørsmål om afp, er hen redirigert 1`] = ` -Response { - Symbol(state): { - "aborted": false, - "cacheState": "", - "headersList": HeadersList { - "cookies": null, - Symbol(headers map): Map { - "location" => { - "name": "location", - "value": "/samtykke", - }, - }, - Symbol(headers map sorted): null, - }, - "rangeRequested": false, - "requestIncludesCredentials": false, - "status": 302, - "statusText": "", - "timingAllowPassed": false, - "timingInfo": null, - "type": "default", - "urlList": [], - }, - Symbol(headers): Headers {}, -} -`; - -exports[`Loaders > stepSamtykkeOffentligAFPAccessGuard > Når brukeren ikke har uføretrygd og har valgt afp nei, er hen redirigert 1`] = ` -Response { - Symbol(state): { - "aborted": false, - "cacheState": "", - "headersList": HeadersList { - "cookies": null, - Symbol(headers map): Map { - "location" => { - "name": "location", - "value": "/samtykke", - }, - }, - Symbol(headers map sorted): null, - }, - "rangeRequested": false, - "requestIncludesCredentials": false, - "status": 302, - "statusText": "", - "timingAllowPassed": false, - "timingInfo": null, - "type": "default", - "urlList": [], - }, - Symbol(headers): Headers {}, -} -`; - -exports[`Loaders > stepSamtykkeOffentligAFPAccessGuard > returnerer redirect til /start location når ingen api kall er registrert 1`] = ` -Response { - Symbol(state): { - "aborted": false, - "cacheState": "", - "headersList": HeadersList { - "cookies": null, - Symbol(headers map): Map { - "location" => { - "name": "location", - "value": "/start", - }, - }, - Symbol(headers map sorted): null, - }, - "rangeRequested": false, - "requestIncludesCredentials": false, - "status": 302, - "statusText": "", - "timingAllowPassed": false, - "timingInfo": null, - "type": "default", - "urlList": [], - }, - Symbol(headers): Headers {}, -} -`; - -exports[`Loaders > stepSivilstandAccessGuard > returnerer redirect til /start location når ingen api kall er registrert 1`] = ` -Response { - Symbol(state): { - "aborted": false, - "cacheState": "", - "headersList": HeadersList { - "cookies": null, - Symbol(headers map): Map { - "location" => { - "name": "location", - "value": "/start", - }, - }, - Symbol(headers map sorted): null, - }, - "rangeRequested": false, - "requestIncludesCredentials": false, - "status": 302, - "statusText": "", - "timingAllowPassed": false, - "timingInfo": null, - "type": "default", - "urlList": [], - }, - Symbol(headers): Headers {}, -} -`; - -exports[`Loaders > stepStartAccessGuard > kaller getPersonQuery, getLoependeVedtakQuery, getInntekt, getOmstillingsstoenadOgGjenlevende og getEkskludertStatus og returnerer en defered response med getPerson og en redirect url 1`] = ` -DeferredData { - "abortPromise": Promise {}, - "controller": AbortController { - Symbol(SameObject caches): { - "signal": AbortSignal {}, - }, - }, - "data": { - "getLoependeVedtakQuery": Promise {}, - "getPersonQuery": Promise {}, - "shouldRedirectTo": Promise {}, - }, - "deferredKeys": [ - "getPersonQuery", - "getLoependeVedtakQuery", - "shouldRedirectTo", - ], - "init": {}, - "pendingKeysSet": Set {}, - "subscribers": Set {}, - "unlistenAbortSignal": [Function], -} -`; - -exports[`Loaders > stepUfoeretrygdAFPAccessGuard > Gitt at brukeren har uføretrygd, > Når hen er fylt minimum uttaksalder, er hen redirigert 1`] = ` -Response { - Symbol(state): { - "aborted": false, - "cacheState": "", - "headersList": HeadersList { - "cookies": null, - Symbol(headers map): Map { - "location" => { - "name": "location", - "value": "/samtykke-offentlig-afp", - }, - }, - Symbol(headers map sorted): null, - }, - "rangeRequested": false, - "requestIncludesCredentials": false, - "status": 302, - "statusText": "", - "timingAllowPassed": false, - "timingInfo": null, - "type": "default", - "urlList": [], - }, - Symbol(headers): Headers {}, -} -`; - -exports[`Loaders > stepUfoeretrygdAFPAccessGuard > Når brukeren ikke har uføretrygd, er hen redirigert 1`] = ` -Response { - Symbol(state): { - "aborted": false, - "cacheState": "", - "headersList": HeadersList { - "cookies": null, - Symbol(headers map): Map { - "location" => { - "name": "location", - "value": "/samtykke-offentlig-afp", - }, - }, - Symbol(headers map sorted): null, - }, - "rangeRequested": false, - "requestIncludesCredentials": false, - "status": 302, - "statusText": "", - "timingAllowPassed": false, - "timingInfo": null, - "type": "default", - "urlList": [], - }, - Symbol(headers): Headers {}, -} -`; - -exports[`Loaders > stepUfoeretrygdAFPAccessGuard > returnerer redirect til /start location når ingen api kall er registrert 1`] = ` -Response { - Symbol(state): { - "aborted": false, - "cacheState": "", - "headersList": HeadersList { - "cookies": null, - Symbol(headers map): Map { - "location" => { - "name": "location", - "value": "/start", - }, - }, - Symbol(headers map sorted): null, - }, - "rangeRequested": false, - "requestIncludesCredentials": false, - "status": 302, - "statusText": "", - "timingAllowPassed": false, - "timingInfo": null, - "type": "default", - "urlList": [], - }, - Symbol(headers): Headers {}, -} -`; diff --git a/src/router/__tests__/loaders.test.tsx b/src/router/__tests__/loaders.test.tsx index 7f6975a4d..b3ce03b2d 100644 --- a/src/router/__tests__/loaders.test.tsx +++ b/src/router/__tests__/loaders.test.tsx @@ -1,4 +1,3 @@ -import { UNSAFE_DeferredData } from '@remix-run/router' import { add, endOfDay, format } from 'date-fns' import { describe, it, vi } from 'vitest' @@ -8,7 +7,9 @@ import { landingPageAccessGuard, stepStartAccessGuard, stepSivilstandAccessGuard, + StepSivilstandAccessGuardLoader, stepAFPAccessGuard, + StepAFPAccessGuardLoader, stepUfoeretrygdAFPAccessGuard, stepSamtykkeOffentligAFPAccessGuard, } from '../loaders' @@ -87,9 +88,7 @@ describe('Loaders', () => { return mockedState }) const returnedFromLoader = await landingPageAccessGuard() - const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + const shouldRedirectToResponse = await returnedFromLoader.shouldRedirectTo await waitFor(async () => { expect(shouldRedirectToResponse).toEqual('') @@ -120,9 +119,7 @@ describe('Loaders', () => { return mockedState }) const returnedFromLoader = await landingPageAccessGuard() - const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + const shouldRedirectToResponse = await returnedFromLoader.shouldRedirectTo await waitFor(async () => { expect(shouldRedirectToResponse).toEqual('') @@ -157,9 +154,7 @@ describe('Loaders', () => { }) const returnedFromLoader = await landingPageAccessGuard() - const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + const shouldRedirectToResponse = await returnedFromLoader.shouldRedirectTo await waitFor(async () => { expect(shouldRedirectToResponse).toEqual(paths.start) @@ -196,12 +191,10 @@ describe('Loaders', () => { return mockedState }) const returnedFromLoader = await stepStartAccessGuard() - const getPersonQueryResponse = - await returnedFromLoader.data.getPersonQuery + const getPersonQueryResponse = await returnedFromLoader.getPersonQuery const getLoependeVedtakQueryResponse = - await returnedFromLoader.data.getLoependeVedtakQuery - const shouldRedirectToResponse = - await returnedFromLoader.data.shouldRedirectTo + await returnedFromLoader.getLoependeVedtakQuery + const shouldRedirectToResponse = await returnedFromLoader.shouldRedirectTo await waitFor(async () => { expect( @@ -215,7 +208,13 @@ describe('Loaders', () => { expect(shouldRedirectToResponse).toEqual('') }) - expect(returnedFromLoader).toMatchSnapshot() + expect(returnedFromLoader).toEqual( + expect.objectContaining({ + getLoependeVedtakQuery: expect.any(Promise), + getPersonQuery: expect.any(Promise), + shouldRedirectTo: expect.any(Promise), + }) + ) expect(initiateGetPersonMock).toHaveBeenCalled() expect(initiateGetLoependeVedtakQueryMock).toHaveBeenCalled() expect(initiateGetInntektMock).toHaveBeenCalled() @@ -243,8 +242,8 @@ describe('Loaders', () => { return mockedState }) const returnedFromLoader = await stepStartAccessGuard() - const getPersonQueryResponse = await (returnedFromLoader.data - .getPersonQuery as GetPersonQuery) + const getPersonQueryResponse = + await (returnedFromLoader.getPersonQuery as GetPersonQuery) expect(getPersonQueryResponse.data.foedselsdato).toBe('1960-04-30') await waitFor(() => { expect(open).toHaveBeenCalledWith( @@ -265,8 +264,7 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepStartAccessGuard() - const shouldRedirectToResponse = - await returnedFromLoader.data.shouldRedirectTo + const shouldRedirectToResponse = await returnedFromLoader.shouldRedirectTo await waitFor(async () => { expect(shouldRedirectToResponse).toEqual(paths.uventetFeil) @@ -286,8 +284,7 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepStartAccessGuard() - const shouldRedirectToResponse = - await returnedFromLoader.data.shouldRedirectTo + const shouldRedirectToResponse = await returnedFromLoader.shouldRedirectTo await waitFor(async () => { expect(shouldRedirectToResponse).toEqual(paths.ingenTilgang) @@ -307,8 +304,7 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepStartAccessGuard() - const shouldRedirectToResponse = - await returnedFromLoader.data.shouldRedirectTo + const shouldRedirectToResponse = await returnedFromLoader.shouldRedirectTo await waitFor(async () => { expect(shouldRedirectToResponse).toEqual(paths.uventetFeil) @@ -330,9 +326,8 @@ describe('Loaders', () => { return mockedState }) const returnedFromLoader = await stepStartAccessGuard() - await returnedFromLoader.data.getPersonQuery - const shouldRedirectToResponse = - await returnedFromLoader.data.shouldRedirectTo + await returnedFromLoader.getPersonQuery + const shouldRedirectToResponse = await returnedFromLoader.shouldRedirectTo await waitFor(async () => { expect(shouldRedirectToResponse).toEqual( @@ -355,7 +350,33 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepSivilstandAccessGuard() expect(returnedFromLoader).not.toBeNull() - expect(returnedFromLoader).toMatchSnapshot() + expect(returnedFromLoader).toMatchInlineSnapshot(` + Response { + Symbol(state): { + "aborted": false, + "cacheState": "", + "headersList": HeadersList { + "cookies": null, + Symbol(headers map): Map { + "location" => { + "name": "location", + "value": "/start", + }, + }, + Symbol(headers map sorted): null, + }, + "rangeRequested": false, + "requestIncludesCredentials": false, + "status": 302, + "statusText": "", + "timingAllowPassed": false, + "timingInfo": null, + "type": "default", + "urlList": [], + }, + Symbol(headers): Headers {}, + } + `) }) it('Når brukeren ikke har samboer, er hen ikke redirigert', async () => { @@ -373,8 +394,8 @@ describe('Loaders', () => { const returnedFromLoader = await stepSivilstandAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepSivilstandAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe('') }) @@ -393,8 +414,8 @@ describe('Loaders', () => { const returnedFromLoader = await stepSivilstandAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepSivilstandAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe(paths.utenlandsopphold) }) }) @@ -439,7 +460,33 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepAFPAccessGuard() expect(returnedFromLoader).not.toBeNull() - expect(returnedFromLoader).toMatchSnapshot() + expect(returnedFromLoader).toMatchInlineSnapshot(` + Response { + Symbol(state): { + "aborted": false, + "cacheState": "", + "headersList": HeadersList { + "cookies": null, + Symbol(headers map): Map { + "location" => { + "name": "location", + "value": "/start", + }, + }, + Symbol(headers map sorted): null, + }, + "rangeRequested": false, + "requestIncludesCredentials": false, + "status": 302, + "statusText": "", + "timingAllowPassed": false, + "timingInfo": null, + "type": "default", + "urlList": [], + }, + Symbol(headers): Headers {}, + } + `) }) describe('Gitt at alle kallene er vellykket, ', () => { @@ -459,8 +506,8 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe('') }) @@ -497,8 +544,8 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe('') }) @@ -534,8 +581,8 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe(paths.ufoeretrygdAFP) }) @@ -555,8 +602,8 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe(paths.ufoeretrygdAFP) }) @@ -576,8 +623,8 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe(paths.ufoeretrygdAFP) }) }) @@ -617,8 +664,8 @@ describe('Loaders', () => { const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe('') }) @@ -650,8 +697,8 @@ describe('Loaders', () => { const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe(paths.uventetFeil) }) @@ -689,8 +736,8 @@ describe('Loaders', () => { const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe('') }) @@ -724,8 +771,8 @@ describe('Loaders', () => { const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe(paths.uventetFeil) }) @@ -764,8 +811,8 @@ describe('Loaders', () => { const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe( `${paths.henvisning}/${henvisningUrlParams.apotekerne}` ) @@ -806,8 +853,8 @@ describe('Loaders', () => { const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe('') }) @@ -839,8 +886,8 @@ describe('Loaders', () => { const returnedFromLoader = await stepAFPAccessGuard() const shouldRedirectToResponse = await ( - returnedFromLoader as UNSAFE_DeferredData - ).data.shouldRedirectTo + returnedFromLoader as StepAFPAccessGuardLoader + ).shouldRedirectTo expect(shouldRedirectToResponse).toBe(paths.uventetFeil) }) }) @@ -858,7 +905,33 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepUfoeretrygdAFPAccessGuard() expect(returnedFromLoader).not.toBeNull() - expect(returnedFromLoader).toMatchSnapshot() + expect(returnedFromLoader).toMatchInlineSnapshot(` + Response { + Symbol(state): { + "aborted": false, + "cacheState": "", + "headersList": HeadersList { + "cookies": null, + Symbol(headers map): Map { + "location" => { + "name": "location", + "value": "/start", + }, + }, + Symbol(headers map sorted): null, + }, + "rangeRequested": false, + "requestIncludesCredentials": false, + "status": 302, + "statusText": "", + "timingAllowPassed": false, + "timingInfo": null, + "type": "default", + "urlList": [], + }, + Symbol(headers): Headers {}, + } + `) }) it('Når brukeren ikke har uføretrygd, er hen redirigert', async () => { @@ -877,7 +950,33 @@ describe('Loaders', () => { const returnedFromLoader = await stepUfoeretrygdAFPAccessGuard() expect(returnedFromLoader).not.toBeNull() - expect(returnedFromLoader).toMatchSnapshot() + expect(returnedFromLoader).toMatchInlineSnapshot(` + Response { + Symbol(state): { + "aborted": false, + "cacheState": "", + "headersList": HeadersList { + "cookies": null, + Symbol(headers map): Map { + "location" => { + "name": "location", + "value": "/samtykke-offentlig-afp", + }, + }, + Symbol(headers map sorted): null, + }, + "rangeRequested": false, + "requestIncludesCredentials": false, + "status": 302, + "statusText": "", + "timingAllowPassed": false, + "timingInfo": null, + "type": "default", + "urlList": [], + }, + Symbol(headers): Headers {}, + } + `) }) describe('Gitt at brukeren har uføretrygd, ', () => { @@ -983,7 +1082,33 @@ describe('Loaders', () => { const returnedFromLoader = await stepUfoeretrygdAFPAccessGuard() expect(returnedFromLoader).not.toBeNull() - expect(returnedFromLoader).toMatchSnapshot() + expect(returnedFromLoader).toMatchInlineSnapshot(` + Response { + Symbol(state): { + "aborted": false, + "cacheState": "", + "headersList": HeadersList { + "cookies": null, + Symbol(headers map): Map { + "location" => { + "name": "location", + "value": "/samtykke-offentlig-afp", + }, + }, + Symbol(headers map sorted): null, + }, + "rangeRequested": false, + "requestIncludesCredentials": false, + "status": 302, + "statusText": "", + "timingAllowPassed": false, + "timingInfo": null, + "type": "default", + "urlList": [], + }, + Symbol(headers): Headers {}, + } + `) }) }) }) @@ -1001,7 +1126,33 @@ describe('Loaders', () => { }) const returnedFromLoader = await stepSamtykkeOffentligAFPAccessGuard() expect(returnedFromLoader).not.toBeNull() - expect(returnedFromLoader).toMatchSnapshot() + expect(returnedFromLoader).toMatchInlineSnapshot(` + Response { + Symbol(state): { + "aborted": false, + "cacheState": "", + "headersList": HeadersList { + "cookies": null, + Symbol(headers map): Map { + "location" => { + "name": "location", + "value": "/start", + }, + }, + Symbol(headers map sorted): null, + }, + "rangeRequested": false, + "requestIncludesCredentials": false, + "status": 302, + "statusText": "", + "timingAllowPassed": false, + "timingInfo": null, + "type": "default", + "urlList": [], + }, + Symbol(headers): Headers {}, + } + `) }) it('Når brukeren ikke har uføretrygd og har valgt AFP offentlig, er hen ikke redirigert', async () => { @@ -1060,7 +1211,33 @@ describe('Loaders', () => { const returnedFromLoader = await stepSamtykkeOffentligAFPAccessGuard() expect(returnedFromLoader).not.toBeNull() - expect(returnedFromLoader).toMatchSnapshot() + expect(returnedFromLoader).toMatchInlineSnapshot(` + Response { + Symbol(state): { + "aborted": false, + "cacheState": "", + "headersList": HeadersList { + "cookies": null, + Symbol(headers map): Map { + "location" => { + "name": "location", + "value": "/samtykke", + }, + }, + Symbol(headers map sorted): null, + }, + "rangeRequested": false, + "requestIncludesCredentials": false, + "status": 302, + "statusText": "", + "timingAllowPassed": false, + "timingInfo": null, + "type": "default", + "urlList": [], + }, + Symbol(headers): Headers {}, + } + `) }) it('Når brukeren ikke har uføretrygd og har valgt afp nei, er hen redirigert', async () => { @@ -1090,7 +1267,33 @@ describe('Loaders', () => { const returnedFromLoader = await stepSamtykkeOffentligAFPAccessGuard() expect(returnedFromLoader).not.toBeNull() - expect(returnedFromLoader).toMatchSnapshot() + expect(returnedFromLoader).toMatchInlineSnapshot(` + Response { + Symbol(state): { + "aborted": false, + "cacheState": "", + "headersList": HeadersList { + "cookies": null, + Symbol(headers map): Map { + "location" => { + "name": "location", + "value": "/samtykke", + }, + }, + Symbol(headers map sorted): null, + }, + "rangeRequested": false, + "requestIncludesCredentials": false, + "status": 302, + "statusText": "", + "timingAllowPassed": false, + "timingInfo": null, + "type": "default", + "urlList": [], + }, + Symbol(headers): Headers {}, + } + `) }) }) }) diff --git a/src/router/__tests__/routes.test.tsx b/src/router/__tests__/routes.test.tsx index bbf5a0c9e..856f8b1fe 100644 --- a/src/router/__tests__/routes.test.tsx +++ b/src/router/__tests__/routes.test.tsx @@ -1,4 +1,4 @@ -import { createMemoryRouter, RouterProvider } from 'react-router-dom' +import { createMemoryRouter, RouterProvider } from 'react-router' import { describe, vi } from 'vitest' diff --git a/src/router/loaders.tsx b/src/router/loaders.tsx index 31c648bba..2f9bcb03f 100644 --- a/src/router/loaders.tsx +++ b/src/router/loaders.tsx @@ -1,5 +1,4 @@ import { redirect } from 'react-router' -import { defer, LoaderFunctionArgs, useLoaderData } from 'react-router-dom' import { FetchBaseQueryError } from '@reduxjs/toolkit/query' @@ -29,31 +28,12 @@ import { checkHarSamboer } from '@/utils/sivilstand' export interface LoginContext { isLoggedIn: boolean } -{ - /* c8 ignore next 17 - Dette er kun for typing */ -} -export function useDeferAuthenticationAccessData< - TReturnedValue extends ReturnType, ->() { - return useLoaderData() as ReturnType['data'] -} -export function authenticationDeferredLoader< - TData extends { - oauth2Query: Response - }, ->(dataFunc: (args?: LoaderFunctionArgs) => TData) { - return (args?: LoaderFunctionArgs) => - defer(dataFunc(args)) as Omit, 'data'> & { - data: TData - } -} +export type AuthenticationGuardLoader = { authResponse: Promise } -export const authenticationGuard = async () => { - const res = fetch(`${HOST_BASEURL}/oauth2/session`) - return defer({ - oauth2Query: res, - }) +export async function authenticationGuard(): Promise { + const authResponse = fetch(`${HOST_BASEURL}/oauth2/session`) + return { authResponse } } export const directAccessGuard = async () => { @@ -69,222 +49,184 @@ export const directAccessGuard = async () => { // //////////////////////////////////////// -{ - /* c8 ignore next 17 - Dette er kun for typing */ -} -export function useLandingPageAccessData< - TReturnedValue extends ReturnType, ->() { - return useLoaderData() as ReturnType['data'] -} - -export function landingPageDeferredLoader< - TData extends { - shouldRedirectTo: string | undefined - }, ->(dataFunc: (args?: LoaderFunctionArgs) => TData) { - return (args?: LoaderFunctionArgs) => - defer(dataFunc(args)) as Omit, 'data'> & { - data: TData - } -} - -export const landingPageAccessGuard = async () => { - const getRedirect1963FeatureToggleQuery = store.dispatch( - apiSlice.endpoints.getRedirect1963FeatureToggle.initiate() - ) - - const getPersonQuery = store.dispatch(apiSlice.endpoints.getPerson.initiate()) - const shouldRedirectTo = Promise.all([ - getRedirect1963FeatureToggleQuery, - getPersonQuery, - ]) - .then(([getRedirect1963FeatureToggleRes, getPersonRes]) => { - if ( - getRedirect1963FeatureToggleRes.data?.enabled && - getPersonRes?.isSuccess && - isFoedtFoer1963(getPersonRes?.data?.foedselsdato as string) - ) { - // Håndterer når bruker kommer tilbake på siden etter redirect - bfcache - https://web.dev/articles/bfcache - window.addEventListener('pageshow', (event: PageTransitionEvent) => { - if (event.persisted) { - window.open(externalUrls.detaljertKalkulator, '_self') - } - }) - window.open(externalUrls.detaljertKalkulator, '_self') - return '' - } else { - if (selectIsVeileder(store.getState())) { - return paths.start - } else { +export type LandingPageAccessGuardLoader = { shouldRedirectTo: Promise } + +export const landingPageAccessGuard = + async (): Promise => { + const getRedirect1963FeatureToggleQuery = store.dispatch( + apiSlice.endpoints.getRedirect1963FeatureToggle.initiate() + ) + + const getPersonQuery = store.dispatch( + apiSlice.endpoints.getPerson.initiate() + ) + const shouldRedirectTo = Promise.all([ + getRedirect1963FeatureToggleQuery, + getPersonQuery, + ]) + .then(([getRedirect1963FeatureToggleRes, getPersonRes]) => { + if ( + getRedirect1963FeatureToggleRes.data?.enabled && + getPersonRes?.isSuccess && + isFoedtFoer1963(getPersonRes?.data?.foedselsdato as string) + ) { + // Håndterer når bruker kommer tilbake på siden etter redirect - bfcache - https://web.dev/articles/bfcache + window.addEventListener('pageshow', (event: PageTransitionEvent) => { + if (event.persisted) { + window.open(externalUrls.detaljertKalkulator, '_self') + } + }) + window.open(externalUrls.detaljertKalkulator, '_self') return '' + } else { + if (selectIsVeileder(store.getState())) { + return paths.start + } else { + return '' + } } - } - }) - .catch(() => { - return '' - }) - - return defer({ - shouldRedirectTo, - }) -} + }) + .catch(() => { + return '' + }) + return { shouldRedirectTo } + } /// //////////////////////////////////////////////////////////////////////// -{ - /* c8 ignore next 17 - Dette er kun for typing */ -} -export function useStepStartAccessData< - TReturnedValue extends ReturnType, ->() { - return useLoaderData() as ReturnType['data'] -} -export function stepStartDeferredLoader< - TData extends { - getPersonQuery: GetPersonQuery - getLoependeVedtakQuery: GetLoependeVedtakQuery - shouldRedirectTo: string | undefined - }, ->(dataFunc: (args?: LoaderFunctionArgs) => TData) { - return (args?: LoaderFunctionArgs) => - defer(dataFunc(args)) as Omit, 'data'> & { - data: TData - } +export type StepStartAccessGuardLoader = { + getPersonQuery: GetPersonQuery + getLoependeVedtakQuery: GetLoependeVedtakQuery + shouldRedirectTo: Promise } -export const stepStartAccessGuard = async () => { - const getRedirect1963FeatureToggleQuery = store.dispatch( - apiSlice.endpoints.getRedirect1963FeatureToggle.initiate() - ) - // Sørger for at brukeren er redirigert til henvisningsside iht. fødselsdato - const getPersonQuery = store.dispatch(apiSlice.endpoints.getPerson.initiate()) - // Sørger for at brukeren er redirigert til henvisningsside iht. ekskludertStatus - const getEkskludertStatusQuery = store.dispatch( - apiSlice.endpoints.getEkskludertStatus.initiate() - ) - // Henter løpende vedtak for endring - const getLoependeVedtakQuery = store.dispatch( - apiSlice.endpoints.getLoependeVedtak.initiate() - ) - - // Henter inntekt til senere - store.dispatch(apiSlice.endpoints.getInntekt.initiate()) - // Henter omstillingsstønad-og-gjenlevende til senere - store.dispatch( - apiSlice.endpoints.getOmstillingsstoenadOgGjenlevende.initiate() - ) - - const shouldRedirectTo = Promise.all([ - getLoependeVedtakQuery, - getRedirect1963FeatureToggleQuery, - getPersonQuery, - getEkskludertStatusQuery, - ]).then( - ([ - getLoependeVedtakRes, - getRedirect1963FeatureToggleRes, - getPersonRes, - getEkskludertStatusRes, - ]) => { - if ( - getEkskludertStatusRes?.data?.ekskludert && - getEkskludertStatusRes?.data?.aarsak === 'ER_APOTEKER' - ) { - return `${paths.henvisning}/${henvisningUrlParams.apotekerne}` - } - - if (getLoependeVedtakRes.isError) { - return paths.uventetFeil - } - if (getLoependeVedtakRes.isSuccess) { - logger('info', { - tekst: 'hent uføregrad', - data: - getLoependeVedtakRes.data?.ufoeretrygd.grad === 0 - ? 'Ingen uføretrygd' - : getLoependeVedtakRes.data?.ufoeretrygd.grad === 100 - ? 'Hel uføretrygd' - : `Gradert uføretrygd`, - }) - - if (getLoependeVedtakRes.data?.alderspensjon) { - logger('info', { - tekst: 'Vedtak alderspensjon', - data: getLoependeVedtakRes.data?.alderspensjon.grad, - }) - } - if (getLoependeVedtakRes.data?.afpPrivat) { - logger('info', { - tekst: 'Vedtak AFP Offentlig', - }) +export const stepStartAccessGuard = + async (): Promise => { + const getRedirect1963FeatureToggleQuery = store.dispatch( + apiSlice.endpoints.getRedirect1963FeatureToggle.initiate() + ) + // Sørger for at brukeren er redirigert til henvisningsside iht. fødselsdato + const getPersonQuery = store.dispatch( + apiSlice.endpoints.getPerson.initiate() + ) + // Sørger for at brukeren er redirigert til henvisningsside iht. ekskludertStatus + const getEkskludertStatusQuery = store.dispatch( + apiSlice.endpoints.getEkskludertStatus.initiate() + ) + // Henter løpende vedtak for endring + const getLoependeVedtakQuery = store.dispatch( + apiSlice.endpoints.getLoependeVedtak.initiate() + ) + + // Henter inntekt til senere + store.dispatch(apiSlice.endpoints.getInntekt.initiate()) + // Henter omstillingsstønad-og-gjenlevende til senere + store.dispatch( + apiSlice.endpoints.getOmstillingsstoenadOgGjenlevende.initiate() + ) + + const shouldRedirectTo = Promise.all([ + getLoependeVedtakQuery, + getRedirect1963FeatureToggleQuery, + getPersonQuery, + getEkskludertStatusQuery, + ]).then( + ([ + getLoependeVedtakRes, + getRedirect1963FeatureToggleRes, + getPersonRes, + getEkskludertStatusRes, + ]) => { + if ( + getEkskludertStatusRes?.data?.ekskludert && + getEkskludertStatusRes?.data?.aarsak === 'ER_APOTEKER' + ) { + return `${paths.henvisning}/${henvisningUrlParams.apotekerne}` } - if (getLoependeVedtakRes.data?.afpOffentlig) { - logger('info', { - tekst: 'Vedtak AFP Privat', - }) + + if (getLoependeVedtakRes.isError) { + return paths.uventetFeil } - if (getLoependeVedtakRes.data?.harFremtidigLoependeVedtak) { + if (getLoependeVedtakRes.isSuccess) { logger('info', { - tekst: 'Fremtidig vedtak', + tekst: 'hent uføregrad', + data: + getLoependeVedtakRes.data?.ufoeretrygd.grad === 0 + ? 'Ingen uføretrygd' + : getLoependeVedtakRes.data?.ufoeretrygd.grad === 100 + ? 'Hel uføretrygd' + : `Gradert uføretrygd`, }) + + if (getLoependeVedtakRes.data?.alderspensjon) { + logger('info', { + tekst: 'Vedtak alderspensjon', + data: getLoependeVedtakRes.data?.alderspensjon.grad, + }) + } + if (getLoependeVedtakRes.data?.afpPrivat) { + logger('info', { + tekst: 'Vedtak AFP Offentlig', + }) + } + if (getLoependeVedtakRes.data?.afpOffentlig) { + logger('info', { + tekst: 'Vedtak AFP Privat', + }) + } + if (getLoependeVedtakRes.data?.harFremtidigLoependeVedtak) { + logger('info', { + tekst: 'Fremtidig vedtak', + }) + } } - } - if (getPersonRes.isError) { - if ((getPersonRes.error as FetchBaseQueryError).status === 403) { - return paths.ingenTilgang - } else { - return paths.uventetFeil + if (getPersonRes.isError) { + if ((getPersonRes.error as FetchBaseQueryError).status === 403) { + return paths.ingenTilgang + } else { + return paths.uventetFeil + } } - } - if (getPersonRes.isSuccess) { - if ( - getRedirect1963FeatureToggleRes?.data?.enabled && - isFoedtFoer1963(getPersonRes?.data?.foedselsdato as string) - ) { - window.addEventListener('pageshow', (event: PageTransitionEvent) => { - if (event.persisted) { - window.open(externalUrls.detaljertKalkulator, '_self') - } - }) - window.open(externalUrls.detaljertKalkulator, '_self') + if (getPersonRes.isSuccess) { + if ( + getRedirect1963FeatureToggleRes?.data?.enabled && + isFoedtFoer1963(getPersonRes?.data?.foedselsdato as string) + ) { + window.addEventListener( + 'pageshow', + (event: PageTransitionEvent) => { + if (event.persisted) { + window.open(externalUrls.detaljertKalkulator, '_self') + } + } + ) + window.open(externalUrls.detaljertKalkulator, '_self') + return '' + } + return '' } return '' } - } - ) + ) - return defer({ - getPersonQuery, - getLoependeVedtakQuery, - shouldRedirectTo, - }) -} + return { + getPersonQuery, + getLoependeVedtakQuery, + shouldRedirectTo, + } + } // /////////////////////////////////////////// -{ - /* c8 ignore next 17 - Dette er kun for typing */ -} -export function useStepSivilstandAccessData< - TReturnedValue extends ReturnType, ->() { - return useLoaderData() as ReturnType['data'] -} -export function stepSivilstandDeferredLoader< - TData extends { - getPersonQuery: GetPersonQuery - shouldRedirectTo: string | undefined - }, ->(dataFunc: (args?: LoaderFunctionArgs) => TData) { - return (args?: LoaderFunctionArgs) => - defer(dataFunc(args)) as Omit, 'data'> & { - data: TData - } +export type StepSivilstandAccessGuardLoader = { + getPersonQuery: GetPersonQuery + shouldRedirectTo: Promise } -export const stepSivilstandAccessGuard = async () => { +export const stepSivilstandAccessGuard = async (): Promise< + Response | StepSivilstandAccessGuardLoader +> => { if (await directAccessGuard()) { return redirect(paths.start) } @@ -313,35 +255,21 @@ export const stepSivilstandAccessGuard = async () => { resolveGetPerson(getPersonResponse) } - return defer({ + return { getPersonQuery: getPersonResponse, shouldRedirectTo, - }) + } } /// //////////////////////////////////////////////////////////////////////// -{ - /* c8 ignore next 17 - Dette er kun for typing */ -} -export function useStepAFPAccessData< - TReturnedValue extends ReturnType, ->() { - return useLoaderData() as ReturnType['data'] +export type StepAFPAccessGuardLoader = { + shouldRedirectTo: Promise } -export function stepAFPDeferredLoader< - TData extends { - shouldRedirectTo: string | undefined - }, ->(dataFunc: (args?: LoaderFunctionArgs) => TData) { - return (args?: LoaderFunctionArgs) => - defer(dataFunc(args)) as Omit, 'data'> & { - data: TData - } -} - -export const stepAFPAccessGuard = async () => { +export const stepAFPAccessGuard = async (): Promise< + Response | StepAFPAccessGuardLoader +> => { if (await directAccessGuard()) { return redirect(paths.start) } @@ -482,67 +410,68 @@ export const stepAFPAccessGuard = async () => { }) } - return defer({ + return { shouldRedirectTo, - }) + } } /// //////////////////////////////////////////////////////////////////////// -export const stepUfoeretrygdAFPAccessGuard = async () => { - if (await directAccessGuard()) { - return redirect(paths.start) - } +export const stepUfoeretrygdAFPAccessGuard = + async (): Promise => { + if (await directAccessGuard()) { + return redirect(paths.start) + } - const afp = selectAfp(store.getState()) - const foedselsdato = selectFoedselsdato(store.getState()) - const getLoependeVedtakResponse = apiSlice.endpoints.getLoependeVedtak.select( - undefined - )(store.getState()) + const afp = selectAfp(store.getState()) + const foedselsdato = selectFoedselsdato(store.getState()) + const getLoependeVedtakResponse = + apiSlice.endpoints.getLoependeVedtak.select(undefined)(store.getState()) - const stepArrays = isLoependeVedtakEndring( - getLoependeVedtakResponse.data as LoependeVedtak - ) - ? stegvisningOrderEndring - : stegvisningOrder + const stepArrays = isLoependeVedtakEndring( + getLoependeVedtakResponse.data as LoependeVedtak + ) + ? stegvisningOrderEndring + : stegvisningOrder - // Bruker med uføretrygd, som svarer ja til afp, og som er under 62 kan se steget - if ( - (getLoependeVedtakResponse.data as LoependeVedtak).ufoeretrygd.grad && - afp !== 'nei' && - !isFoedselsdatoOverEllerLikMinUttaksalder(foedselsdato as string) - ) { - return null + // Bruker med uføretrygd, som svarer ja til afp, og som er under 62 kan se steget + if ( + (getLoependeVedtakResponse.data as LoependeVedtak).ufoeretrygd.grad && + afp !== 'nei' && + !isFoedselsdatoOverEllerLikMinUttaksalder(foedselsdato as string) + ) { + return null + } + return redirect(stepArrays[stepArrays.indexOf(paths.ufoeretrygdAFP) + 1]) } - return redirect(stepArrays[stepArrays.indexOf(paths.ufoeretrygdAFP) + 1]) -} /// //////////////////////////////////////////////////////////////////////// -export const stepSamtykkeOffentligAFPAccessGuard = async () => { - if (await directAccessGuard()) { - return redirect(paths.start) - } +export const stepSamtykkeOffentligAFPAccessGuard = + async (): Promise => { + if (await directAccessGuard()) { + return redirect(paths.start) + } - const afp = selectAfp(store.getState()) - const getLoependeVedtakResponse = apiSlice.endpoints.getLoependeVedtak.select( - undefined - )(store.getState()) + const afp = selectAfp(store.getState()) + const getLoependeVedtakResponse = + apiSlice.endpoints.getLoependeVedtak.select(undefined)(store.getState()) - const stepArrays = isLoependeVedtakEndring( - getLoependeVedtakResponse.data as LoependeVedtak - ) - ? stegvisningOrderEndring - : stegvisningOrder - if ( - (getLoependeVedtakResponse.data as LoependeVedtak).ufoeretrygd.grad === 0 && - afp === 'ja_offentlig' - ) { - return null + const stepArrays = isLoependeVedtakEndring( + getLoependeVedtakResponse.data as LoependeVedtak + ) + ? stegvisningOrderEndring + : stegvisningOrder + if ( + (getLoependeVedtakResponse.data as LoependeVedtak).ufoeretrygd.grad === + 0 && + afp === 'ja_offentlig' + ) { + return null + } + return redirect( + stepArrays[stepArrays.indexOf(paths.samtykkeOffentligAFP) + 1] + ) } - return redirect( - stepArrays[stepArrays.indexOf(paths.samtykkeOffentligAFP) + 1] - ) -} // //////////////////////////////////////// diff --git a/src/router/routes.tsx b/src/router/routes.tsx index a8834f6d6..db49be8d8 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -1,4 +1,4 @@ -import { RouteObject, Navigate, Outlet } from 'react-router-dom' +import { RouteObject, Navigate, Outlet } from 'react-router' import { PageFramework } from '@/components/common/PageFramework' import { Beregning } from '@/pages/Beregning' diff --git a/src/test-utils.tsx b/src/test-utils.tsx index d779049af..006624724 100644 --- a/src/test-utils.tsx +++ b/src/test-utils.tsx @@ -1,11 +1,7 @@ import React, { PropsWithChildren } from 'react' import { IntlProvider } from 'react-intl' import { Provider } from 'react-redux' -import { - createBrowserRouter, - MemoryRouter, - RouterProvider, -} from 'react-router-dom' +import { createBrowserRouter, MemoryRouter, RouterProvider } from 'react-router' import { createListenerMiddleware } from '@reduxjs/toolkit' import { render, RenderOptions } from '@testing-library/react' diff --git a/src/utils/__tests__/veileder.test.ts b/src/utils/__tests__/veileder.test.ts index 851baebdd..d5bd01909 100644 --- a/src/utils/__tests__/veileder.test.ts +++ b/src/utils/__tests__/veileder.test.ts @@ -1,4 +1,4 @@ -import { RouteObject } from 'react-router-dom' +import { RouteObject } from 'react-router' import { describe, expect, it } from 'vitest' diff --git a/src/utils/veileder.ts b/src/utils/veileder.ts index 908dbcee9..432e5a13d 100644 --- a/src/utils/veileder.ts +++ b/src/utils/veileder.ts @@ -1,4 +1,4 @@ -import { RouteObject } from 'react-router-dom' +import { RouteObject } from 'react-router' export const findRoutesWithoutLoaders = ( routerRoutes: RouteObject[]