Angular 指令 ViewContainerRef 测试模拟

Question

给定用于 Dynamic Component Loading 的指令与 ViewContainerRef注入(inject):

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[fooHost]'
})
export class FooDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}
}

您将如何注入(inject) ViewContainerRef 的实例或模拟在单元测试中:

import { FooDirective } from './foo.directive';

describe('FooDirective', () => {
  it('should create an instance', () => {
    const directive = new FooDirective();
    expect(directive).toBeTruthy();
  });
});

由于以下错误，这个最基本的测试失败:

An argument for 'viewContainerRef' was not provided.

testing guide没有涵盖这一点，似乎也没有任何测试模块专门用于创建 ViewContainerRef 的实例。 .

这是否像创建 stub 一样简单 @Component与 TestBed.createComponent并将夹具或组件实例作为 ViewContainerRef 传递?

import { FooDirective } from './foo.directive';
import { ViewContainerRef, Component } from '@angular/core';
import { TestBed, async } from '@angular/core/testing';

@Component({ selector: 'app-stub', template: '' })
class StubComponent {}

describe('LightboxDirective', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({ declarations: [StubComponent] }).compileComponents();
  }));

  it('should create an instance', () => {
    const fixture = TestBed.createComponent(StubComponent);
    const component = fixture.debugElement.componentInstance;

    const directive = new FooDirective(component);
    expect(directive).toBeTruthy();
  });
});

如果是这样，应该将什么传递为 ViewContainerRef , fixture.debugElement.componentInstance或 fixture.debugElement.nativeElement或者是其他东西？

谢谢!

Answer 1

ViewContainerRef是从 @angular/core 导入的抽象类.因为是抽象类，所以不能直接实例化。但是，在您的测试类中，您可以简单地创建一个新类 extends ViewContainerRef，并实现所有必需的方法。然后，您可以简单地实例化 TestViewContainerRef 的新实例，并将其传递给您的测试/规范中的 FooDirective 构造函数。像这样:

// create the test class
class TestViewContainerRef extends ViewContainerRef {
  get element(): import("@angular/core").ElementRef<any> {
    throw new Error("Method not implemented.");
  }
  get injector(): import("@angular/core").Injector {
    throw new Error("Method not implemented.");
  }
  get parentInjector(): import("@angular/core").Injector {
    throw new Error("Method not implemented.");
  }
  clear(): void {
    throw new Error("Method not implemented.");
  }
  get(index: number): import("@angular/core").ViewRef {
    throw new Error("Method not implemented.");
  }
  get length(): number {
    throw new Error("Method not implemented.");
  }
  createEmbeddedView<C>(templateRef: import("@angular/core").TemplateRef<C>, context?: C, index?: number): import("@angular/core").EmbeddedViewRef<C> {
    throw new Error("Method not implemented.");
  }
  createComponent<C>(componentFactory: import("@angular/core").ComponentFactory<C>, index?: number, injector?: import("@angular/core").Injector, projectableNodes?: any[][], ngModule?: import("@angular/core").NgModuleRef<any>): import("@angular/core").ComponentRef<C> {
    throw new Error("Method not implemented.");
  }
  insert(viewRef: import("@angular/core").ViewRef, index?: number): import("@angular/core").ViewRef {
    throw new Error("Method not implemented.");
  }
  move(viewRef: import("@angular/core").ViewRef, currentIndex: number): import("@angular/core").ViewRef {
    throw new Error("Method not implemented.");
  }
  indexOf(viewRef: import("@angular/core").ViewRef): number {
    throw new Error("Method not implemented.");
  }
  remove(index?: number): void {
    throw new Error("Method not implemented.");
  }
  detach(index?: number): import("@angular/core").ViewRef {
    throw new Error("Method not implemented.");
  }

}

提示:我在 Mac 上使用 VS Code。当我创建类 stub class TestViewContainerRef extends ViewContainerRef { } , 代码给了我一个非常有用的代码提示来实现所有的抽象方法。我用它来自动生成上面的代码。其他 IDE 可能会提供类似的功能来帮助流程更顺畅。您可以在此处复制/粘贴代码以在您的测试/规范类中使用。但是，Angular 可能会随时选择更改 ViewContainerRef 抽象类的接口(interface)，因此如果您确实复制了上面的代码，请注意这样做有风险。
这是我如何使用它来让我的 Angular 测试通过的示例:

import { ModalHostDirective } from './modal-host.directive';
import { ViewContainerRef } from '@angular/core';

class TestViewContainerRef extends ViewContainerRef {
  get element(): import("@angular/core").ElementRef<any> {
    throw new Error("Method not implemented.");
  }
  get injector(): import("@angular/core").Injector {
    throw new Error("Method not implemented.");
  }
  get parentInjector(): import("@angular/core").Injector {
    throw new Error("Method not implemented.");
  }
  clear(): void {
    throw new Error("Method not implemented.");
  }
  get(index: number): import("@angular/core").ViewRef {
    throw new Error("Method not implemented.");
  }
  get length(): number {
    throw new Error("Method not implemented.");
  }
  createEmbeddedView<C>(templateRef: import("@angular/core").TemplateRef<C>, context?: C, index?: number): import("@angular/core").EmbeddedViewRef<C> {
    throw new Error("Method not implemented.");
  }
  createComponent<C>(componentFactory: import("@angular/core").ComponentFactory<C>, index?: number, injector?: import("@angular/core").Injector, projectableNodes?: any[][], ngModule?: import("@angular/core").NgModuleRef<any>): import("@angular/core").ComponentRef<C> {
    throw new Error("Method not implemented.");
  }
  insert(viewRef: import("@angular/core").ViewRef, index?: number): import("@angular/core").ViewRef {
    throw new Error("Method not implemented.");
  }
  move(viewRef: import("@angular/core").ViewRef, currentIndex: number): import("@angular/core").ViewRef {
    throw new Error("Method not implemented.");
  }
  indexOf(viewRef: import("@angular/core").ViewRef): number {
    throw new Error("Method not implemented.");
  }
  remove(index?: number): void {
    throw new Error("Method not implemented.");
  }
  detach(index?: number): import("@angular/core").ViewRef {
    throw new Error("Method not implemented.");
  }

}

describe('ModalHostDirective', () => {
  it('should create an instance', () => {
    const directive = new ModalHostDirective(new TestViewContainerRef());
    expect(directive).toBeTruthy();
  });
});

免责声明:就实际编写针对此 TestViewContainerRef 的测试而言，嗯……我把它留给你们所有人。但这至少满足 ng test .
干杯!