angularjs - 如何测试指令链接中的功能

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

成功指令测试的关键是将所有与 View 相关的逻辑移至 Controller ，即

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

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

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

编写规范的好处是它们可以显示设计缺陷。目前的情况是getData中的DOM手动操作。从代码中并不清楚上下文驱动属性的用途，但是为了进行测试，必须在 Angular(数据绑定(bind))而不是 jQuery(DOM 操作)方式中实现相同的功能 -友好。