";有角度的";测试组件的方法

The "Angular" way of testing a component

本文关键字：quot 组件 方法 测试      更新时间：2023-09-26

在angular 1中，如果我编写一个组件，我会确保：

  • 依赖关系，例如服务，正在被嘲笑
  • 单元测试是为组件内的方法编写的
  • 组件正在调用服务以检索数据expect(service.method).toHaveBeenCalled()
  • 组件正在更新给定更新模型的视图

我一直在做一些关于Angular 2组件测试的研究，对于我能找到的所有文章，测试似乎是按照以下方式进行的；

  • 创建一个返回固定结果的服务模拟(例如："Test Quote"(
  • 期望该视图包含来自模拟服务的结果(例如，某个地方有一个div具有<div>Test Quote</div>(

以下是一些此类文章的例子(基本上是谷歌上"Angular 2 Component Testing"的顶级结果(

  • http://chariotsolutions.com/blog/post/testing-angular-2-components-unit-tests-testcomponentbuilder/
  • http://blog.rangle.io/testing-angular-2-applications/
  • http://www.itsmycodeblog.com/angular2-unit-testing-a-component/
  • https://developers.livechatinc.com/blog/testing-angular-2-apps-dependency-injection-and-components/

由于NG2在其测试框架@angular/core/testing中没有提供间谍，因此建议完全避免粗体的步骤？还是我们应该把茉莉花包括在内，只为了接触间谍？

如果您特别希望测试组件渲染，那么您可以使用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);
        });
      }));    
}));

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

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

当您想模拟组件中的服务调用时，将jasmine间谍与and.callThrough和and.returnValue等方法一起使用非常有用。此外，请看一下angular团队成员julie raplh的这篇回购文章。

相关文章：