From f2cec1d46745f2d14b80d3e8230d2b12b99f7f09 Mon Sep 17 00:00:00 2001 From: Helene Lotsberg Date: Tue, 6 Oct 2026 13:56:15 +0200 Subject: [PATCH 1/3] add LanguageSwitcher test --- frontend/src/tests/LanguageSwitcher.test.tsx | 93 +++++++++++++++++++ .../LanguageSwitcher.test.tsx.snap | 25 +++++ 2 files changed, 118 insertions(+) create mode 100644 frontend/src/tests/LanguageSwitcher.test.tsx create mode 100644 frontend/src/tests/__snapshots__/LanguageSwitcher.test.tsx.snap diff --git a/frontend/src/tests/LanguageSwitcher.test.tsx b/frontend/src/tests/LanguageSwitcher.test.tsx new file mode 100644 index 00000000..176282dd --- /dev/null +++ b/frontend/src/tests/LanguageSwitcher.test.tsx @@ -0,0 +1,93 @@ +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, it, expect, vi, beforeEach } from "vitest"; +import LanguageSwitcher from "../components/languageSwitcher/LanguageSwitcher"; + +const changeLanguage = vi.fn(); + +let mockLanguage = "no"; + +vi.mock("react-i18next", () => ({ + useTranslation: () => ({ + i18n: { + get language() { + return mockLanguage; + }, + changeLanguage, + }, + }), +})); + +describe("LanguageSwitcher", () => { + beforeEach(() => { + changeLanguage.mockClear(); + mockLanguage = "no"; + }); + + // When app is in language 'no' + describe("når språket er norsk (no)", () => { + it('viser "EN" som knappetekst', () => { + render(); + + expect(screen.getByRole("button")).toHaveTextContent("EN"); + }); + + it('har aria-label "Switch to English"', () => { + render(); + + expect(screen.getByRole("button")).toHaveAccessibleName( + "Switch to English", + ); + }); + + it('kaller changeLanguage med "en" ved klikk', async () => { + const user = userEvent.setup(); + render(); + + await user.click(screen.getByRole("button")); + + expect(changeLanguage).toHaveBeenCalledWith("en"); + expect(changeLanguage).toHaveBeenCalledTimes(1); + }); + }); + + // When app is in language 'en' + describe("når språket er engelsk (en)", () => { + beforeEach(() => { + mockLanguage = "en"; + }); + + it('viser "NO" som knappetekst', () => { + render(); + expect(screen.getByRole("button")).toHaveTextContent("NO"); + }); + + it('har aria-label "Bytt til norsk"', () => { + render(); + expect(screen.getByRole("button")).toHaveAccessibleName("Bytt til norsk"); + }); + + it('kaller changeLanguage med "nb" ved klikk', async () => { + const user = userEvent.setup(); + render(); + + await user.click(screen.getByRole("button")); + + expect(changeLanguage).toHaveBeenCalledWith("no"); + expect(changeLanguage).toHaveBeenCalledTimes(1); + }); + }); + + // Snapshot tests + it("matcher snapshot (norsk)", () => { + mockLanguage = "no"; + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("matcher snapshot (engelsk)", () => { + mockLanguage = "en"; + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/frontend/src/tests/__snapshots__/LanguageSwitcher.test.tsx.snap b/frontend/src/tests/__snapshots__/LanguageSwitcher.test.tsx.snap new file mode 100644 index 00000000..07eedcb4 --- /dev/null +++ b/frontend/src/tests/__snapshots__/LanguageSwitcher.test.tsx.snap @@ -0,0 +1,25 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`LanguageSwitcher > matcher snapshot (engelsk) 1`] = ` +
+ +
+`; + +exports[`LanguageSwitcher > matcher snapshot (norsk) 1`] = ` +
+ +
+`; From 209aca93f377be8e54e1ca282f0ee2e808b96c6e Mon Sep 17 00:00:00 2001 From: Helene Lotsberg Date: Tue, 6 Oct 2026 13:58:43 +0200 Subject: [PATCH 2/3] add translation consistency test to verify translation files have matching keys --- frontend/src/tests/Translation.test.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 frontend/src/tests/Translation.test.tsx diff --git a/frontend/src/tests/Translation.test.tsx b/frontend/src/tests/Translation.test.tsx new file mode 100644 index 00000000..037b0860 --- /dev/null +++ b/frontend/src/tests/Translation.test.tsx @@ -0,0 +1,21 @@ +import { describe, it, expect } from "vitest"; +import no from "../i18n/locales/no/translation.json"; +import en from "../i18n/locales/en/translation.json"; + +// Turns nested translations into a flat list of keys, e.g. "explorePage.watering" +function flatten(obj: Record, prefix = ""): string[] { + return Object.entries(obj).flatMap(([key, value]) => + typeof value === "object" && value !== null + ? flatten(value as Record, `${prefix}${key}.`) + : [`${prefix}${key}`], + ); +} + +// checks that Norwegian and English have exactly the same keys. +// If a key is missing in one language, the test fails and shows +// a diff of the two key lists, so you can see which keys differ. +describe("translations", () => { + it("Norwegian and English have the same keys", () => { + expect(flatten(en).sort()).toEqual(flatten(no).sort()); + }); +}); \ No newline at end of file From 31d231274b540fca3797b73183c6dc200507f36a Mon Sep 17 00:00:00 2001 From: Helene Lotsberg Date: Tue, 6 Oct 2026 13:59:52 +0200 Subject: [PATCH 3/3] format tests with prettier --- frontend/src/tests/LanguageSwitcher.test.tsx | 2 +- frontend/src/tests/Translation.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/tests/LanguageSwitcher.test.tsx b/frontend/src/tests/LanguageSwitcher.test.tsx index 176282dd..bbba101f 100644 --- a/frontend/src/tests/LanguageSwitcher.test.tsx +++ b/frontend/src/tests/LanguageSwitcher.test.tsx @@ -90,4 +90,4 @@ describe("LanguageSwitcher", () => { const { container } = render(); expect(container).toMatchSnapshot(); }); -}); \ No newline at end of file +}); diff --git a/frontend/src/tests/Translation.test.tsx b/frontend/src/tests/Translation.test.tsx index 037b0860..49793bfe 100644 --- a/frontend/src/tests/Translation.test.tsx +++ b/frontend/src/tests/Translation.test.tsx @@ -18,4 +18,4 @@ describe("translations", () => { it("Norwegian and English have the same keys", () => { expect(flatten(en).sort()).toEqual(flatten(no).sort()); }); -}); \ No newline at end of file +});