Invoke Angular2 click event on non InputElement

Question

I am testing a component which has a click input on a div.

<div (click)="handleClick(someArgs)"></div>

Now I want to validate the behaviour in a test. I tried using .click() on the native element:

const elem = fixture.debugElement.query(By.css('my-selector'));
elem.nativeElement.click();
// Check for desired changes

However this only works in specific browsers since .click() seems to only be defined for HTMLInputElements (Relevant StackOverflow). I get the following error 'undefined' is not a function (evaluating elem.nativeElement.click()') for a couple browsers.

What is the best way to invoke a click event on a non HTMLInputElement?

In which browsers do you get this error? Please specify

yurzui
– yurzui

2016-12-19 11:30:49 +00:00
Commented Dec 19, 2016 at 11:30 — yurzui
– yurzui, Commented Dec 19, 2016 at 11:30
I had this issue using PhantomJS 1.9 (but not using 2.1)

fwind
– fwind

2016-12-19 12:11:57 +00:00
Commented Dec 19, 2016 at 12:11 — fwind
– fwind, Commented Dec 19, 2016 at 12:11

yurzui · Accepted Answer · 2016-12-19 11:24:54Z

1

I think the best way is calling triggerEventHandler() on DebugElement

triggerEventHandler

Triggers the event by its name if there is a corresponding listener in the element's listeners collection. The second parameter is the event object expected by the handler.

If the event lacks a listener or there's some other problem, consider calling nativeElement.dispatchEvent(eventObject)

From testing documentation

https://angular.io/docs/ts/latest/guide/testing.html#!#trigger-event-handler

answered Dec 19, 2016 at 11:24

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

1 Comment

fwind Over a year ago

calling elem.triggerEventHandler('click', null) did the trick.

Yaser · Accepted Answer · 2016-12-19 11:36:34Z

1

Usually when you want to trigger click on html elements using plain js you have to call the event which is defined on the element.

UPDATE: if you are using Jasmine, you can try calling trigger on the element:

const elem = fixture.debugElement.query(By.css('my-selector'));
elem.nativeElement.trigger('click');

edited Dec 19, 2016 at 11:36

answered Dec 19, 2016 at 11:27

Yaser

5,7391 gold badge18 silver badges28 bronze badges

2 Comments

Yaser Over a year ago

Just tested it and seems not working, however the update works fine @yurzui

fwind Over a year ago

This did not work using Phantomjs 1.9.1 and TypeScript: TypeError: 'undefined is not a function (evaluating elem.nativeElement.trigger('click')')'.

Collectives™ on Stack Overflow

Invoke Angular2 click event on non InputElement

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related