Why are all $ document functions undefined in my test?
I have a directive in AngularJS that contains the $ document module.
$document.click(function (e) {});
I am trying to write a unit test for it using Karma and it breaks the test because the function click()
does not exist in $document
, also try with other functions $document
for example keyup()
and you get the same problem:
TypeError: undefined is not a function
This is the test code that makes the error:
describe('Directive: multiSelectMenu', function () {
var element, scope;
beforeEach(module('myApp'));
describe('Test setup', function() {
it ('Injecting required data', inject(function ($compile, $rootScope) {
scope = $rootScope.$new();
element = $compile(angular.element('<div multi-select-menu></div>'))(scope);
$rootScope.$apply();
scope = element.isolateScope();
scope.$apply();
}));
});
});
Why does it fail?
source to share
Here's the documentation says about $ document:
A jQuery or jqLite wrapper for the window.document window.
And if you click on the link, you will see the methods defined in the jqLite element. There is no click () among them, not keyup (). These methods exist on a real jQuery object (see http://api.jquery.com/category/events/ ), but AngularJS will only return the jQuery object if you include jQuery, before angular.js, in your JS file list.
source to share