Let me be a little bit more specific. The code in production works very well (no errors or exceptions in the console). However when I try to do the testing, it doesn't work very well.
This is the relevant bit of my directive template:
<form ng-if="totalOrganizations > numOrganizationsForSearch" class="search">
<input type="text" class="form-control" placeholder="Search for..." ng-model="searchText"/>
</form>
The relevant bit of my angular directive:
module.exports = function portalSwitcher($state, $window) {
return {
restrict: 'E',
replace: true,
scope: {},
template: template,
link: function(scope, element) {
scope.totalOrganizations = 0;
scope.searchText = "";
// more code here
I am probably missing something with my testing. The tests works well if the condition ng-if="totalOrganizations > numOrganizationsForSearch" is not true and therefore it does not add the input field in my directive DOM. However, when this condition is true, my tests fails like that:
TypeError: document.createElement is not a function
at Object.hasEvent (dist/d16cd293c8e995aad0be/vendor.js:22558:34)
at baseInputType (dist/d16cd293c8e995aad0be/vendor.js:26751:17)
at textInputType (dist/d16cd293c8e995aad0be/vendor.js:26702:4)
at pre (dist/d16cd293c8e995aad0be/vendor.js:27292:63)
at invokeLinkFn (dist/d16cd293c8e995aad0be/vendor.js:13719:10)
at nodeLinkFn (dist/d16cd293c8e995aad0be/vendor.js:13192:12)
at compositeLinkFn (dist/d16cd293c8e995aad0be/vendor.js:12609:14)
at nodeLinkFn (dist/d16cd293c8e995aad0be/vendor.js:13208:25)
at compositeLinkFn (dist/d16cd293c8e995aad0be/vendor.js:12609:14)
at publicLinkFn (dist/d16cd293c8e995aad0be/vendor.js:12489:31)
Error: Declaration Location
at window.inject.angular.mock.inject (node_modules/angular-mocks/angular-mocks.js:2488:25)
at Suite.<anonymous> (spec/shared/portalSwitcher.spec.js:168:24)
It turns out if I remove the ng-model attribute from my input I don't get this error at all. So I started to look at the angular code and found where the code is failing:
https://github.com/angular/angular.js/blob/v1.4.9/src/ng/sniffer.js#L34
function $SnifferProvider() {
this.$get = ['$window', '$document', function($window, $document) {
var eventSupport = {},
android =
toInt((/android (\d+)/.exec(lowercase(($window.navigator || {}).userAgent)) || [])[1]),
boxee = /Boxee/i.test(($window.navigator || {}).userAgent),
document = $document[0] || {}, //$document[0] is just an empty object here
//more code...
if (isUndefined(eventSupport[event])) {
var divElm = document.createElement('div'); //exception line. document object is empty and therefore doesn't have createElement function
eventSupport[event] = 'on' + event in divElm;
}
It seems for any weird reason, the $document[0] object is empty. Which seems from reading the code that shouldn't be the case. I assume some of my test setup is wrong (this is my first directive test). The relevant code is here:
beforeEach(module('app.shared', function($provide) {
$provide.value('Service1', Service1);
//other dependencies
}));
beforeEach(function() {
//setup that makes the condition above return true
//and add ng-model to DOM.
});
beforeEach(inject(function($compile, $rootScope) { //it fails at this line
elm = $compile('<portal-switcher />')($rootScope.$new());
scope = elm.isolateScope();
scope.listPortals();
scope.$digest();
}));
I tried to fix that providing $document in my test with the document object from my test (which is not an empty object and contains the createElement function) but still same error.
I couldn't find any similar error in Duckduckgo or Google.
I am using angular 1.4.9, angular mocks 1.4.9 as well. I don't think the problem is related to the versions though, I wasn't able to find any issues on angular github repo about that.
Any help is appreciated.