How to unit test a button click event in Angular?

Question

I am trying to test a button click event. The official Angular manual says there are two ways to do this.

1.

it('should raise selected event when clicked (triggerEventHandler)', () => {
  let selectedHero: Hero;
  const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
  comp.selected.subscribe((hero: Hero) => selectedHero = hero);
  heroDe.triggerEventHandler('click', null);
  expect(selectedHero).toBe(expectedHero);
});

it('should raise selected event when clicked (element.click)', () => {
  let selectedHero: Hero;
  const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
  comp.selected.subscribe((hero: Hero) => selectedHero = hero);
  heroEl.click();
  expect(selectedHero).toBe(expectedHero);
});

The first method worked well for me. But when I tried the second option, the test ran without errors, but Karma started running tests in an infinite loop.

Here is my implementation of both ways.

it('test1', () => {
  fixture.detectChanges();
  let treeNodeElement = fixture.debugElement.query(By.css('#buttonSend'));
  treeNodeElement.triggerEventHandler('click', null);
  expect(component.tabService.tabs.length).toBe(1);
  expect(component.tabService.tabs[0].title).toBe('Test1');
});

it('test2', () => {
  fixture.detectChanges();
  const treeNodeElement: HTMLElement = fixture.nativeElement.querySelector('#buttonSend');
  treeNodeElement.click();
  expect(component.tabService.tabs.length).toBe(1);
  expect(component.tabService.tabs[0].title).toBe('Test1');
});

Can you please tell me where is the error in the second option?

Any solution for this? I'm having the same issue .

SOF
– SOF

2021-03-18 15:42:12 +00:00
Commented Mar 18, 2021 at 15:42 — SOF
– SOF, Commented Mar 18, 2021 at 15:42

SOF · Accepted Answer · 2021-03-18 16:42:05Z

1

The solution here for me was importing FormsModule and ReactiveFormsModule in beforeEach(). The problem was that clicking on the button ( Which was a submit button ) engendred a browser behaviour which is refreshing the page. Even if the FormsModule and ReactiveFormsModule are imported in the component where the form is created, they have also to be imported in the .spec file where you are running the test case

beforeEach(async () => {
 await TestBed.configureTestingModule({
  imports: [
    RouterTestingModule,
    RouterModule.forRoot([]),
    NgbModule,
    FormsModule,  <----
    ReactiveFormsModule,  <----
  ],
  declarations: [  
   ...

both module should be imported from @angular/forms

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

answered Mar 18, 2021 at 16:42

SOF

3571 gold badge4 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to unit test a button click event in Angular?

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