From ba637b90e1978670c019b4bb417fa1b96918d9cb Mon Sep 17 00:00:00 2001
From: weilirs <62249815+weilirs@users.noreply.github.com>
Date: Mon, 8 Jan 2024 16:11:04 -0500
Subject: [PATCH] test(e2e): add test for input box to update-email.spec.ts
 (#52507)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 client/src/pages/update-email.tsx | 15 +++++----------
 e2e/update-email.spec.ts          | 28 +++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/client/src/pages/update-email.tsx b/client/src/pages/update-email.tsx
index 2c5f4283abf..91897b31643 100644
--- a/client/src/pages/update-email.tsx
+++ b/client/src/pages/update-email.tsx
@@ -87,16 +87,17 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
               >
                 <FormGroup
                   className='update-email-field'
-                  controlId='emailInput'
                   validationState={getEmailValidationState()}
                 >
-                  <ControlLabel>{t('misc.email')}</ControlLabel>
+                  <ControlLabel htmlFor='emailInput'>
+                    {t('misc.email')}
+                  </ControlLabel>
                   <FormControl
+                    id='emailInput'
                     onChange={onChange}
                     placeholder='camperbot@example.com'
                     required={true}
                     type='email'
-                    data-playwright-test-label='update-email-input'
                   />
                 </FormGroup>
                 <Button
@@ -105,7 +106,6 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
                   bsStyle='primary'
                   disabled={getEmailValidationState() !== 'success'}
                   type='submit'
-                  data-playwright-test-label='update-email-submit-button'
                 >
                   {isNewEmail
                     ? t('buttons.update-email')
@@ -113,12 +113,7 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
                 </Button>
               </form>
               <p className='text-center'>
-                <Link
-                  to='/signout'
-                  data-playwright-test-label='update-email-sign-out-button'
-                >
-                  {t('buttons.sign-out')}
-                </Link>
+                <Link to='/signout'>{t('buttons.sign-out')}</Link>
               </p>
             </Row>
           </Col>
diff --git a/e2e/update-email.spec.ts b/e2e/update-email.spec.ts
index 63a519dc665..9bf96a61de5 100644
--- a/e2e/update-email.spec.ts
+++ b/e2e/update-email.spec.ts
@@ -24,26 +24,40 @@ test.describe('The update-email page', () => {
 
   test('The page has update email form', async () => {
     const form = page.getByTestId('update-email-form');
-    const emailInput = page.getByTestId('update-email-input');
-    const submitButton = page.getByTestId('update-email-submit-button');
+    const emailInput = page.getByLabel(translations.misc.email);
+    const submitButton = page.getByRole('button', {
+      name: translations.buttons['update-email']
+    });
 
     await expect(form).toBeVisible();
+    await expect(emailInput).toBeVisible();
     await expect(emailInput).toHaveAttribute('type', 'email');
     await expect(emailInput).toHaveAttribute(
       'placeholder',
       'camperbot@example.com'
     );
+    await expect(submitButton).toBeVisible();
     await expect(submitButton).toHaveAttribute('type', 'submit');
-    await expect(submitButton).toContainText(
-      translations.buttons['update-email']
-    );
   });
 
   test('The page has sign out button', async () => {
-    const signOutButton = page.getByTestId('update-email-sign-out-button');
+    const signOutButton = page.getByRole('link', {
+      name: translations.buttons['sign-out']
+    });
 
     await expect(signOutButton).toBeVisible();
-    await expect(signOutButton).toContainText(translations.buttons['sign-out']);
     await expect(signOutButton).toHaveAttribute('href', '/signout');
   });
+
+  test('should enable the submit button if the email input is valid', async () => {
+    const emailInput = page.getByLabel(translations.misc.email);
+    const submitButton = page.getByRole('button', {
+      name: translations.buttons['update-email']
+    });
+    await expect(submitButton).toBeDisabled();
+    await emailInput.fill('123');
+    await expect(submitButton).toBeDisabled();
+    await emailInput.fill('123@gmail.com');
+    await expect(submitButton).toBeEnabled();
+  });
 });