Angular 2 Components Testing a Component
Example
hero.component.html
<form (ngSubmit)="submit($event)" [formGroup]="form" novalidate>
<input type="text" formControlName="name" />
<button type="submit">Show hero name</button>
</form>
hero.component.ts
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Component } from '@angular/core';
@Component({
selector: 'app-hero',
templateUrl: 'hero.component.html',
})
export class HeroComponent {
public form = new FormGroup({
name: new FormControl('', Validators.required),
});
submit(event) {
console.log(event);
console.log(this.form.controls.name.value);
}
}
hero.component.spec.ts
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { HeroComponent } from './hero.component';
import { ReactiveFormsModule } from '@angular/forms';
describe('HeroComponent', () => {
let component: HeroComponent;
let fixture: ComponentFixture<HeroComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [HeroComponent],
imports: [ReactiveFormsModule],
}).compileComponents();
fixture = TestBed.createComponent(HeroComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should be created', () => {
expect(component).toBeTruthy();
});
it('should log hero name in the console when user submit form', async(() => {
const heroName = 'Saitama';
const element = <HTMLFormElement>fixture.debugElement.nativeElement.querySelector('form');
spyOn(console, 'log').and.callThrough();
component.form.controls['name'].setValue(heroName);
element.querySelector('button').click();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(console.log).toHaveBeenCalledWith(heroName);
});
}));
it('should validate name field as required', () => {
component.form.controls['name'].setValue('');
expect(component.form.invalid).toBeTruthy();
});
});
