37 test language switcher and translation

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(<LanguageSwitcher />);
+
+      expect(screen.getByRole("button")).toHaveTextContent("EN");
+    });
+
+    it('har aria-label "Switch to English"', () => {
+      render(<LanguageSwitcher />);
+
+      expect(screen.getByRole("button")).toHaveAccessibleName(
+        "Switch to English",
+      );
+    });
+
+    it('kaller changeLanguage med "en" ved klikk', async () => {
+      const user = userEvent.setup();
+      render(<LanguageSwitcher />);
+
+      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(<LanguageSwitcher />);
+      expect(screen.getByRole("button")).toHaveTextContent("NO");
+    });
+
+    it('har aria-label "Bytt til norsk"', () => {
+      render(<LanguageSwitcher />);
+      expect(screen.getByRole("button")).toHaveAccessibleName("Bytt til norsk");
+    });
+
+    it('kaller changeLanguage med "nb" ved klikk', async () => {
+      const user = userEvent.setup();
+      render(<LanguageSwitcher />);
+
+      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(<LanguageSwitcher />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matcher snapshot (engelsk)", () => {
+    mockLanguage = "en";
+    const { container } = render(<LanguageSwitcher />);
+    expect(container).toMatchSnapshot();
+  });
+});

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<string, unknown>, prefix = ""): string[] {
+  return Object.entries(obj).flatMap(([key, value]) =>
+    typeof value === "object" && value !== null
+      ? flatten(value as Record<string, unknown>, `${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());
+  });
+});

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`] = `
+<div>
+  <button
+    aria-label="Bytt til norsk"
+    class="sidebar-button language-button"
+    type="button"
+  >
+    NO
+  </button>
+</div>
+`;
+
+exports[`LanguageSwitcher > matcher snapshot (norsk) 1`] = `
+<div>
+  <button
+    aria-label="Switch to English"
+    class="sidebar-button language-button"
+    type="button"
+  >
+    EN
+  </button>
+</div>
+`;