zoukankan      html  css  js  c++  java
  • [Angular Unit Testing] Testing component with content projection

    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.

  • 相关阅读:
    jUnit4初探(1)
    关于冒泡排序与选择排序
    我对直接插入排序的一点理解
    Java中的Scanner类
    String数组与字符串类
    Redis知识点详解
    MySQL操作命令详解
    java中常见面试题整理
    Redis的安装部署
    zookeeper的伪集群部署步骤
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12568788.html
Copyright © 2011-2022 走看看