Repository: freeCodeCamp/freeCodeCamp
File: e2e/finish-exam-modal.spec.ts (TypeScript)

Code before:
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';

test.use({ storageState: 'playwright/.auth/certified-user.json' });

const examUrl =
  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';

test.beforeEach(async ({ page }) => {
  await page.goto(examUrl);
  await page
    .getByRole('button', {
      name: translations.buttons['click-start-exam']
    })
    .click();
  for (let i = 0; i < 4; i++) {
    await page.getByTestId('exam-answer-label-0').check();
    await page
      .getByRole('button', {
        name: translations.buttons['next-question']
      })
      .click();
  }
  await page.getByTestId('exam-answer-label-0').check();
  await page
    .getByRole('button', {
      name: translations.buttons['finish-exam']
    })
    .click();
});

test.describe('Finish Exit exam Modal E2E Test Suite', () => {
  test('Verifies the Correct Rendering of the Finish Exit exam Modal', async ({
    page
  }) => {
    await expect(
      page.getByText(translations.learn.exam['finish-header'])
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: translations.buttons.close
      })
    ).toBeVisible();
    await expect(page.getByText(translations.learn.exam.finish)).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: translations.learn.exam['finish-yes']
      })
    ).toBeVisible();

Review comment (suggestion):
There are 5 questions in the exam, and we are clicking through the question with:
- A `for` loop that runs 4 times
- An addition click on the last question

We might just update the loop to run 5 times and remove the extra click.

And since we only want to click the first option of each question, we can do this instead:

```ts
const quizOptions = await page.getByRole('radio').all();
await quizOptions[0].check({ force: true });
```

which will eliminate the need to add `data-playwright-test-label` to the element.

Code after:
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';

test.use({ storageState: 'playwright/.auth/certified-user.json' });

const examUrl =
  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';
const QUESTION_COUNT = 5;

test.beforeEach(async ({ page }) => {
  await page.goto(examUrl);
  await page
    .getByRole('button', {
      name: translations.buttons['click-start-exam']
    })
    .click();
  for (let i = 0; i < QUESTION_COUNT; i++) {
    await page.getByRole('radio').first().check({ force: true });

    if (i < QUESTION_COUNT - 1) {
      await page
        .getByRole('button', {
          name: translations.buttons['next-question']
        })
        .click();
    } else {
      await page
        .getByRole('button', {
          name: translations.buttons['finish-exam']
        })
        .click();
    }
  }
});

test.describe('Finish Exit exam Modal E2E Test Suite', () => {
  test('Verifies the Correct Rendering of the Finish Exit exam Modal', async ({
    page
  }) => {
    await expect(
      page.getByText(translations.learn.exam['finish-header'])
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: translations.buttons.close
      })
    ).toBeVisible();
    await expect(page.getByText(translations.learn.exam.finish)).toBeVisible();
    await expect(