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

Code before:
      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();
    expect(
      await page.locator('a[data-cy="claimed-certification"]').count()
    ).toEqual(certs.length + legacyCerts.length);
  });

  test('should not show portfolio when empty', async ({ page }) => {
    expect(
      await page.getByTestId(profilePageElements.portfolio).count()
    ).toEqual(0);
  });

  test('displays the timeline correctly', async ({ page }) => {
    await expect(page.getByRole('heading', { name: 'Timeline' })).toBeVisible();
    await expect(page.getByRole('table')).toBeVisible();
    await expect(
      page.getByRole('navigation', { name: 'Timeline Pagination' })
    ).toBeVisible();
  });
});

Review comment (suggestion):
This div is just a wrapper for the page arrangement. We don't need to have an assertion for it as its existence doesn't affect the page functionality. Querying elements using their tag name and class name is also not recommended as these are implementation details and could be changed in the future, which makes the tests brittle.

```suggestion
```

Code after:
  },
  {
    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();
});

test.describe('Profile component', () => {
  test('renders the camper profile correctly', async ({ page }) => {
    // There are multiple avatars on the page, one is in the navbar, one is in the page body.
    // The avatar we are interested in is the last one in the list
    const avatar = page
      .getByRole('img', {
        name: translations.icons.avatar,
        includeHidden: true // the svg has `aria-hidden` set to true
      })
      .last();

    // "visible" as in the element is in the DOM, but it is hidden from non-sighted users
    await expect(avatar).toBeVisible();

    await expect(
      page.getByRole('heading', { name: '@certifieduser' })
    ).toBeVisible();