From 9c134ba100a0efc43bdbdab94367bff71f6fd93f Mon Sep 17 00:00:00 2001 From: Ardit Domi <32884230+arditdomi@users.noreply.github.com> Date: Mon, 13 Jun 2022 15:04:54 +0100 Subject: [PATCH] Convert login fields validation e2e to unit (#7674) --- e2e/core/login/login-component.e2e.ts | 64 ---------------- .../login/components/login.component.spec.ts | 75 ++++++++++++++++++- 2 files changed, 73 insertions(+), 66 deletions(-) diff --git a/e2e/core/login/login-component.e2e.ts b/e2e/core/login/login-component.e2e.ts index 28b4cc16bde..011ffed18a0 100644 --- a/e2e/core/login/login-component.e2e.ts +++ b/e2e/core/login/login-component.e2e.ts @@ -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); @@ -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(); diff --git a/lib/core/login/components/login.component.spec.ts b/lib/core/login/components/login.component.spec.ts index 12575f648d9..f10ef77ed26 100644 --- a/lib/core/login/components/login.component.spec.ts +++ b/lib/core/login/components/login.component.spec.ts @@ -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', () => { @@ -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)])], @@ -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')); @@ -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'));