Repository: freeCodeCamp/freeCodeCamp
File: e2e/certification.spec.ts (TypeScript)

Code before:
import { test, expect } from '@playwright/test';

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

test.beforeEach(async ({ page }) => {
  await page.goto('/certification/certifieduser/responsive-web-design');
});

test.describe('Certification page', () => {
  test('The certificate page has a donation section', async ({ page }) => {
    const donation = page.getByTestId('donation-section');
    await expect(donation).toBeVisible();

    const donationText = page.getByTestId('donation-text');
    await expect(donationText).toHaveText(
      `Only you can see this message. Congratulations on earning this certification. It's no easy task. Running freeCodeCamp isn't easy either. Nor is it cheap. Help us help you and many other people around the world. Make a tax-deductible supporting donation to our charity today.`
    );

    const donationForm = page.getByTestId('donation-form');
    await expect(donationForm).toBeVisible();
  });

  test('The certificate has wrapper, header and footer', async ({ page }) => {
    const wrapper = page.getByTestId('cert-wrapper');
    await expect(wrapper).toBeVisible();

    const header = page.getByTestId('cert-header');
    await expect(header).toBeVisible();

    const footer = page.getByTestId('cert-footer');
    await expect(footer).toBeVisible();

    const QunicySignature = page.getByTestId('quincy-signature');
    await expect(QunicySignature).toBeVisible();
  });

  test('The certificate itself has relevant information in it', async ({
    page
  }) => {
    const infoContainer = page.getByTestId('cert-info-container');
    await expect(infoContainer).toBeVisible();


Review comment (suggestion):
It's better if you get the text from the translations: `client/i18n/locales/english/translations.json`

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' });

test.describe('Certification page - Non Microsoft', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/certification/certifieduser/responsive-web-design');
  });

  test('The certificate page has a donation section', async ({ page }) => {
    const donationSection = page.getByTestId('donation-section');
    await expect(donationSection).toBeVisible();

    const donationText = donationSection.getByTestId('donation-text');
    await expect(donationText).toHaveText(translations.donate['only-you']);

    const donationForm = donationSection.getByTestId('donation-form');
    await expect(donationForm).toBeVisible();
  });

  test('Verify the certificate itself', async ({ page }) => {
    const certWrapper = page.getByTestId('cert-wrapper');
    await expect(certWrapper).toBeVisible();

    const header = certWrapper.getByTestId('cert-header');
    await expect(header).toBeVisible();
    const fccLogo = header.getByTestId('cert-fcc-logo');
    await expect(fccLogo).toBeVisible();
    // Non Microsoft certs should not have this one
    const microsoftLogo = header.getByTestId('cert-microsoft-logo');
    await expect(microsoftLogo).not.toBeVisible();

    const certInfoContainer = certWrapper.getByTestId('cert-info-container');
    await expect(certInfoContainer).toBeVisible();
    const certTitle = certInfoContainer.getByTestId('certification-title');
    await expect(certTitle).toHaveText(
      translations.certification.title['Responsive Web Design']
    );

    const footer = certWrapper.getByTestId('cert-footer');
    await expect(footer).toBeVisible();