使用 AngularJS + Jasmine 进行单元测试滑块指令

Question

我是 Angularjs 和 jasmine 单元测试的新手，所以我希望这是有道理的，并且足够正确以得到答案 :) 我正在尝试测试一个 angularJS 指令，该指令创建从 bootstrap-slider 获取的滑块。

这是我的指令（滑块调用基于slider-fn属性的滑动函数）：

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() });
            });
        });
    }
    }
})

这是我的单元测试，我正在尝试重新创建一个滑块并测试他的值。 （接下来，我应该测试是否调用了正确的函数）：

...

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);

    })
})

第一个或第二个期望都没有按预期工作：我添加了三个日志：

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"

如何在测试时调用滑块（）之类的函数？为什么find() 返回 0 作为长度？

提前谢谢你！

Answer 1

这是一个有效的 Jasmine 测试。请注意，该元素被包裹在 jQuery 中以便与滑块一起使用。在测试中，您的第一次检查在“getAttribute”中有错字。出于某种原因，getAttribute for value 给我带来了一个数组——我没有马上弄清楚为什么。一个工作的 Plunker 版本在这里 (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);

})

})