javascript - 链接函数中的 Angular 单元测试 $attrs

Question

我已经为具有 Controller 的指令设置了一些测试。设置起来并不难

        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
};

如果我模拟出 $rootScope 有没有办法访问 $attr？我没看到

  $attr 

在 $rootScope 上。

似乎我仍会调用 $digest，因为它是指令的一部分。我假设有必要编译一个类似于上面列出的步骤的指令。

Answer 1

link对于单元测试来说是一个糟糕的地方，它的内容应该留给 E2E 测试，或者整个指令应该被视为黑盒并且它的结果必须与范围对象匹配。

如果它包含应该使用 Protractor 测试的与 DOM 相关的逻辑，则可以。根据公式“ Controller 将事物绑定(bind)到作用域，链接将事物粘合在一起”，如果链接函数包含应属于 Controller 的内容，则不可行。

每个注册的指令都可以作为 Angular 服务使用 *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指令 Controller 中的本地依赖项有利于 attrs参数 link供测试用。将属性分配给 this或 $scope在 Controller 中是正确的做法。

顺便说一下，不应该模拟或测试 Angular 的内部逻辑。可以安全地假设 $compile('<explore attr="...">')(scope)将导致 $attrs.attr === '...' .