Question

简短版本：我有一个使用＆＃34;新范围的指令＆＃34; （即，scope:true; 不隔离范围），当我与应用程序交互时似乎工作得很好，但似乎没有更新{{1}在单元测试中以可观察的方式。 为什么在单元测试中，指令的范围中的scope的更改不会？

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

这是指令：

field

大致如下使用：

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 «{{field}}»</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中对键的任何更新都会延迟到该字段上的模糊事件。
在测试中，Jasmine间谍报告说$scope.fields的调用正在发生，但 ......
...应该在$apply的上下文中执行的函数（显然）没有被调用。
...也不会调用$apply表达式。

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

禁止重新设计指令（例如，使用隔离范围和$watch事件）：我在这里错过了什么？我应该改变指令吗？或者在单元测试中可以观察到这些变化的一些技巧？

Answer 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');
});

因此...

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

单元测试AngularJS指令：范围不更新？

1 个答案: