Add mult-word translation support

Supports the translation of multiple words at once. Added tests to check that this works and displays correctly.
mishmanners · Aug 12, 2024 · 3b514a3 · 3b514a3
1 parent 6e1c530
commit 3b514a3
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 11 deletions.
diff --git a/src/components/client/Search.jsx b/src/components/client/Search.jsx
@@ -54,19 +54,25 @@ export const Search = () => {
         const fromLanguage = formData.get('fromLanguage');
         const toLanguage = formData.get('toLanguage');
 
-        // Get the search query from the form input
-        const word = formData.get('wordSearch').trim().toLowerCase();
+        // Split the search query on comma
+        const words = formData.get('wordSearch').split(',').map((word) => word.trim().toLowerCase());
 
         if (fromLanguage && toLanguage) {
             // Initialize an object to store the translation results
             let translations = [];
 
-            // Retrieve translations for the selected languages
-            try {
-                translations.push([word, getTranslationsForLanguages(fromLanguage, toLanguage, word)]);
-            } catch(e) {
-                translations.push([word, toError(e)]);
-            }
+            // Iterate over each unique word and perform translation
+            new Set(words).forEach((word) => {
+                // Retrieve translations for the selected languages
+                try {
+                    translations.push([
+                        word,
+                        getTranslationsForLanguages(fromLanguage, toLanguage, word)
+                    ]);
+                } catch(e) {
+                    translations.push([word, toError(e)]);
+                }
+            });
 
             // Display translations to the user as needed
             setTranslationResults(translations);
@@ -104,8 +110,15 @@ export const Search = () => {
             {/* Display translation results */}
             <h3>Translation Results</h3>
             <ul data-testid="translation-results">
-                {translationResults.flatMap(([_query, value]) => value.matches).map((value) => (
-                    <li key={value}>{value}</li>
+                {translationResults.map(([fromWord, result]) => (
+                    <li key={fromWord}>
+                        <strong>{fromWord}</strong>
+                        <ul>
+                            {result.matches.map((word) => (
+                                <li key={word}>{word}</li>
+                            ))}
+                        </ul>
+                    </li>
                 ))}
             </ul>
 

diff --git a/tests/translations.spec.js b/tests/translations.spec.js
@@ -21,7 +21,7 @@ test("can translate a word", async ({ page }) => {
   await page.getByRole("button", { name: "Translate" }).click();
 
   await expect(
-    page.getByTestId("translation-results").locator("> li")
+    page.getByTestId("translation-results").locator("li li")
   ).toHaveText([/Milch/, /Milchprodukt/]);
 });
 
@@ -38,3 +38,43 @@ test("shows an error when there is no translation", async ({ page }) => {
     /Translations not found for selected language combination/
   );
 });
+
+test("translates food dietaries", async ({ page }) => {
+  await page.goto("/translations");
+
+  await page.getByLabel("From").selectOption("English");
+  await page.getByLabel("To").selectOption("French");
+  await page.getByLabel("Word").fill("gluten-free, vegan, dairy-free");
+
+  await page.getByRole("button", { name: "Translate" }).click();
+
+  await expect(
+    page.getByTestId("translation-results").locator("li li")
+  ).toHaveText([
+    /sans gluten/i,
+    /végétalienne/i,
+    /végétalien/i,
+    /végan/i,
+    /sans lactose/i,
+    /sans produits laitiers/i,
+  ]);
+});
+
+test("deduplicates words in search field", async ({ page }) => {
+  await page.goto("/translations");
+
+  await page.getByLabel("From").selectOption("English");
+  await page.getByLabel("To").selectOption("German");
+  await page.getByLabel("Word").fill("egg,egg");
+
+  await page.getByRole("button", { name: "Translate" }).click();
+
+  await expect(
+    page.getByTestId("translation-results").locator("li li")
+  ).toHaveText([
+    /Ei/,
+    /Eier/,
+    /Eiweiß/,
+    /Eigelb/,
+  ]);
+});