Skip to content

Commit 6d85b3b

Browse files
AudunSorheimAudunSorheim
committed
Add testscenarioselector
1 parent 29cbb25 commit 6d85b3b

File tree

9 files changed

+182
-4
lines changed

9 files changed

+182
-4
lines changed

‎.env.development

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
NEXT_PUBLIC_RUNTIME_ENVIRONMENT=local
22
NEXT_PUBLIC_MIN_SIDE_URL=https://www.nav.no/minside/
33
NEXT_PUBLIC_DITT_SYKEFRAVAER_URL=https://demo.ekstern.dev.nav.no/syk/sykefravaer
4-
NEXT_PUBLIC_ESYFO_PROXY_API_URL=http://localhost:3000/syk/aktivitetskrav/api/aktivitetsplikt
4+
NEXT_PUBLIC_ESYFO_PROXY_API_URL=/syk/aktivitetskrav/api/aktivitetsplikt

‎nais/envs/.env.demo

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ NEXT_PUBLIC_TELEMETRY_URL=https://telemetry.ekstern.dev.nav.no/collect
44
NEXT_PUBLIC_DITT_SYKEFRAVAER_URL=https://demo.ekstern.dev.nav.no/syk/sykefravaer
55
NEXT_PUBLIC_DINE_SYKMELDTE_URL=https://dinesykmeldte.ekstern.dev.nav.no/arbeidsgiver/sykmeldte
66
NEXT_PUBLIC_MIN_SIDE_URL=https://www.nav.no/minside/
7+
NEXT_PUBLIC_ESYFO_PROXY_API_URL=/syk/aktivitetskrav/api/aktivitetsplikt

‎public/sun.svg

+1
Loading

‎src/components/testscenarioselector/TestScenarioSelector.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Button, Heading, Modal, Radio, RadioGroup } from "@navikt/ds-react";
2+
import SunImage from "../../../public/sun.svg";
3+
import React, { useEffect, useRef, useState } from "react";
4+
import Image from "next/image";
5+
import styles from "./testscenarioselector.module.css";
6+
import {
7+
ForhandsvarselTestScenario,
8+
getTestScenario,
9+
InfoSideTestScenario,
10+
setTestScenario,
11+
TestScenario,
12+
} from "@/utils/testScenarioUtils";
13+
import { useQueryClient } from "@tanstack/react-query";
14+
15+
export const TestScenarioSelector = () => {
16+
const [open, setOpen] = useState(false);
17+
const [selectedScenario, setSelectedScenario] = useState<
18+
TestScenario | undefined
19+
>();
20+
const queryClient = useQueryClient()
21+
22+
useEffect(() => {
23+
setSelectedScenario(getTestScenario());
24+
}, []);
25+
26+
if (!selectedScenario) return null;
27+
28+
return (
29+
<>
30+
<Modal
31+
open={open}
32+
aria-label="Testdatavelger"
33+
onClose={() => setOpen(false)}
34+
header={{
35+
heading: "Velg testscenario"
36+
}}
37+
>
38+
<Modal.Body>
39+
<div className="mb-4">
40+
<RadioGroup
41+
legend="Velg testscenario"
42+
value={selectedScenario}
43+
hideLegend={true}
44+
onChange={(val: TestScenario) => {
45+
setSelectedScenario(val);
46+
}}
47+
>
48+
<Radio value={InfoSideTestScenario}>Infosiden</Radio>
49+
50+
<Radio value={ForhandsvarselTestScenario}>Forhåndsvarsel</Radio>
51+
</RadioGroup>
52+
</div>
53+
54+
<div>
55+
<Button
56+
id="VelgScenarioButton"
57+
variant={"primary"}
58+
// disabled={!setActiveTestScenario}
59+
onClick={() => {
60+
setTestScenario(selectedScenario);
61+
queryClient.invalidateQueries()
62+
setOpen(false);
63+
}}
64+
>
65+
Velg scenario
66+
</Button>
67+
<Button variant={"tertiary"} onClick={() => setOpen(false)}>
68+
Avbryt
69+
</Button>
70+
</div>
71+
</Modal.Body>
72+
</Modal>
73+
74+
<div
75+
id="TestScenarioSelector"
76+
onClick={() => setOpen(!open)}
77+
className={styles.testscenariocontainer}
78+
>
79+
<Image src={SunImage} alt="" width={40} height={40} />
80+
</div>
81+
</>
82+
);
83+
};

‎src/components/testscenarioselector/testscenarioselector.module.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.testscenariocontainer {
2+
position: fixed;
3+
bottom: 1rem;
4+
right: 1rem;
5+
z-index: 999999;
6+
height: 3rem;
7+
width: 3rem;
8+
background-color: #9bd0b0;
9+
border-radius: 50%;
10+
font-size: 1.5rem;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
border: 2px solid;
15+
cursor: pointer;
16+
}
17+
18+
.testscenariocontainer:hover {
19+
background-color: #8bbb9e;
20+
}

‎src/data/api.ts

+21-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,29 @@
11
import { loginUser } from "@/utils/urlUtils";
2+
import {
3+
getTestScenario,
4+
InfoSideTestScenario,
5+
} from "@/utils/testScenarioUtils";
6+
7+
const testScenarioHeaders = (): Record<string, string> | undefined => {
8+
if (
9+
process.env.NEXT_PUBLIC_RUNTIME_ENVIRONMENT === "local" ||
10+
process.env.NEXT_PUBLIC_RUNTIME_ENVIRONMENT === "demo"
11+
) {
12+
const headers: Record<string, string> = {
13+
"testscenario": getTestScenario() || InfoSideTestScenario,
14+
};
15+
16+
return headers
17+
}
18+
};
219

3-
export const get = async <ResponseData>(path: string): Promise<ResponseData> => {
20+
export const get = async <ResponseData>(
21+
path: string,
22+
): Promise<ResponseData> => {
423
const response = await fetch(path, {
524
method: "GET",
625
credentials: "include",
26+
headers: testScenarioHeaders(),
727
});
828

929
if (response.status === 401) {

‎src/pages/_app.tsx

+24-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import "../styles/globals.css";
22
import type { AppProps } from "next/app";
33
import React, { useEffect, useState } from "react";
4-
import { DehydratedState, HydrationBoundary, QueryClient, QueryClientProvider } from "@tanstack/react-query";
4+
import {
5+
DehydratedState,
6+
HydrationBoundary,
7+
QueryClient,
8+
QueryClientProvider,
9+
} from "@tanstack/react-query";
510
import { configureLogger } from "@navikt/next-logger";
611
import { minutesToMillis } from "@/utils/dateUtils";
712
import { ErrorBoundary } from "@/components/error/ErrorBoundary";
813
import { initFaro } from "@/faro/initFaro";
14+
import { TestScenarioSelector } from "@/components/testscenarioselector/TestScenarioSelector";
15+
import { getTestScenario, setTestScenario } from "@/utils/testScenarioUtils";
916

1017
configureLogger({
1118
basePath: "/syk/aktivitetskrav",
@@ -31,13 +38,29 @@ function MyApp({
3138
initFaro();
3239
}, []);
3340

41+
const TestScenarioDevTools = () => {
42+
if (
43+
process.env.NEXT_PUBLIC_RUNTIME_ENVIRONMENT === "local" ||
44+
process.env.NEXT_PUBLIC_RUNTIME_ENVIRONMENT === "demo"
45+
) {
46+
const hasActiveScenario = !!getTestScenario()
47+
if (!hasActiveScenario) {
48+
setTestScenario("INFOSIDE");
49+
}
50+
51+
return <TestScenarioSelector />;
52+
}
53+
return null;
54+
};
55+
3456
return (
3557
<ErrorBoundary>
3658
<QueryClientProvider client={queryClient}>
3759
<main tabIndex={-1} id="maincontent" className="min-h-screen">
3860
<HydrationBoundary state={pageProps.dehydratedState}>
3961
<Component {...pageProps} />
4062
</HydrationBoundary>
63+
<TestScenarioDevTools />
4164
</main>
4265
</QueryClientProvider>
4366
</ErrorBoundary>

‎src/pages/api/aktivitetsplikt/index.ts

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
11
import type { NextApiRequest, NextApiResponse } from "next";
22
import { AktivitetskravVurdering } from "@/schema/aktivitetskravVurderingSchema";
33
import fixtures from "@/mocks/fixtures";
4+
import { TestScenario } from "@/utils/testScenarioUtils";
45

56
export default function handler(
67
_req: NextApiRequest,
78
res: NextApiResponse<AktivitetskravVurdering | null>,
89
) {
910
if (process.env.NEXT_PUBLIC_RUNTIME_ENVIRONMENT === "local") {
10-
res.status(200).json(fixtures.nyKandidatVurdering);
11+
const testScenario: TestScenario = _req.headers[
12+
"testscenario"
13+
] as TestScenario;
14+
15+
switch (testScenario) {
16+
case "INFOSIDE": {
17+
res.status(200).json(fixtures.nyKandidatVurdering);
18+
}
19+
case "FORHANDSVARSEL": {
20+
res.status(200).json(fixtures.forhaandsvarselVurdering);
21+
}
22+
}
1123
} else {
1224
res.status(404).json(null);
1325
}

‎src/utils/testScenarioUtils.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export type TestScenario =
2+
| typeof InfoSideTestScenario
3+
| typeof ForhandsvarselTestScenario;
4+
5+
export const InfoSideTestScenario = "INFOSIDE";
6+
export const ForhandsvarselTestScenario = "FORHANDSVARSEL";
7+
8+
export const setTestScenario = (testScenario: TestScenario) => {
9+
if (typeof window !== "undefined") {
10+
sessionStorage.setItem("aktivitetskrav-testscenario", testScenario);
11+
}
12+
};
13+
14+
export const getTestScenario = (): TestScenario | undefined => {
15+
if (typeof window !== "undefined") {
16+
return sessionStorage.getItem("aktivitetskrav-testscenario") as TestScenario;
17+
}
18+
};

0 commit comments

Comments
 (0)