mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-14 16:00:30 -05:00
feat: improve username validation test (#54634)
This commit is contained in:
Sem Bauke
@@ -1,140 +0,0 @@
|
||||
describe('Username input field', () => {
|
||||
beforeEach(() => {
|
||||
cy.login();
|
||||
cy.goToSettings();
|
||||
});
|
||||
|
||||
it('Should show username is available if it is', () => {
|
||||
cy.typeUsername('brad');
|
||||
|
||||
cy.contains('Username is available')
|
||||
.should('be.visible')
|
||||
.should('have.attr', 'role', 'alert');
|
||||
});
|
||||
|
||||
it('Should info message if username is available', () => {
|
||||
cy.typeUsername('mrugesh');
|
||||
|
||||
cy.contains(
|
||||
'Please note, changing your username will also change ' +
|
||||
'the URL to your profile and your certifications.'
|
||||
)
|
||||
.should('be.visible')
|
||||
.should('have.attr', 'role', 'alert');
|
||||
});
|
||||
|
||||
it('Should be able to click the `Save` button if username is available', () => {
|
||||
cy.typeUsername('oliver');
|
||||
|
||||
cy.get('@usernameForm').within(() => {
|
||||
cy.contains('Save').should('have.attr', 'aria-disabled', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
it('Should show username is unavailable if it is', () => {
|
||||
cy.typeUsername('twaha');
|
||||
|
||||
cy.contains('Username not available')
|
||||
.should('be.visible')
|
||||
.should('have.attr', 'role', 'alert');
|
||||
});
|
||||
|
||||
it('Should not be possible to click the `Save` button if username is unavailable', () => {
|
||||
cy.typeUsername('twaha');
|
||||
|
||||
cy.contains('Username is available').should('not.exist');
|
||||
cy.contains('Username not available').should('not.exist');
|
||||
cy.contains(
|
||||
'Please note, changing your username will also change ' +
|
||||
'the URL to your profile and your certifications.'
|
||||
).should('not.exist');
|
||||
|
||||
cy.get('@usernameForm')
|
||||
.contains('Save')
|
||||
.should('have.attr', 'aria-disabled', 'true');
|
||||
});
|
||||
|
||||
it('Should not show anything if user types their current name', () => {
|
||||
cy.typeUsername('developmentuser');
|
||||
|
||||
cy.get('@usernameForm')
|
||||
.contains('Save')
|
||||
.should('have.attr', 'aria-disabled', 'true');
|
||||
});
|
||||
|
||||
it('Should not be possible to click the `Save` button if user types their current name', () => {
|
||||
cy.typeUsername('developmentuser');
|
||||
|
||||
cy.get('@usernameForm')
|
||||
.contains('Save')
|
||||
.should('have.attr', 'aria-disabled', 'true');
|
||||
});
|
||||
|
||||
it('Should not be able to click the `Save` button if username includes invalid character', () => {
|
||||
cy.typeUsername('Quincy Larson');
|
||||
|
||||
cy.get('@usernameForm')
|
||||
.contains('Save')
|
||||
.should('have.attr', 'aria-disabled', 'true');
|
||||
});
|
||||
|
||||
it('Should change username if `Save` button is clicked', () => {
|
||||
cy.typeUsername('quincy');
|
||||
|
||||
cy.contains('Username is available');
|
||||
|
||||
cy.get('@usernameForm').contains('Save').click({ force: true });
|
||||
cy.contains('Account Settings for quincy').should('be.visible');
|
||||
|
||||
cy.resetUsername();
|
||||
});
|
||||
|
||||
it('Should change username with uppercase characters if `Save` button is clicked', () => {
|
||||
cy.typeUsername('Quincy');
|
||||
|
||||
cy.contains('Username is available');
|
||||
|
||||
cy.get('@usernameForm').contains('Save').click({ force: true });
|
||||
cy.contains('Account Settings for Quincy').should('be.visible');
|
||||
|
||||
cy.resetUsername();
|
||||
});
|
||||
|
||||
it('Should show flash message showing username has been updated', () => {
|
||||
cy.typeUsername('nhcarrigan');
|
||||
cy.contains('Username is available');
|
||||
|
||||
cy.get('@usernameInput').type('{enter}', { force: true, release: false });
|
||||
|
||||
cy.contains('We have updated your username to nhcarrigan').should(
|
||||
'be.visible'
|
||||
);
|
||||
cy.resetUsername();
|
||||
});
|
||||
|
||||
it('Should be able to close the shown flash message', () => {
|
||||
cy.typeUsername('bjorno');
|
||||
cy.contains('Username is available');
|
||||
|
||||
cy.get('@usernameInput').type('{enter}', { force: true, release: false });
|
||||
|
||||
cy.contains('We have updated your username to bjorno').within(() => {
|
||||
cy.get('button').click();
|
||||
});
|
||||
|
||||
cy.contains('We have updated your username to bjorno').should('not.exist');
|
||||
|
||||
cy.resetUsername();
|
||||
});
|
||||
|
||||
it('Should change username if enter is pressed', () => {
|
||||
cy.typeUsername('symbol');
|
||||
cy.contains('Username is available');
|
||||
|
||||
cy.get('@usernameInput').type('{enter}', { force: true, release: false });
|
||||
|
||||
cy.contains('Account Settings for symbol').should('be.visible');
|
||||
|
||||
cy.resetUsername();
|
||||
});
|
||||
});
|
||||
@@ -11,14 +11,10 @@ const settingsTestIds = {
|
||||
|
||||
const settingsObject = {
|
||||
email: 'foo@bar.com',
|
||||
userNamePlaceholder: '{{username}}',
|
||||
certifiedUsername: 'certifieduser',
|
||||
testEmail: 'test@gmail.com',
|
||||
pageTitle: `${translations.buttons.settings} | freeCodeCamp.org`,
|
||||
userNamePlaceholder: '{{username}}',
|
||||
testUser: 'testuser',
|
||||
errorCode: '404',
|
||||
invalidUserName: 'user!',
|
||||
tooShortUserName: 'us',
|
||||
private: 'Private',
|
||||
public: 'Public',
|
||||
supportEmail: 'support@freecodecamp.org',
|
||||
@@ -70,47 +66,6 @@ test.describe('Settings', () => {
|
||||
);
|
||||
});
|
||||
|
||||
test('Should validate Username Settings', async ({ page }) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
await expect(inputLabel).toBeVisible();
|
||||
await inputLabel.fill(settingsObject.testUser);
|
||||
await expect(
|
||||
page.getByText(translations.settings.username.validating)
|
||||
).toBeVisible();
|
||||
await inputLabel.fill(settingsObject.errorCode);
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.settings.username['is a reserved error code'].replace(
|
||||
settingsObject.userNamePlaceholder,
|
||||
settingsObject.errorCode
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
await inputLabel.fill(settingsObject.invalidUserName);
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.settings.username['contains invalid characters'].replace(
|
||||
settingsObject.userNamePlaceholder,
|
||||
settingsObject.invalidUserName
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
await inputLabel.fill(settingsObject.tooShortUserName);
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.settings.username['is too short'].replace(
|
||||
settingsObject.userNamePlaceholder,
|
||||
settingsObject.tooShortUserName
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
await inputLabel.fill(settingsObject.certifiedUsername);
|
||||
const saveButton = page.getByRole('button', {
|
||||
name: translations.settings.labels.username
|
||||
});
|
||||
await expect(saveButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('Should validate Privacy Settings', async ({ page }) => {
|
||||
await expect(
|
||||
page.getByRole('heading', {
|
||||
|
||||
173
e2e/username-change.spec.ts
Normal file
173
e2e/username-change.spec.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import translations from '../client/i18n/locales/english/translations.json';
|
||||
test.use({ storageState: 'playwright/.auth/certified-user.json' });
|
||||
|
||||
const settingsObject = {
|
||||
usernamePlaceholder: '{{username}}',
|
||||
usernameUpdateToLowerCase: 'quincy',
|
||||
usernameUpdateToUpperCase: 'Mrugesh',
|
||||
usernameAvailable: 'Sem',
|
||||
usernameAvailablePressingEnter: 'Oliver',
|
||||
usernameNotAvailable: 'Twaha',
|
||||
usernameInvalid: 'user!',
|
||||
usernameTooShort: 'us',
|
||||
certifiedUsername: 'certifieduser',
|
||||
testUser: 'testuser',
|
||||
errorCode: '404'
|
||||
};
|
||||
|
||||
test.describe('Username Settings Validation', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/settings');
|
||||
});
|
||||
|
||||
test('Should display Username Input and Save Button', async ({ page }) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
const saveButton = page.getByRole('button', {
|
||||
name: translations.settings.labels.username
|
||||
});
|
||||
await expect(inputLabel).toBeVisible();
|
||||
await expect(saveButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('Should handle Reserved Username Error', async ({ page }) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
await inputLabel.fill(settingsObject.errorCode);
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.settings.username['is a reserved error code'].replace(
|
||||
settingsObject.usernamePlaceholder,
|
||||
settingsObject.errorCode
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('Should handle Invalid Username Error', async ({ page }) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
await inputLabel.fill(settingsObject.usernameInvalid);
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.settings.username['contains invalid characters'].replace(
|
||||
settingsObject.usernamePlaceholder,
|
||||
settingsObject.usernameInvalid
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('Should handle Unavailable Username Error', async ({ page }) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
await inputLabel.fill(settingsObject.usernameNotAvailable);
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.settings.username['unavailable'].replace(
|
||||
settingsObject.usernamePlaceholder,
|
||||
settingsObject.usernameNotAvailable
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('Should handle Too Short Username Error', async ({ page }) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
await inputLabel.fill(settingsObject.usernameTooShort);
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.settings.username['is too short'].replace(
|
||||
settingsObject.usernamePlaceholder,
|
||||
settingsObject.usernameTooShort
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('Should save valid Username', async ({ page }) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
const saveButton = page.getByRole('button', {
|
||||
name: translations.settings.labels.username
|
||||
});
|
||||
await inputLabel.fill(settingsObject.usernameAvailable);
|
||||
await expect(saveButton).not.toBeDisabled();
|
||||
await saveButton.click();
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.flash['username-updated'].replace(
|
||||
settingsObject.usernamePlaceholder,
|
||||
settingsObject.usernameAvailable
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('should update username in lowercase and reflect in the UI', async ({
|
||||
page
|
||||
}) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
const saveButton = page.getByRole('button', {
|
||||
name: translations.settings.labels.username
|
||||
});
|
||||
await inputLabel.fill(settingsObject.usernameUpdateToLowerCase);
|
||||
await expect(saveButton).not.toBeDisabled();
|
||||
await saveButton.click();
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.flash['username-updated'].replace(
|
||||
settingsObject.usernamePlaceholder,
|
||||
settingsObject.usernameUpdateToLowerCase
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('should update username in uppercase and reflect in the UI', async ({
|
||||
page
|
||||
}) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
const saveButton = page.getByRole('button', {
|
||||
name: translations.settings.labels.username
|
||||
});
|
||||
await inputLabel.fill(settingsObject.usernameUpdateToUpperCase);
|
||||
await expect(saveButton).not.toBeDisabled();
|
||||
await saveButton.click();
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.flash['username-updated'].replace(
|
||||
settingsObject.usernamePlaceholder,
|
||||
settingsObject.usernameUpdateToUpperCase
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('should update username by pressing enter', async ({ page }) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
await inputLabel.fill(settingsObject.testUser);
|
||||
|
||||
await expect(
|
||||
page.getByText(translations.settings.username.available)
|
||||
).toBeVisible();
|
||||
|
||||
await inputLabel.press('Enter');
|
||||
|
||||
await expect(
|
||||
page.getByText(
|
||||
translations.flash['username-updated'].replace(
|
||||
settingsObject.usernamePlaceholder,
|
||||
settingsObject.testUser
|
||||
)
|
||||
)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('should not be able to update username to the same username', async ({
|
||||
page
|
||||
}) => {
|
||||
const inputLabel = page.getByLabel(translations.settings.labels.username);
|
||||
const saveButton = page.getByRole('button', {
|
||||
name: translations.settings.labels.username
|
||||
});
|
||||
await inputLabel.fill(settingsObject.testUser);
|
||||
await expect(saveButton).toBeDisabled();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user