How to write unit test for a function in button click in angular

Question

I write a code for unit testing but it isn't worked. I wanna know how to use it and I am new to unit testing

COMPONENT.HTML

<button class="set-button" (click)="clickFunction()"> SAVE</button>

COMPONENT.TS

clickFunction(){
console.log('WORKED');
}

COMPONENT.SPECS.TS

    it('function on button click ', () => {
    spyOn(component, 'clickFunction');
    let btn = fixture.debugElement.nativeElement.querySelector('set-button');
    fixture.detectChanges();
    fixture.whenStable().Then(() =>{
    expect(component.clickFunction).toHaveBeenCalled();
    })
  });

I want to know what have i done wrong here.Thanks in advance

Does this help? stack overflow answer

Naren Murali
– Naren Murali

2022-07-06 02:42:14 +00:00
Commented Jul 6, 2022 at 2:42 — Naren Murali
– Naren Murali, Commented Jul 6, 2022 at 2:42

Nam · Accepted Answer · 2022-07-06 03:31:03Z

1

the issue is that you never actually perform any click on your button:

  it('should click button', () => {
    const clickFunctionSpy = spyOn(component, 'clickFunction');
    const btn = fixture.debugElement.nativeElement.querySelector(
      'set-button'
    ) as HTMLButtonElement;
    btn.click();
    expect(testClickSpy).toHaveBeenCalled();
  });

If the test still fail, it might be that your querySelector is wrong (do you have an element with the tag <set-button>?)

answered Jul 6, 2022 at 3:31

Nam

5691 gold badge4 silver badges11 bronze badges

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

2 Comments

larabrookk Over a year ago

iam getting an function not implemented error and what is testClickSpy means

Nam Over a year ago

So in short, you create a spy whenever you want to test whether a function has been called or not. I would highly recommend that you take a look at some tutorial on Angular Testing (there's a really good Udemy course on that too). Unfortunately it is not simple and without understanding the basic, you can't really proceed any further.

Collectives™ on Stack Overflow

How to write unit test for a function in button click in angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related