It is often useful to test complex components without rendering them. To see how it can be done, let's write a test for the following component:
@Component({
selector: 'filters-cmp',
templateUrl: './filters.component.html',
styleUrls: ['./filters.component.css']
})
export class FiltersCmp {
@Output() change = new EventEmitter();
filters = new FormGroup({
speaker: new FormControl(),
title: new FormControl(),
highRating: new FormControl(false),
});
constructor(@Inject('createFiltersObject') createFilters: Function) {
this.filters.valueChanges.debounceTime(200).\
subscribe((value) => {
this.change.next(createFilters(value));
});
}
}
Following is the code for filters.component.html:
<div [formGroup]="filters">
<md-input-container>
<input md-input formControlName="title" placeholder="...