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

Code before:

  test('Should display the Danger section properly', async ({ page }) => {
    await expect(page.getByText('Danger Zone')).toBeVisible();
    await expect(
      page.getByText(
        'Please be careful. Changes in this section are permanent.'
      )
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: 'Reset all of my progress'
      })
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: 'Delete my account'
      })
    ).toBeVisible();
  });
});

// In order to claim the Full Stack cert, the user needs to complete 6 certs.
// Instead of simulating 6 cert claim flows,
// we use the data of Certified User but remove the Full Stack cert.
test.describe('Settings - Certified User without Full Stack Certification', () => {
  test.use({ storageState: 'playwright/.auth/certified-user.json' });

  test.beforeEach(async ({ page }) => {
    execSync(
      'node ./tools/scripts/seed/seed-demo-user certified-user --unset-full-stack-cert'
    );
    await page.goto('/settings');
  });

  test.afterAll(() => {
    execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
  });

  test('should allow claiming Full Stack cert if the user has completed all requirements', async ({
    page
  }) => {
    test.setTimeout(20000);

    const claimButton = page.getByRole('link', {
      name: 'Claim Certification Legacy Full Stack'
    });
    const showButton = page.getByRole('link', {
      name: 'Show Certification Legacy Full Stack'
    });

    await expect(claimButton).toBeVisible();

Review comment (refactor):
This is the rendering logic that I'm writing tests for.

https://github.com/freeCodeCamp/freeCodeCamp/blob/b2518cc347fd7d0656bfd20e3d03f3ac8a4ae073/client/src/components/settings/certification.tsx#L222-L246

The logic is as follows:
- If the Full Stack cert is claimable (meaning the user has completed 6 other certs)
  - If the user has claimed the cert, render a "Show cert" link 
  - If the user has not claimed the cert, render a "Claim cert" link (*)
- If the Full Stack cert is not claimable (meaning the user has not completed 6 other certs), render a "Claim cert" button and disable it

---

(*): This is what I want to change with the refactoring. Claim cert is an action, so semantically the element should be a button instead of a link. It being a link is a little misleading, not to mention that the claim cert action can be unsuccessful (as with any API requests), and non-sighted users could be confused if they click on the link and don't land on the target page.

Code after:
  });

  test('Should display the Danger section properly', async ({ page }) => {
    await expect(page.getByText('Danger Zone')).toBeVisible();
    await expect(
      page.getByText(
        'Please be careful. Changes in this section are permanent.'
      )
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: 'Reset all of my progress'
      })
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: 'Delete my account'
      })
    ).toBeVisible();
  });
});

// In order to claim the Full Stack cert, the user needs to complete 6 certs.
// Instead of simulating 6 cert claim flows,
// we use the data of Certified User but remove the Full Stack cert.
test.describe('Settings - Certified User without Full Stack Certification', () => {
  test.use({ storageState: 'playwright/.auth/certified-user.json' });

  test.beforeEach(async ({ page }) => {
    execSync(
      'node ./tools/scripts/seed/seed-demo-user --certified-user --set-false isFullStackCert'
    );
    await page.goto('/settings');
  });

  test.afterAll(() => {
    execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');
  });

  test('should allow claiming Full Stack cert if the user has completed all requirements', async ({
    page
  }) => {
    const claimButton = page.getByRole('link', {
      name: 'Claim Certification Legacy Full Stack'
    });
    const showButton = page.getByRole('link', {
      name: 'Show Certification Legacy Full Stack'
    });

    await expect(claimButton).toBeVisible();
    await expect(claimButton).toBeEnabled();