Angular 指令 ViewContainerRef 测试模拟 [英] Angular Directive ViewContainerRef Test Mock

问题描述

给定一个用于 动态组件加载 的指令和 ViewContainerRef 注入:

Given a directive used for Dynamic Component Loading with ViewContainerRef injected:

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

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

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

How would you inject an instance or mock of ViewContainerRef in a unit test:

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

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

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

This most basic test fails due to the following error:

未提供viewContainerRef"的参数.

An argument for 'viewContainerRef' was not provided.

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

The testing guide does not cover this nor does there appear to be any testing module specifically for creating an instance of ViewContainerRef.

使用 TestBed.createComponent 创建存根 @Component 并将夹具或组件实例作为 ViewContainerRef 传递是不是很简单?

Is this is simple as creating a stub @Component with TestBed.createComponent and passing either the fixture or component instance as 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 或还有什么?

If that is the case, what should be passed as ViewContainerRef, the fixture.debugElement.componentInstance or fixture.debugElement.nativeElement or something else?

谢谢！

推荐答案

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

ViewContainerRef is an abstract class that is imported from @angular/core. Because it is an abstract class, it cannot be directly instantiated. However, in your test class, you can simply create a new class which extends the ViewContainerRef, and implements all of the required methods. Then, you can simply instantiate a new instance of the TestViewContainerRef and pass it into your FooDirective constructor in your test/spec. As such:

// 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.当我创建类存根 class TestViewContainerRef extends ViewContainerRef { } 时，Code 为我提供了一个非常有用的代码提示来实现所有抽象方法.我用它来自动生成上面的代码.其他 IDE 可能会提供类似的功能来帮助流程更顺畅.您可以在此处复制/粘贴代码以在您的测试/规范类中使用.但是，Angular 可能会随时选择更改 ViewContainerRef 抽象类的接口，因此如果您确实复制了上面的代码，请注意这样做有风险.

Hint: I am using VS Code on a Mac. When I create the class stub class TestViewContainerRef extends ViewContainerRef { }, Code gives me a very helpful code hint to implement all abstract methods. I used that to automatically generate the code above. Other IDEs may offer similar functionality to help the process go smoother. You may be able to copy/paste the code here to use in your test/spec class. However, Angular may choose to change the interface for the ViewContainerRef abstract class at any time, so if you do copy this code above, be aware that you do so at your own peril.

这是我如何使用它来让我的 Angular 测试通过的示例:

Here's an example of how I used it to get my Angular tests to pass:

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.

Disclaimer: As far as actually writing tests against this TestViewContainerRef, well...I leave that to all of you. But this at least satisfies ng test.

干杯！

这篇关于Angular 指令 ViewContainerRef 测试模拟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！