Fix control pristine property

This commit is contained in:
mauriziovitale84
2016-06-27 15:35:41 +01:00
parent b97217dcd4
commit 2c38746d5d
2 changed files with 37 additions and 29 deletions

View File

@@ -89,6 +89,24 @@ describe('AlfrescoLogin', () => {
expect(element.querySelector('input[type="text"]').value).toEqual(''); expect(element.querySelector('input[type="text"]').value).toEqual('');
}); });
it('should render validation min-length error when the username is just 1 character', () => {
let compiled = componentFixture.debugElement.nativeElement;
let usernameInput = compiled.querySelector('#username');
componentFixture.detectChanges();
usernameInput.value = '1';
usernameInput.dispatchEvent(new Event('input'));
componentFixture.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 min-length error when the username is lower than 4 characters', () => { it('should render validation min-length error when the username is lower than 4 characters', () => {
let compiled = componentFixture.debugElement.nativeElement; let compiled = componentFixture.debugElement.nativeElement;
let usernameInput = compiled.querySelector('#username'); let usernameInput = compiled.querySelector('#username');
@@ -100,10 +118,6 @@ describe('AlfrescoLogin', () => {
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
componentFixture.detectChanges();
expect(component.formError).toBeDefined(); expect(component.formError).toBeDefined();
expect(component.formError.username).toBeDefined(); expect(component.formError.username).toBeDefined();
expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-MIN'); expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
@@ -111,21 +125,18 @@ describe('AlfrescoLogin', () => {
expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN'); expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
}); });
it('should render validation required error when the username is empty', () => { it('should render validation required error when the username is empty and dirty', () => {
let compiled = componentFixture.debugElement.nativeElement; let compiled = componentFixture.debugElement.nativeElement;
let usernameInput = compiled.querySelector('#username'); let usernameInput = compiled.querySelector('#username');
componentFixture.detectChanges(); componentFixture.detectChanges();
usernameInput.value = ''; usernameInput.value = '';
component.form.controls.username.markAsDirty();
usernameInput.dispatchEvent(new Event('input')); usernameInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
componentFixture.detectChanges();
expect(component.formError).toBeDefined(); expect(component.formError).toBeDefined();
expect(component.formError.username).toBeDefined(); expect(component.formError.username).toBeDefined();
expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED'); expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED');
@@ -133,21 +144,18 @@ describe('AlfrescoLogin', () => {
expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED'); expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED');
}); });
it('should render validation required error when the password is empty', () => { it('should render validation required error when the password is empty and dirty', () => {
let compiled = componentFixture.debugElement.nativeElement; let compiled = componentFixture.debugElement.nativeElement;
let passwordInput = compiled.querySelector('#password'); let passwordInput = compiled.querySelector('#password');
componentFixture.detectChanges(); componentFixture.detectChanges();
passwordInput.value = ''; passwordInput.value = '';
component.form.controls.password.markAsDirty();
passwordInput.dispatchEvent(new Event('input')); passwordInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
componentFixture.detectChanges();
expect(component.formError).toBeDefined(); expect(component.formError).toBeDefined();
expect(component.formError.password).toBeDefined(); expect(component.formError.password).toBeDefined();
expect(component.formError.password).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED'); expect(component.formError.password).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED');
@@ -164,15 +172,15 @@ describe('AlfrescoLogin', () => {
usernameInput.value = 'fake-username'; usernameInput.value = 'fake-username';
passwordInput.value = 'fake-password'; passwordInput.value = 'fake-password';
component.form.controls.username.markAsDirty();
component.form.controls.password.markAsDirty();
usernameInput.dispatchEvent(new Event('input')); usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input')); passwordInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
componentFixture.detectChanges();
expect(component.formError).toBeDefined(); expect(component.formError).toBeDefined();
expect(component.formError.username).toEqual(''); expect(component.formError.username).toEqual('');
expect(component.formError.password).toEqual(''); expect(component.formError.password).toEqual('');
@@ -189,15 +197,15 @@ describe('AlfrescoLogin', () => {
usernameInput.value = 'fake-change-username'; usernameInput.value = 'fake-change-username';
passwordInput.value = 'fake-change-password'; passwordInput.value = 'fake-change-password';
component.form.controls.username.markAsDirty();
component.form.controls.password.markAsDirty();
usernameInput.dispatchEvent(new Event('input')); usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input')); passwordInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
componentFixture.detectChanges();
expect(compiled.querySelector('input[type="text"]').value).toEqual('fake-change-username'); expect(compiled.querySelector('input[type="text"]').value).toEqual('fake-change-username');
expect(compiled.querySelector('input[type="password"]').value).toEqual('fake-change-password'); expect(compiled.querySelector('input[type="password"]').value).toEqual('fake-change-password');
}); });
@@ -214,12 +222,12 @@ describe('AlfrescoLogin', () => {
usernameInput.value = 'fake-username'; usernameInput.value = 'fake-username';
passwordInput.value = 'fake-password'; passwordInput.value = 'fake-password';
usernameInput.dispatchEvent(new Event('input')); usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input')); passwordInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
compiled.querySelector('button').click(); compiled.querySelector('button').click();
componentFixture.detectChanges(); componentFixture.detectChanges();
@@ -240,12 +248,12 @@ describe('AlfrescoLogin', () => {
usernameInput.value = 'fake-wrong-username'; usernameInput.value = 'fake-wrong-username';
passwordInput.value = 'fake-password'; passwordInput.value = 'fake-password';
usernameInput.dispatchEvent(new Event('input')); usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input')); passwordInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
compiled.querySelector('button').click(); compiled.querySelector('button').click();
componentFixture.detectChanges(); componentFixture.detectChanges();
@@ -268,12 +276,12 @@ describe('AlfrescoLogin', () => {
usernameInput.value = 'fake-username'; usernameInput.value = 'fake-username';
passwordInput.value = 'fake-wrong-password'; passwordInput.value = 'fake-wrong-password';
usernameInput.dispatchEvent(new Event('input')); usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input')); passwordInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
compiled.querySelector('button').click(); compiled.querySelector('button').click();
componentFixture.detectChanges(); componentFixture.detectChanges();
@@ -296,12 +304,12 @@ describe('AlfrescoLogin', () => {
usernameInput.value = 'fake-wrong-username'; usernameInput.value = 'fake-wrong-username';
passwordInput.value = 'fake-wrong-password'; passwordInput.value = 'fake-wrong-password';
usernameInput.dispatchEvent(new Event('input')); usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input')); passwordInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
compiled.querySelector('button').click(); compiled.querySelector('button').click();
componentFixture.detectChanges(); componentFixture.detectChanges();
@@ -326,12 +334,12 @@ describe('AlfrescoLogin', () => {
usernameInput.value = 'fake-username'; usernameInput.value = 'fake-username';
passwordInput.value = 'fake-password'; passwordInput.value = 'fake-password';
usernameInput.dispatchEvent(new Event('input')); usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input')); passwordInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
compiled.querySelector('button').click(); compiled.querySelector('button').click();
componentFixture.detectChanges(); componentFixture.detectChanges();
@@ -357,12 +365,12 @@ describe('AlfrescoLogin', () => {
usernameInput.value = 'fake-username'; usernameInput.value = 'fake-username';
passwordInput.value = 'fake-wrong-password'; passwordInput.value = 'fake-wrong-password';
usernameInput.dispatchEvent(new Event('input')); usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input')); passwordInput.dispatchEvent(new Event('input'));
componentFixture.detectChanges(); componentFixture.detectChanges();
component.onValueChanged(null);
compiled.querySelector('button').click(); compiled.querySelector('button').click();
componentFixture.detectChanges(); componentFixture.detectChanges();

View File

@@ -131,7 +131,7 @@ 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].pristine) || let hasError = (this.form.controls[field].errors && data[field] !== '') ||
(this.form.controls[field].dirty && !this.form.controls[field].valid); (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) {