测试组件的“角度”方式

Question

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

• 诸如服务之类的依赖项正在被嘲笑。
• 单元测试是针对组件内的方法编写的。
• 该组件正在调用服务以检索数据 expect(service.method).toHaveBeenCalled()
• 给定更新的模型，组件将更新视图。

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

• 创建一个返回固定结果的服务模拟（例如：“测试报价”）
• 期望视图包含来自模拟服务的结果（例如，在某个地方有<div>Test Quote</div> ）。

这是此类文章的一些示例（基本上是Google上“ 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未提供任何间谍程序，因此建议完全避免使用粗体的步骤吗？ 还是我们应该包括茉莉花才能获得间谍？

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类的方法一起使用非常有用。 另外，看看这个回购的角度团队成员朱莉raplh。