如何在 AngularJS 中对隔离范围指令进行单元测试 [英] How to Unit Test Isolated Scope Directive in AngularJS

问题描述

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

What is a good way to unit test isolated scope in 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);
        });
    }

我想确保指令正在侦听更改 - 这对于隔离范围不起作用:

I want to ensure the directive is listening for changes - this does not work with an isolated scope:

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

更新:我通过检查是否将预期的观察者添加到子作用域中使其正常工作，但它非常脆弱，并且可能以未记录的方式使用访问器(也称为更改，恕不另行通知！).

UPDATE: I got it to work by checking if the expected watchers were added to the child scope, but it's very brittle and probably using the accessors in an undocumented way (aka subject to change without notice!).

//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():

UPDATE 2: As I mentioned this is brittle! The idea still works but in newer versions of AngularJS the accessor has changed from scope() to isolateScope():

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

推荐答案

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

See angular element api docs. If you use element.scope() you get the element's scope that you defined in the scope property of your directive. If you use element.isolateScope() you get the entire isolated scope. For example, if your directive looks something like this :

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

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

Then calling element.scope() in your test will return

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

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

But if you call element.isolateScope() you'll get

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

从 angular 1.2.2 或 1.2.3 开始，这是正确的，不确定.在以前的版本中，您只有 element.scope().

This is true as of angular 1.2.2 or 1.2.3, not sure exactly. In previous versions you had only element.scope().

这篇关于如何在 AngularJS 中对隔离范围指令进行单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！