[AngularJS]在链接功能中的角单元测试 $attrs

发布时间: 2017/4/16 15:14:46
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我已成立了一些测试对于拥有控制器的指令。 它不是太难成立

        var html = angular.element("<div explore></div>");
        $rootScope = $rootScope.$new();
        element = $compile(html)($rootScope);
        $rootScope.$digest(element);

        controller = element.scope();

然而,我感到有点困惑的链接功能。 示例不是从应用程序,但类似的代码。

var exploreLink = function($scope, $el, $attr) {
   $scope.gallery = [];

    $scope.secondarytitle = $attrs.title;
}



return {
    restrict: 'A',
    scope: true,
    link: ExploreLinks,
    templateUrl: 'LinkHtml'
    controller: LinkController
};

如果我用 mock $rootScope有一种方法访问 $attr 吗? 我没有看到

  $attr 

在 $rootScope。

看来我会依然称 $digest,因为它是一项指令的一部分。 我假设需要编译指令类似于上面列出的步骤。

解决方法 1:

link是一个可怕的地方,对于单元测试,其内容应该留给 E2E 测试,或对整个指令应视为黑箱,其结果不得不反对范围对象匹配。

这是确定的如果它包含 DOM 相关的逻辑应该用量角器测试。它不是好的如果链接功能包含应该属于控制器,根据公式 '控制器绑定范围、 胶水的东西联系在一起的事情' 的东西。

每个注册的指令是作为与角服务可用 *Directive 的名字和它的部分可以测试或嘲笑。这一事实, link 函数埋葬在里面 compile 的功能在 DDO 对象不使任务更容易或更清洁。

测试链接功能可能是那样的令人毛骨悚然

  inject(function ($compile, $rootScope, exploreDirective) {
    ...
    var linkFn;
    var _compileFn = exploreDirective[0].compile;
    var _attrs;

    spyOn(exploreDirective[0], 'compile').and.callFake(function () {
      var _linkFn = _compileFn.apply(exploreDirective[0], arguments);

      var linkFn = jasmine.createSpy('linkFn');
      linkFn.and.callFake(function (scope, element, attrs, ctrls, transcludeFn) {
        // now attrs can be mocked or matched
        _attrs = attrs;
        return _linkFn(function (scope, element, attrs, ctrls, transcludeFn);
      }

      return linkFn;
    });

    $compile('<explore attr="...">')(scope);
    expect(linkFn).toHaveBeenCalled();
    expect(_attrs.attr).toBe('...');

始终使用 $attrs 本地依赖在赞成的指令控制器 attrs 参数在 link 进行测试。分配到 attrs this$scope 在控制器中是正确的事情要做。

并顺便说一句,不应该被嘲笑或测试角的内在逻辑。它是安全地假设, $compile('<explore attr="...">')(scope) 将导致 $attrs.attr === '...'

官方微信
官方QQ群
31647020