[Angular 8 Unit Testing] Testing a component

Setting up a Presentational Component:

import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
import {Course} from '../model/course';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
import {filter, tap} from 'rxjs/operators';

@Component({
  selector: 'courses-card-list',
  templateUrl: './courses-card-list.component.html',
  styleUrls: ['./courses-card-list.component.css']
})
export class CoursesCardListComponent implements OnInit {

  @Input()
  courses: Course[];

  @Output()
  courseEdited = new EventEmitter();

  constructor(private dialog: MatDialog) {

  }

  ngOnInit() {

  }

  editCourse(course: Course) {

    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    dialogConfig.data = course;

    const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);


    dialogRef.afterClosed()
      .pipe(
        filter(val => !!val),
        tap(() => this.courseEdited.emit())
      )
      .subscribe();

  }

}

　

Setting up test in BeforeEach:

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { DebugElement } from "@angular/core";

  let fixture: ComponentFixture,
    // For the Input bindings
    component: CoursesCardListComponent,
    // For query the DOM
    el: DebugElement;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [CoursesModule]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(CoursesCardListComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement;
      });
  }));

Because 'compileComponents' is an async operation, so we have to add 'async' function from Angualr Testing lib.

 

Setup component bindings and detectChanges:

  it("should display the course list", () => {
    // setup Input binding
    component.courses = setupCourses();
    // detech cSetuphanges
    fixture.detectChanges();
    const cards = el.queryAll(By.css(".course-card"));
    expect(cards).toBeTruthy();
    expect(cards.length).toBe(12);
  });

 

-- Full test code --

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { CoursesCardListComponent } from "./courses-card-list.component";
import { CoursesModule } from "../courses.module";
import { DebugElement } from "@angular/core";
import { setupCourses } from "../common/setup-test-data";
import { By } from "@angular/platform-browser";

fdescribe("CoursesCardListComponent", () => {
  let fixture: ComponentFixture,
    // For the Input bindings
    component: CoursesCardListComponent,
    // For query the DOM
    el: DebugElement;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [CoursesModule]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(CoursesCardListComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement;
      });
  }));

  it("should create the component", () => {
    expect(component).toBeTruthy();
  });

  it("should display the course list", () => {
    // setup Input binding
    component.courses = setupCourses();
    // detech cSetuphanges
    fixture.detectChanges();
    const cards = el.queryAll(By.css(".course-card"));
    expect(cards).toBeTruthy("Cannot load cards");
    expect(cards.length).toBe(12, "Unexpected cards number");
  });

  it("should display the first course", () => {
    // setup Input binding
    component.courses = setupCourses();
    // detech cSetuphanges
    fixture.detectChanges();
    const course = component.courses[0];
    const firstCard = el.query(By.css(".course-card:first-child"));
    expect(firstCard).toBeTruthy("Could not find course card");
    const title = firstCard.query(By.css("mat-card-title"));
    const img = firstCard.query(By.css("img"));
    expect(title.nativeElement.textContent).toBe(course.titles.description);
    expect(img.nativeElement.src).toBe(course.iconUrl);
  });
});