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

Question

简短版本:我有一个使用“新范围”的指令(即 scope:true；不是隔离范围)，当我与应用程序交互时，它似乎工作得很好，但在单元测试中似乎没有以可观察的方式更新范围。 为什么指令范围内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() 访问正确的范围。