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

Code before:
];

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

test.beforeEach(async ({ page }) => {
  await page.goto('/certifieduser');
  await page.getByRole('button', { name: 'Preview custom 404 page' }).click();
});

test.afterEach(async ({ page }) => {
  await page.close();
});

test.describe('Profile component', () => {
  test('renders the camper profile correctly', async ({ page }) => {
    await expect(page.getByTestId(profilePageElements.camper)).toBeVisible();
    await expect(page.locator('div.avatar-camper')).toBeVisible();
    expect(await page.locator('.social-media-icons').count()).toEqual(0);
    await expect(
      page.getByRole('heading', { name: '@certifieduser' })
    ).toBeVisible();
    await expect(page.getByText('Full Stack User')).toBeVisible();
    expect(await page.locator('p.location').count()).toEqual(0);
    expect(await page.locator('p.supporter').count()).toEqual(0);
    // About is empty so only 1 of the 2 p.bio's should render
    expect(await page.locator('p.bio').count()).toEqual(1);
    await expect(page.getByText('Joined November 2020')).toBeVisible();
    await expect(
      page.getByRole('link', { name: 'Top Contributor' })
    ).toBeVisible();
    await expect(page.getByText('2019')).toBeVisible();
  });

  test('renders total points correctly', async ({ page }) => {
    await expect(page.getByText('Number of points: 1')).toBeVisible();
  });

  test('renders the heat map correctly', async ({ page }) => {
    await expect(page.locator('div.heatmap-nav.row')).toBeVisible();
    await expect(page.locator('svg.react-calendar-heatmap')).toBeVisible();
    await expect(page.locator('div.streak-container')).toBeVisible();
  });

  test('displays certifications correctly', async ({ page }) => {
    await expect(page.locator('div.certifications.row')).toBeVisible();
    await expect(
      page.getByRole('heading', { name: 'freeCodeCamp Certifications' })
    ).toBeVisible();
    await expect(
      page.getByRole('heading', { name: 'Legacy Certifications' })
    ).toBeVisible();

Review comment (suggestion):
We should query the elements using their text rather than their HTML tag and class name, because these are implementation details and can change in the future.

https://playwright.dev/docs/locators#locate-by-text

Code after:
  {
    name: 'Quality Assurance',
    url: '/certification/certifieduser/quality-assurance-v7'
  },
  {
    name: 'Scientific Computing with Python',
    url: '/certification/certifieduser/scientific-computing-with-python-v7'
  },
  {
    name: 'Data Analysis with Python',
    url: '/certification/certifieduser/data-analysis-with-python-v7'
  },
  {
    name: 'Information Security',
    url: '/certification/certifieduser/information-security-v7'
  },
  {
    name: 'Machine Learning with Python',
    url: '/certification/certifieduser/machine-learning-with-python-v7'
  },
  {
    name: 'College Algebra with Python',
    url: '/certification/certifieduser/college-algebra-with-python-v8'
  },
  {
    name: 'Foundational C# with Microsoft',
    url: '/certification/certifieduser/foundational-c-sharp-with-microsoft'
  }
];

const legacyCerts = [
  { name: 'Front End', url: '/certification/certifieduser/legacy-front-end' },
  { name: 'Back End', url: '/certification/certifieduser/legacy-back-end' },
  {
    name: 'Data Visualization',
    url: '/certification/certifieduser/legacy-data-visualization'
  },
  {
    name: 'Information Security and Quality Assurance',
    url: '/certification/certifieduser/information-security-and-quality-assurance'
  },
  { name: 'Full Stack', url: '/certification/certifieduser/full-stack' }
];

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

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

  // The following line is required if you're running the test in local development
  // await page.getByRole('button', { name: 'Preview custom 404 page' }).click();