[Angular Unit Testing] Testing component with content projection

瞬间恒 發表於 2020-3-25 19:29:00

[Angular Unit Testing] Testing component with content projection

Component to be tested:
<div class="cnblogs_code">
<pre><ng-template #defaultPlaceholder>
Loading...
</ng-template>

<div class="loading-container" *ngIf="loading$ | async">
<ng-container
 *ngTemplateOutlet="outlet ? outlet : defaultPlaceholder"
></ng-container>
</div></pre>
</div>
<div class="cnblogs_code">
<pre>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'
 }
}
}</pre>
</div>
 
Test code:
<div class="cnblogs_code">
<pre>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>loading...</ng-template>
 <loading ="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...')
})
})</pre>
</div>
 
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. 
来源：https://www.cnblogs.com/Answer1215/p/12568788.html

頁: [1]

琼殿技术论坛's Archiver

[Angular Unit Testing] Testing component with content projection