标签：ref for bug course cte orm exp extc temp
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<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);
});
});
[Angular 8 Unit Testing] Testing a component
标签：ref for bug course cte orm exp extc temp
原文地址：https://www.cnblogs.com/Answer1215/p/12308164.html
