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) { > - {t('misc.email')} + + {t('misc.email')} +

- - {t('buttons.sign-out')} - + {t('buttons.sign-out')}

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(); + }); });