Unit test when a button is enabled using karma in Angular2

Question

I have an Angular2 project using angular CLI. I am trying to validate a form component. It has two fields: email address and password. Both parameters are required . There is a submit button on the system. It is enabled only after the user has provided valid inputs in both fields.

 <form (ngSubmit)="login()" #loginForm="ngForm"> <md-input-container class="md-block"> <input md-input [(ngModel)]="user.email" class="userEmail" name="userEmail" type="email" placeholder="Email" ngControl="userEmail" required> </md-input-container> <br> <md-input-container class="md-block"> <input md-input [(ngModel)]="user.password" class="userPassword" name="userPassword" type="password" placeholder="Password" ngControl="userPassword" required> </md-input-container> <br> <!--the button is enabled only after all form fields are valid--> <button color="primary" md-button type="submit" class='loginButton' [disabled]="!loginForm.form.valid"> Login </button> 

Now I want to test the button with karma. I went through the docs and was able to test the input by providing random input during testing and checking it:

 //imports... describe('LoginComponent (inline template)', () => { let comp: LoginComponent; let fixture: ComponentFixture<TmLoginComponent>; let userEmail: HTMLInputElement; let userPassword: HTMLInputElement; let loginBtn: HTMLElement; let title: HTMLElement; beforeEach(() => { TestBed.configureTestingModule({ declarations: [ LoginComponent ], // declare the test component imports: [ MaterialModule.forRoot(), FormsModule, RouterTestingModule.withRoutes( [{path: 'login', component: LoginComponent}, ]) ], providers: [{provide: UserAuthenticationService, useValue: uaServiceStub }, CookieService], }); fixture = TestBed.createComponent(LoginComponent); comp = fixture.componentInstance; //LoginComponent test instance // query by CSS element selector userEmail = fixture.debugElement.query(By.css('.userEmail')).nativeElement; userPassword = fixture.debugElement.query(By.css('.userPassword')).nativeElement; loginBtn = fixture.debugElement.query(By.css('.loginButton')).nativeElement; //tests //this test is successful it('should check initial input', () => { fixture.detectChanges(); expect(userEmail.value).toBe('') }); //this test is successful it('should check later input', async(() => { fixture.detectChanges(); fixture.whenStable().then(() => { userEmail.value = 'someValue'; userEmail.dispatchEvent(new Event('change')); expect(userEmail.value).toBe('someValue'); }); })); //EDITED: NEW TEST it('should check loginBtn is disabled initially', () => { fixture.detectChanges(); loginBtn = fixture.debugElement.query(By.css('.loginButton')).nativeElement; fixture.whenStable().then(() => { expect(loginBtn.disabled).toBe(true) }) }); //this test fails. "Expected true to be false" it('should check loginBtn is enabled after inputs check out', async(() => { fixture.detectChanges(); fixture.whenStable().then(() => { userEmail.value = ' [e-mail] ';//valid userEmail.dispatchEvent(new Event('change')); userPassword.value = 'asdf';//vaild userPassword.dispatchEvent(new Event('change')); fixture.detectChanges(); expect(loginBtn.disabled).toBe(false) }) })); }); 

I do not understand why the test fails. Can anyone help?

Answer 1

If you look at the DefaultValueAccessor source code:

 host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'}, 

https://github.com/angular/angular/blob/2.4.2/modules/%40angular/forms/src/directives/default_value_accessor.ts#L36

You may notice that the main error is the wrong event name.

You should use input event instead of change

 it('should check loginBtn is enabled after inputs check out', async(() => { fixture.detectChanges(); fixture.whenStable().then(() => { userEmail.value = ' [e-mail] '; userEmail.dispatchEvent(new Event('input')); userPassword.value = 'asdf'; userPassword.dispatchEvent(new Event('input')); fixture.detectChanges(); expect(loginBtn.disabled).toBe(false) }); })); 

Plunger example