如何在指令 link 中测试功能

Question

我有一个指令，我正在尝试为其编写一些单元测试：

return {
    restrict: 'E',
    replace: true,
    controllerAs: 'vm',
    transclude: true,
    template:   '<ul>' +
                    '<li ng-show="vm.hideItem">Home</li>' +
                    '<li ng-show="vm.hideItem">Products</li>' +
                    '<li ng-show="!vm.hideItem">Cart</li>' +
                    '<li ng-show="vm.hideItem">Contact Us</li>' +
                '</ul>',  
    link: function(scope, element, attrs, vm) {

        function getData(index) {
            if (index){
                vm.hideItem = true
            }
            else {
                var li = element.find("li");
                li.attr("context-driven", "");
            }
        }

        function getIndex(){
            index = myService.getIndex();
            getData(index);
        }

        getIndex();

    },
    controller: function(){}
};

我有以下，通过了：

describe('<-- myDirective Spec ------>', function () {

    var scope, $compile, element, myService;

    beforeEach(angular.mock.module('MyApp'));

    beforeEach(inject(function (_$rootScope_, _$compile_, _myService_) {
        scope = _$rootScope_.$new();
        $compile = _$compile_;
        myService = _myService_;

        var html = '<my-directive></my-directive>';
        element = $compile(angular.element(html))(scope);
        scope.$digest();
    }));

    it('should return an unordered list', function () {
        var ul = element.find('ul');
        expect(ul).toBeDefined();
    });

如何测试 getIndex、getData 的调用并确保 myService 已被调用？

Answer 1

指令测试成功的关键是将所有与视图相关的逻辑移至控制器，即

    this.getIndex = function () {
        index = myService.getIndex();
        getData(index);
    }

在规范中编译元素后，可以检索并监视控制器实例

var ctrl = element.controller('myDirective');
spyOn(ctrl, 'getIndex').and.callThrough();

编写规范的好处在于它们可以显示设计缺陷。目前的情况是DOM手动操作getData。从代码中不清楚 context-driven 属性的用途，但必须在 Angular（数据绑定）而不是 jQuery（DOM 操作）中实现同样的事情时尚才能考试友好。

如何在指令 link 中测试功能

How to test function within directive link

jasmine

angularjs

angularjs-directive

karma-runner

karma-jasmine