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

问题描述

什么是一个好办法，单元测试AngularJS隔离范围

的jsfiddle显示单元测试

指令段

 范围：{名称：'= myGreet}，
    链接：功能（范围，元素，ATTRS）{
        //显示初始状态
        迎（元素，范围[attrs.myGreet]）;        //监听模型中的更改
        范围。$腕表（attrs.myGreet，功能（名称）{
            迎（元素名）;
        }）;
    }
 

我要确保指令监听的变化 - 这样做的不可以与一个孤立的工作范围：

 它（'应注意在模型的变化'，函数（）{
        VAR榆树;
        //安排
        spyOn（范围，'$表）;
        //法案
        榆树=编译（validHTML）（范围）;
        //断言
        期望.toBe（1）（范围$ watch.callCount）;
        预计.toHaveBeenCalledWith（'名'，jasmine.any（功能））（$范围手表）;
    }）;
 

更新：
我把它用，如果预期的观察家被添加到子范围检查工作，但它非常脆弱，可能使用一个未公开的方式访问（又名如有变更，恕不另行通知！）。

  //这是超级脆，有没有更好的办法！？
榆树=编译（validHTML）（范围）;
期待（elm.scope（）$$观察家[0] .EXP）.toBe（'名'）;
 

更新2：
正如我所说，这是脆！这个想法仍然有效，但在AngularJS的较新版本的访问已经从修改范围（）到 isolateScope（）：

  //这仍然是超脆，有没有更好的办法！？
榆树=编译（validHTML）（范围）;
期待（elm.isolateScope（）$$观察家[0] .EXP）.toBe（'名'）;
 

解决方案

请参见角元素API文档。如果您使用 element.scope（）你，你在你的指令范围属性定义的元素的范围。如果您使用 element.isolateScope（）您得到整个隔离范围。
例如，如果你的指令看起来像这样：

 范围：{
 myScopeThingy：'='
}，
控制器：函数（$范围）{
 $ scope.myIsolatedThingy ='某个值';
}
 

然后调用您的测试element.scope（）将返回

  {myScopeThingy：任何值这势必'}
 

但是，如果你调用element.isolateScope（），你会得到

  {
  myScopeThingy：任何值这势必'，
  myIsolatedThingy：一些价值
}
 

这是因为角度1.2.2或1.2.3，不知道确切的事实。
在previous版本中，你只有element.scope（）。

What is a good way to unit test isolated scope in AngularJS

JSFiddle showing unit test

Directive snippet

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

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

解决方案

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

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

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

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

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

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屋！