在Jasmine和AngularJS中测试控制器时，“没有待清除请求”错误

Question

使用Jasmine，我正在尝试测试 controllers.js 中定义的函数，这些函数调用 services.js 中的服务。此示例是AngularJS网站上Angular Phonecat教程的扩展版本。

这是我目前得到的测试错误：

  

没有待处理的待处理请求！

如何在依赖服务的给定控制器中测试函数？

---

controller.js

以下是我要测试的功能：

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

productControllers.controller('ProductListCtrl', ['$scope', 'products', 'ProductSvc', 
    function ($scope, products, ProductSvc) {
    $scope.searchResult = products;

    // default values
    $scope.orderProp = 'name';
    $scope.pageSize = '3';

    /*----- This is the function I want to test -----*/
    $scope.setPage = function (pageNo) {
        $scope.searchResult = ProductSvc.query({query: $scope.query, pageSize: $scope.pageSize, currentPage: pageNo-1});
    };
}]);

services.js

只要ProductSvc发出查询，就会调用此服务。

var productServices = angular.module('productServices', ['ngResource']);

productServices.factory('ProductSvc', ['$resource',
    function($resource){
        return $resource('http://responsive.companyName.com:9001/rest/v1/apparel-uk/products', {pageSize:3}, {
    query: {method:'GET', isArray:false}
    });
}]);

controllersSpec.js

这里我正在尝试运行目前尚未通过的测试。

beforeEach(module('productServices'));
describe('ProductListCtrl', function(){
    var scope, ctrl, $httpBackend, products;

    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
      $httpBackend = _$httpBackend_;

      scope = $rootScope.$new();
      ctrl = $controller('ProductListCtrl', {
          $scope: scope,
          products: {"products":[{name: 'Shirt'}, {name: 'Hat'}]}
      });
    }));

    it('should have a list of products on setPage', function() {
        $httpBackend.expectGET('http://responsive.companyName.com:9001/rest/v1/apparel-uk/products').
            respond({"products":[{name: 'Short'}]});

        $httpBackend.flush();

        expect(scope.setPage(1)).toEqualData({"products":[{name: 'Short'}]});
});

Answer 1

我想我看到了你错过的东西：

您想通过声明$scope.setPage内容来测试$scope.searchResult功能，对吧？

我修改了你的规范。

<强> constrollerSpec.js

beforeEach(module('productServices'));
describe('ProductListCtrl', function(){
    var scope, ctrl, $httpBackend, products;

    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
      $httpBackend = _$httpBackend_;

      scope = $rootScope.$new();
      ctrl = $controller('ProductListCtrl', {
          $scope: scope,
          products: {"products":[{name: 'Shirt'}, {name: 'Hat'}]}
      });
      //run a scope digest before testing
      scope.$digest();
    }));

    it('should have a list of products on setPage', function() {
        //arrange
        $httpBackend.expectGET('http://responsive.companyName.com:9001/rest/v1/apparel-uk/products').
            respond({"products":[{name: 'Short'}]});

        //act
        $scope.setPage(1);
        $httpBackend.flush();

        //assert
        expect($scope.searchResult).toEqualData({"products":[{name: 'Short'}]});
    });