Click button event in Unit testing is not working in Angular

Question

I'm writing this unit test to verify when clicking back button, then it will show the login page.

The HTML script below is the back button.

<button [routerLink]="[url_sep + login]" class="btn bigBtn btn-gray" keep-width type="button">
          Back
</button>

The script below is the unit test which I want to execute.

let de: DebugElement;
let el: HTMLElement;

it('should open login page when click back button', () => {
    de = fixture.debugElement.query(By.css('.btn-gray'));
    el = de.nativeElement;
    el.click();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('p').textContent).toContain('Welcome');
  });

After I ran this unit test, the button wasn't clicked, because it verified 'Welcome' word in the same page not in the log in page.

StefanN · Accepted Answer · 2019-07-29 14:39:15Z

3

The click event probably isn't ready yet, so you have to wait for it. You can use fixture.whenStable() for this.

See the following example:

it('should', async(() => {


  let button = fixture.debugElement.query(By.css('.btn-gray'));
  button.click();

  fixture.whenStable().then(() => {
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('p').textContent).toContain('Welcome');
  });
}));

See Angular Docs on testing.

edited Jul 29, 2019 at 14:39

answered Jul 29, 2019 at 12:58

StefanN

9217 silver badges19 bronze badges

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

2 Comments

suchip Over a year ago

I got SyntaxError if I use querySelector. However, the button still isn't clicked, after I use fixture.whenStable().

StefanN Over a year ago

Updated the code sample with the correct QuerySelector

Erbsenkoenig · Accepted Answer · 2019-07-29 12:57:30Z

2

I would prefer using the method provided by the DebugElement to invoke the event instead of calling it directly on the native element. But either way, it is important to once wait until the event is handled and then call a fixture.detectChanges() in order to update the template to assert new rendered elements.

So it would be something like this:

it('should open login page when click back button', fakeAsync(() => {
    de = fixture.debugElement.query(By.css('.btn-gray'));
    el = de.triggerEventHandler('click', null);

    tick(); // this is important
    fixture.detectChanges(); // this is important

    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('p').textContent).toContain('Welcome');
  }));

answered Jul 29, 2019 at 12:57

Erbsenkoenig

1,67917 silver badges18 bronze badges

2 Comments

suchip Over a year ago

The button still isn't click, after I use tick(); fixture.detectChanges(); and fakeAsync.

Erbsenkoenig Over a year ago

Ah yes. I see. Your button doesn‘t have a click listener at all. So it does nothing on click. What are you trying to test? The routing?

Collectives™ on Stack Overflow

Click button event in Unit testing is not working in Angular

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related