From d0fa3d8f19892caefcaedecc9061bfeed001cea2 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Thu, 23 Jun 2016 10:14:18 +0100 Subject: [PATCH 1/3] Fix error position --- .../src/components/alfresco-login.component.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html index 709f9e39f9..42e6bfdd89 100644 --- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html +++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html @@ -14,8 +14,8 @@ class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label "> - - {{formError.username | translate }} + + {{formError.username | translate }} @@ -35,8 +35,8 @@ - - {{formError.password | translate }} + + {{formError.password | translate }}
From 3e9d50bdca3f651ed93d1d7eebbec4c84ca38d36 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Thu, 23 Jun 2016 11:52:08 +0100 Subject: [PATCH 2/3] Fix error messages position --- .../src/components/alfresco-login.component.html | 5 ++--- .../src/components/alfresco-login.component.ts | 7 ++++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html index 42e6bfdd89..26eba18504 100644 --- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html +++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html @@ -18,8 +18,7 @@ {{formError.username | translate }} - -
@@ -35,7 +34,7 @@ - + {{formError.password | translate }}
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts index 054ea0f9f4..5a9208e2de 100644 --- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts +++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts @@ -89,7 +89,7 @@ export class AlfrescoLoginComponent { this.form.valueChanges.subscribe(data => this.onValueChanged(data)); - this.onValueChanged(null); + // this.onValueChanged(null); } /** @@ -131,7 +131,8 @@ export class AlfrescoLoginComponent { for (let field in this.formError) { if (field) { this.formError[field] = ''; - let hasError = this.form.controls[field].errors || (this.form.controls[field].dirty && !this.form.controls[field].valid); + let hasError = (this.form.controls[field].errors && !this.form.controls[field].pristine) || + (this.form.controls[field].dirty && !this.form.controls[field].valid); if (hasError) { for (let key in this.form.controls[field].errors) { if (key) { @@ -164,6 +165,6 @@ export class AlfrescoLoginComponent { if (typeof componentHandler !== 'undefined') { componentHandler.upgradeAllRegistered(); } - return !field.valid; + return !field.valid && field.dirty && !field.pristine; } } From d0d0ad0bc4ee1bb4daaba1bd0508b7799b91a329 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Thu, 23 Jun 2016 16:48:12 +0100 Subject: [PATCH 3/3] Fix broken login test --- .../components/alfresco-login.component.html | 8 +- .../alfresco-login.component.spec.ts | 760 +++++++++++------- 2 files changed, 461 insertions(+), 307 deletions(-) diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html index 26eba18504..7401b36f00 100644 --- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html +++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html @@ -39,21 +39,21 @@
-
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 779eab3a2b..94e6c5b80b 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 @@ -21,12 +21,12 @@ import { TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS } from '@angular/platform-browser-dynamic/testing'; import { - it, - describe, - expect, - inject, - beforeEachProviders, - setBaseTestProviders + it, + describe, + expect, + inject, + beforeEachProviders, + setBaseTestProviders } from '@angular/core/testing'; import { TestComponentBuilder } from '@angular/compiler/testing'; import { provide } from '@angular/core'; @@ -36,350 +36,504 @@ import { AuthenticationMock } from './../assets/authentication.service.mock'; import { TranslationMock } from './../assets/translation.service.mock'; describe('AlfrescoLogin', () => { - let authService; - - setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); - - beforeEachProviders(() => { - authService = new AuthenticationMock(); - - return [ - authService.getProviders(), - provide(AlfrescoTranslationService, {useClass: TranslationMock}) - ]; - }); - - 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('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED'); - - expect(element.querySelector('[for="password"]')).toBeDefined(); - expect(element.querySelector('[for="password"]').innerText).toEqual('LOGIN.LABEL.PASSWORD'); - expect(element.querySelector('#password-required').innerText).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED'); - - }); - })); - - 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 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; - - component.form.controls.username._value = 'us'; - - fixture.detectChanges(); - - component.onValueChanged(); - - fixture.detectChanges(); - - expect(component.formError).toBeDefined(true); - expect(component.formError.username).toBeDefined(true); - expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-MIN'); - expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN'); - }); - })); - - it('should render no errors when the username and password are correct', - 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; - - component.form.controls.username._value = 'fake-user'; - component.form.controls.password._value = 'fake-password'; - - fixture.detectChanges(); - - component.onValueChanged(); - - fixture.detectChanges(); - - expect(component.formError).toBeDefined(true); - expect(component.formError.username).toEqual(''); - expect(component.formError.password).toEqual(''); - expect(compiled.querySelector('#login-error')).toBeNull(); - }); - })); - - 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'); - }; - - let compiled = fixture.debugElement.nativeElement; - component.form.controls.username._value = 'my username'; - component.form.controls.password._value = 'my password'; - - fixture.detectChanges(); - component.onValueChanged(); - - expect(compiled.querySelector('input[type="password"]').value).toEqual('my password'); - expect(compiled.querySelector('input[type="text"]').value).toEqual('my username'); - }); - })); - - 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'); - }; - - let compiled = fixture.debugElement.nativeElement; - - component.form.controls.username._value = 'fake-username'; - component.form.controls.password._value = 'fake-password'; - - fixture.detectChanges(); - component.onValueChanged(); - - compiled.querySelector('button').click(); - - fixture.detectChanges(); + let authService; + + setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); + + beforeEachProviders(() => { + authService = new AuthenticationMock(); + + return [ + authService.getProviders(), + provide(AlfrescoTranslationService, {useClass: TranslationMock}) + ]; + }); + + 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'); + }; - expect(component.error).toBe(false); - expect(component.success).toBe(true); - }); - })); + fixture.detectChanges(); + + let element = fixture.nativeElement; - 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('[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'); + + }); + })); - let compiled = fixture.debugElement.nativeElement; + 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(); - component.form.controls.username._value = 'fake-wrong-username'; - component.form.controls.password._value = 'fake-password'; + 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'); - fixture.detectChanges(); - component.onValueChanged(); - - compiled.querySelector('button').click(); - - fixture.detectChanges(); - - expect(fixture.componentInstance.error).toBe(true); - expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); - }); - })); + fixture.detectChanges(); - 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'); - }; + 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(); + }); + })); - let compiled = fixture.debugElement.nativeElement; + 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'); + }; - component.form.controls.username._value = 'fake-username'; - component.form.controls.password._value = 'fake-wrong-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'); + }; - fixture.detectChanges(); - component.onValueChanged(); - - compiled.querySelector('button').click(); + expect(component.error).toBe(false); + expect(component.success).toBe(false); - fixture.detectChanges(); + 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(fixture.componentInstance.error).toBe(true); - expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); - }); - })); + 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'); - 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'); - }; + 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'); + }); + })); - let compiled = fixture.debugElement.nativeElement; + 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'); + }; - component.form.controls.username._value = 'fake-wrong-username'; - component.form.controls.password._value = 'fake-wrong-password'; + expect(component.success).toBe(false); + expect(component.error).toBe(false); - fixture.detectChanges(); - component.onValueChanged(); + let compiled = fixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); - compiled.querySelector('button').click(); + fixture.detectChanges(); - fixture.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'); + }); + })); - expect(fixture.componentInstance.error).toBe(true); - expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); - }); - })); + 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'); + }; + expect(component.success).toBe(false); + expect(component.error).toBe(false); - 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'); - }; + let compiled = fixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); - spyOn(component.onSuccess, 'emit'); + 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(); - let compiled = fixture.debugElement.nativeElement; + 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.form.controls.username._value = 'fake-username'; - component.form.controls.password._value = 'fake-password'; - fixture.detectChanges(); - component.onValueChanged(); + 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'); + }; - let nativeElement = fixture.nativeElement; - let button = nativeElement.querySelector('button'); - button.dispatchEvent(new Event('click')); + spyOn(component.onSuccess, 'emit'); - fixture.detectChanges(); + expect(component.error).toBe(false); + expect(component.success).toBe(false); - expect(fixture.componentInstance.error).toBe(false); - expect(compiled.querySelector('#login-success').innerHTML).toEqual('LOGIN.MESSAGES.LOGIN-SUCCESS'); - expect(component.onSuccess.emit).toHaveBeenCalledWith({value: 'Login OK'}); - }); - })); + let compiled = fixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); - 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'); - }; + fixture.detectChanges(); - spyOn(component.onError, 'emit'); + usernameInput.value = 'fake-username'; + passwordInput.value = 'fake-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); - let compiled = fixture.debugElement.nativeElement; + fixture.detectChanges(); - component.form.controls.username._value = 'fake-wrong-username'; - component.form.controls.password._value = 'fake-password'; + component.onValueChanged(null); + compiled.querySelector('button').click(); - fixture.detectChanges(); - component.onValueChanged(); + fixture.detectChanges(); - // trigger the click - let nativeElement = fixture.nativeElement; - let button = nativeElement.querySelector('button'); - button.dispatchEvent(new Event('click')); + 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'}); + }); + })); - fixture.detectChanges(); + 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'); + }; - expect(fixture.componentInstance.error).toBe(true); - expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); - expect(component.onError.emit).toHaveBeenCalledWith({value: 'Login KO'}); - }); - })); + spyOn(component.onError, 'emit'); - 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; + expect(component.success).toBe(false); + expect(component.error).toBe(false); - let compiled = fixture.debugElement.nativeElement; + let compiled = fixture.debugElement.nativeElement; + let usernameInput = compiled.querySelector('#username'); + let passwordInput = compiled.querySelector('#password'); - fixture.detectChanges(); + fixture.detectChanges(); - component.isPasswordShow = false; - component.toggleShowPassword(); + usernameInput.value = 'fake-username'; + passwordInput.value = 'fake-wrong-password'; + usernameInput.dispatchEvent(new Event('input')); + passwordInput.dispatchEvent(new Event('input')); - fixture.detectChanges(); + fixture.detectChanges(); - expect(component.isPasswordShow).toBe(true); - expect(compiled.querySelector('#password').type).toEqual('text'); - }); - })); + component.onValueChanged(null); + compiled.querySelector('button').click(); - 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; + fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; + 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'}); + }); + })); - fixture.detectChanges(); + 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; - component.isPasswordShow = true; - component.toggleShowPassword(); + let compiled = fixture.debugElement.nativeElement; - fixture.detectChanges(); + fixture.detectChanges(); - expect(component.isPasswordShow).toBe(false); - expect(compiled.querySelector('#password').type).toEqual('password'); - }); - })); + component.isPasswordShow = false; + component.toggleShowPassword(); + fixture.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', + inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(AlfrescoLoginComponent) + .then((fixture) => { + let component = fixture.componentInstance; + + let compiled = fixture.debugElement.nativeElement; + + fixture.detectChanges(); + + component.isPasswordShow = true; + component.toggleShowPassword(); + + fixture.detectChanges(); + + expect(component.isPasswordShow).toBe(false); + expect(compiled.querySelector('#password').type).toEqual('password'); + }); + })); });