I am a newbie to both Angularjs and unit-testing with jasmine, so iI hope this makes sense and is correct enough to get an answer :) I am trying to test an angularJS directive that creates sliders taken from bootstrap-slider .
This is my directive (the slider calls a function on sliding based on slider-fn attribute) :
angular.module('testAngular').directive('sliderDir',function($parse){
return {
link :function(scope,element,attrs){
element.slider({value: parseInt(attrs.value),
min: parseInt(attrs.min),
max: parseInt(attrs.max),
step: parseInt(attrs.step)
});
element.on("slide",function(event, ui){
scope.$apply(function() {
var invoker = $parse(attrs.sliderfn);
invoker(scope, {arg1: element.val() });
});
});
}
}
})
This is my unit test, where I am trying to recreate a slider and test his values. (Next, I should test if the correct function is being called) :
...
describe("testing sliderDir", function(){
beforeEach(angular.mock.module("testAngular"));
var element;
var $scope;
beforeEach(angular.mock.inject(function($compile,$rootScope){
$scope = $rootScope;
element = angular.element('<input id="ex1" slider-dir="" sliderFn="slideFunction(arg1)" type="text" min="2750" max="30000" step="250" value="13000"/>');
$compile(element)($rootScope);
}))
it("has correct values", function(){
$scope.$digest();
expect(element.find('input').slider("getAtribute","value")).toEqual(13000);
expect(element[0].slider("getAttribute","min")).toEqual(2750);
})
})
Neither the first or the second expect works as expected : I have added three logs :
console.log(element.find('input').length); //this one logs 0 instead of 1 as i would expect
console.log(element); //this is an array of length 1
console.log(element[0]); //this is my input element with added class="ng-scope"
How can I call a function like slider() while testing? Why does find()
return 0 as length?
Thank you in advance!
Here's a working Jasmine test. Pay attention that the element is wrapped in jQuery in order to work with the slider. In the test your first check has a typo in "getAttribute". For some reason getAttribute for value brings me an array - I didn't figure out right away why. A working Plunker version is here (http://plnkr.co/edit/7704XEqXVW4YhaHxIqWg?p=preview)
describe("testing sliderDir", function(){
beforeEach(angular.mock.module("testAngular"));
var elm;
var $scope;
beforeEach(angular.mock.inject(function($compile,$rootScope){
$scope = $rootScope.$new();
var element = angular.element('<input id="ex1" slider-dir="" sliderFn="slideFunction(arg1)" type="text" min="2750" max="30000" step="250" value="13000"/>');
elm = $compile(element)($scope);
}))
it("has correct values", function(){
expect($(elm).slider("getAttribute","value")[0]).toEqual(13000);
expect($(elm).slider("getAttribute","min")).toEqual(2750);
})
})
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments