🚨(tests) add language related tests; fix getByRole not working in tests

- adds tests and test-utility for solid language switching in tests
- fixes where ...getByRole(menuitem... would not return a valid object

src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

@@ -1,19 +1,41 @@
-import { expect, test } from '@playwright/test';
+import { Page, expect, test } from '@playwright/test';
 
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-});
+import { createDoc } from './common';
 
-test.describe('Language', () => {
-  test('checks the language picker', async ({ page }) => {
-    await expect(page.getByLabel('Logout')).toBeVisible();
+test.describe.serial('Language', () => {
+  let page: Page;
 
+  test.beforeAll(async ({ browser }) => {
+    page = await browser.newPage();
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await waitForLanguageSwitch(page, TestLanguage.English);
+  });
+
+  test.afterEach(async ({ page }) => {
+    // Switch back to English - important for other tests to run as expected
+    await waitForLanguageSwitch(page, TestLanguage.English);
+  });
+
+  test('checks language switching', async ({ page }) => {
     const header = page.locator('header').first();
-    await header
-      .getByRole('button', { name: /Language/ })
-      .getByText('English')
-      .click();
-    await page.getByRole('menuitem', { name: 'Français' }).click();
+
+    // initial language should be english
+    await expect(
+      page.getByRole('button', {
+        name: 'New doc',
+      }),
+    ).toBeVisible();
+
+    // switch to french
+    await waitForLanguageSwitch(page, TestLanguage.French);
+
     await expect(
       header.getByRole('button').getByText('Français'),
     ).toBeVisible();
@@ -21,7 +43,7 @@ test.describe('Language', () => {
     await expect(page.getByLabel('Se déconnecter')).toBeVisible();
 
     await header.getByRole('button').getByText('Français').click();
-    await page.getByRole('menuitem', { name: 'Deutsch' }).click();
+    await page.getByLabel('Deutsch').click();
     await expect(header.getByRole('button').getByText('Deutsch')).toBeVisible();
 
     await expect(page.getByLabel('Abmelden')).toBeVisible();
@@ -52,15 +74,76 @@ test.describe('Language', () => {
     // Check for English 404 response
     await check404Response('Not found.');
 
-    // Switch language to French
-    const header = page.locator('header').first();
-    await header
-      .getByRole('button', { name: /Language/ })
-      .getByText('English')
-      .click();
-    await page.getByRole('menuitem', { name: 'Français' }).click();
+    await waitForLanguageSwitch(page, TestLanguage.French);
 
     // Check for French 404 response
     await check404Response('Pas trouvé.');
   });
+
+  test('it check translations of the slash menu when changing language', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-toolbar', browserName, 1);
+
+    const header = page.locator('header').first();
+    const editor = page.locator('.ProseMirror');
+    // Trigger slash menu to show english menu
+    await editor.click();
+    await editor.fill('/');
+    await expect(page.getByText('Headings', { exact: true })).toBeVisible();
+    await header.click();
+    await expect(page.getByText('Headings', { exact: true })).toBeHidden();
+
+    // Reset menu
+    await editor.click();
+    await editor.fill('');
+
+    // Change language to French
+    await waitForLanguageSwitch(page, TestLanguage.French);
+
+    // Trigger slash menu to show french menu
+    await editor.click();
+    await editor.fill('/');
+    await expect(page.getByText('Titres', { exact: true })).toBeVisible();
+    await header.click();
+    await expect(page.getByText('Titres', { exact: true })).toBeHidden();
+  });
 });
+
+// language helper
+export const TestLanguage = {
+  English: {
+    label: 'English',
+    expectedLocale: ['en-us'],
+  },
+  French: {
+    label: 'Français',
+    expectedLocale: ['fr-fr'],
+  },
+  German: {
+    label: 'Deutsch',
+    expectedLocale: ['de-de'],
+  },
+} as const;
+
+type TestLanguageKey = keyof typeof TestLanguage;
+type TestLanguageValue = (typeof TestLanguage)[TestLanguageKey];
+
+export async function waitForLanguageSwitch(
+  page: Page,
+  lang: TestLanguageValue,
+) {
+  const header = page.locator('header').first();
+  await header.getByRole('button', { name: 'arrow_drop_down' }).click();
+
+  const responsePromise = page.waitForResponse(
+    (resp) =>
+      resp.url().includes('/user') && resp.request().method() === 'PATCH',
+  );
+  await page.getByLabel(lang.label).click();
+  const resolvedResponsePromise = await responsePromise;
+  const responseData = await resolvedResponsePromise.json();
+
+  expect(lang.expectedLocale).toContain(responseData.language);
+}