Unit test in Angular 2+ (testing method call on button click)

Question

I am trying to test method call when certain button is clicked, nothing seems to work.

This is the line in my HTML file:

<button class="btn-grey" (click)="methodTest()">ODUSTANI</button>

And method in my component:

export class MyComponent {

    constructor (public dialog: Matdialog) {}

    methodTest(): void {
        this.dialog.open(
            myOtherComponent,
            {disableClose: true, data:{title: someTitle, message: someMessage}
        );
    }

}

I edited the original question. This is information I can provide. — UnNoticed
– UnNoticed, Commented Mar 26, 2018 at 13:31
Is there any error message on the console? Maybe you missed a } in your method. — Roland Rácz
– Roland Rácz, Commented Mar 26, 2018 at 14:14
The question is not about the method, it works just fine. I am trying to write unit test for that method call on click of a button. — UnNoticed
– UnNoticed, Commented Mar 26, 2018 at 15:25

abdul subaan · Accepted Answer · 2018-05-26 11:24:53Z

1

You will need to set up the test using the Angular TestBed and inject the service.

import { TestBed, async, ComponentFixture } from '@angular/core/testing';

describe('', () => {
  let fixture: ComponentFixture<TestComponent>;
  let component: TestComponent;

  beforeEach(async(() => {

    TestBed.configureTestingModule({
       imports: [
         AppModule
       ],
       declarations: [ 
       ],
       providers: [
       ]}).compileComponents()
      .then(() => {
         fixture = TestBed.createComponent(TestComponent);
         comp = fixture.componentInstance;
      });
   }));
});

Then you need to spy on the onButtonClick method, click the button and check that whether the method was called

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

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

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

answered May 26, 2018 at 11:24

abdul subaan

916 bronze badges

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

1 Comment

hackp0int Over a year ago

that's verifying that the button is clicked on.

Collectives™ on Stack Overflow

Unit test in Angular 2+ (testing method call on button click)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related