test: move email sign-up alert coverage to client (#68139)

Co-authored-by: sembauke <sembauke@users.noreply.github.com>

client/src/components/Intro/email-sign-up-alert.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { legacy_createStore as createStore } from 'redux';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import EmailSignUpAlert from './email-sign-up-alert';
+
+interface TestUser {
+  completedChallenges: unknown[];
+  sendQuincyEmail: boolean | null;
+}
+
+const baseUser: TestUser = {
+  completedChallenges: [{}],
+  sendQuincyEmail: null
+};
+
+function renderWithUser(user: TestUser | null) {
+  const store = createStore(() => ({
+    app: {
+      user: {
+        sessionUser: user
+      }
+    }
+  }));
+
+  renderWithStore(store);
+
+  return store;
+}
+
+function renderWithStore(store: ReturnType<typeof createStore>) {
+  render(
+    <Provider store={store}>
+      <EmailSignUpAlert />
+    </Provider>
+  );
+}
+
+describe('<EmailSignUpAlert />', () => {
+  it('renders newsletter options for signed-in campers without a selection', () => {
+    renderWithUser(baseUser);
+
+    expect(
+      screen.getByRole('heading', { level: 2, name: 'misc.email-signup' })
+    ).toBeInTheDocument();
+    expect(screen.getByText('misc.email-blast')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'buttons.yes-please' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'buttons.no-thanks' })
+    ).toBeInTheDocument();
+  });
+
+  it('does not render for new accounts', () => {
+    renderWithUser({
+      ...baseUser,
+      completedChallenges: []
+    });
+
+    expect(screen.queryByText('misc.email-blast')).not.toBeInTheDocument();
+  });
+
+  it('does not render after the camper has made a selection', () => {
+    renderWithUser({
+      ...baseUser,
+      sendQuincyEmail: false
+    });
+
+    expect(screen.queryByText('misc.email-blast')).not.toBeInTheDocument();
+  });
+
+  it('dispatches the selected newsletter preference', async () => {
+    const user = userEvent.setup();
+    const store = createStore(() => ({
+      app: {
+        user: {
+          sessionUser: baseUser
+        }
+      }
+    }));
+    const dispatch = vi.spyOn(store, 'dispatch');
+    renderWithStore(store);
+
+    await user.click(screen.getByRole('button', { name: 'buttons.no-thanks' }));
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'settings.updateMyQuincyEmail',
+      payload: { sendQuincyEmail: false }
+    });
+  });
+});

client/src/components/Intro/intro.test.tsx

@@ -27,6 +27,17 @@ describe('<Intro />', () => {
     expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
   });
 
+  it('does not mount the email sign-up alert when logged out', () => {
+    renderWithRedux(<Intro {...loggedOutProps} />);
+    expect(screen.queryByText('misc.email-blast')).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'buttons.yes-please' })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'buttons.no-thanks' })
+    ).not.toBeInTheDocument();
+  });
+
   it('has a blockquote when loggedIn', () => {
     // Provide a minimal preloaded state so connected components expecting a
     // sessionUser (e.g. EmailSignUpAlert) do not receive null.

e2e/email-sign-up-alert.spec.ts

@@ -4,27 +4,7 @@ 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.describe("Email sign-up alert when user has not selected Quincy's newsletter preference", () => {
   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
@@ -33,22 +13,6 @@ test.describe('Email sign-up page when user is signed in', () => {
     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
   }) => {
@@ -106,48 +70,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 }) => {
-    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();
-  });
-});