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

【问题标题】：Angular Jasmine Expected spy onButtonClick to have been calledAngular Jasmine 预期的间谍 onButtonClick 已被调用
【发布时间】：2019-02-05 16:38:20
【问题描述】：

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

以下是我的代码：

HTML：

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

comp.ts：

onButtonClick(key: number) {
  do something
}

spec.ts

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 已被调用。

有什么更正的建议吗？谢谢

更新

我已经推荐了另一个article，并按照代码：

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>

【问题讨论】：

你能把fakeAsync改成async吗？
我参考了这篇文章stackoverflow.com/questions/40093013/…
好吧，问题是您在点击后没有 tick() 调用 :) 如果您使用 async() 而不是 fakeSync()，则没有必要这样做
我在那篇文章中尝试了另一个 async() 解决方案，但仍然无法正常工作

标签： angular typescript unit-testing jasmine karma-jasmine

【解决方案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();
  }));

【讨论】：