chore: import upstream snapshot with attribution

e2e/multiple-choice-question-challenge.spec.ts

@@ -0,0 +1,109 @@
+import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+const pageWithSpeaking =
+  '/learn/b1-english-for-developers/learn-about-adverbial-phrases/task-19';
+const pageWithoutSpeaking =
+  '/learn/responsive-web-design-v9/lecture-what-is-css/what-is-the-basic-anatomy-of-a-css-rule';
+
+test.describe('Multiple Choice Question Challenge - With Speaking Modal', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(pageWithSpeaking);
+  });
+
+  test('should show the speaking button and open the speaking modal', async ({
+    page,
+    browserName
+  }) => {
+    test.skip(
+      browserName === 'firefox',
+      'Skip on Firefox - speech recognition unsupported'
+    );
+
+    const speakingButtons = page.getByRole('button', {
+      name: translations['speaking-modal']['speaking-button']
+    });
+    await expect(speakingButtons).toHaveCount(2);
+
+    await expect(page.getByRole('radio')).toHaveCount(2);
+
+    for (let i = 0; i < 2; i++) {
+      const btn = speakingButtons.nth(i);
+      await expect(btn).toBeVisible();
+
+      const describedBy = await btn.getAttribute('aria-describedby');
+      expect(describedBy).toBeTruthy();
+
+      // Ensure aria-describedby points to an existing element
+      await expect(page.locator(`#${describedBy}`)).toBeVisible();
+
+      await expect(btn).toHaveAttribute(
+        'aria-label',
+        translations['speaking-modal']['speaking-button']
+      );
+    }
+
+    await speakingButtons.first().click();
+
+    await expect(page.getByRole('dialog')).toBeVisible();
+
+    const playButton = page.getByRole('button', {
+      name: translations['speaking-modal']['play']
+    });
+    await expect(playButton).toBeVisible();
+    await expect(playButton).toBeFocused(); // The button is focused by default
+    await expect(
+      page.getByRole('button', {
+        name: translations['speaking-modal']['record']
+      })
+    ).toBeVisible();
+  });
+
+  test('should show not-supported message on Firefox', async ({
+    page,
+    browserName
+  }) => {
+    test.skip(
+      browserName !== 'firefox',
+      'Run only on Firefox to validate unsupported path'
+    );
+
+    const radioCount = await page.getByRole('radio').count();
+    expect(radioCount).toBeGreaterThan(1);
+
+    const speakingButton = page
+      .getByRole('button', {
+        name: translations['speaking-modal']['speaking-button']
+      })
+      .first();
+    await expect(speakingButton).toBeVisible();
+
+    await speakingButton.click();
+
+    await expect(page.getByRole('dialog')).toBeVisible();
+
+    await expect(
+      page.getByText(
+        translations['speaking-modal']['speech-recognition-not-supported']
+      )
+    ).toBeVisible();
+  });
+});
+
+test.describe('Multiple Choice Question Challenge - Without Speaking Modal', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(pageWithoutSpeaking);
+  });
+
+  test('should not show speaking controls on a challenge without speaking', async ({
+    page
+  }) => {
+    await expect(page.getByRole('radio')).toHaveCount(12);
+
+    await expect(
+      page.getByRole('button', {
+        name: translations['speaking-modal']['speaking-button']
+      })
+    ).toHaveCount(0);
+  });
+});