具有许多依赖性的角度控制器测试

时间:2014-12-16 05:35:08

标签: javascript angularjs

我正在通过构建一个小型房地产应用程序来学习AngularJS。由于我是AngularJS的新手,因此我对很多依赖项的控制器测试知之甚少。我谷歌,但发现很少的信息。任何帮助,将不胜感激。

以下测试失败:

it('should create "proterties" model with 1 property fetched from xhr', function() {
  $httpBackend.flush();
  scope.properties = scope.getResultsPage(1);

  expect(scope.properties).toEqual(propertiesData());
});

ControllersSpecs.js:

'use strict';

/* jasmine specs for controllers go here */
describe('Realty controllers', function() {

  beforeEach(module('realtyApp'));
  beforeEach(module('angularUtils.directives.dirPagination'));
  beforeEach(module('realtyFilters'));
  beforeEach(module('realtyServices'));


  describe('PropertyListCtrl', function(){
    var scope, ctrl, $httpBackend;

    function propertiesData() {
      return {
        "total": 1,
        "data":[{
          "id": "26",
          "property_type": "apartment",
          "amount": "600",
          "address": "26 Marsh St, Wolli Creek",
        }]
      }
    };

    // Learn more about dependency injection for testing
    // https://docs.angularjs.org/tutorial/step_05
    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {

      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('/api/properties?page=1').
          respond(propertiesData());

      scope = $rootScope.$new();
      ctrl = $controller('PropertyListCtrl', {$scope: scope});
    }));


    it('should create "proterties" model with 1 property fetched from xhr', function() {
      $httpBackend.flush();
      scope.properties = scope.getResultsPage(1);


      // scope.properties = propertiesData();
      expect(scope.properties).toEqual(propertiesData());
    });
  });
});

主应用模块:

'use strict';

/* App Module */

var realtyApp = angular.module('realtyApp', [
  'ngRoute',
  'angularUtils.directives.dirPagination',
  'realtyControllers',
  'realtyFilters',
  'realtyServices'
]);

财产清单控制器

'use strict';

/* Controllers */

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

realtyControllers.controller('PropertyListCtrl', ['$scope', 'Property', 'propertyImage', 'propertyData',
  function($scope, Property, propertyImage, propertyData) {
    $scope.beds = propertyData.beds();
    $scope.bathrooms = propertyData.bathrooms();
    $scope.garageSpaces = propertyData.garageSpaces();

    // Paginate properties
    $scope.totalProperties = 0;
    $scope.propertiesPerPage = 10; // this should match however many results your API puts on one page


    $scope.pagination = {
        current: 1
    };



    $scope.getResultsPage = function getResultsPage(pageNumber) {
      // The following will generate : 
      // http://realty.dev/api/properties?page=1
      Property.get({page:pageNumber}, function(result) {
        $scope.properties = result.data;
        $scope.totalProperties = result.total;
      });
    }

    $scope.getResultsPage(1);

    $scope.pageChanged = function(newPage) {
        $scope.getResultsPage(newPage);
    };

    $scope.isCarSpaceAvailable = function(carSpace) {
      if (carSpace != 0) {
        return true;
      }
      return false;
    }

    $scope.getPropertyImage = function(photo) {
      return propertyImage.jpg(photo.name);
    }

    $scope.clearFilters = function() {
      $scope.filter = {};
    }        
  }]);

修改1:

我收到以下错误:

enter image description here

1 个答案:

答案 0 :(得分:0)

当你这样做的时候     scope.properties = scope.getResultsPage(1);

你会影响getResultsPage返回的属性,并且不会从该函数返回任何内容。

你可以尝试(我认为应该在方法后调用flush):

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

  $httpBackend = _$httpBackend_;
  $httpBackend.whenGET('/api/properties?page=1').
      respond(propertiesData());
    /**** your code *****/
}));


it('should create "proterties" model with 1 property fetched from xhr', function() {

  $httpBackend.expectGET('/api/properties?page=1');
  scope.getResultsPage(1);
  $httpBackend.flush();


  // scope.properties = propertiesData();
  expect(scope.properties).toEqual(propertiesData());
});