jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-30 16:01:14 -04:00
Code Issues Projects Releases Wiki Activity

test(e2e): add test for input box to update-email.spec.ts (#52507)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
weilirs
2024-01-08 16:11:04 -05:00
committed by GitHub
parent f3e25c90b2
commit ba637b90e1
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/pages/update-email.tsx
View File

@@ -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>

28
e2e/update-email.spec.ts
View File

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