Question

在角度1中，如果我写了一个组件，我会确保：

服务等依赖关系被嘲笑。
为组件内的方法编写单元测试。
该组件正在调用服务以检索数据 models.Collection.findAll({ where: { customer: customerParam, '$items.itemId$': itemParam }, include: [{ model: models.Item, as: 'items' }] })
组件正在更新给定更新模型的视图。

我一直在研究Angular 2组件测试，对于我能找到的所有文章，似乎测试正在进行如下;

创建一个返回固定结果的服务模拟（例如：'Test Quote'）
期望视图包含来自模拟服务的结果（例如，某个地方有一个expect(service.method).toHaveBeenCalled()的div）。

以下是此类文章的一些示例（基本上是谷歌的'Angular 2组件测试'的最佳结果）

由于NG2在其测试框架<div>Test Quote</div>中没有提供间谍，因此建议完全避免使用粗体步骤？或者我们是否应该将茉莉花包括在内以获得间谍？

Answer 1

如果您特别想要测试组件呈现，那么您可以使用TestComponentBuilder，如您问题中提到的博客中所述。

    describe('MyComponent', () => {

      it('should render list', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
        return tcb.createAsync(MyComponent).then((componentFixture: ComponentFixture) => {
          const element = componentFixture.nativeElement;
         //... get the element you want to check 
          componentFixture.detectChanges();
          expect(element).toHaveText('test div');
          expect(element.querySelectorAll('div').length).toBe(1);
        });
      }));    
}));

如果在组件中调用服务，那么您希望inject或beforeEachProviders()方法中的beforeEach()：

beforeEach(() => {
    addProviders([
      provide(LoginService, { useClass: MockLoginService }),
      UserService
    ]);
  });

当您想在组件中模拟服务调用时，使用jasmine间谍以及and.callThrough和and.returnValue等方法非常有用。另外，请看角度团队成员julie raplh的this回购。

测试组件的“Angular”方式

1 个答案: