(test) O3-4968: Adding e2e tests for TranslationBuilder component

e2e/pages/form-builder-page.ts

@@ -71,6 +71,30 @@ export class FormBuilderPage {
   readonly questionIdInput = () => this.page.getByRole('textbox', { name: /question id/i });
   readonly questionCreatedMessage = () => this.page.getByText(/new question created/i);
 
+  readonly translationBuilderTab = () => this.page.getByRole('tab', { name: /translation builder/i });
+  readonly translationBuilderPanel = () =>
+    this.page
+      .getByRole('tabpanel')
+      .filter({ has: this.page.getByRole('button', { name: /upload translation/i }) })
+      .first();
+  readonly languageDropdown = () => this.translationBuilderPanel().locator('#target-language');
+  readonly downloadTranslationButton = () =>
+    this.translationBuilderPanel().getByRole('button', { name: /download translation/i });
+  readonly uploadTranslationButton = () =>
+    this.translationBuilderPanel().getByRole('button', { name: /upload translation/i });
+  readonly translationSearchInput = () => this.page.getByPlaceholder(/search translation keys/i);
+  readonly translationTabsList = () =>
+    this.translationBuilderPanel().getByRole('tablist', { name: 'Translation filter' });
+  readonly allTranslationsTab = () => this.translationTabsList().getByRole('tab', { name: 'All', exact: true });
+  readonly translatedTab = () => this.translationTabsList().getByRole('tab', { name: 'Translated', exact: true });
+  readonly untranslatedTab = () => this.translationTabsList().getByRole('tab', { name: 'Untranslated', exact: true });
+  readonly editTranslationButton = (index: number = 0) =>
+    this.page.locator('[data-testid="edit-translation-button"]').nth(index);
+  readonly translationModal = () => this.page.getByRole('dialog');
+  translationValueInput() {
+    return this.page.getByTestId('translation-value-input');
+  }
+  readonly saveTranslationButton = () => this.translationModal().getByRole('button', { name: 'Save' });
   async gotoFormBuilder() {
     await this.page.goto('form-builder');
   }

e2e/specs/translation-builder-workflows.spec.ts

@@ -0,0 +1,91 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+
+import { test } from '../core';
+import { expect } from '@playwright/test';
+import { deleteForm, createForm, createValueReference, addFormResources } from '../commands/form-operations';
+import { FormBuilderPage } from '../pages';
+
+let formUuid = '';
+
+const formDetails = {
+  name: 'Covid-19 Screening',
+  description: 'A test form for recording COVID-19 screening information',
+  version: '1.0',
+  published: true,
+};
+
+test.describe('Translation Builder Workflows', () => {
+  test.beforeEach(async ({ api }) => {
+    const form = await createForm(api, false, formDetails);
+    formUuid = form.uuid;
+
+    const valueReference = await createValueReference(api);
+    await addFormResources(api, valueReference, formUuid);
+  });
+
+  test('Manage translations: switch languages, filter, and search', async ({ page }) => {
+    const formBuilderPage = new FormBuilderPage(page);
+
+    await test.step('Open a form in the translation builder', async () => {
+      await formBuilderPage.gotoFormBuilder();
+      await formBuilderPage.searchForForm(formDetails.name);
+      await formBuilderPage.page.getByRole('row', { name: formDetails.name }).getByLabel('Edit Schema').first().click();
+      await formBuilderPage.translationBuilderTab().click();
+    });
+
+    await test.step('Switch between languages', async () => {
+      await formBuilderPage.languageDropdown().click();
+      const dropdownMenu = formBuilderPage.translationBuilderPanel().locator('.cds--list-box__menu');
+      await expect(dropdownMenu).toBeVisible();
+      await expect(dropdownMenu.getByRole('option', { name: 'English (en)' })).toBeVisible();
+    });
+
+    await test.step('Filter translations using tabs', async () => {
+      await formBuilderPage.allTranslationsTab().click();
+      await expect(formBuilderPage.allTranslationsTab()).toHaveAttribute('aria-selected', 'true');
+
+      await formBuilderPage.translatedTab().click();
+      await expect(page.locator('[data-status="translated"]')).toHaveCount(0);
+
+      await formBuilderPage.untranslatedTab().click();
+      await expect(formBuilderPage.untranslatedTab()).toHaveAttribute('aria-selected', 'true');
+      await expect(page.locator('[data-status="untranslated"]').first()).toBeVisible();
+    });
+
+    await test.step('Search for a translation string', async () => {
+      const searchInput = formBuilderPage.translationSearchInput();
+      await searchInput.fill('Visit Details');
+      await expect(searchInput).toHaveValue('Visit Details');
+
+      const results = page.locator('[data-testid="translation-entry"]');
+      await expect(results).not.toHaveCount(0);
+      await expect(results.first()).toBeVisible();
+    });
+  });
+
+  test('Edit and update an individual translation', async ({ page }) => {
+    const formBuilderPage = new FormBuilderPage(page);
+
+    await test.step('When I open a form in the translation builder', async () => {
+      await formBuilderPage.gotoFormBuilder();
+      await formBuilderPage.searchForForm(formDetails.name);
+      await formBuilderPage.page.getByRole('row', { name: formDetails.name }).getByLabel('Edit Schema').first().click();
+      await formBuilderPage.translationBuilderTab().click();
+    });
+
+    await test.step('Edit a translation string and save it', async () => {
+      await formBuilderPage.editTranslationButton(0).click();
+      const translationInput = formBuilderPage.translationValueInput();
+      await translationInput.fill('Test Translation Updated');
+      await formBuilderPage.saveTranslationButton().click();
+      await expect(formBuilderPage.translationModal()).toBeHidden();
+      await expect(formBuilderPage.editTranslationButton(0)).toBeEnabled();
+    });
+  });
+
+  test.afterEach(async ({ api }) => {
+    if (formUuid) {
+      await deleteForm(api, formUuid);
+    }
+  });
+});

src/components/translation-builder/edit-translation.modal.tsx

@@ -25,6 +25,7 @@ const EditTranslationModal: React.FC<EditTranslationModalProps> = ({ onClose, or
           labelText={t('translationValue', 'Translated Value')}
           value={newValue}
           onChange={(e) => setNewValue(e.target.value)}
+          data-testid="translation-value-input"
         />
       </ModalBody>
       <ModalFooter>

src/components/translation-builder/translation-builder.component.tsx

@@ -287,16 +287,26 @@ const TranslationBuilder: React.FC<TranslationBuilderProps> = ({ formSchema, onU
           <div className={styles.translationEditor}>
             {filteredTranslations.length > 0 ? (
               filteredTranslations.map(([key, value]) => (
-                <div key={key} className={styles.translationRow}>
-                  <div className={styles.translationKey}>{key}</div>
-                  <div className={styles.translatedKey}>{value}</div>
+                <div
+                  key={key}
+                  className={styles.translationRow}
+                  data-testid="translation-entry"
+                  data-status="untranslated"
+                >
+                  <div className={styles.translationKey} data-testid="translation-key">
+                    {key}
+                  </div>
+                  <div className={styles.translatedKey} data-testid="translation-value">
+                    {value}
+                  </div>
                   <div className={styles.inlineControls}>
                     <IconButton
                       kind="ghost"
                       label={t('editString', 'Edit string')}
                       onClick={() => handleEditClick(key)}
                       size="md"
                       className={styles.deleteButton}
+                      data-testid="edit-translation-button"
                     >
                       <Edit />
                     </IconButton>