Angular Jasmine预期的间谍onButtonClick已被调用

Question

我正在为Angular 6项目编写单元测试。 但是，我遇到了一个问题。 我想测试一个名为click函数的按钮，但是测试文件始终向我显示此错误。

以下是我的代码：

HTML：

<div>
 <button (click)="onButtonClick(1)"><button>
 <button (click)="onButtonClick(2)"><button>
 <button (click)="onButtonClick(3)"><button>
</div>

组件：

onButtonClick(key: number) {
  do something
}

规格

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

import { PanelButtonsComponent } from './panel-buttons.component';
import { By } from "@angular/platform-browser";

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

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [PanelButtonsComponent]
  })
    .compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(PanelButtonsComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});



it("should call onButtonClick ", fakeAsync(() => {
  const onClickMock = spyOn(component, 'onButtonClick');

 fixture.debugElement.query(By.css('button')).triggerEventHandler('click', null);
  expect(onClickMock).toHaveBeenCalled();
}));


});

测试结果：

预期的间谍onButtonClick已被调用。

有任何纠正建议吗？ 谢谢

更新资料

我参考了另一篇文章 ，并遵循以下代码：

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

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

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

测试用例也无法通过。

更新2：

在我的html中，将调用两种点击函数，因此会导致错误

<div>
 <button (click)="onButtonClick(1)"><button>
 <button (click)="onButtonClick(2)"><button>
 <button (click)="onButtonClick(3)"><button>
 <button (click)="onResetClick()"><button>
</div>

Answer 1

我认为这是我的问题的解决方案。

首先，单击按钮后会调用不同类型的功能。

<div>
 <button (click)="onButtonClick(1)"><button>
 <button (click)="onButtonClick(2)"><button>
 <button (click)="onButtonClick(3)"><button>
 <button (click)="onResetClick()"><button>

因此，测试将导致错误。

it("should call onButtonClick ", fakeAsync(() => {
  const onClickMock = spyOn(component, 'onButtonClick');

 fixture.debugElement.query(By.css('button')).triggerEventHandler('click', null);
  expect(onClickMock).toHaveBeenCalled();
}));

预期的间谍onButtonClick已被调用。

---

因此，通过测试的正确方法应如下所示：

将类别名称添加到HTML

<div>
 <button (click)="onButtonClick(1)" class="normalBtn"><button>
 <button (click)="onButtonClick(2)" class="normalBtn"><button>
 <button (click)="onButtonClick(3)" class="normalBtn"><button>
 <button (click)="onResetClick()" class="restBtn"><button>
</div>

然后，修改测试用例：

it('should call onButtonClick', fakeAsync(() => {
    fixture.detectChanges();
    spyOn(component, 'onButtonClick');
    let btn = fixture.debugElement.queryAll(By.css('.normalBtn'));
    for (let i = 0; i < btn.length; i++) {
      btn[i].triggerEventHandler('click', null);
    }

    tick(); // simulates the passage of time until all pending asynchronous activities finish
    fixture.detectChanges();
    expect(component.onButtonClick).toHaveBeenCalled();
  }));

  it("should call onResetClick ", fakeAsync(() => {
    fixture.detectChanges();
    spyOn(component, 'onResetClick');
    let btn = fixture.debugElement.query(By.css('.resetBtn'));
    btn.triggerEventHandler('click', null);
    tick(); // simulates the passage of time until all pending asynchronous activities finish
    fixture.detectChanges();
    expect(component.onResetClick).toHaveBeenCalled();
  }));