如何在AngularJS中对隔离范围指令进行单元测试

Question

在AngularJS中单元测试隔离范围的好方法是什么

JSFiddle显示单元测试

指令片段

    scope: {name: '=myGreet'},
    link: function (scope, element, attrs) {
        //show the initial state
        greet(element, scope[attrs.myGreet]);

        //listen for changes in the model
        scope.$watch(attrs.myGreet, function (name) {
            greet(element, name);
        });
    }

我想,以确保指令监听的变化-这并不会与一个孤立的范围内工作:

    it('should watch for changes in the model', function () {
        var elm;
        //arrange
        spyOn(scope, '$watch');
        //act
        elm = compile(validHTML)(scope);
        //assert
        expect(scope.$watch.callCount).toBe(1);
        expect(scope.$watch).toHaveBeenCalledWith('name', jasmine.any(Function));
    });

更新: 我通过检查预期观察者是否被添加到子范围来实现它,但它非常脆弱,并且可能以未记录的方式使用访问者(也可能更改,恕不另行通知!).

//this is super brittle, is there a better way!?
elm = compile(validHTML)(scope);
expect(elm.scope().$$watchers[0].exp).toBe('name');

更新2: 正如我所说,这很脆弱!这个想法仍然有效,但在较新版本的AngularJS中,访问者已经从以下scope()变为isolateScope():

//this is STILL super brittle, is there a better way!?
elm = compile(validHTML)(scope);                       
expect(elm.isolateScope().$$watchers[0].exp).toBe('name');

Answer 1

请参阅angular element api docs.如果使用element.scope(),则获得在指令的scope属性中定义的元素范围.如果使用element.isolateScope(),则会获得整个隔离范围.例如,如果您的指令看起来像这样:

scope : {
 myScopeThingy : '='
},
controller : function($scope){
 $scope.myIsolatedThingy = 'some value';
}

然后在测试中调用element.scope()将返回

{ myScopeThingy : 'whatever value this is bound to' }

但是如果你调用element.isolateScope(),你就会得到

{ 
  myScopeThingy : 'whatever value this is bound to', 
  myIsolatedThingy : 'some value'
}

从角度1.2.2或1.2.3开始就是如此,不确定.在以前的版本中,您只有element.scope().

Answer 2

你可以做到var isolateScope = myDirectiveElement.scope()获得隔离范围.

你真的不需要测试$ watch被调用了..这比测试你的应用更多测试angularjs.但我想这只是问题的一个例子.