如何对 Angular 中的按钮单击事件进行单元测试？

Question

我正在尝试测试按钮单击事件。官方 Angular 手册说有两种方法可以做到这一点。

1.

it('should raise selected event when clicked (triggerEventHandler)', () => {
  let selectedHero: Hero;
  const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
  comp.selected.subscribe((hero: Hero) => selectedHero = hero);
  heroDe.triggerEventHandler('click', null);
  expect(selectedHero).toBe(expectedHero);
});

it('should raise selected event when clicked (element.click)', () => {
  let selectedHero: Hero;
  const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
  comp.selected.subscribe((hero: Hero) => selectedHero = hero);
  heroEl.click();
  expect(selectedHero).toBe(expectedHero);
});

第一种方法对我很有效。但是当我尝试第二个选项时，测试运行没有错误，但是 Karma 在无限循环中开始了运行测试。

这是我对这两种方式的实现。

it('test1', () => {
  fixture.detectChanges();
  let treeNodeElement = fixture.debugElement.query(By.css('#buttonSend'));
  treeNodeElement.triggerEventHandler('click', null);
  expect(component.tabService.tabs.length).toBe(1);
  expect(component.tabService.tabs[0].title).toBe('Test1');
});

it('test2', () => {
  fixture.detectChanges();
  const treeNodeElement: HTMLElement = fixture.nativeElement.querySelector('#buttonSend');
  treeNodeElement.click();
  expect(component.tabService.tabs.length).toBe(1);
  expect(component.tabService.tabs[0].title).toBe('Test1');
});

请问第二个选项哪里出错了？

Answer 1

我的解决方案是在 beforeEach() 中导入 FormsModule 和 ReactiveFormsModule。问题是单击按钮（这是一个提交按钮）会导致刷新页面的浏览器行为。即使 FormsModule 和 ReactiveFormsModule 被导入到创建表单的组件中，它们也必须被导入到您所在的 .spec 文件中运行测试用例

beforeEach(async () => {
 await TestBed.configureTestingModule({
  imports: [
    RouterTestingModule,
    RouterModule.forRoot([]),
    NgbModule,
    FormsModule,  <----
    ReactiveFormsModule,  <----
  ],
  declarations: [  
   ...

两个模块都应该从@angular/forms

导入

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

如何对 Angular 中的按钮单击事件进行单元测试？

How to unit test a button click event in Angular?

unit-testing

karma-jasmine

angular