Add in loadTranslations/clearTranslations to i18n, use stored message…

…s if they exist. (#2277) ## Summary: This is adding in functionality that's similar to LinguiJS, to the wonder-blocks-i18n package, so that we can have a store of translated strings and use them for our translations instead of assuming that the strings will already be translated for us. Issue: FEI-5682 ## Test plan: Tests should pass! I'll be wiring this up in Webapp in a separate PR, once this lands. Author: jeresig Reviewers: jeresig, jandrade Required Reviewers: Approved By: jandrade Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: #2277
Khan · Jul 22, 2024 · fc7dc5e · fc7dc5e
1 parent 273d1bc
commit fc7dc5e
Show file tree

Hide file tree

Showing 10 changed files with 417 additions and 65 deletions.
diff --git a/.changeset/dull-stingrays-mate.md b/.changeset/dull-stingrays-mate.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-i18n": minor
+---
+
+Add loadTranslations/clearTranslations methods to wonder-blocks-i18n.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,5 +13,6 @@
     "files.associations": {
         "*.flow": "plaintext",
     },
-    "flow.enabled": false
-}
+    "flow.enabled": false,
+    "jest.jestCommandLine": "yarn jest"
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -44,11 +44,11 @@
                 "focus": false,
                 "panel": "dedicated"
             },
-            "script": "test",
+            "script": "jest",
             "group": {
                 "kind": "test",
                 "isDefault": true
             }
         }
     ]
-}
+}
diff --git a/packages/wonder-blocks-form/src/components/__tests__/field-heading.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/field-heading.test.tsx
@@ -187,7 +187,11 @@ describe("FieldHeading", () => {
         render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label={<I18nInlineMarkup>Hello, world!</I18nInlineMarkup>}
+                label={
+                    <I18nInlineMarkup b={(s: string) => <b>{s}</b>}>
+                        {"<b>Test</b> Hello, world!"}
+                    </I18nInlineMarkup>
+                }
             />,
         );
 
@@ -205,7 +209,11 @@ describe("FieldHeading", () => {
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label={<Body>Hello, world</Body>}
-                description={<I18nInlineMarkup>description</I18nInlineMarkup>}
+                description={
+                    <I18nInlineMarkup b={(s: string) => <b>{s}</b>}>
+                        {"<b>Test</b> description"}
+                    </I18nInlineMarkup>
+                }
             />,
         );
 

diff --git a/packages/wonder-blocks-i18n/src/functions/__tests__/i18n-store.test.ts b/packages/wonder-blocks-i18n/src/functions/__tests__/i18n-store.test.ts
@@ -0,0 +1,147 @@
+import {
+    clearTranslations,
+    getPluralTranslation,
+    getSingularTranslation,
+    loadTranslations,
+} from "../i18n-store";
+import {setLocale} from "../locale";
+
+describe("getSingularTranslation", () => {
+    const TEST_LOCALE = "en-pt";
+
+    afterEach(() => {
+        clearTranslations(TEST_LOCALE);
+    });
+
+    it("should return the translated string", () => {
+        // Arrange
+        loadTranslations(TEST_LOCALE, {
+            test: "arrrr matey",
+        });
+        setLocale(TEST_LOCALE);
+
+        // Act
+        const result = getSingularTranslation("test");
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"arrrr matey"`);
+    });
+
+    it("should return the original string if no translation found", () => {
+        // Arrange
+        loadTranslations(TEST_LOCALE, {
+            test2: "arrrr matey",
+        });
+        setLocale(TEST_LOCALE);
+
+        // Act
+        const result = getSingularTranslation("test");
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"test"`);
+    });
+
+    it("should return the translated string even if it's plural", () => {
+        // Arrange
+        loadTranslations(TEST_LOCALE, {
+            test: ["arrrr matey", "arrrr mateys"],
+        });
+        setLocale(TEST_LOCALE);
+
+        // Act
+        const result = getSingularTranslation("test");
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"arrrr matey"`);
+    });
+
+    it("should return a fake translation", () => {
+        // Arrange
+        setLocale("boxes");
+
+        // Act
+        const result = getSingularTranslation("test");
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"□□□□"`);
+    });
+});
+
+describe("getPluralTranslation", () => {
+    const TEST_LOCALE = "en-pt";
+
+    afterEach(() => {
+        clearTranslations(TEST_LOCALE);
+    });
+
+    it("should return the translated plural singular string", () => {
+        // Arrange
+        loadTranslations(TEST_LOCALE, {
+            test: "arrrr matey",
+        });
+        setLocale(TEST_LOCALE);
+
+        // Act
+        const result = getPluralTranslation(
+            {
+                lang: TEST_LOCALE,
+                messages: ["test singular", "test plural"],
+            },
+            0,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"test singular"`);
+    });
+
+    it("should return the translated plural string", () => {
+        // Arrange
+        loadTranslations(TEST_LOCALE, {
+            test: "arrrr matey",
+        });
+        setLocale(TEST_LOCALE);
+
+        // Act
+        const result = getPluralTranslation(
+            {
+                lang: TEST_LOCALE,
+                messages: ["test singular", "test plural"],
+            },
+            1,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"test plural"`);
+    });
+
+    it("should return the original string if no translation found", () => {
+        // Arrange
+        loadTranslations(TEST_LOCALE, {
+            test: "arrrr matey",
+        });
+        setLocale(TEST_LOCALE);
+
+        // Act
+        const result = getSingularTranslation("test2");
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"test2"`);
+    });
+
+    it("should return a fake translation", () => {
+        // Arrange
+        setLocale("boxes");
+
+        // Act
+        const result = getPluralTranslation(
+            {
+                lang: TEST_LOCALE,
+                messages: ["test singular", "test plural"],
+            },
+            0,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"□□□□ □□□□□□□□"`);
+    });
+});
diff --git a/packages/wonder-blocks-i18n/src/functions/__tests__/i18n.test.ts b/packages/wonder-blocks-i18n/src/functions/__tests__/i18n.test.ts
@@ -3,6 +3,7 @@ import * as React from "react";
 import * as Locale from "../locale";
 import * as FakeTranslate from "../i18n-faketranslate";
 import {_, $_, ngettext, doNotTranslate, doNotTranslateYet} from "../i18n";
+import {clearTranslations, loadTranslations} from "../i18n-store";
 
 jest.mock("react", () => {
     return {
@@ -27,7 +28,7 @@ describe("i18n", () => {
         jest.clearAllMocks();
     });
 
-    describe("integration tests", () => {
+    describe("FakeTranslate integration tests", () => {
         beforeEach(() => {
             jest.spyOn(Locale, "getLocale").mockImplementation(() => "boxes");
         });
@@ -89,6 +90,85 @@ describe("i18n", () => {
         });
     });
 
+    describe("I18nStore integration tests", () => {
+        const TEST_LOCALE = "en-pt";
+
+        afterEach(() => {
+            clearTranslations(TEST_LOCALE);
+        });
+
+        beforeEach(() => {
+            jest.spyOn(Locale, "getLocale").mockImplementation(
+                () => TEST_LOCALE,
+            );
+        });
+
+        it("_ should translate", () => {
+            // Arrange
+            loadTranslations(TEST_LOCALE, {
+                test: "arrrr matey",
+            });
+
+            // Act
+            const result = _("test");
+
+            // Assert
+            expect(result).toMatchInlineSnapshot(`"arrrr matey"`);
+        });
+
+        it("$_ should translate", () => {
+            // Arrange
+            loadTranslations(TEST_LOCALE, {
+                test: "arrrr matey",
+            });
+
+            // Act
+            const result = $_("test");
+
+            // Assert
+            expect(result).toMatchInlineSnapshot(`"arrrr matey"`);
+        });
+
+        it("ngettext should translate", () => {
+            // Arrange
+            loadTranslations(TEST_LOCALE, {
+                Singular: ["arrrr matey", "arrrr mateys"],
+            });
+
+            // Act
+            const result = ngettext("Singular", "Plural", 0);
+
+            // Assert
+            expect(result).toMatchInlineSnapshot(`"Plural"`);
+        });
+
+        it("doNotTranslate should not translate", () => {
+            // Arrange
+            loadTranslations(TEST_LOCALE, {
+                test: "arrrr matey",
+            });
+
+            // Act
+            const result = doNotTranslate("test");
+
+            // Assert
+            expect(result).toEqual("test");
+        });
+
+        it("doNotTranslateYet should not translate", () => {
+            // Arrange
+            loadTranslations(TEST_LOCALE, {
+                test: "arrrr matey",
+            });
+
+            // Act
+            const result = doNotTranslateYet("test");
+
+            // Assert
+            expect(result).toEqual("test");
+        });
+    });
+
     describe("# _", () => {
         it("returns input when no translation nor substitutions", () => {
             // Arrange