Angular 2单元测试组件与其他组件依赖关系

ela*_*ash 5 unit-testing angular2-testing angular

基本上我有一个看起来像这样的组件:

export class CmpB extends CmpA {
    variableA:any = {};
    @Input() config:any = {};
    constructor(private serviceA: serviceA,
        @Optional() private CmpC?: CmpC) {
        super();
    }
    ngOnInit() {
        if (this.CmpC) {
            super.doSomething(parameterA);
            //other stuff
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

所以我基本上得到了扩展CmpA的CmpB(根据配置改变了变量A)并且为了做某事它需要一个特定的父组件CmpC.......我需要为它编写一个实际验证CmpA突变的测试.

我的测试看起来像这样

describe('CmpB', () => {
    let mock: any = MockComponent({ selector: "app-element", template: "<CmpC><CmpB></CmpB></CmpC>" });
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [mock, CmpC, CmpB],
            providers: [
                ServiceA
            ]
        }).compileComponents();
    });

    it('CmpB component test', async(() => {
        const appMock = TestBed.createComponent(mock);
        appMock.detectChanges();
        const el = appMock.debugElement.nativeElement as HTMLElement;
        expect(el.tagName).toEqual("DIV");
    }));
}
Run Code Online (Sandbox Code Playgroud)

它的工作原理和覆盖范围都是贯穿整个事情的.但我需要的是手动设置配置输入并查看variableA如何变异; 我无法弄清楚怎么样.

mock组件源自以下代码

    import { Component } from '@angular/core';

export function MockComponent(options: Component): Component {
  let metadata: Component = {
    selector: options.selector,
    template: options.template || '',
    inputs: options.inputs,
    outputs: options.outputs
  };

  class Mock {}

  return Component(metadata)(Mock);
}
Run Code Online (Sandbox Code Playgroud)