[Angular Unit Testing] Testing component with content projection
Angular with Component content Testing unit
2023-09-14 08:59:14 时间
Component to be tested:
<ng-template #defaultPlaceholder> Loading... </ng-template> <div class="loading-container" *ngIf="loading$ | async"> <ng-container *ngTemplateOutlet="outlet ? outlet : defaultPlaceholder" ></ng-container> </div>
import { Component, OnInit, Input, TemplateRef, AfterViewInit } from '@angular/core' import {LoadingService} from './loading.service' import {Observable} from 'rxjs' @Component({ selector: 'loading', templateUrl: './loading.component.html', styleUrls: ['./loading.component.scss'] }) export class LoadingComponent implements OnInit, AfterViewInit { loading$: Observable<boolean> @Input() outlet: TemplateRef<any> ngAfterViewInit() {} constructor(private loadingService: LoadingService) {} ngOnInit(): void { this.loading$ = this.loadingService.loading$ } get loadingContext() { return { type: 'placeholder' } } }
Test code:
import {async, ComponentFixture, TestBed} from '@angular/core/testing' import {LoadingComponent} from './loading.component' import {LoadingService} from './loading.service' import {ViewChild, Component, DebugElement} from '@angular/core' import {of} from 'rxjs' import {By} from '@angular/platform-browser' @Component({ template: ` <ng-template #loadingTmp><p>loading...</p></ng-template> <loading [outlet]="loadingTmp"></loading> ` }) class WrapperComponent { @ViewChild(LoadingComponent) loadingComponentRef: LoadingComponent } let loadingServiceSpy = { loading$: of(true), get config() { return {showContent: false} } } describe('LoadingComponent', () => { let component: LoadingComponent let wrapperComponent: WrapperComponent let fixture: ComponentFixture<WrapperComponent> let el: DebugElement beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [WrapperComponent, LoadingComponent], providers: [{provide: LoadingService, useValue: loadingServiceSpy}] }).compileComponents() })) beforeEach(() => { fixture = TestBed.createComponent(WrapperComponent) wrapperComponent = fixture.debugElement.componentInstance fixture.detectChanges() component = wrapperComponent.loadingComponentRef el = fixture.debugElement fixture.detectChanges() }) it('should create', () => { expect(wrapperComponent).toBeDefined() expect(component).toBeDefined() }) it('should use has p tag with text loading...', () => { const p = el.queryAll(By.css('p')) expect(p.length).toBe(1) expect(p[0].nativeElement.textContent).toBe('loading...') }) })
Idea is to create a WrapperComponent to include our component. Then we are able to project content which need to be passed into the testing component.
相关文章
- 一个 Angular 开发人员对腾讯 Cloud Studio 使用后的体验报告
- angular面试问题_kafka面试题
- Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- Angular HTTPClient API 在 SAP 电商云中的使用
- Angular面试题_session面试题
- angular基础面试题_java web面试题
- vue相比jquery_angular和vue哪个厉害
- orbital angular momentum_omnidirectional
- 使用 Angular Universal 进行服务器端渲染避免 window is not defined 的错误消息
- Angular Universal 应用避免 SSR hang 的一些指导方针
- 【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild
- Angular 应用里 ng-package.json 文件的作用是什么?
- 备受 Vue、Angular 和 React 青睐的 Signals 演进史
- 语句Oracle中简洁的With语句(oracle 中with)
- 从Oracle中挖掘洞见坚实的With表(oracle with表)
- angular.element方法汇总
- angular中使用路由和$location切换视图