如何對 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';