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

IT技术 javascript unit-testing angularjs jasmine angularjs-directive
2021-02-20 16:22:52

在 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');
4个回答

请参阅角度元素 api 文档如果您使用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'
}

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

您可以公开在 $watch 上运行的函数,然后对其进行监视。在指令中,设置“scope.myfunc = function()...”,然后在 $watch 中执行“$scope.$watch('myName', scope.myfunc);”。现在在测试中,您可以从隔离的范围中获取 myFunc 并对其进行监视。
2021-04-21 16:22:52
但是你在哪里监视 $watch 方法?
2021-05-05 16:22:52
v1.2.3 feat(jqLit​​e): 公开类似于 scope() 的isolateScope () getter github.com/angular/angular.js/commit/...
2021-05-12 16:22:52
@mcv 我发现我需要做 element.children().isolateScope()
2021-05-14 16:22:52
对我不起作用。element.isolateScope()返回undefinedelement.scope()返回一个不包含我放在我的范围内的所有东西的范围。
2021-05-15 16:22:52

您可以这样做var isolateScope = myDirectiveElement.scope()以获得隔离范围。

您实际上并不需要测试 $watch 是否被调用......这比测试您的应用程序更能测试 angularjs。但我想这只是问题的一个例子。

我不确定我是否同意它是“测试角度”我不是在测试 $watch 是否有效,而只是该指令是“连接”到角度的属性。
2021-04-24 16:22:52
是的,这是一个人为的例子,但我很感兴趣是否有一种干净的方法来测试隔离范围。在这种情况下,打破封装并将方法放在作用域上是行不通的,因为在调用之前没有钩子可以添加间谍。
2021-05-13 16:22:52
@AndyJoslin,出于好奇,为什么要创建一个isolateScope变量?请参阅 Ang 对此egghead 视频的评论(egghead.io/lessons/angularjs-unit-testing-directive-scope):从 Angular 1.2 开始,要检索隔离范围,需要使用code.angularjs.org/1.2element.isolateScope()代替element.scope() 。 0/docs/api/angular.element
2021-05-19 16:22:52
还有 daniellmb,测试这个的方法是公开你的greet函数并监视它,并检查它是否被调用 - 而不是 $watch。
2021-05-21 16:22:52

将逻辑移动到单独的控制器,即:

//will get your isolate scope
function MyCtrl($scope)
{
  //non-DOM manipulating ctrl logic here
}
app.controller(MyCtrl);

function MyDirective()
{
  return {
    scope     : {},
    controller: MyCtrl,
    link      : function (scope, element, attrs)
    {
      //moved non-DOM manipulating logic to ctrl
    }
  }
}
app.directive('myDirective', MyDirective);

并像测试任何控制器一样测试后者 - 直接传递范围对象(请参阅此处的控制器 部分以获取示例)。

如果您需要在测试中触发 $watch ,请执行以下操作:

describe('MyCtrl test', function ()
{
  var $rootScope, $controller, $scope;

  beforeEach(function ()
  {
    inject(function (_$rootScope_, _$controller_)
    {
      // The injector unwraps the underscores (_) from around the parameter names when matching
      $rootScope = _$rootScope_;
      $controller = _$controller_;
    });

    $scope = $rootScope.$new({});
    $scope.foo = {x: 1}; //initial scope state as desired
    $controller(MyCtrl, {$scope: $scope}); //or by name as 'MyCtrl'
  });

  it('test scope property altered on $digest', function ()
  {
    $scope.$digest(); //trigger $watch
    expect($scope.foo.x).toEqual(1); //or whatever
  });
});

我不确定隔离范围是否可行(尽管我希望有人证明我错了)。在指令中创建的隔离范围是隔离的,因此指令中的 $watch 方法与您在单元测试中监视的范围不同。如果您将 scope: {} 更改为 scope: true,则指令范围将继承原型并且您的测试应该通过。

我想这不是最理想的解决方案,因为有时(很多时候),隔离范围是一件好事。