From 5169db2073ad88f26edd97045c2d7879070f5e67 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 24 Jun 2016 12:15:53 +0100 Subject: [PATCH] #272 Improve 'login' tests --- .../alfresco-login.component.spec.ts | 745 ++++++++---------- 1 file changed, 311 insertions(+), 434 deletions(-) diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts index 88a88cb8ba..05a8efd815 100644 --- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts +++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts @@ -20,6 +20,7 @@ import { describe, expect, inject, + beforeEach, beforeEachProviders } from '@angular/core/testing'; import { AlfrescoAuthenticationService } from 'ng2-alfresco-core'; @@ -31,6 +32,9 @@ import { TranslationMock } from './../assets/translation.service.mock'; describe('AlfrescoLogin', () => { + let componentFixture; + let component; + beforeEachProviders(() => { return [ { provide: AlfrescoAuthenticationService, useClass: AuthenticationMock }, @@ -38,491 +42,364 @@ describe('AlfrescoLogin', () => { ]; }); - it('should render Login form with all the keys to be translated', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; - - fixture.detectChanges(); - - let element = fixture.nativeElement; - - expect(element.querySelector('[for="username"]')).toBeDefined(); - expect(element.querySelector('[for="username"]').innerText).toEqual('LOGIN.LABEL.USERNAME'); - - expect(element.querySelector('[for="password"]')).toBeDefined(); - expect(element.querySelector('[for="password"]').innerText).toEqual('LOGIN.LABEL.PASSWORD'); - - expect(element.querySelector('#login-button')).toBeDefined(); - expect(element.querySelector('#login-button').innerText).toEqual('LOGIN.BUTTON.LOGIN'); - - expect(element.querySelector('#login-remember')).toBeDefined(); - expect(element.querySelector('#login-remember').innerText).toEqual('LOGIN.LABEL.REMEMBER'); - - expect(element.querySelector('#login-action-help')).toBeDefined(); - expect(element.querySelector('#login-action-help').innerText).toEqual('LOGIN.ACTION.HELP'); - - expect(element.querySelector('#login-action-register')).toBeDefined(); - expect(element.querySelector('#login-action-register').innerText).toEqual('LOGIN.ACTION.REGISTER'); - - }); - })); + beforeEach( + inject( + [TestComponentBuilder], + (tcb: TestComponentBuilder) => { + return tcb + .createAsync(AlfrescoLoginComponent) + .then(fixture => { + componentFixture = fixture; + component = fixture.componentInstance; + }); + } + ) + ); - it('should render user and password input fields with default values', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let element = fixture.nativeElement; - expect(element.querySelector('form')).toBeDefined(); - expect(element.querySelector('input[type="password"]')).toBeDefined(); - expect(element.querySelector('input[type="text"]')).toBeDefined(); - expect(element.querySelector('input[type="password"]').value).toEqual(''); - expect(element.querySelector('input[type="text"]').value).toEqual(''); - }); - })); - - it('should render validation min-length error when the username is lower than 4 characters', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; - - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - - fixture.detectChanges(); - - usernameInput.value = '123'; - usernameInput.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - component.onValueChanged(null); - - fixture.detectChanges(); - - expect(component.formError).toBeDefined(); - expect(component.formError.username).toBeDefined(); - expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-MIN'); - expect(compiled.querySelector('#username-error')).toBeDefined(); - expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN'); - }); - })); - - it('should render validation required error when the username is empty', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; - - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - - fixture.detectChanges(); - - usernameInput.value = ''; - usernameInput.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - component.onValueChanged(null); - - fixture.detectChanges(); - - expect(component.formError).toBeDefined(); - expect(component.formError.username).toBeDefined(); - expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED'); - expect(compiled.querySelector('#username-error')).toBeDefined(); - expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED'); - }); - })); - - it('should render validation required error when the password is empty', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; - - let compiled = fixture.debugElement.nativeElement; - let passwordInput = compiled.querySelector('#password'); - - fixture.detectChanges(); - - passwordInput.value = ''; - passwordInput.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - component.onValueChanged(null); - - fixture.detectChanges(); - - expect(component.formError).toBeDefined(); - expect(component.formError.password).toBeDefined(); - expect(component.formError.password).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED'); - expect(compiled.querySelector('#password-required')).toBeDefined(); - expect(compiled.querySelector('#password-required').innerText).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED'); - }); - })); - - it('should render no validation errors when the username and password are filled', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; - - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - let passwordInput = compiled.querySelector('#password'); + it('should render Login form with all the keys to be translated', () => { + componentFixture.detectChanges(); - fixture.detectChanges(); + let element = componentFixture.nativeElement; - usernameInput.value = 'fake-username'; - passwordInput.value = 'fake-password'; - usernameInput.dispatchEvent(new Event('input')); - passwordInput.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - component.onValueChanged(null); - - fixture.detectChanges(); - - expect(component.formError).toBeDefined(); - expect(component.formError.username).toEqual(''); - expect(component.formError.password).toEqual(''); - expect(compiled.querySelector('#username-error')).toBeNull(); - expect(compiled.querySelector('#password-required')).toBeNull(); - }); - })); + expect(element.querySelector('[for="username"]')).toBeDefined(); + expect(element.querySelector('[for="username"]').innerText).toEqual('LOGIN.LABEL.USERNAME'); - it('should render the new values after user and password values are changed', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; + expect(element.querySelector('[for="password"]')).toBeDefined(); + expect(element.querySelector('[for="password"]').innerText).toEqual('LOGIN.LABEL.PASSWORD'); - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - let passwordInput = compiled.querySelector('#password'); - - fixture.detectChanges(); - - usernameInput.value = 'fake-change-username'; - passwordInput.value = 'fake-change-password'; - usernameInput.dispatchEvent(new Event('input')); - passwordInput.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - component.onValueChanged(null); - - fixture.detectChanges(); - - expect(compiled.querySelector('input[type="text"]').value).toEqual('fake-change-username'); - expect(compiled.querySelector('input[type="password"]').value).toEqual('fake-change-password'); - }); - })); - - it('should return success true after the login have succeeded ', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; + expect(element.querySelector('#login-button')).toBeDefined(); + expect(element.querySelector('#login-button').innerText).toEqual('LOGIN.BUTTON.LOGIN'); - expect(component.error).toBe(false); - expect(component.success).toBe(false); + expect(element.querySelector('#login-remember')).toBeDefined(); + expect(element.querySelector('#login-remember').innerText).toEqual('LOGIN.LABEL.REMEMBER'); - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - let passwordInput = compiled.querySelector('#password'); - - fixture.detectChanges(); - - usernameInput.value = 'fake-username'; - passwordInput.value = 'fake-password'; - usernameInput.dispatchEvent(new Event('input')); - passwordInput.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - component.onValueChanged(null); - compiled.querySelector('button').click(); - - fixture.detectChanges(); - - expect(component.error).toBe(false); - expect(component.success).toBe(true); - }); - })); - - it('should return error with a wrong username ', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; + expect(element.querySelector('#login-action-help')).toBeDefined(); + expect(element.querySelector('#login-action-help').innerText).toEqual('LOGIN.ACTION.HELP'); - expect(component.error).toBe(false); - expect(component.success).toBe(false); - - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - let passwordInput = compiled.querySelector('#password'); + expect(element.querySelector('#login-action-register')).toBeDefined(); + expect(element.querySelector('#login-action-register').innerText).toEqual('LOGIN.ACTION.REGISTER'); + }); - fixture.detectChanges(); - - usernameInput.value = 'fake-wrong-username'; - passwordInput.value = 'fake-password'; - usernameInput.dispatchEvent(new Event('input')); - passwordInput.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - component.onValueChanged(null); - compiled.querySelector('button').click(); - - fixture.detectChanges(); - - expect(component.error).toBe(true); - expect(component.success).toBe(false); - expect(compiled.querySelector('#login-error')).toBeDefined(); - expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); - }); - })); + it('should render user and password input fields with default values', () => { + let element = componentFixture.nativeElement; + expect(element.querySelector('form')).toBeDefined(); + expect(element.querySelector('input[type="password"]')).toBeDefined(); + expect(element.querySelector('input[type="text"]')).toBeDefined(); + expect(element.querySelector('input[type="password"]').value).toEqual(''); + expect(element.querySelector('input[type="text"]').value).toEqual(''); + }); - it('should return error with a wrong password ', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; + it('should render validation min-length error when the username is lower than 4 characters', () => { + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); - expect(component.success).toBe(false); - expect(component.error).toBe(false); + componentFixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - let passwordInput = compiled.querySelector('#password'); + usernameInput.value = '123'; + usernameInput.dispatchEvent(new Event('input')); - fixture.detectChanges(); + componentFixture.detectChanges(); - usernameInput.value = 'fake-username'; - passwordInput.value = 'fake-wrong-password'; - usernameInput.dispatchEvent(new Event('input')); - passwordInput.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - component.onValueChanged(null); - compiled.querySelector('button').click(); - - fixture.detectChanges(); - - expect(component.error).toBe(true); - expect(component.success).toBe(false); - expect(compiled.querySelector('#login-error')).toBeDefined(); - expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); - }); - })); + component.onValueChanged(null); - it('should return error with a wrong username and password ', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; + componentFixture.detectChanges(); - expect(component.success).toBe(false); - expect(component.error).toBe(false); + expect(component.formError).toBeDefined(); + expect(component.formError.username).toBeDefined(); + expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-MIN'); + expect(compiled.querySelector('#username-error')).toBeDefined(); + expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN'); + }); - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - let passwordInput = compiled.querySelector('#password'); + it('should render validation required error when the username is empty', () => { + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); - fixture.detectChanges(); - - usernameInput.value = 'fake-wrong-username'; - passwordInput.value = 'fake-wrong-password'; - usernameInput.dispatchEvent(new Event('input')); - passwordInput.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - component.onValueChanged(null); - compiled.querySelector('button').click(); - - fixture.detectChanges(); + componentFixture.detectChanges(); - expect(component.error).toBe(true); - expect(component.success).toBe(false); - expect(compiled.querySelector('#login-error')).toBeDefined(); - expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); - }); - })); + usernameInput.value = ''; + usernameInput.dispatchEvent(new Event('input')); + componentFixture.detectChanges(); - it('should emit onSuccess event after the login has succeeded', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; + component.onValueChanged(null); - spyOn(component.onSuccess, 'emit'); + componentFixture.detectChanges(); - expect(component.error).toBe(false); - expect(component.success).toBe(false); + expect(component.formError).toBeDefined(); + expect(component.formError.username).toBeDefined(); + expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED'); + expect(compiled.querySelector('#username-error')).toBeDefined(); + expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED'); + }); - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - let passwordInput = compiled.querySelector('#password'); + it('should render validation required error when the password is empty', () => { + let compiled = componentFixture.debugElement.nativeElement; + let passwordInput = compiled.querySelector('#password'); - fixture.detectChanges(); + componentFixture.detectChanges(); - usernameInput.value = 'fake-username'; - passwordInput.value = 'fake-password'; - usernameInput.dispatchEvent(new Event('input')); - passwordInput.dispatchEvent(new Event('input')); + passwordInput.value = ''; + passwordInput.dispatchEvent(new Event('input')); - fixture.detectChanges(); + componentFixture.detectChanges(); - component.onValueChanged(null); - compiled.querySelector('button').click(); + component.onValueChanged(null); - fixture.detectChanges(); + componentFixture.detectChanges(); - expect(component.error).toBe(false); - expect(component.success).toBe(true); - expect(compiled.querySelector('#login-success')).toBeDefined(); - expect(compiled.querySelector('#login-success').innerHTML).toEqual('LOGIN.MESSAGES.LOGIN-SUCCESS'); - expect(component.onSuccess.emit).toHaveBeenCalledWith({value: 'Login OK'}); - }); - })); + expect(component.formError).toBeDefined(); + expect(component.formError.password).toBeDefined(); + expect(component.formError.password).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED'); + expect(compiled.querySelector('#password-required')).toBeDefined(); + expect(compiled.querySelector('#password-required').innerText).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED'); + }); - it('should emit onError event after the login has failed', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; - component.isErrorStyle = function () { - console.log('mock'); - }; + it('should render no validation errors when the username and password are filled', () => { + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); - spyOn(component.onError, 'emit'); + componentFixture.detectChanges(); - expect(component.success).toBe(false); - expect(component.error).toBe(false); + usernameInput.value = 'fake-username'; + passwordInput.value = 'fake-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); - let compiled = fixture.debugElement.nativeElement; - let usernameInput = compiled.querySelector('#username'); - let passwordInput = compiled.querySelector('#password'); + componentFixture.detectChanges(); - fixture.detectChanges(); + component.onValueChanged(null); - usernameInput.value = 'fake-username'; - passwordInput.value = 'fake-wrong-password'; - usernameInput.dispatchEvent(new Event('input')); - passwordInput.dispatchEvent(new Event('input')); + componentFixture.detectChanges(); - fixture.detectChanges(); + expect(component.formError).toBeDefined(); + expect(component.formError.username).toEqual(''); + expect(component.formError.password).toEqual(''); + expect(compiled.querySelector('#username-error')).toBeNull(); + expect(compiled.querySelector('#password-required')).toBeNull(); + }); - component.onValueChanged(null); - compiled.querySelector('button').click(); + it('should render the new values after user and password values are changed', () => { + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); - fixture.detectChanges(); + componentFixture.detectChanges(); - expect(component.error).toBe(true); - expect(component.success).toBe(false); - expect(compiled.querySelector('#login-error')).toBeDefined(); - expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); - expect(component.onError.emit).toHaveBeenCalledWith({value: 'Login KO'}); - }); - })); + usernameInput.value = 'fake-change-username'; + passwordInput.value = 'fake-change-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); - it('should render the password in clear when the toggleShowPassword is call', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; + componentFixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; + component.onValueChanged(null); - fixture.detectChanges(); + componentFixture.detectChanges(); - component.isPasswordShow = false; - component.toggleShowPassword(); + expect(compiled.querySelector('input[type="text"]').value).toEqual('fake-change-username'); + expect(compiled.querySelector('input[type="password"]').value).toEqual('fake-change-password'); + }); - fixture.detectChanges(); + it('should return success true after the login have succeeded', () => { + expect(component.error).toBe(false); + expect(component.success).toBe(false); - expect(component.isPasswordShow).toBe(true); - expect(compiled.querySelector('#password').type).toEqual('text'); - }); - })); + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); - it('should render the hide password when the password is in clear and the toggleShowPassword is call', - inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(AlfrescoLoginComponent) - .then((fixture) => { - let component = fixture.componentInstance; + componentFixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; + usernameInput.value = 'fake-username'; + passwordInput.value = 'fake-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); - fixture.detectChanges(); + componentFixture.detectChanges(); - component.isPasswordShow = true; - component.toggleShowPassword(); + component.onValueChanged(null); + compiled.querySelector('button').click(); - fixture.detectChanges(); + componentFixture.detectChanges(); - expect(component.isPasswordShow).toBe(false); - expect(compiled.querySelector('#password').type).toEqual('password'); - }); - })); + expect(component.error).toBe(false); + expect(component.success).toBe(true); + }); + + it('should return error with a wrong username', () => { + expect(component.error).toBe(false); + expect(component.success).toBe(false); + + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); + + componentFixture.detectChanges(); + + usernameInput.value = 'fake-wrong-username'; + passwordInput.value = 'fake-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); + + componentFixture.detectChanges(); + + component.onValueChanged(null); + compiled.querySelector('button').click(); + + componentFixture.detectChanges(); + + expect(component.error).toBe(true); + expect(component.success).toBe(false); + expect(compiled.querySelector('#login-error')).toBeDefined(); + expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); + }); + + it('should return error with a wrong password', () => { + expect(component.success).toBe(false); + expect(component.error).toBe(false); + + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); + + componentFixture.detectChanges(); + + usernameInput.value = 'fake-username'; + passwordInput.value = 'fake-wrong-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); + + componentFixture.detectChanges(); + + component.onValueChanged(null); + compiled.querySelector('button').click(); + + componentFixture.detectChanges(); + + expect(component.error).toBe(true); + expect(component.success).toBe(false); + expect(compiled.querySelector('#login-error')).toBeDefined(); + expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); + }); + + it('should return error with a wrong username and password', () => { + expect(component.success).toBe(false); + expect(component.error).toBe(false); + + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); + + componentFixture.detectChanges(); + + usernameInput.value = 'fake-wrong-username'; + passwordInput.value = 'fake-wrong-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); + + componentFixture.detectChanges(); + + component.onValueChanged(null); + compiled.querySelector('button').click(); + + componentFixture.detectChanges(); + + expect(component.error).toBe(true); + expect(component.success).toBe(false); + expect(compiled.querySelector('#login-error')).toBeDefined(); + expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); + }); + + it('should emit onSuccess event after the login has succeeded', () => { + spyOn(component.onSuccess, 'emit'); + + expect(component.error).toBe(false); + expect(component.success).toBe(false); + + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); + + componentFixture.detectChanges(); + + usernameInput.value = 'fake-username'; + passwordInput.value = 'fake-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); + + componentFixture.detectChanges(); + + component.onValueChanged(null); + compiled.querySelector('button').click(); + + componentFixture.detectChanges(); + + expect(component.error).toBe(false); + expect(component.success).toBe(true); + expect(compiled.querySelector('#login-success')).toBeDefined(); + expect(compiled.querySelector('#login-success').innerHTML).toEqual('LOGIN.MESSAGES.LOGIN-SUCCESS'); + expect(component.onSuccess.emit).toHaveBeenCalledWith({value: 'Login OK'}); + }); + + it('should emit onError event after the login has failed', () => { + spyOn(component.onError, 'emit'); + + expect(component.success).toBe(false); + expect(component.error).toBe(false); + + let compiled = componentFixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); + + componentFixture.detectChanges(); + + usernameInput.value = 'fake-username'; + passwordInput.value = 'fake-wrong-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); + + componentFixture.detectChanges(); + + component.onValueChanged(null); + compiled.querySelector('button').click(); + + componentFixture.detectChanges(); + + expect(component.error).toBe(true); + expect(component.success).toBe(false); + expect(compiled.querySelector('#login-error')).toBeDefined(); + expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); + expect(component.onError.emit).toHaveBeenCalledWith({value: 'Login KO'}); + }); + + it('should render the password in clear when the toggleShowPassword is call', () => { + let compiled = componentFixture.debugElement.nativeElement; + + componentFixture.detectChanges(); + + component.isPasswordShow = false; + component.toggleShowPassword(); + + componentFixture.detectChanges(); + + expect(component.isPasswordShow).toBe(true); + expect(compiled.querySelector('#password').type).toEqual('text'); + }); + + it('should render the hide password when the password is in clear and the toggleShowPassword is call', () => { + let compiled = componentFixture.debugElement.nativeElement; + + componentFixture.detectChanges(); + + component.isPasswordShow = true; + component.toggleShowPassword(); + + componentFixture.detectChanges(); + + expect(component.isPasswordShow).toBe(false); + expect(compiled.querySelector('#password').type).toEqual('password'); + }); });