如何间谍在Angular中的子组件？

在Angular教程中，他们有一个HeroesComponent的示例，其中包含子节点HeroesListComponent。如何间谍在Angular中的子组件？

HeroesListComponent使用HeroesService至getHeroes()。

为spyOngetHeroes()内heroes-list.component.spec.ts，我们可以做

spyOn(fixture.debugElement.componentInstance.heroesService, 'getHeroes').and.returnValue(Promise.resolve([]))

我的问题是：如果我是HeroesComponent规范的文件里 - heroes.component.spec.ts我可以做这样的事情spyOn孩子HeroesListComponentgetHeroes()：

spyOn(fixture.debugElement.componentInstance.heroesListComponent.heroesService, 'getHeroes').and.returnValue(Promise.resolve([]))

很明显，这没有奏效，所以我问是否有人可以帮我解决问题。

我想这样做，因为我想测试在我打开HeroesComponent时是否正确加载了<hero-list>。这看起来可能是重复的，因为我已经进行了测试以确保HeroesListComponent有效，但我认为这仍然是一个重要的测试，因为我确实想确保我的HeroesComponent正确加载并且所有子组件都是。

我也试过嘲笑HeroesComponent里面的整个HeroesService，而不是使用spyOn，但是我不能使这个语法工作。我不知道如何告诉HeroesListComponent当我在里面时使用模拟物体heroes.component.spec.ts

谢谢！

来源

2017-07-27 vinhboy

在单元测试中，所有测试过的单元应该被嘲弄或残留。原<hero-list>应该用模拟替代：

@Component({ selector: 'hero-list' }) 
class MockedHeroesListComponent {} 

TestBed.configureTestingModule({ 
    declarations: [ 
    HeroesComponent, 
    MockedHeroesListComponent 
    ] 
});

HeroesComponent测试不应该测试 heroesListComponent.heroesService。所有应该断言的是编译<hero-list>。 heroesListComponent.heroesService应在HeroesListComponent测试与真正HeroesListComponent测试。

来源

2017-07-27 16:24:11 estus

如何间谍在Angular中的子组件？

回答

相关问题