jQuery Trigger Event in AngularJS Karma Test

Question

I\'m trying to test a new directive I\'m writing. However, I can\'t seem to get the keydown event to trigger with jQuery inside Karma/Jasmine.

Here is a simplified

Answer 1

I hope this works

  var e = $.Event('keydown');
  e.which = 65;

  $(inputEl).trigger(e); // convert inputEl into a jQuery object first
  // OR
  angular.element(inputEl).triggerHandler(e); // angular.element uses triggerHandler instead of trigger to trigger events

Answer 2

TLDR: load jQuery before AngularJS.

At first, you may think that jQuery is not included. However, it is included. If it were not, the test would fail at $.Event.

You have 2 dependencies on jQuery here:

1. $.Event, a direct reference; and
2. $, indirectly referenced by angular.element();

When AngularJS is loaded, it looks for a previously loaded jQuery instance, and in case it does exist, it makes element just an alias to $. Otherwise it loads a reference to jqLite, which does not have a trigger method.

So, I'm sure you do have jQuery loaded, but that does not mean AngularJS will use it. To do so, you must ensure jQuery is loaded (anywhere) before AngularJS.

When angular.element() refers to jqLite, it would never call jQuery, even after jQuery is loaded. So you can only call methods defined on jqLite:

angular.element(inputEl).triggerHandler(e);

However, jqLite's triggerHandler would not perform event bubbling, it's not reliable to mock raising events. jQuery's trigger is way better.

To use jQuery, do this on your HTML:

<script src="jquery.js">
<script src="angular.js">

Or on your karma.conf.js:

files: [
  'lib/jquery-1.10.2.min.js',
  'lib/angular.js',
  'lib/angular-mocks.js',
  'test/**/*Spec.js'
],

Reference:

• https://docs.angularjs.org/api/ng/function/angular.element
• https://github.com/angular/angular.js/blob/master/src/Angular.js#L1608

Suggestions on getting the keydown event to work on the input?

You have found one approach by working-around the problem. It's not a big deal for your unit tests, where you would want a better DOM library, but now you know what's going on.

PS: I really liked answering this one. A question from more than a year, viewed by 6k users, and still no answer to the core problem.