如何在angular1指令测试用例

时间:2016-12-15 06:50:46

标签: javascript angularjs unit-testing testing karma-jasmine

我正在尝试在anguarjs1.x中为我的指令编写测试用例

这是我的指示

 .directive("weeklyDirective", function($timeout) {
        return {
            scope: {
                data: '=',
            },
            link: function(scope, element) {
                scope.weekDays = [
                    { text: 'Sun', id: 1 },
                    { text: 'Mon', id: 2 },
                    { text: 'Tue', id: 3 },
                    { text: 'Wed', id: 4 },
                    { text: 'Thu', id: 5 },
                    { text: 'Fri', id: 6 },
                    { text: 'Sat', id: 7 }
                ];
            },
            restrict: 'A',
            templateUrl: "/flat-ui/tpls/weekly-scheduler.html",
        };
    })

我的指令模板在哪里

<ul style="padding: 0px;display: inline;margin: 0;list-style: none;">
    <li ng-repeat="weekDay in weekDays" style="padding: 10px;display: inline;">
        <input type="checkbox" value="{{weekDay.id}}" check-list="data.weeklyDetails" id="{{'chk_'+$index}}" class="ee-check"> <label class="ee-check" for="{{'chk_'+$index}}"><span></span> {{weekDay.text}}</label>
    </li>
</ul>

在我的每周指令中,我使用了另一个处理我的复选框列表的指令

.directive('checkList', function() {
        return {
            scope: {
                list: '=checkList',
                value: '@'
            },
            link: function(scope, elem, attrs) {
                var handler = function(setup) {
                    var checked = elem.prop('checked');
                    var index = scope.list.indexOf(scope.value);
                    if (checked && index == -1) {
                        if (setup) elem.prop('checked', false);
                        else scope.list.push(scope.value);
                    } else if (!checked && index != -1) {
                        if (setup) elem.prop('checked', true);
                        else scope.list.splice(index, 1);
                    }
                };

                var setupHandler = handler.bind(null, true);
                var changeHandler = handler.bind(null, false);

                elem.bind('change', function() {
                    scope.$apply(changeHandler);
                });
                scope.$watch('list', setupHandler, true);
            }
        };
    });

现在我正在尝试编写测试用例以测试我的指令

describe("weeklyDirective directive", function() {
    var elm, scope, httpBackend, controller;
    beforeEach(module('guideApp.directives'));
    beforeEach(module('/flat-ui/tpls/weekly-scheduler.html'));
    beforeEach(angular.mock.inject(function($rootScope, $compile) {
        compile = $compile;
        scope = $rootScope;
        elm = angular.element('<div weekly-directive data="data"></div>');
        compile(elm)(scope);
        scope.data = {
            interval: 1,
            weeklyDetails: ['1'],
        }
        scope.$digest();
    }));
    it("click on check box it should get added in weeklyDetails", function() {
        var e = elm.find('input[id="chk_3"]');
        console.log(e);
        e.trigger('click');
        scope.$apply();
        var isolateScope = elm.isolateScope();
        expect(isolateScope.data.weeklyDetails.indexOf('4') > -1).toBeTruthy();
    });
});

我试图测试当用户点击复选框时,它的值应该被添加到我的数组 weeklyDetails 中,它在数据对象中(传递给weeklydirective)。

它不能像我一样被检测到,请帮我完成这项工作。 感谢Adv。

0 个答案:

没有答案