feat: add email sign up alert (#61218)

Co-authored-by: Niraj Nandish <nirajnandish@icloud.com> Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
2025-12-19 18:18:27 -05:00 · 2025-09-11 11:14:00 +03:00
parent 29513a4d6d
commit 09dc696c29
27 changed files with 415 additions and 317 deletions
--- a/e2e/email-sign-up-alert.spec.ts
+++ b/e2e/email-sign-up-alert.spec.ts
@@ -0,0 +1,153 @@
+import { execSync } from 'child_process';
+import { test, expect } from '@playwright/test';
+
+import translations from '../client/i18n/locales/english/translations.json';
+import { alertToBeVisible } from './utils/alerts';
+
+test.describe('Email sign-up page when user is not signed in', () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/learn');
+  });
+
+  test('should not display newsletter options', async ({ page }) => {
+    await expect(
+      page.getByText(translations.misc['email-blast'])
+    ).not.toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['yes-please'] })
+    ).not.toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['no-thanks'] })
+    ).not.toBeVisible();
+  });
+});
+
+test.describe('Email sign-up page when user is signed in', () => {
+  test.beforeEach(async ({ page }) => {
+    // It's necessary to seed with a user that has not accepted the privacy
+    // terms, otherwise the user will be redirected away from the email sign-up
+    // page.
+    execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');
+    await page.goto('/learn');
+  });
+
+  test('should display the newsletter options correctly', async ({ page }) => {
+    await expect(
+      page.getByText(translations.misc['email-signup'])
+    ).toBeVisible();
+    await expect(
+      page.getByText(translations.misc['email-blast'])
+    ).toBeVisible();
+    await expect(page.getByText(translations.misc['quincy'])).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['yes-please'] })
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['no-thanks'] })
+    ).toBeVisible();
+  });
+
+  test('should disable weekly newsletter if the user clicks No', async ({
+    page
+  }) => {
+    await expect(
+      page.getByText(translations.misc['email-blast'])
+    ).toBeVisible();
+
+    const noThanksButton = page.getByRole('button', {
+      name: translations.buttons['no-thanks']
+    });
+    await expect(noThanksButton).toBeVisible();
+    await noThanksButton.click();
+    await alertToBeVisible(
+      page,
+      translations.flash['subscribe-to-quincy-updated']
+    );
+    await expect(
+      page.getByText(translations.misc['email-blast'])
+    ).not.toBeVisible();
+    await page.goto('/settings');
+    await expect(
+      page.getByRole('button', { name: translations.buttons['no-thanks'] })
+    ).toHaveAttribute('aria-pressed', 'true');
+    await expect(
+      page.getByRole('button', { name: translations.buttons['yes-please'] })
+    ).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  test('should enable weekly newsletter if the user clicks Yes', async ({
+    page
+  }) => {
+    await expect(
+      page.getByText(translations.misc['email-blast'])
+    ).toBeVisible();
+
+    const yesPleaseButton = page.getByRole('button', {
+      name: translations.buttons['yes-please']
+    });
+
+    await expect(yesPleaseButton).toBeVisible();
+    await yesPleaseButton.click();
+    await alertToBeVisible(
+      page,
+      translations.flash['subscribe-to-quincy-updated']
+    );
+    await page.goto('/settings');
+    await expect(
+      page.getByRole('group', { name: translations.settings.email.weekly })
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['yes-please'] })
+    ).toHaveAttribute('aria-pressed', 'true');
+    await expect(
+      page.getByRole('button', { name: translations.buttons['no-thanks'] })
+    ).toHaveAttribute('aria-pressed', 'false');
+  });
+});
+
+test.describe('Email sign-up page when the user is new', () => {
+  test.use({ storageState: 'playwright/.auth/development-user.json' });
+
+  test.beforeEach(async ({ page }) => {
+    execSync('node ./tools/scripts/seed/seed-demo-user');
+
+    await page.goto('/learn');
+  });
+
+  test('should not display newsletter options', async ({ page }) => {
+    await expect(
+      page.getByText(translations.misc['email-blast'])
+    ).not.toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['yes-please'] })
+    ).not.toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['no-thanks'] })
+    ).not.toBeVisible();
+  });
+});
+
+test.describe('Email sign-up page when the user has made a selection', () => {
+  test.use({ storageState: 'playwright/.auth/development-user.json' });
+
+  test.beforeEach(async ({ page }) => {
+    execSync(
+      'node ./tools/scripts/seed/seed-demo-user --certified-user --set-false sendQuincyEmail'
+    );
+    await page.goto('/learn');
+  });
+
+  test('should not display newsletter options', async ({ page }) => {
+    await expect(
+      page.getByText(translations.misc['email-blast'])
+    ).not.toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['yes-please'] })
+    ).not.toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['no-thanks'] })
+    ).not.toBeVisible();
+  });
+});
--- a/e2e/quincy-email-sign-up.spec.ts
+++ b/e2e/quincy-email-sign-up.spec.ts
@@ -11,6 +11,7 @@ test.describe('Email sign-up page when user is not signed in', () => {
  test.use({ storageState: { cookies: [], origins: [] } });

  test.beforeEach(async ({ page }) => {
+    execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');
    await page.goto('/email-sign-up');
  });

@@ -69,21 +70,20 @@ test.describe('Email sign-up page when user is not signed in', () => {

 test.describe('Email sign-up page when user is signed in', () => {
  test.beforeEach(async ({ page }) => {
-    // It's necessary to seed with a user that has not accepted the privacy
-    // terms, otherwise the user will be redirected away from the email sign-up
-    // page.
-    execSync(
-      'node ./tools/scripts/seed/seed-demo-user --certified-user --set-false acceptedPrivacyTerms'
-    );
+    // It's necessary to seed with a user that has not selected an email newsletter option.
+    execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');

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

  test('should display the content correctly', async ({ page }) => {
-    await expect(page).toHaveTitle('Email Sign Up | freeCodeCamp.org');
+    await expect(
+      page.getByText(translations.misc['email-signup'])
+    ).toBeVisible();
    await expect(
      page.getByText(translations.misc['email-blast'])
    ).toBeVisible();
+    await expect(page.getByText(translations.misc['quincy'])).toBeVisible();
    await expect(
      page.getByRole('button', { name: translations.buttons['yes-please'] })
    ).toBeVisible();
@@ -148,9 +148,7 @@ test.describe('Email sign-up page when user is signed in', () => {
      page.getByRole('heading', { name: 'Welcome back, Full Stack User' })
    ).toBeVisible();

-    // When the user clicks Yes, the /update-privacy-terms API is called
-    // to update both `acceptedPrivacyTerms` and `sendQuincyEmail`.
-    // But `sendQuincyEmail` is not set in the DB since the endpoint is mocked,
+    // `sendQuincyEmail` is not set in the DB since the endpoint is mocked,
    // so we are overriding the user data once again to mimic the real behavior.
    await page.route('*/**/user/get-session-user', async route => {
      const response = await route.fetch();
@@ -172,40 +170,3 @@ test.describe('Email sign-up page when user is signed in', () => {
    ).toHaveAttribute('aria-pressed', 'false');
  });
 });
-
-test.describe('Email sign-up page when the user is new', () => {
-  test.use({ storageState: 'playwright/.auth/development-user.json' });
-
-  test.beforeEach(async ({ page }) => {
-    // It's necessary to seed with a user that has not accepted the privacy
-    // terms, otherwise the user will be redirected away from the email sign-up
-    // page.
-    execSync(
-      'node ./tools/scripts/seed/seed-demo-user --set-false acceptedPrivacyTerms'
-    );
-
-    await page.goto('/email-sign-up');
-  });
-
-  test.afterAll(() => {
-    execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');
-  });
-
-  test('should display the content correctly', async ({ page }) => {
-    await expect(
-      page.getByRole('heading', {
-        level: 1,
-        name: translations.misc['brand-new-account']
-      })
-    ).toBeVisible();
-    await expect(
-      page.getByText(translations.misc['email-blast'])
-    ).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: translations.buttons['yes-please'] })
-    ).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: translations.buttons['no-thanks'] })
-    ).toBeVisible();
-  });
-});