jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-01-06 06:01:31 -05:00
Code Issues Projects Releases Wiki Activity

test: migrate email-change to playwright (#55035)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2024-06-04 01:36:07 +02:00
committed by GitHub
parent 9418cc16f2
commit e7b1eda84d
3 changed files with 54 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/settings/email.tsx
View File

@@ -213,7 +213,7 @@ function EmailSettings({
id='new-email-input'
/>
{newEmailValidationMessage ? (
<HelpBlock data-cy='validation-message'>
<HelpBlock data-playwright-test-label='new-email-validation'>
{newEmailValidationMessage}
</HelpBlock>
) : null}
@@ -233,7 +233,7 @@ function EmailSettings({
id='confirm-email-input'
/>
{confirmEmailValidationMessage ? (
<HelpBlock data-cy='validation-message'>
<HelpBlock data-playwright-test-label='confirm-email-validation'>
{confirmEmailValidationMessage}
</HelpBlock>
) : null}

43
cypress/e2e/default/settings/email-change.ts
View File

@@ -1,43 +0,0 @@
describe('Email input field', () => {
beforeEach(() => {
cy.task('seed');
cy.login();
cy.visit('/settings');
});
it('Should be possible to submit the new email', () => {
cy.get('[data-cy="email-input"]')
.type('bar@foo.com')
.should('have.attr', 'value', 'bar@foo.com');
cy.get('[data-cy="confirm-email"]')
.type('bar@foo.com')
.should('have.attr', 'value', 'bar@foo.com');
cy.get('[data-cy="form-update-email"]').within(() => {
cy.contains('Save').click();
});
cy.contains(
'Check your email and click the link we sent you to confirm your new email address.'
);
});
it('Displays an error message when there are problems with the submitted emails', () => {
cy.get('[data-cy="email-input"]').type('bar@foo.com');
cy.get('[data-cy="confirm-email"]').type('foo@bar.com');
cy.get('[data-cy="validation-message"]').contains(
'Both new email addresses must be the same'
);
cy.get('[data-cy="email-input"]').clear().type('foo@bar.com');
cy.get('[data-cy="validation-message"]').contains(
'This email is the same as your current email'
);
});
it('Should be possible to get Quincys weekly email', () => {
cy.contains('Yes please').click();
});
});

63
e2e/email-settings.spec.ts
View File

@@ -1,15 +1,24 @@
import { execSync } from 'child_process';
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
const settingsPageElement = {
emailVerificationAlert: 'email-verification-alert',
emailVerificationLink: 'email-verification-link',
flashMessageAlert: 'flash-message'
flashMessageAlert: 'flash-message',
newEmailValidation: 'new-email-validation',
confirmEmailValidation: 'confirm-email-validation'
} as const;
const originalEmail = 'foo@bar.com';
const newEmail = 'foo-update@bar.com';
test.use({ storageState: 'playwright/.auth/certified-user.json' });
test.beforeEach(async ({ page }) => {
execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
await page.goto('/settings');
});
@@ -19,7 +28,7 @@ test.describe('Email Settings', () => {
page.getByRole('heading', { name: translations.settings.email.heading })
).toBeVisible();
await expect(page.getByText('foo@bar.com')).toBeVisible();
await expect(page.getByText(originalEmail)).toBeVisible();
await expect(
page.getByRole('button', {
@@ -49,16 +58,15 @@ test.describe('Email Settings', () => {
test('should display email verification alert after email update', async ({
page
}) => {
const newEmailAddress = 'foo-update@bar.com';
const flashMessageAlert = page.getByTestId(
settingsPageElement.flashMessageAlert
);
// Need exact match as there are "New email" and "Confirm new email" labels
await page
.getByLabel(translations.settings.email.new, { exact: true })
.fill(newEmailAddress);
.fill(newEmail);
await page
.getByLabel(translations.settings.email.confirm)
.fill(newEmailAddress);
await page.getByLabel(translations.settings.email.confirm).fill(newEmail);
await page
.getByRole('button', {
@@ -66,9 +74,10 @@ test.describe('Email Settings', () => {
})
.click();
await expect(
page.getByTestId(settingsPageElement.flashMessageAlert)
).toBeVisible();
await expect(flashMessageAlert).toBeVisible();
await expect(flashMessageAlert).toContainText(
'Check your email and click the link we sent you to confirm your new email address.'
);
await page.reload();
await expect(
@@ -84,6 +93,38 @@ test.describe('Email Settings', () => {
);
});
test('should show the user error messages if the input is invalid', async ({
page
}) => {
const newEmailInput = page.getByLabel(translations.settings.email.new, {
exact: true
});
const confirmEmailInput = page.getByLabel(
translations.settings.email.confirm
);
const confirmValidation = page.getByTestId(
settingsPageElement.confirmEmailValidation
);
const newEmailValidation = page.getByTestId(
settingsPageElement.newEmailValidation
);
await newEmailInput.fill(newEmail);
await confirmEmailInput.fill(originalEmail);
await expect(confirmValidation).toBeVisible();
await expect(confirmValidation).toContainText(
translations.validation['email-mismatch']
);
await newEmailInput.fill(originalEmail);
await expect(newEmailValidation).toBeVisible();
await expect(newEmailValidation).toContainText(
translations.validation['same-email']
);
});
test('should toggle email subscription correctly', async ({ page }) => {
const yesPleaseButton = page.getByRole('button', {
name: translations.buttons['yes-please']