[Angular 8 Unit Testing] Testing a dump component

Setting up a Presentational Component:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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<CoursesCardListComponent>,
    // 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<CoursesCardListComponent>,
    // 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);
  });
});