inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #264 from Alfresco/dev-mvitale-236

Browse Source 
Fix error messages position #236
This commit is contained in:
Maurizio Vitale 2016-06-24 09:19:11 +01:00 committed by GitHub
commit e90ad6f546
3 changed files with 470 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
View File

@ -14,12 +14,11 @@
class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label "> class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
<label for="username" class="mdl-textfield__label">{{'LOGIN.LABEL.USERNAME' | translate }}</label> <label for="username" class="mdl-textfield__label">{{'LOGIN.LABEL.USERNAME' | translate }}</label>
<input type="text" class="mdl-textfield__input" id="username" data-automation-id="username" ngControl="username" tabindex="1" /> <input type="text" class="mdl-textfield__input" id="username" data-automation-id="username" ngControl="username" tabindex="1" />
<span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="formError.username"> <span class="mdl-tooltip--validation" for="username" *ngIf="formError.username">
<span id="username-error" data-automation-id="username-error">{{formError.username | translate }}</span> <span id="username-error" class="mdl-textfield__error" style="visibility: visible" data-automation-id="username-error">{{formError.username | translate }}</span>
</span> </span>
</div> </div>
<div
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.password)}"
class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<i [ngClass]="{hide: isPasswordShow}" [ngClass]="{show: !isPasswordShow}" (click)="toggleShowPassword()" data-automation-id="show_password" <i [ngClass]="{hide: isPasswordShow}" [ngClass]="{show: !isPasswordShow}" (click)="toggleShowPassword()" data-automation-id="show_password"
class="icon-inline"> class="icon-inline">
@ -35,26 +34,26 @@
</i> </i>
<label for="password" class="mdl-textfield__label">{{'LOGIN.LABEL.PASSWORD' | translate }}</label> <label for="password" class="mdl-textfield__label">{{'LOGIN.LABEL.PASSWORD' | translate }}</label>
<input type="password" class="mdl-textfield__input" id="password" data-automation-id="password" ngControl="password" tabindex="2" /> <input type="password" class="mdl-textfield__input" id="password" data-automation-id="password" ngControl="password" tabindex="2" />
<span class="mdl-tooltip mdl-tooltip--validation is-active" for="password" *ngIf="formError.password"> <span class="mdl-tooltip--validation" for="password" *ngIf="formError.password">
<span id="password-required" data-automation-id="password-required">{{formError.password | translate }}</span> <span id="password-required" class="mdl-textfield__error" style="visibility: visible" data-automation-id="password-required">{{formError.password | translate }}</span>
</span> </span>
</div> </div>
<br> <br>
<button type="submit" <button type="submit" id="login-button"
class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
data-automation-id="login-button" [disabled]="!form.valid">{{'LOGIN.BUTTON.LOGIN' | translate }}</button> data-automation-id="login-button" [disabled]="!form.valid">{{'LOGIN.BUTTON.LOGIN' | translate }}</button>
<br> <br>
<div class="center"> <div class="center">
<label class=" mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="remember"> <label class=" mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="remember">
<input type="checkbox" id="remember" class="center mdl-checkbox__input"> <input type="checkbox" id="remember" class="center mdl-checkbox__input">
<span class="mdl-checkbox__label">{{'LOGIN.LABEL.REMEMBER' | translate }}</span> <span id="login-remember" class="mdl-checkbox__label">{{'LOGIN.LABEL.REMEMBER' | translate }}</span>
</label> </label>
</div> </div>
</div> </div>
<div class="mdl-card__actions mdl-card--border mdl-card__link"> <div class="mdl-card__actions mdl-card--border mdl-card__link">
<div class="login-action"> <div class="login-action">
<div class="login-action-left"> <a href="">{{'LOGIN.ACTION.HELP' | translate }}</a> </div> <div id="login-action-help" class="login-action-left"> <a href="">{{'LOGIN.ACTION.HELP' | translate }}</a> </div>
<div class="login-action-right"> <a href="">{{'LOGIN.ACTION.REGISTER' | translate }}</a> <div id="login-action-register" class="login-action-right"> <a href="">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
</div> </div>
</div> </div>
</div> </div>

760
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts
View File

@ -21,12 +21,12 @@ import {
TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
} from '@angular/platform-browser-dynamic/testing'; } from '@angular/platform-browser-dynamic/testing';
import { import {
it, it,
describe, describe,
expect, expect,
inject, inject,
beforeEachProviders, beforeEachProviders,
setBaseTestProviders setBaseTestProviders
} from '@angular/core/testing'; } from '@angular/core/testing';
import { TestComponentBuilder } from '@angular/compiler/testing'; import { TestComponentBuilder } from '@angular/compiler/testing';
import { provide } from '@angular/core'; import { provide } from '@angular/core';
@ -36,350 +36,504 @@ import { AuthenticationMock } from './../assets/authentication.service.mock';
import { TranslationMock } from './../assets/translation.service.mock'; import { TranslationMock } from './../assets/translation.service.mock';
describe('AlfrescoLogin', () => { describe('AlfrescoLogin', () => {
let authService; let authService;
setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
beforeEachProviders(() => { beforeEachProviders(() => {
authService = new AuthenticationMock(); authService = new AuthenticationMock();
return [ return [
authService.getProviders(), authService.getProviders(),
provide(AlfrescoTranslationService, {useClass: TranslationMock}) provide(AlfrescoTranslationService, {useClass: TranslationMock})
]; ];
}); });
it('should render `Login` form with all the keys to be translated', it('should render Login form with all the keys to be translated',
inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb return tcb
.createAsync(AlfrescoLoginComponent) .createAsync(AlfrescoLoginComponent)
.then((fixture) => { .then((fixture) => {
let component = fixture.componentInstance; let component = fixture.componentInstance;
component.isErrorStyle = function () { component.isErrorStyle = function () {
console.log('mock'); 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();
expect(component.error).toBe(false); fixture.detectChanges();
expect(component.success).toBe(true);
}); let element = fixture.nativeElement;
}));
it('should return error with a wrong username ', expect(element.querySelector('[for="username"]')).toBeDefined();
inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { expect(element.querySelector('[for="username"]').innerText).toEqual('LOGIN.LABEL.USERNAME');
return tcb
.createAsync(AlfrescoLoginComponent) expect(element.querySelector('[for="password"]')).toBeDefined();
.then((fixture) => { expect(element.querySelector('[for="password"]').innerText).toEqual('LOGIN.LABEL.PASSWORD');
let component = fixture.componentInstance;
component.isErrorStyle = function () { expect(element.querySelector('#login-button')).toBeDefined();
console.log('mock'); 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'; expect(component.formError).toBeDefined();
component.form.controls.password._value = 'fake-password'; 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(); 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');
});
}));
it('should return error with a wrong password ', usernameInput.value = 'fake-username';
inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { passwordInput.value = 'fake-password';
return tcb usernameInput.dispatchEvent(new Event('input'));
.createAsync(AlfrescoLoginComponent) passwordInput.dispatchEvent(new Event('input'));
.then((fixture) => {
let component = fixture.componentInstance; fixture.detectChanges();
component.isErrorStyle = function () {
console.log('mock'); 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'; let compiled = fixture.debugElement.nativeElement;
component.form.controls.password._value = 'fake-wrong-password'; 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(); expect(component.error).toBe(false);
component.onValueChanged(); expect(component.success).toBe(false);
compiled.querySelector('button').click();
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(component.error).toBe(false);
expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); 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 ', fixture.detectChanges();
inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb usernameInput.value = 'fake-wrong-username';
.createAsync(AlfrescoLoginComponent) passwordInput.value = 'fake-password';
.then((fixture) => { usernameInput.dispatchEvent(new Event('input'));
let component = fixture.componentInstance; passwordInput.dispatchEvent(new Event('input'));
component.isErrorStyle = function () {
console.log('mock'); 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'; expect(component.success).toBe(false);
component.form.controls.password._value = 'fake-wrong-password'; expect(component.error).toBe(false);
fixture.detectChanges(); let compiled = fixture.debugElement.nativeElement;
component.onValueChanged(); 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); it('should return error with a wrong username and password ',
expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR'); 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', let compiled = fixture.debugElement.nativeElement;
inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { let usernameInput = compiled.querySelector('#username');
return tcb let passwordInput = compiled.querySelector('#password');
.createAsync(AlfrescoLoginComponent)
.then((fixture) => {
let component = fixture.componentInstance;
component.isErrorStyle = function () {
console.log('mock');
};
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(); it('should emit onSuccess event after the login has succeeded',
component.onValueChanged(); inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(AlfrescoLoginComponent)
.then((fixture) => {
let component = fixture.componentInstance;
component.isErrorStyle = function () {
console.log('mock');
};
let nativeElement = fixture.nativeElement; spyOn(component.onSuccess, 'emit');
let button = nativeElement.querySelector('button');
button.dispatchEvent(new Event('click'));
fixture.detectChanges(); expect(component.error).toBe(false);
expect(component.success).toBe(false);
expect(fixture.componentInstance.error).toBe(false); let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('#login-success').innerHTML).toEqual('LOGIN.MESSAGES.LOGIN-SUCCESS'); let usernameInput = compiled.querySelector('#username');
expect(component.onSuccess.emit).toHaveBeenCalledWith({value: 'Login OK'}); let passwordInput = compiled.querySelector('#password');
});
}));
it('should emit onError event after the login has failed', fixture.detectChanges();
inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(AlfrescoLoginComponent)
.then((fixture) => {
let component = fixture.componentInstance;
component.isErrorStyle = function () {
console.log('mock');
};
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.onValueChanged(null);
component.form.controls.password._value = 'fake-password'; compiled.querySelector('button').click();
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
// trigger the click expect(component.error).toBe(false);
let nativeElement = fixture.nativeElement; expect(component.success).toBe(true);
let button = nativeElement.querySelector('button'); expect(compiled.querySelector('#login-success')).toBeDefined();
button.dispatchEvent(new Event('click')); 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); spyOn(component.onError, 'emit');
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', expect(component.success).toBe(false);
inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { expect(component.error).toBe(false);
return tcb
.createAsync(AlfrescoLoginComponent)
.then((fixture) => {
let component = fixture.componentInstance;
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; usernameInput.value = 'fake-username';
component.toggleShowPassword(); passwordInput.value = 'fake-wrong-password';
usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges(); fixture.detectChanges();
expect(component.isPasswordShow).toBe(true); component.onValueChanged(null);
expect(compiled.querySelector('#password').type).toEqual('text'); compiled.querySelector('button').click();
});
}));
it('should render the hide password when the password is in clear and the toggleShowPassword is call', fixture.detectChanges();
inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(AlfrescoLoginComponent)
.then((fixture) => {
let component = fixture.componentInstance;
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; let compiled = fixture.debugElement.nativeElement;
component.toggleShowPassword();
fixture.detectChanges(); fixture.detectChanges();
expect(component.isPasswordShow).toBe(false); component.isPasswordShow = false;
expect(compiled.querySelector('#password').type).toEqual('password'); 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');
});
}));
}); });

7
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
View File

@ -89,7 +89,7 @@ export class AlfrescoLoginComponent {
this.form.valueChanges.subscribe(data => this.onValueChanged(data)); 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) { for (let field in this.formError) {
if (field) { if (field) {
this.formError[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) { if (hasError) {
for (let key in this.form.controls[field].errors) { for (let key in this.form.controls[field].errors) {
if (key) { if (key) {
@ -164,6 +165,6 @@ export class AlfrescoLoginComponent {
if (typeof componentHandler !== 'undefined') { if (typeof componentHandler !== 'undefined') {
componentHandler.upgradeAllRegistered(); componentHandler.upgradeAllRegistered();
} }
return !field.valid; return !field.valid && field.dirty && !field.pristine;
} }
} }