Skip to content

Commit

Permalink
Convert login fields validation e2e to unit (#7674)
Browse files Browse the repository at this point in the history
  • Loading branch information
@arditdomi
arditdomi committed Jun 13, 2022
1 parent 6704d68 commit 9c134ba
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 66 deletions.
64 changes: 0 additions & 64 deletions e2e/core/login/login-component.e2e.ts
View file
Expand Up @@ -37,13 +37,6 @@ describe('Login component', () => {
const userA = new UserModel();
const userB = new UserModel();

const errorMessages = {
username: 'Your username needs to be at least 2 characters.',
invalid_credentials: 'You\'ve entered an unknown username or password',
password: 'Enter your password to sign in',
required: 'Required'
};

const apiService = createApiService();
const usersActions = new UsersActions(apiService);

Expand Down Expand Up @@ -73,63 +66,6 @@ describe('Login component', () => {
await expect(await userInfoPage.getContentHeaderTitle()).toEqual(`${userB.firstName} ${userB.lastName}`);
});

it('[C260036] Should require username', async () => {
await loginPage.goToLoginPage();
await loginPage.checkUsernameInactive();
await expect(await loginPage.getSignInButtonIsEnabled()).toBe(false);
await loginPage.enterUsername('A');
await expect(await loginPage.getUsernameTooltip()).toEqual(errorMessages.username);
await loginPage.clearUsername();
await expect(await loginPage.getUsernameTooltip()).toEqual(errorMessages.required);
await loginPage.checkUsernameHighlighted();
await expect(await loginPage.getSignInButtonIsEnabled()).toBe(false);
});

it('[C260043] Should require password', async () => {
await loginPage.goToLoginPage();
await loginPage.checkPasswordInactive();
await loginPage.checkUsernameInactive();
await loginPage.enterPassword('A');
await loginPage.checkPasswordTooltipIsNotVisible();
await loginPage.clearPassword();
await expect(await loginPage.getPasswordTooltip()).toEqual(errorMessages.password);
await loginPage.checkPasswordHighlighted();
await expect(await loginPage.getSignInButtonIsEnabled()).toBe(false);
});

it('[C260044] Username should be at least 2 characters long', async () => {
await loginPage.goToLoginPage();
await expect(await loginPage.getSignInButtonIsEnabled()).toBe(false);
await loginPage.enterUsername('A');
await expect(await loginPage.getUsernameTooltip()).toEqual(errorMessages.username);
await loginPage.enterUsername('AB');
await loginPage.checkUsernameTooltipIsNotVisible();
await expect(await loginPage.getSignInButtonIsEnabled()).toBe(false);
await loginPage.clearUsername();
});

it('[C260045] Should enable login button after entering a valid username and a password', async () => {
await loginPage.goToLoginPage();
await loginPage.enterUsername(browser.params.testConfig.users.admin.username);
await expect(await loginPage.getSignInButtonIsEnabled()).toBe(false);
await loginPage.enterPassword('a');
await expect(await loginPage.getSignInButtonIsEnabled()).toBe(true);
await loginPage.clearUsername();
await loginPage.clearPassword();
});

it('[C260047] Password should be crypted', async () => {
await loginPage.goToLoginPage();
await expect(await loginPage.getSignInButtonIsEnabled()).toBe(false);
await loginPage.enterPassword('test');
await loginPage.showPassword();
const tooltip = await loginPage.getShownPassword();
await expect(tooltip).toEqual('test');
await loginPage.hidePassword();
await loginPage.checkPasswordIsHidden();
await loginPage.clearPassword();
});

it('[C260048] Should be possible to enable/disable login footer', async () => {
await loginPage.goToLoginPage();
await loginPage.enableFooter();
Expand Down
75 changes: 73 additions & 2 deletions lib/core/login/components/login.component.spec.ts
View file
Expand Up @@ -216,6 +216,62 @@ describe('LoginComponent', () => {

expect(getLoginButtonText()).toEqual('LOGIN.BUTTON.WELCOME');
});

it('Should enable login button after entering a valid username and a password', () => {
usernameInput.value = 'username';
component.form.controls.username.markAsDirty();
usernameInput.dispatchEvent(new Event('input'));

passwordInput.value = 'password';
component.form.controls.password.markAsDirty();
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();

const loginButton = getLoginButton();
expect(loginButton.disabled).toBe(false);
});

it('Should disable login button when username is not valid', () => {
usernameInput.value = 'u';
component.form.controls.username.markAsDirty();
usernameInput.dispatchEvent(new Event('input'));

passwordInput.value = 'password';
component.form.controls.password.markAsDirty();
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();

const loginButton = getLoginButton();
expect(loginButton.disabled).toBe(true);
});

it('Should disable login button when password is not valid', () => {
usernameInput.value = 'username';
component.form.controls.username.markAsDirty();
usernameInput.dispatchEvent(new Event('input'));

passwordInput.value = '';
component.form.controls.password.markAsDirty();
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();

const loginButton = getLoginButton();
expect(loginButton.disabled).toBe(true);
});

it('Should disable login button when username and password are empty', () => {
usernameInput.value = '';
component.form.controls.username.markAsDirty();
usernameInput.dispatchEvent(new Event('input'));

passwordInput.value = '';
component.form.controls.password.markAsDirty();
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();

const loginButton = getLoginButton();
expect(loginButton.disabled).toBe(true);
});
});

describe('Remember me', () => {
Expand Down Expand Up @@ -327,6 +383,21 @@ describe('LoginComponent', () => {
expect(element.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
});

it('should throw a validation min-length error by default when the username is not at least 2 characters long', () => {
fixture.detectChanges();

usernameInput.value = '1';
usernameInput.dispatchEvent(new Event('input'));

fixture.detectChanges();

expect(component.formError).toBeDefined();
expect(component.formError.username).toBeDefined();
expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
expect(element.querySelector('#username-error')).toBeDefined();
expect(element.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
});

it('should render validation min-length error when the username is lower than 3 characters with a custom validation Validators.minLength(3)', () => {
component.fieldsValidation = {
username: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
Expand Down Expand Up @@ -574,7 +645,7 @@ describe('LoginComponent', () => {
loginWithCredentials('fake-username', 'fake-wrong-password');
}));

it('should render the password in clear when the toggleShowPassword is call', () => {
it('should show password as text when show password is true', () => {
component.isPasswordShow = false;
component.toggleShowPassword(new MouseEvent('click'));

Expand All @@ -584,7 +655,7 @@ describe('LoginComponent', () => {
expect(element.querySelector('#password').type).toEqual('text');
});

it('should render the hide password when the password is in clear and the toggleShowPassword is call', () => {
it('should password be hidden when show password is false', () => {
component.isPasswordShow = true;
component.toggleShowPassword(new MouseEvent('click'));

Expand Down

0 comments on commit 9c134ba

Please sign in to comment.