[Angular 8 Unit Testing] Testing a dump component
Angular Component Testing dump unit
2023-09-14 09:00:48 时间
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] Standalone component - routes top level provide share for all child routes
- [Angular 8 Unit Testing] Testing a dump component
- [Angular] Refactor Angular Component State Logic into Directives
- [Angular & Unit Testing] Testing Component with Store
- [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)
- [Angular] Test component template
- [Angular 2] Building a Toggle Button Component
- [ngx-formly] Dynamically disable a Form field with Angular Formly
- [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)
- [Angular Unit Testing] Debug unit testing -- component rendering
- [Angular Unit Testing] Testing Component methods
- [Angular] Create a simple *ngFor
- [Angular 2] Exposing component properties to the template
- [Angular 2] ng-class and Encapsulated Component Styles
- 深入学习SAP UI5框架代码系列之八:谈谈 SAP UI5 的视图控件 ID,以及 SAP UI5 视图和 Angular 视图的异同
- 使用 RxJS timeout 操作符给 Angular SSR 服务器端渲染模式下的 HTTP 请求添加超时机制
- SAP Spartacus 服务器端 nodejs 应用里渲染 Angular Component 的一个例子
- 使用 RxJs 实现一个支持 infinite scroll 的 Angular Component
- Angular Component模板里的元素,运行时如何被生成并插入到DOM tree中
- 关于 Angular Component ngOnDestroy 钩子函数的调用时机
- Angular jasmine单元测试框架TestBed.inject的执行原理
- Angular应用只执行指定单元测试的小技巧
- 2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程
- angular基本知识学习笔记 - Component的基本概念