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

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）被发现像愚蠢的错误第一个。或者你会有写javascript的痛苦经验。 jslint会检测到你使用的变量不存在于范围中。