Shallow testing

Testing component classes without rendering their templates works in certain scenarios, but not in all of them. Sometimes we can write a meaningful test only if we render a component's template. We can do that and still keep the test isolated. We just need to render the template without rendering the component's children. This is what is colloquially known as shallow testing.

Let's see this approach in action.

@Component({
  selector: 'talks-cmp',
  template: '<talk-cmp *ngFor="let t of talks" [talk]="t"></talk-cmp>'
})
export class TalksCmp {
  @Input() talks: Talk[];
}

This component simply renders a collection of TalkCmp.

Now let's look at its test.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement, NO_ERRORS_SCHEMA ...