Angular Jasmine Expected spy onButtonClick to have been called

Question

I am writing unit test for my Angular 6 project. However, I encounter a problem. I want to test a button with click function called, but the test file always shows me this error.

The following are my code:

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


});

Test Result:

Expected spy onButtonClick to have been called.

Any suggestion to correct it? Thank you

Update

I have refer another article, and follow the code:

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

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

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

The test case can not pass too.

UPDATE 2:

In my html, there are two kind of click function will be called, so this will cause the error

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

I refered this article https://stackoverflow.com/questions/40093013/unit-testing-click-event-in-angular — Raymond Yeh, Aug 30 '18 at 17:04
well, the problem is that you don't have a tick() call after the click :) which is not necessary if you use `async()` instead of `fakeSync()` — Poul Kruijt, Aug 30 '18 at 17:12
I have tried another async() solution in that article, but still not working — Raymond Yeh, Aug 30 '18 at 20:52

Raymond Yeh · Accepted Answer · 2018-08-30T22:03:34.000

I think this is the solution for my question.

At the beginning, there are different kind of functions will be called after click button.

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

Because of this, the testing will cause error.

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

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

Expected spy onButtonClick to have been called.

So, the correct way to pass the testing should written like following:

Add class name to 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>

And then, modify the test case:

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

Angular Jasmine Expected spy onButtonClick to have been called

1 Answers1