角度指令ViewContainerRef测试模型 [英] Angular Directive ViewContainerRef Test Mock

问题描述

给出用于动态组件加载的指令，其中

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导入的抽象类.因为它是一个抽象类，所以不能直接实例化它.但是，在测试类中，您可以简单地创建一个新类，该类extends 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 { }时，代码为我提供了一个非常有用的代码提示，以实现所有抽象方法.我用它来自动生成上面的代码.其他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.

干杯！

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