test(e2e,playwright): email-settings section on settings page (#51754)

client/src/components/Flash/index.tsx

@@ -26,7 +26,11 @@ function Flash({ flashMessage, removeFlashMessage }: FlashProps): JSX.Element {
   return (
     <TransitionGroup>
       <CSSTransition classNames='flash-message' key={id} timeout={500}>
-        <Alert variant={flashStyle} className='flash-message'>
+        <Alert
+          variant={flashStyle}
+          className='flash-message'
+          data-playwright-test-label='flash-message'
+        >
           {t(message, variables)}
           <CloseButton
             onClick={handleClose}

client/src/components/settings/email.tsx

@@ -155,15 +155,24 @@ function EmailSettings({
   }
   return (
     <div className='email-settings'>
-      <SectionHeader>{t('settings.email.heading')}</SectionHeader>
+      <SectionHeader dataPlaywrightTestLabel='email-settings-header'>
+        {t('settings.email.heading')}
+      </SectionHeader>
       {isEmailVerified ? null : (
         <FullWidthRow>
           <HelpBlock>
-            <Alert variant='info' className='text-center'>
+            <Alert
+              variant='info'
+              className='text-center'
+              data-playwright-test-label='email-verification-alert'
+            >
               {t('settings.email.not-verified')}
               <br />
               <Trans i18nKey='settings.email.check'>
-                <Link to='/update-email' />
+                <Link
+                  data-playwright-test-label='email-verification-link'
+                  to='/update-email'
+                />
               </Trans>
             </Alert>
           </HelpBlock>
@@ -178,7 +187,9 @@ function EmailSettings({
         >
           <FormGroup controlId='current-email'>
             <ControlLabel>{t('settings.email.current')}</ControlLabel>
-            <FormControl.Static>{currentEmail}</FormControl.Static>
+            <FormControl.Static data-playwright-test-label='current-email'>
+              {currentEmail}
+            </FormControl.Static>
           </FormGroup>
           <div role='group' aria-label={t('settings.email.heading')}>
             <FormGroup
@@ -187,6 +198,7 @@ function EmailSettings({
             >
               <ControlLabel>{t('settings.email.new')}</ControlLabel>
               <FormControl
+                data-playwright-test-label='new-email-input'
                 onChange={createHandleEmailFormChange('newEmail')}
                 type='email'
                 value={newEmail}
@@ -201,6 +213,7 @@ function EmailSettings({
             >
               <ControlLabel>{t('settings.email.confirm')}</ControlLabel>
               <FormControl
+                data-playwright-test-label='confirm-email-input'
                 onChange={createHandleEmailFormChange('confirmNewEmail')}
                 type='email'
                 value={confirmNewEmail}
@@ -211,6 +224,7 @@ function EmailSettings({
             </FormGroup>
           </div>
           <BlockSaveButton
+            data-playwright-test-label='save-email-button'
             aria-disabled={isDisabled}
             bgSize='lg'
             {...(isDisabled && { tabIndex: -1 })}
@@ -227,7 +241,9 @@ function EmailSettings({
           flag={sendQuincyEmail}
           flagName='sendQuincyEmail'
           offLabel={t('buttons.no-thanks')}
+          dataPlaywrightTestOffLabel='no-thanks-button'
           onLabel={t('buttons.yes-please')}
+          dataPlaywrightTestOnLabel='yes-please-button'
           toggleFlag={() => updateQuincyEmail(!sendQuincyEmail)}
         />
       </FullWidthRow>

client/src/components/settings/section-header.tsx

@@ -4,12 +4,21 @@ import FullWidthRow from '../helpers/full-width-row';
 
 type SectionHeaderProps = {
   children: string | React.ReactNode | React.ReactElement;
+  dataPlaywrightTestLabel?: string;
 };
 
-function SectionHeader({ children }: SectionHeaderProps): JSX.Element {
+function SectionHeader({
+  children,
+  dataPlaywrightTestLabel
+}: SectionHeaderProps): JSX.Element {
   return (
     <FullWidthRow>
-      <h2 className='text-center'>{children}</h2>
+      <h2
+        data-playwright-test-label={dataPlaywrightTestLabel}
+        className='text-center'
+      >
+        {children}
+      </h2>
       <hr />
     </FullWidthRow>
   );

client/src/components/settings/toggle-button-setting.tsx

@@ -11,7 +11,9 @@ export default function ToggleButtonSetting({
   flagName,
   toggleFlag,
   offLabel,
-  onLabel
+  onLabel,
+  dataPlaywrightTestOffLabel,
+  dataPlaywrightTestOnLabel
 }: ToggleSettingProps): JSX.Element {
   return (
     <fieldset
@@ -29,6 +31,7 @@ export default function ToggleButtonSetting({
       </div>
       <div className='toggle-button-group'>
         <button
+          data-playwright-test-label={dataPlaywrightTestOnLabel}
           aria-pressed={flag}
           {...(!flag && { onClick: toggleFlag })}
           value='1'
@@ -40,6 +43,7 @@ export default function ToggleButtonSetting({
           </span>
         </button>
         <button
+          data-playwright-test-label={dataPlaywrightTestOffLabel}
           aria-pressed={!flag}
           {...(flag && { onClick: toggleFlag })}
           value='2'

client/src/components/settings/toggle-radio-setting.tsx

@@ -10,6 +10,8 @@ export type ToggleSettingProps = {
   toggleFlag: () => void;
   offLabel: string;
   onLabel: string;
+  dataPlaywrightTestOffLabel?: string;
+  dataPlaywrightTestOnLabel?: string;
 };
 
 export default function ToggleRadioSetting({

e2e/email-settings.spec.ts

@@ -0,0 +1,100 @@
+import { test, expect } from '@playwright/test';
+
+const settingsPageElement = {
+  emailSettingsSectionHeader: 'email-settings-header',
+  emailVerificationAlert: 'email-verification-alert',
+  emailVerificationLink: 'email-verification-link',
+  currentEmailText: 'current-email',
+  newEmailInput: 'new-email-input',
+  confirmEmailInput: 'confirm-email-input',
+  saveButton: 'save-email-button',
+  emailSubscriptionYesPleaseButton: 'yes-please-button',
+  emailSubscriptionNoThanksButton: 'no-thanks-button',
+  flashMessageAlert: 'flash-message'
+} as const;
+
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/settings');
+});
+
+test.afterEach(async ({ page }) => {
+  await page.close();
+});
+
+test.describe('Email Settings', () => {
+  test('should display email settings section header on settings page', async ({
+    page
+  }) => {
+    await expect(
+      page.getByTestId(settingsPageElement.emailSettingsSectionHeader)
+    ).toHaveText('Email Settings');
+  });
+
+  test('should display current email address', async ({ page }) => {
+    await expect(
+      page.getByTestId(settingsPageElement.currentEmailText)
+    ).toHaveText('foo@bar.com');
+  });
+
+  test('should display email verification alert after email update', async ({
+    page,
+    browserName
+  }) => {
+    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
+
+    const newEmailAddress = 'foo-update@bar.com';
+
+    await page
+      .getByTestId(settingsPageElement.newEmailInput)
+      .fill(newEmailAddress);
+    await page
+      .getByTestId(settingsPageElement.confirmEmailInput)
+      .fill(newEmailAddress);
+    await page.getByTestId(settingsPageElement.saveButton).click();
+    await expect(
+      page.getByTestId(settingsPageElement.flashMessageAlert)
+    ).toBeVisible();
+
+    await page.reload();
+    await expect(
+      page.getByTestId(settingsPageElement.emailVerificationAlert)
+    ).toBeVisible();
+
+    const emailVerificationLink = page.getByTestId(
+      settingsPageElement.emailVerificationLink
+    );
+    await expect(emailVerificationLink).toHaveAttribute(
+      'href',
+      '/update-email'
+    );
+  });
+
+  test('should display flash message when email subscription is toggled', async ({
+    page,
+    browserName
+  }) => {
+    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
+
+    await page
+      .getByTestId(settingsPageElement.emailSubscriptionYesPleaseButton)
+      .click();
+
+    await expect(
+      page.getByTestId(settingsPageElement.flashMessageAlert)
+    ).toContainText("We have updated your subscription to Quincy's email");
+
+    // Undo subscription change
+    await Promise.all([
+      page.waitForResponse(
+        response =>
+          response.url().includes('update-my-quincy-email') &&
+          response.status() === 200
+      ),
+      page
+        .getByTestId(settingsPageElement.emailSubscriptionNoThanksButton)
+        .click()
+    ]);
+  });
+});