Angular unit test not respecting click event

Question

I am writing a simple unit test for a element click '

Here is my html

<div *ngIf="!hidden" id='button'>
    <button
        [color]="'primary'"
        [disabled]="disabled"
        [label]="lablel"
        id="createButton"
        (click)="handleNextClick()"
        id='button'
    ></button>
</div>

Here is my unit test

it('should handleNextClick method called on button click', () => {
        let createsearchCreateDiv = fixture.debugElement.query(By.css('#button'));
        createsearchCreateDiv.nativeElement.click();



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

    });

My test case is passed irrespective of below line

createsearchCreateDiv.nativeElement.click();

Ideally it should not pass only if I remove/comment above line.

Method is not getting called if I remove/comment click. But still test case getting passed

Poul Kruijt · Accepted Answer · 2020-07-25 19:10:50Z

1

It's an async call, so you should use done, async/await or return the Promise:

it('should handleNextClick method called on button click', () => {
  // ...
  return fixture.whenStable().then(() => {
    expect(component.handleNextClick).toHaveBeenCalled();
  });
});

answered Jul 25, 2020 at 19:10

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular unit test not respecting click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related