单元测试 AngularJS 指令：范围没有更新？答案

【问题标题】：Unit Testing AngularJS Directives: scopes not updating?单元测试 AngularJS 指令：范围没有更新？
【发布时间】：2013-10-07 22:45:09
【问题描述】：

短版：我有一个使用“新范围”（即scope:true；不是隔离范围）的指令，它似乎工作得很好当我与应用程序交互时，它似乎没有在单元测试中以可观察的方式更新scope。 为什么在指令范围内对field 的更改在单元测试中无法观察到？

Plunker 中的示例：http://plnkr.co/edit/gpzHsX?p=preview

指令如下：

angular.module('app').directive('ngxBlurry', [
  function() {
    return {
      restrict:'C',
      replace:false,
      scope:true,
      link: function(scope, element, attrs) {
        element.bind('blur', function() {
          var val = element.val();
          scope.$apply(function(scope) {
            scope.field = val;
          });
        });

        scope.$watch('field', function(n, o) {
          if (n !== o) {
            scope.fields[n] = scope.fields[o];
            delete scope.fields[o];
          }
        });
      }
    };
  }
]);

大致如下使用：

<div ng-controller="FooContoller">
  <div ng-repeat="(field, value) in fields">
    <input value="{{field}}" type="text" class="ngx-blurry"/>
    <strong>"field" is &laquo;{{field}}&raquo;</strong>
  </div>
</div>

假设 fields 看起来大概类似于：

$scope.fields = {
  'foo':true,
  'bar':true,
  'baz':true,
  '':true
};

这是单元测试：

describe('ngxBlurry', function() {
  var scope,
      element,
      template = '<input value="{{field}}" type="text" class="ngx-blurry"/>';

  beforeEach(module('app'));
  beforeEach(inject(function($rootScope, $compile) {
    scope = $rootScope.$new();
    scope.fields = {'foo':true, '':true};
    scope.field = '';

    element = $compile(template)(scope);
  }));

  it('defers update until after blur', function() {
    spyOn(scope, '$apply');

    element.val('baz');
    element.triggerHandler('blur');

    // true:
    expect(scope.$apply).toHaveBeenCalled();
    // false!?
    expect(scope.field).toBe('baz');

    scope.$digest();
    // still false:
    expect(scope.field).toBe('baz');

    element.scope().$digest();
    // *still* false:
    expect(scope.field).toBe('baz');
    // also false:
    expect(element.scope().field).toBe('baz');
  });
});

现在，当与应用程序交互时：

我可以在input 中输入，对$scope.fields 中的键的任何更新都会推迟到该字段上的模糊事件发生。
在测试中，Jasmine 间谍报告正在调用$apply但是...
...应该在 $apply 的上下文中执行的函数（显然）没有被调用。
...$watch 表达式也不会被调用。

在运行的应用程序的上下文中指令本身似乎运行得很好，但我似乎找不到任何无法通过单元测试观察更改的原因。

除非重新设计指令（例如，使用隔离范围和$emit 事件）：这里有什么我遗漏的吗？我应该对指令进行一些更改吗？还是有一些技巧可以让这些变化在单元测试中可见？

【问题讨论】：

标签： javascript unit-testing angularjs

【解决方案1】：

简而言之：不要忘记间谍的.andCallThrough()。

指令本身没有任何改变，测试的工作版本需要是：

// everything about the `describe` stays the same...
it('defers update until after blur', function() {
  spyOn(scope, '$apply').andCallThrough();

  element.val('baz');
  element.triggerHandler('blur');

  expect(scope.$apply).toHaveBeenCalled();
  expect(element.scope().field).toBe('baz');
});

所以...

茉莉花spy 需要andCallThrough()
使用element.scope() 访问正确的范围。

【讨论】：