Angular directive test throws an error - unit-testing

Question

Here is the directive, that wraps jquery-ui autocomplete
angular.module('myApp.directives', [])
.directive('autocomplete', function () {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<input ng-model="autocomplete" type="text"/>',
link: function (scope, element, attrs) {
scope.$watch(attrs.typedvalue, function () {
element.autocomplete({
search: function (event) {
scope[attrs.typedvalue] = this.value;
scope[attrs.fullselection] = '';
scope[attrs.selectionid] = '';
scope[attrs.shortselection] = '';
scope.$apply();
},
source: scope.fetchList,
select: function (event, ui) {
scope[attrs.fullselection] = ui.item.label;
scope[attrs.selectionid] = ui.item.itemId;
scope[attrs.shortselection] = ui.item.value;
scope.$apply();
}
});
});
}
};
});
I'm trying to unit-test it with the following test (following instructions from here https://github.com/vojtajina/ng-directive-testing):
describe('Directives', function () {
beforeEach(module('myApp.directives'));
describe('autocomplete directive', function () {
var elm, scope;
beforeEach(inject(function ($rootScope, $compile) {
elm = angular.element('<autocomplete fullselection="fullDstn" shortselection="dstn" selectionid="geonameId" typedvalue="typedValue" id="DstnSlctr"/>');
scope = $rootScope;
$compile(elm)(scope);
scope.$digest();
}));
it('should create input', inject(function ($compile, $rootScope) {
expect(elm.id).toBe('DstnSlctr');
expect(elm.prop('tagName')).toBe('INPUT');
debugger;
}));
});
});
But I get an error:
TypeError: Object [[object HTMLInputElement]] has no method 'autocomplete'
at Object.fn (C:/Users/kmukhort/Documents/_files/TMate/AngularTest/a
pp/js/directives.js:13:33)
on the line element.autocomplete({
I suspect that jquery-ui functionality is not attached to the element while $compile.
I'm referring jquery-ui library in testacular.config
basePath = '../';
files = [
...
'app/lib/jquery-ui-*.js',
];
Could you, please, tell, what I'm doing wrong?
Thanks!
Ksenia

Answer 1

I think you need to replace:
element.autocomplete(...);
With:
$(element).autocomplete(...);