Typescript Angular中的单元测试点击事件

我的目标是判断用户单击编辑按钮时是否调用了"onEditButtonClick"，而不仅仅是判断控制台.正在打印日志(log).

您需要首先使用Angular TestBed设置测试.这样你就可以抓住按钮并点击它.您将要做的是配置一个模块，就像配置@NgModule一样，只用于测试环境

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;
    });
  }));
});

然后你需要监视onEditButtonClick方法，点击按钮，并判断该方法是否被调用

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

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();

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

这里我们需要运行async测试，因为按钮click包含异步事件处理，并且需要通过调用fixture.whenStable()等待事件处理

使现代化

现在人们更倾向于使用fakeAsync/tick连击，而不是async/whenStable连击.如果进行了XHR调用，则应使用后者，因为fakeAsync不支持它.因此，与其重构上面的代码，不如

it('should', fakeAsync(() => {
  spyOn(component, 'onEditButtonClick');

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();
  tick();
  expect(component.onEditButtonClick).toHaveBeenCalled();

}));

别忘了输入fakeAsync和tick.

另见:

• Testing documentation
• What is the difference between fakeAsync and async in Angular testing?