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

Code before:
      // "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();
      await expect(page.getByText('Full Stack User')).toBeVisible();
      await expect(page.getByText('Joined November 2020')).toBeVisible();
      await expect(
        page.getByText(translations.profile.contributor)
      ).toBeVisible();
      expect(
        await page.locator('.badge-card-description').textContent()
      ).toContain('Among most prolific volunteers');
    });

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

    // The date range computation in this test doesn't match the implementation code,
    // and causes the test to fail in some cases.
    // We would want to mock system time to keep the test stable,
    // but Playwright currently doesn't offer a built-in mechanism for this.
    // Ref: https://github.com/microsoft/playwright/issues/6347
    test.skip('renders the heat map correctly', async ({ page }) => {
      const today = new Date();
      const currentMonth = today.toLocaleString('en-US', { month: 'short' });
      const sixMonthsAgo = new Date(today.setMonth(today.getMonth() - 6));
      const sixMonthsAgoMonth = sixMonthsAgo.toLocaleString('en-US', {
        month: 'short'
      });
      const dateRange = `${sixMonthsAgoMonth} ${sixMonthsAgo.getFullYear()} - ${currentMonth} ${today.getFullYear()}`;

      await expect(page.getByText(dateRange)).toBeVisible();
      await expect(page.locator('.react-calendar-heatmap')).toBeVisible();
      // Streak should be a non-negative integer
      await expect(page.getByText(/Longest Streak: [0-9]\d*$/)).toBeVisible();
      await expect(page.getByText(/Current Streak: [0-9]\d*$/)).toBeVisible();
    });

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

      for (const cert of certs) {
        const link = page

Review comment (suggestion):
This one was skipped because it was using real time and was flaky. 

What happened was, Playwright didn't have a mechanism to mock dates at the time, so we skipped the test and wrote a unit test for it instead (#52834). Playwright now provides a Clock API, but if we just mock the date/time and check that the UI renders properly, then it won't be any different from writing unit test, which we already did.

I guess I should have removed the test back then instead of just skipping it. So now I'm just coming back and cleaning up.

Code after:
      // "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();
      await expect(page.getByText('Full Stack User')).toBeVisible();
      await expect(page.getByText('Joined November 2020')).toBeVisible();
      await expect(
        page.getByText(translations.profile.contributor)
      ).toBeVisible();
      expect(
        await page.locator('.badge-card-description').textContent()
      ).toContain('Among most prolific volunteers');
    });

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

      for (const cert of certs) {
        const link = page
          .getByRole('link', {
            name: `View ${cert.name} Certification`
          })
          .first();
        await expect(link).toBeVisible();
        await expect(link).toHaveAttribute('href', cert.url);
      }

      for (const cert of legacyCerts) {
        const link = page
          .getByRole('link', {
            name: `View ${cert.name} Certification`
          })
          .last();
        await expect(link).toBeVisible();
        await expect(link).toHaveAttribute('href', cert.url);
      }
    });

    test('should not show portfolio when empty', async ({ page }) => {
      // @certifieduser doesn't have portfolio information
      await expect(
        page.getByText(translations.profile.projects)
      ).not.toBeVisible();
    });