Isolated tests

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="Title">
  </md-input-container>

  <md-input-container>
    <input md-input formControlName="speaker" placeholder...