Repository: freeCodeCamp/freeCodeCamp
File: e2e/email-settings.spec.ts (TypeScript)

Code before:
} as const;

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

test.beforeEach(async ({ page }) => {
  await page.goto('/settings');
});

test.describe('Email Settings', () => {
  test('should display email settings section header on settings page', async ({
    page
  }) => {
    await expect(
      page.getByTestId(settingsPageElement.emailSettingsSectionHeader)
    ).toHaveText(translations.settings.email.heading);
  });

  test('should display current email address', async ({ page }) => {
    await expect(
      page.getByTestId(settingsPageElement.currentEmailText)
    ).toHaveText('foo@bar.com');
  });

  test('should disable save button by default', async ({ page }) => {
    await expect(
      page.getByTestId(settingsPageElement.saveButton)
    ).toBeDisabled();
  });

  test('should display email verification alert after email update', async ({
    page,
    browserName
  }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');

    const newEmailAddress = 'foo-update@bar.com';

    await page
      .getByLabel(translations.settings.email.new, { exact: true })
      .fill(newEmailAddress);
    await page
      .getByLabel(translations.settings.email.confirm, { exact: true })
      .fill(newEmailAddress);
    await page.getByTestId(settingsPageElement.saveButton).click();
    await expect(
      page.getByTestId(settingsPageElement.flashMessageAlert)
    ).toBeVisible();

    await page.reload();
    await expect(
      page.getByTestId(settingsPageElement.emailVerificationAlert)

Review comment (suggestion):
We should use `getByRole` here instead.

https://contribute.freecodecamp.org/#/how-to-add-playwright-tests?id=-identifying-a-dom-element

Code after:
  await page.goto('/settings');
});

test.describe('Email Settings', () => {
  test('should display the content correctly', async ({ page }) => {
    await expect(
      page.getByRole('heading', { name: translations.settings.email.heading })
    ).toBeVisible();

    await expect(page.getByText('foo@bar.com')).toBeVisible();

    await expect(
      page.getByRole('button', {
        name: `${translations.buttons.save} ${translations.settings.email.heading}`
      })
    ).toBeDisabled();

    await expect(
      page
        .getByRole('group', { name: translations.settings.email.weekly })
        .locator('legend')
    ).toBeVisible();

    await expect(
      page.getByRole('button', {
        name: translations.buttons['yes-please']
      })
    ).toHaveAttribute('aria-pressed', 'false');

    await expect(
      page.getByRole('button', {
        name: translations.buttons['no-thanks']
      })
    ).toHaveAttribute('aria-pressed', 'true');
  });

  test('should display email verification alert after email update', async ({
    page,
    browserName
  }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');

    const newEmailAddress = 'foo-update@bar.com';

    // Need exact match as there are "New email" and "Confirm new email" labels
    await page
      .getByLabel(translations.settings.email.new, { exact: true })
      .fill(newEmailAddress);

    await page
      .getByLabel(translations.settings.email.confirm)