使用Angular在单元测试覆盖率中包含组件模板

Question

使用Angular 4,可以测试Component的模板,例如检查单击按钮是否触发了预期的方法和类似的东西.

但是如何将模板包含在测试范围内？默认情况下它们不是(使用Karma + Jasmine + Istanbul的Angular CLI测试).

Answer 1

在我看来，你可以只测试点击时调用的函数，因为你不需要验证如果点击 Angular 是否会调用这个函数。

但如果你想以任何方式测试它，你可以这样做

import { TestBed, async, ComponentFixture } from '@angular/core/testing';

describe('', () => {
  let fixture: ComponentFixture<TestComponent>;
  let component: TestComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ],
      declarations: [ TestComponent ],
      providers: [  ]
    }).compileComponents().then(() => {
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
    });
  }));
});

it('should click on button', async(() => {
  spyOn(component, 'onEditButtonClick');

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click(); 
// here you can test you code or just check that your function have been called like in the example bellow 

  fixture.whenStable().then(() => {
    expect(component.onEditButtonClick).toHaveBeenCalled();
  });
}));