Skip to content

Commit

Permalink
Test og doc (#3405)
Browse files Browse the repository at this point in the history 
Dokumentasjon er stort sett automatisk lagd av Codeium. Utkast til unit-tester er lagd av Codeium, og så gjennomgått og tilpasset av et ekte menneske.
  • Loading branch information
@arnfinn
arnfinn authored Nov 6, 2024
1 parent e8e3141 commit cb1abda
Show file tree
Hide file tree
Showing 48 changed files with 4,076 additions and 7 deletions.
2 changes: 2 additions & 0 deletions apps/skde/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
},
"devDependencies": {
"@cypress/code-coverage": "3.13.5",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "16.0.1",
"@types/d3-array": "3.2.1",
"@types/d3-geo": "3.1.0",
Expand All @@ -68,6 +69,7 @@
"@types/node": "20.17.6",
"@types/react": "18.3.12",
"@vitejs/plugin-react": "4.3.3",
"@vitest/browser": "2.1.4",
"@vitest/coverage-v8": "2.1.4",
"cypress": "13.15.1",
"eslint": "9.14.0",
Expand Down
221 changes: 221 additions & 0 deletions apps/skde/src/components/BeadLine/__tests__/__snapshots__/beadline.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`BeadLine component > renders with valid boxData and lang 1`] = `
<div>
<svg
height="100"
style="background-color: inherit; display: block; margin: auto;"
viewBox="0 0 950 130"
width="100%"
>
<g
class="visx-group"
transform="translate(30, 30)"
>
<g
class="visx-group visx-axis visx-axis-bottom"
transform="translate(0, 0)"
>
<line
class="visx-line visx-axis-line"
fill="transparent"
shape-rendering="crispEdges"
stroke="black"
stroke-width="2"
x1="0.5"
x2="890.5"
y1="0"
y2="0"
/>
<svg
font-size="22"
style="overflow: visible;"
x="0"
y="0"
>
<text
class="visx-axis-label"
fill="#222"
font-family="Arial"
font-size="22"
font-weight="bold"
text-anchor="middle"
x="445"
y="60"
>
<tspan
dy="0em"
x="445"
>
test
</tspan>
</text>
</svg>
</g>
</g>
<g
class="visx-group"
transform="translate(30, 30)"
>
<circle
data-testid="circle_Finnmark_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_UNN_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Nordland_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Helgeland_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Nord-Trøndelag_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_St. Olav_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Møre og Romsdal_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Førde_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Bergen_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Fonna_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Stavanger_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Østfold_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Akershus_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_OUS_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Lovisenberg_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Diakonhjemmet_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Innlandet_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Vestre Viken_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Vestfold_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Telemark_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Sørlandet_unselected"
fill="rgba(171, 108, 166, 0.8)"
r="20"
/>
<circle
data-testid="circle_Norge_unselected"
fill="rgba(120, 45, 135, 0.8)"
r="20"
/>
</g>
</svg>
<div
class="_legendContainer_affb27"
>
<ul
class="_legendUL_affb27"
>
<li
class="_legendLI_affb27"
>
<div
class="_legendAnnualVar_affb27"
>
<svg
height="20px"
width="20px"
>
<circle
cx="10"
cy="10"
fill="rgba(171, 108, 166, 0.8)"
r="7"
/>
</svg>
</div>
Opptaksområder
</li>
<li
class="_legendLI_affb27"
>
<div
class="_legendAnnualVar_affb27"
>
<svg
height="20px"
width="20px"
>
<circle
cx="10"
cy="10"
fill="rgba(120, 45, 135, 0.8)"
r="7"
/>
</svg>
</div>
Norge
</li>
</ul>
</div>
</div>
`;
59 changes: 59 additions & 0 deletions apps/skde/src/components/BeadLine/__tests__/beadline.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from "react";
import { render } from "@testing-library/react";
import BeadLine from "../.";
import { vi, describe, it, expect } from "vitest";
import { atlasData } from "../../../../test/test_data/data";
//import mockRouter from "next-router-mock";

// eslint-disable-next-line @typescript-eslint/no-require-imports
vi.mock("next/router", () => require("next-router-mock"));

vi.mock("next/font/google", () => ({
Plus_Jakarta_Sans: () => ({
style: {
fontFamily: "mocked",
},
}),
}));

describe("BeadLine component", () => {
it("renders with valid boxData and lang", () => {
const boxData = [
{ type: "map", x: "xValue", xLabel: { nb: "test" } },
{ type: "data", national: "Norge", data: atlasData },
];
const lang = "nb";
const { container } = render(<BeadLine boxData={boxData} lang={lang} />);
expect(container).toMatchSnapshot();
});

it("throws error with invalid boxData (missing type property)", () => {
const boxData = [{ x: "xValue", xLabel: { nb: "test" } }];
const lang = "nb";
expect(() =>
render(<BeadLine boxData={boxData} lang={lang} />),
).toThrowError("Cannot read properties of undefined (reading 'x')");
});

it("throws error with invalid boxData (missing x property in map data)", () => {
const boxData = [
{ type: "map", xLabel: { nb: "test" } },
{ type: "data", national: "nationalValue", data: [] },
];
const lang = "nb";
expect(() =>
render(<BeadLine boxData={boxData} lang={lang} />),
).toThrowError("Cannot read properties of undefined (reading 'bohf')");
});

it("throws error with invalid boxData (missing national property in data)", () => {
const boxData = [
{ type: "map", x: "xValue", xLabel: { nb: "test" } },
{ type: "data", data: [] },
];
const lang = "nb";
expect(() =>
render(<BeadLine boxData={boxData} lang={lang} />),
).toThrowError("Cannot read properties of undefined (reading 'bohf')");
});
});
11 changes: 11 additions & 0 deletions apps/skde/src/components/BeadLine/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,17 @@ type BeadLineProps = {
lang: "nb" | "nn" | "en";
};

/**
* A component for rendering a BeadLine visualization.
*
* @param boxData A list of objects, where the first element is the map data and the second element is the abacus data.
* @param lang The language of the visualization. May be "nb", "nn", or "en".
*
* The component renders an {@link Abacus} component with the given data and language.
*
* @example
* <BeadLine boxData={boxData} lang="nb" />
*/
export default function BeadLine({ boxData, lang }: BeadLineProps) {
const abacusX: Exclude<keyof AtlasData, "year" | "bohf"> = boxData.find(
(boxd) => boxd.type === "map",
Expand Down
71 changes: 71 additions & 0 deletions apps/skde/src/components/ChipSelection/__tests__/__snapshots__/chipselection.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`ChipSelection > renders with correct labels and help text 1`] = `
<div>
<div
class="MuiStack-root css-14g5whm-MuiStack-root"
>
<div
aria-label="Help text for Chip 1"
class="MuiButtonBase-root MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-outlinedPrimary css-111lzb0-MuiButtonBase-root-MuiChip-root"
data-mui-internal-clone-element="true"
role="button"
tabindex="0"
>
<span
class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
>
Chip 1
</span>
</div>
<div
aria-label="Help text for Chip 2"
class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-filledPrimary css-1rfj2xa-MuiButtonBase-root-MuiChip-root"
data-mui-internal-clone-element="true"
role="button"
tabindex="0"
>
<span
class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
>
Chip 2
</span>
</div>
</div>
</div>
`;

exports[`ChipSelection > renders with trueChip right 1`] = `
<div>
<div
class="MuiStack-root css-14g5whm-MuiStack-root"
>
<div
aria-label="Help text for Chip 1"
class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-filledPrimary css-1rfj2xa-MuiButtonBase-root-MuiChip-root"
data-mui-internal-clone-element="true"
role="button"
tabindex="0"
>
<span
class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
>
Chip 1
</span>
</div>
<div
aria-label="Help text for Chip 2"
class="MuiButtonBase-root MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-outlinedPrimary css-111lzb0-MuiButtonBase-root-MuiChip-root"
data-mui-internal-clone-element="true"
role="button"
tabindex="0"
>
<span
class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
>
Chip 2
</span>
</div>
</div>
</div>
`;
Loading

0 comments on commit cb1abda

Please sign in to comment.