javascript - 单元测试 AngularJS 指令 : scopes not updating?

Question

简短版本:我有一个使用“新范围”的指令(即，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');
  });
});

现在，在与应用程序交互时:

1. 我可以在 input 中键入内容，并且对 $scope.fields 中的键的任何更新都会延迟到该字段上的模糊事件。
2. 在测试中，Jasmine spy 报告正在调用 $apply 但是...
3. ...应该在 $apply 上下文中执行的函数(显然)没有被调用。
4. ...$watch 表达式也不会被调用。

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

除非重新设计指令(例如，使用隔离作用域和 $emit 事件):我在这里遗漏了什么吗？关于指令我应该改变什么？或者一些技巧让这些变化在单元测试中可见？

Answer 1

简而言之:不要忘记 spy 上的 .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');
});

所以...

1. Jasmine spy 需要 andCallThrough()
2. 使用 element.scope() 访问正确的范围。