Repository: freeCodeCamp/freeCodeCamp
File: e2e/email-sign-up.spec.ts (TypeScript)

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

import translations from '../client/i18n/locales/english/translations.json';

const apiLocation = process.env.API_LOCATION || 'http://localhost:3000';

test.describe('Email sign-up page when user is not signed in', () => {
  test.use({ storageState: { cookies: [], origins: [] } });

  test.beforeEach(async ({ page }) => {
    // Intercept the endpoint to prevent `acceptedPrivacyTerms` from being set
    await page.route('*/**/update-privacy-terms', async route => {
      const json = [{ message: 'flash.privacy-updated', type: 'success' }];
      await route.fulfill({ json });
    });

    await page.goto('/email-sign-up');
  });

  test("should not enable Quincy's weekly newsletter when the user clicks the sign up button", async ({
    page
  }) => {
    await expect(page).toHaveTitle('Email Sign Up | freeCodeCamp.org');
    await expect(
      page.getByText(
        'freeCodeCamp is a proven path to your first software developer job.'
      )
    ).toBeVisible();

    const signupLink = page.getByRole('link', {
      name: translations.buttons['sign-up-email-list']
    });

    await expect(signupLink).toBeVisible();
    await expect(signupLink).toHaveAttribute('href', `${apiLocation}/signin`);
    await signupLink.click();

    // The user is signed in and automatically redirected to /learn after clicking the button.
    // We wait for this navigation to complete before moving onto the next.
    await page.waitForURL('**/learn');

Review comment (suggestion):
There is no way to unset the `acceptedPrivacyTerms` value with the UI / user interactions, so we need to intercept the API call to keep the DB intact.

We have a similar Cypress test, but Cypress has a `.task` method to run a Node event (which is neat), but Playwright doesn't.

https://github.com/freeCodeCamp/freeCodeCamp/blob/10d5cbeb88e373091a60a2eb6bf8121781867b33/cypress/e2e/default/user/privacy-terms.ts#L10

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

import translations from '../client/i18n/locales/english/translations.json';

const apiLocation = process.env.API_LOCATION || 'http://localhost:3000';

test.describe('Email sign-up page when user is not signed in', () => {
  test.use({ storageState: { cookies: [], origins: [] } });

  test.beforeEach(async ({ page }) => {
    // Intercept the endpoint to prevent `acceptedPrivacyTerms` from being set
    await page.route('*/**/update-privacy-terms', async route => {
      const json = [{ message: 'flash.privacy-updated', type: 'success' }];
      await route.fulfill({ json });
    });

    await page.goto('/email-sign-up');
  });

  test("should not enable Quincy's weekly newsletter when the user clicks the sign up button", async ({
    page,
    browserName
  }) => {
    test.skip(
      browserName === 'webkit',
      'user appears to not signed in on Webkit'
    );

    await expect(page).toHaveTitle('Email Sign Up | freeCodeCamp.org');
    await expect(
      page.getByText(
        'freeCodeCamp is a proven path to your first software developer job.'
      )
    ).toBeVisible();

    const signupLink = page.getByRole('link', {
      name: translations.buttons['sign-up-email-list']
    });

    await expect(signupLink).toBeVisible();