Unit testing click event in Angular

by

My objective is to check if the ‘onEditButtonClick’ is getting invoked when the user clicks the edit button and not checking just the console.log being printed.

You will need to first set up the test using the Angular TestBed. This way you can actually grab the button and click it. What you will do is configure a module, just like you would an @NgModule, just for the testing environment

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

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

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

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

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

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

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

Here we need to run an async test as the button click contains asynchronous event handling, and need to wait for the event to process by calling fixture.whenStable()

Update

It is now preferred to use fakeAsync/tick combo as opposed to the async/whenStable combo. The latter should be used if there is an XHR call made, as fakeAsync does not support it. So instead of the above code, refactored, it would look like

it('should', fakeAsync(() => {
  spyOn(component, 'onEditButtonClick');

  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();
  tick();
  expect(component.onEditButtonClick).toHaveBeenCalled();

}));

Don’t forget to import fakeAsync and tick.

See also:

More Related Contents:

  1. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  2. How can I unit test a component that uses the Router in Angular?
  3. How to mock Angular 4.3 httpClient an error response in testing
  4. What is the difference between fakeAsync and async in Angular testing?
  5. Dynamically add event listener
  6. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  7. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  8. Use component from another module
  9. Angular and Typescript: Can’t find names – Error: cannot find name
  10. Angular 2 Scroll to top on Route Change
  11. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  12. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  13. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  14. async/await in Angular `ngOnInit`
  15. How to inject service into class (not component)
  16. Emit event from parent to child
  17. Angular 2 ‘component’ is not a known element
  18. How to make a sequence of http requests in Angular 6 using RxJS
  19. How to set unique template reference variables inside an *ngFor? (Angular)
  20. Getting Image from API in Angular 4/5+?
  21. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  22. Angular 4 HttpClient Query Parameters
  23. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  24. Behaviour subject initial value null?
  25. How to execute only one test spec with angular-cli
  26. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  27. How to validate white spaces/empty spaces? [Angular 2]
  28. Call a function every 10 seconds Angular2
  29. How to change angular material datepicker format
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment