Angular2 2.0.1 组件单元测试与核心注入器答案

【问题标题】：Angular2 2.0.1 component unit test with core InjectorAngular2 2.0.1 组件单元测试与核心注入器
【发布时间】：2017-03-18 10:53:17
【问题描述】：

我正在使用 ComponentFactoryResolver 动态创建组件，并使用 ReflectiveInjector 动态地传递它们的输入。

这个好像

@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
let inputProviders = [{
    provide: 'injectedInput',
    useValue: inputValue
}];
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.container.parentInjector);
let factory = componentInfo.factory.resolveComponentFactory(componentInfo.component);
let component = factory.create(injector);
this.container.insert(component.hostView);

那么动态创建的组件是这样的

import {Component, Injector} from '@angular/core';  
@Component({
    selector: 'mycomponent'
})
export class MyComponent {
    private id: string;

    constructor(private injector: Injector) {
        this.id = injector.get('injectedInput');
    }
}

我正在尝试为使用核心 Injector 模块的组件编写单元测试。我收到以下错误：

错误：没有注入输入的提供者！

我的规范文件如下所示：

import { MyComponent } from 'here';
describe('MyComponent', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                MyComponent
            ]
        });
    });

    let component: MyComponent;

    beforeEach(inject([RigTransferSpeedPeriodComponent], _component => {
        component = _component;
    }));

    {...my tests...}
});

我尝试了很多东西并到处搜索，但找不到以前这样做过的人。

有什么想法吗？

非常感谢！

菲利普

【问题讨论】：

不明白你为什么要做这一切......但对我来说，看起来你的 parentInjector 创建了组件。所以组件本身也使用了 parentInjector，而 parentInjector 不知道注入的Input。也许你应该描述你的意图，也许还有另一种解决方法，而不是重新连接整个注入逻辑

标签： unit-testing angular

【解决方案1】：

用 plnkr 做了一些实验，以你的问题为例 ;-)

@Component({
  selector: 'my-component',
  template: ''
})
export class TestComponent {
  constructor(
    private injector : Injector
  ) {
    injector.get('value1');
  }
}

describe('a test', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent ],
      providers: [ TestComponent ]
    });
  });

  beforeEach(() => {
    this.injector1 = ReflectiveInjector.resolveAndCreate([
      {provide: 'value1', useValue: 5}
    ]);

  });

  it('inject value', () => {
    expect( this.injector1.get('value1') ).toBe(5);
  });

  describe('create component', () => {
    it('with untouched injector should throw error', () => {
      expect( () => TestBed.createComponent(TestComponent) ).toThrowError();
    })

    it('with manipulated injector', () => {
      let componentInjector = TestBed.get(Injector);
      componentInjector.parent = this.injector1;
      expect( TestBed.createComponent(TestComponent) ).toBeTruthy();
    })

    it('with injectors in the wrong order', () => {
      let componentInjector = TestBed.get(Injector);
      let combinedInjector = ReflectiveInjector.fromResolvedProviders(this.injector1, componentInjector);
      expect( () => combinedInjector.get(TestComponent) ).toThrowError();
    })
  });
});

http://plnkr.co/edit/PlUUtTOZq8bPLQ5WdAbE?p=preview

证明是关于喷油器的顺序

【讨论】：