使用angularjs和jasmine对客户端进行单元测试时,$ scope.alerts未定义

时间:2015-05-06 17:46:42

标签: angularjs unit-testing angularjs-scope jasmine karma-jasmine

我正在为我的控制器编写单元测试。我正在使用jasmine测试userSave()函数,并希望检查作为数组的$scope.alerts变量的内容。但$scope.alerts在离开userSave()函数时为空,因此我无法检查其内容。我不知道为什么它是空的,因为$scope.alerts是全局的。下面是我的控制器和测试用例的代码。

控制器

'use strict';

angular.module('myApp')
  .controller('RegisterCtrl', function ($scope, $http, $location) {
$scope.message = 'Register Route';

$scope.init = function () {
  $scope.inviteCode = $location.hash();
};
$scope.init();
$scope.master = {};

// Array to hold alert messages
$scope.alerts = [];

$scope.closeAlert = function (index) {
  $scope.alerts.splice(index, 1);
};

$scope.userSave = function (user) {
  /*jshint unused: false */
  $http.post('api/users/v1/', {
    'invite_code': $scope.inviteCode,
    'password': user.password,
    'last_name': user.lastName,
    'first_name': user.firstName
  }).success(function (data, status, headers, config) {
    $location.url($location.path());
    $location.path('/');
  }).error(function (data, status, headers, config) {
    if (status === 404) {
      $scope.alerts.push({
        type: 'danger',
        msg: 'Your invitation code has expired or is invalid, your registration will require a new one to be completed'
      });
    } else if (status === 204) {
      $scope.alerts.push({
        type: 'danger',
        msg: 'This email already exists, please click login and forgot your password to recover your password'
      });
    } else {
      $scope.alerts.push({
        type: 'danger',
        msg: 'There was an error registering'
      });
    }
  });
};
});

测试用例

   'use strict';

describe('Controller: RegisterCtrl', function () {

  // load the controller's module
  beforeEach(module('myApp'));

  var RegisterCtrl, scope, httpBackend,http;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope, $httpBackend,$http) {
    scope = $rootScope.$new();
    httpBackend = $httpBackend;
    http = $http;
    RegisterCtrl = $controller('RegisterCtrl', {
      $scope: scope
    });
  }));
  afterEach(function() {
    httpBackend.verifyNoOutstandingExpectation();
    httpBackend.verifyNoOutstandingRequest();
  });

it('should return a 404 for expired inviteCode', function () {
    var userClientPayload = {
      lastName: 'pav',
      firstName: 'nga',
      password: 'test'
    };
    var userServerPayload = {
      invite_code: 'expiredCode',
      last_name: 'pav',
      first_name: 'nga',
      password: 'test'
    };
    httpBackend.whenPOST('api/users/v1/',userServerPayload).respond(404);
    scope.inviteCode = 'expiredCode';
    scope.userSave(userClientPayload);
    //httpBackend.expectPOST('api/users/v1/',userServerPayload).respond(404);
    console.log(scope.alerts);
    expect(scope.alerts.type).toBe('danger');
    expect(scope.alerts.msg).toBe('Your invitation code has expired or is invalid, your registration will require a new one to be completed');
    httpBackend.flush();
  });
});

错误

Controller: RegisterCtrl should return a 404 for expired inviteCode FAILED
    Expected undefined to be 'danger'.
        at /Users/z001hm0/Documents/api_portal/developer-portal/client/test/unit/controllers/register.controller.spec.js:59
    Expected undefined to be 'Your invitation code has expired or is invalid, your registration will require a new one to be completed'.
        at /Users/z001hm0/Documents/api_portal/developer-portal/client/test/unit/controllers/register.controller.spec.js:60

1 个答案:

答案 0 :(得分:1)

$scope.alerts是一个数组,因此该行失败b / c数组没有type属性:

expect(scope.alerts.type).toBe('danger');

用以下内容替换上述行:

expect(scope.alerts.length).toBe(1);
expect(scope.alerts[0].type).toBe('danger');

修改

下一个问题是,在expect()之前,您正在拨打httpBackend.flush()。对flush()的调用是使测试中模拟服务器响应发生的原因,这将触发填充$scope.alerts的代码。

因此,如果我们翻转这些代码行,它将如下所示:

httpBackend.flush();
expect(scope.alerts.length).toBe(1);
expect(scope.alerts[0].type).toBe('danger');