如何测试监视注入服务更改的控制器？

Question

我正在使用服务在控制器之间共享数据。如果服务上的值发生变化，我想更新我的控制器上的一些数据绑定。为此，我使用了 $scope.$watchCollection（因为我正在观看的值是一个简单的数组）。我无法弄清楚如何在 Jasmine + Karma 中进行测试。

这是一个简单的控制器 + 服务设置，类似于我在我的应用中所做的（但非常简化）：

var app = angular.module('myApp', []);

// A Controller that depends on 'someService'
app.controller('MainCtrl', function($scope, someService) {
  $scope.hasStuff = false;

  // Watch someService.someValues for changes and do stuff.
  $scope.$watchCollection(function(){
    return someService.someValues;
  }, function (){
    if(someService.someValues.length > 0){
      $scope.hasStuff = false;
    } else {
      $scope.hasStuff = true;  
    }

  });
});

// A simple service potentially used in many controllers
app.factory('someService', function ($timeout, $q){
  return {
    someValues: []
  };
});

这是我尝试过的一个测试用例（但不起作用）：

describe('Testing a controller and service', function() {
  var $scope, ctrl;
  var mockSomeService = {
    someValues : []
  };

  beforeEach(function (){
    module('myApp');

    inject(function($rootScope, $controller) {
      $scope = $rootScope.$new();

      ctrl = $controller('MainCtrl', {
        $scope: $scope,
        someService: mockSomeService
      });
    });
  });

  it('should update hasStuff when someService.someValues is changed', function (){
    expect($scope.hasStuff).toEqual(false);

    // Add an item to someService.someValues
    someService.someValues.push(1);

    //$apply the change to trigger the $watch.
    $scope.$apply();

    //assert
    expect($scope.hasStuff).toEqual(true);
  });

});

我想我的问题是双重的：

如何正确模拟控制器中使用的服务？ 然后如何测试 $watchCollection 函数是否正常工作？

这是上面代码的一个 plunkr。 http://plnkr.co/edit/C1O2iO

Answer 1

您的测试（或您的代码）不正确。

http://plnkr.co/edit/uhSdk6hvcHI2cWKBgj1y?p=preview

mockSomeService.someValues.push(1); // instead of   someService.someValues.push(1);

和

   if(someService.someValues.length > 0){
      $scope.hasStuff = true;
    } else {
      $scope.hasStuff = false;  
    }

或者你的期望没有意义

我强烈建议您对 javascript (jslint/eslint/jshint) 进行 lint，以发现第一个类似的愚蠢错误。否则，您将在编写 javascript 时遇到痛苦的经历。 jslint 会检测到您使用的变量在范围内不存在。