Enable German in the Frontend (#154)

* Enable German in the Frontend

* dynamically select language menu item during test

* fix typo

gluco-check-frontend/firebase.json

@@ -61,6 +61,11 @@
         "source": "/join-beta/sv",
         "destination": "https://github.com/nielsmaerten/gluco-check/discussions/149",
         "type": 307
+      },
+      {
+        "source": "/join-beta/de",
+        "destination": "https://github.com/nielsmaerten/gluco-check/discussions/151",
+        "type": 307
       }
     ]
   }

gluco-check-frontend/public/locales/de/translation.json

@@ -40,7 +40,7 @@
     "title": "Einstellungen ändern",
     "betaBanner": {
       "action": "Ich helfe gerne",
-      "title": "Achtung! Gluco Check ist noch nicht in [[Ihre Sprache]] verfügbar",
+      "title": "Achtung! Gluco Check ist noch nicht auf Deutsch verfügbar",
       "message": "Sprechen Sie sowohl {{language}} als auch Englisch? Sie können uns helfen, diese Übersetzung zu vervollständigen."
     },
     "form": {
@@ -135,10 +135,11 @@
     "buttonLabel": "Sprache",
     "contribute": "Übersetzungen beitragen",
     "availableLanguageLabels": {
-      "en": "Englisch",
-      "nl": "Niederländisch",
-      "es": "Spanisch",
-      "sv": "Schwedisch"
+      "en": "English",
+      "nl": "Nederlands",
+      "es": "Español",
+      "sv": "Svenska",
+      "de": "Deutsch"
     }
   }
 }

gluco-check-frontend/public/locales/en/translation.json

@@ -138,7 +138,8 @@
       "en": "English",
       "nl": "Nederlands",
       "es": "Español",
-      "sv": "Svenska"
+      "sv": "Svenska",
+      "de": "Deutsch"
     }
   }
 }

gluco-check-frontend/public/locales/es/translation.json

@@ -138,7 +138,8 @@
       "en": "English",
       "nl": "Nederlands",
       "es": "Español",
-      "sv": "Svenska"
+      "sv": "Svenska",
+      "de": "Deutsch"
     }
   }
 }

gluco-check-frontend/public/locales/nl/translation.json

@@ -138,7 +138,8 @@
       "en": "English",
       "nl": "Nederlands",
       "es": "Español",
-      "sv": "Svenska"
+      "sv": "Svenska",
+      "de": "Deutsch"
     }
   }
 }

gluco-check-frontend/public/locales/sv/translation.json

@@ -138,7 +138,8 @@
       "en": "English",
       "nl": "Nederlands",
       "es": "Español",
-      "sv": "Svenska"
+      "sv": "Svenska",
+      "de": "Deutsch"
     }
   }
 }

gluco-check-frontend/src/components/LanguageSelector.test.tsx

@@ -3,7 +3,7 @@ import { axe } from "jest-axe";
 import LanguageSelector from "./LanguageSelector";
 
 const mockLanguage = "en";
-const mockChangeLanauge = jest.fn();
+const mockChangeLanguage = jest.fn();
 jest.mock("react-i18next", () => ({
   useTranslation: () => {
     return {
@@ -12,7 +12,7 @@ jest.mock("react-i18next", () => ({
       }),
       i18n: {
         language: mockLanguage,
-        changeLanguage: mockChangeLanauge,
+        changeLanguage: mockChangeLanguage,
       },
     };
   },
@@ -61,6 +61,11 @@ describe("LanguageSelector component", () => {
   it("handles clicks on button and language selections", async () => {
     expect.assertions(5);
 
+    const findMenuItem = (lngCode: string) =>
+      screen
+        .getAllByRole("menuitem")
+        .find((item) => item.textContent?.endsWith(lngCode));
+
     window.location.assign = jest.fn().mockImplementationOnce((url) => {
       expect(url).toMatchInlineSnapshot(`"/es/path"`);
     });
@@ -71,10 +76,10 @@ describe("LanguageSelector component", () => {
     expect(button).toBeInTheDocument();
     await button.focus();
     await button.click();
-    expect(screen.getAllByRole("menuitem")[0]).toHaveFocus();
+    expect(findMenuItem("en")).toHaveFocus();
 
-    await screen.getAllByRole("menuitem")[1].click();
-    expect(mockChangeLanauge).toHaveBeenCalled();
+    await findMenuItem("es").click();
+    expect(mockChangeLanguage).toHaveBeenCalled();
     expect(window.location.assign).toBeCalled();
   });
 

gluco-check-frontend/src/lib/enums.ts

@@ -28,11 +28,13 @@ export enum AvailableLanguage {
   Dutch = "nl",
   Spanish = "es",
   Swedish = "sv",
+  German = "de",
 }
 
 // These languages are being tested.
 // We'll show a message informing users they have to sign up to get access.
 export enum BetaLanguage {
   Spanish = AvailableLanguage.Spanish,
   Swedish = AvailableLanguage.Swedish,
+  German = AvailableLanguage.German,
 }