Question

我MainComponent使用ChildComponentA作为@ViewChild。 MainComponent正在调用ChildComponentA上的方法。

我想编写一个模拟ChildComponentA的单元测试用例。如何使用TestBed（在Angular 2 RC5中）执行此操作？

在我以前使用overrideDirective(MainComponentName, ChildComponentA, MockChildComponentA);之前使用TestBed还有相同的内容吗？

我尝试使用

TestBed.overrideComponent(ChildComponentA,{
        set: {
          template: '<div></div>'
        }
      });

只是设置模板，但我也想模拟组件中的方法。

Answer 1

我认为在这种情况下，您可以尝试使用模拟组件替换子组件。只需使用相同的选择器创建一个模拟组件，并使用TestBed删除真实子组件的声明，并将声明添加到模拟组件。

@Component({
  selector: 'child',
  template: '<div></div>'
})
class MockComponent {

}

在测试中，请使用模拟组件：

    TestBed.configureTestingModule({
        imports: [MyModule],
        declarations: [ParentComponent, MockComponent]
    });

    TestBed.overrideModule(MyModule, {
        remove: {
            declarations: [ParentComponent, ChildComponent],
            exports: [ParentComponent, ChildComponent]
        }
    });

此处有更多详情：https://github.com/angular/angular/issues/10689。确保重新声明ParentComponent，否则它不起作用（不确定原因）。

如果使用@ViewChild获取对子组件的引用，则需要将其修改为不使用组件的类型，而是使用id。使用@ViewChild（'child'）代替@ViewChild（ChildComponent）。请参阅此处的第二个示例：http://learnangular2.com/viewChild/

Answer 2

请注意，如果ChildComponent是在TestModule本身中声明的，则无需覆盖声明原始模块的模块。

因此，如果您的TestBed声明如下所示：

TestBed.configureTestingModule({
    declarations: [
        ParentComponent,
        ChildComponent         // This is what you'd like to mock
    ]
});

然后，要覆盖ChildComponent，您需要做的是：

@Component({
    selector: 'child',
    template: '<div></div>'
})
class MockChildComponent {
}

TestBed.configureTestingModule({
    declarations: [
        ParentComponent,
        MockChildComponent      // Notice the original is replaced by the mock
    ]
});

只要ChildComponent和MockChildComponent具有相同的选择器，该选择器就应该起作用。

为此问题提供的另一个答案适用于将ChildComponent从另一个模块带入测试床的情况。

注意

如果您的ChildComponent有任何@Input或@Output，则也将它们包括在您的MockChildComponent中。

OverrideComponent与TestBed

2 个答案:

注意