Angular.js 单元/集成测试 - 触发链接功能答案

【问题标题】：Angular.js Unit/Integration Testing - Trigger Link FunctionAngular.js 单元/集成测试 - 触发链接功能
【发布时间】：2013-07-19 03:37:46
【问题描述】：

目前，我正在为指令编写测试（使用 Jasmine），我怀疑链接功能没有被触发。

指令如下：

.directive('userWrapperUsername', [
    'stringEntryGenerateTemplate',
    'stringEntryGenerateLinkFn',
    // UserWrapper username column
    // Attribute: 'user-wrapper-username'
    // Attribute argument: A UserWrapper object with a 'newData' key into an
    //                     object, which contains a 'username' key holding the
    //                     UserWrapper's username
    function(stringEntryGenerateTemplate, stringEntryGenerateLinkFn) {
        return {
            template: stringEntryGenerateTemplate('username'),
            restrict: 'A',
            scope: true,
            link: stringEntryGenerateLinkFn('userWrapperUsername', 'username')
        };
    }
])

所以它利用了工厂提供的两个函数，即stringEntryGenerateTemplate和stringEntryGenerateLinkFn。

stringEntryGenerateTemplate 函数接受一个字符串并返回一个字符串。

stringEntryGenerateLinkFn 函数在调用时返回实际的链接函数。它主要由事件处理程序组成，因此我将其简化为：

function stringEntryGenerateLinkFn(directiveName, key) {
    return function(scope, element, attr) {
        scope.state = {};
        scope.userWrapper = scope.$eval(attr[directiveName]);
    }
}

这是我使用指令的方式：

<div user-wrapper-username="u"></div>

这是我的测试用例：

describe('UserWrapper Table string entry', function() {
    var $scope
      , $compile;
    beforeEach(inject(function($rootScope, _$compile_) {
        $scope = $rootScope.$new();
        $compile = _$compile_;
    }));
    it('should be in stateDisplay if the value is non empty', function() {
        var userWrapper = {
                orgData: {
                    student: {
                        hasKey: true,
                        value: 'abcdef'
                    }
                },
                newData: {
                    student: {
                        hasKey: true,
                        value: 'abcdef',
                        changed: false
                    }
                }
            }
          , key = 'student'
          , elem
          , elemScope;
        $scope.userWrapper = userWrapper;
        elem = $compile('<div user-wrapper-username="userWrapper"></div>')($scope);
        elemScope = elem.scope();
        expect(elemScope.userWrapper).toBe(userWrapper);
        expect(elemScope.state).toEqual(jasmine.any(Object)); // this fails
    });
});

所以我得到一个测试失败，说 elemScope.state 未定义。回想一下，我有一个scope.state = {}; 语句，如果执行链接函数，它应该被执行。我在链接函数中尝试了console.log，它也没有执行。

那么如何触发链接功能呢？

谢谢！

【问题讨论】：

标签： javascript unit-testing testing angularjs angularjs-directive

【解决方案1】：

事实证明，我必须初始化包含工厂stringEntryGenerateTemplate 和stringEntryGenerateLinkFn 的模块，这与包含userWrapperUsername 指令的模块相同，方法是将其添加到我的测试用例中：

beforeEach(module('userWrapper', function() {}));

其中userWrapper 是模块的名称。

所以测试用例变成：

describe('UserWrapper Table string entry', function() {
    var $scope
      , $compile;
    beforeEach(module('userWrapper', function() {}));
    beforeEach(inject(function($rootScope, _$compile_) {
        $scope = $rootScope.$new();
        $compile = _$compile_;
    }));
    it('should be in stateDisplay if the value is non empty', function() {
        var userWrapper = {
                orgData: {
                    student: {
                        hasKey: true,
                        value: 'abcdef'
                    }
                },
                newData: {
                    student: {
                        hasKey: true,
                        value: 'abcdef',
                        changed: false
                    }
                }
            }
          , key = 'student'
          , elem
          , elemScope;
        $scope.userWrapper = userWrapper;
        elem = $compile('<div user-wrapper-username="userWrapper"></div>')($scope);
        elemScope = elem.scope();
        expect(elemScope.userWrapper).toBe(userWrapper);
        expect(elemScope.state).toEqual(jasmine.any(Object)); // this fails
    });
});

这对我来说似乎是一个很大的疏忽。希望这可以帮助任何面临类似问题的人。

【讨论】：