带有$ state.go和参数传入的AngularJS单元测试控制器 [英] AngularJS Unit testing controller with $state.go and params passed in

问题描述

我一直在尝试为Auth控制器编写单元测试，但无法克服此错误:

I've been trying to write a unit test for my Auth controller but I can't get past this error:

TypeError: Cannot read property 'username' of undefined

以下是我正在为其编写测试的控制器中的功能:

The following is the function in the controller that I am writing a test for:

  $scope.signup = function() {
    authFactory.signup($scope.user)
    .then(function (res) {
      $window.localStorage.setItem('token', res.token);
      $window.localStorage.setItem('current_user', res.username);
      $state.go('dashboard', {username: $scope.user.username});
    })
  }

以下是我的spec文件代码的一部分:

Below is part of the code for my spec file:

beforeEach(inject(function(_$rootScope_, _$window_, _$httpBackend_, authFactory, _$controller_, _$state_) {
  $rootScope = _$rootScope_;
  $window = _$window_;
  $httpBackend = _$httpBackend_;
  authFactory = authFactory;
  $scope = $rootScope.$new();
  $state = _$state_;

  var $controller = _$controller_;
  createController = function() {
    return $controller('AuthController', {
      $scope: $scope,
      $window: $window,
      $state: $state,
      authFactory: authFactory
    });
  };
  createController();
}));

带有$ state.go的行导致错误.老实说，我不完全确定为什么会引发此错误.我是否需要表示传递给$ state.go的参数才能清除此错误?那就是我一直在尝试的事情，但是没有运气.

The line with the $state.go is causing the error. Honestly, I'm not entirely sure why this error is being thrown. Do I need to represent the parameters passed into the $state.go in order to clear this error? That's what I have been trying to do but no luck.

******************** EDIT ********************

********************EDIT********************

我嘲笑$ state，如此处答案中所述:

I mocked the $state as explained in the answer here: UI-router interfers with $httpbackend unit test, angular js

现在，我遇到了以下错误:

Now, I am getting these errors:

Chrome 39.0.2171 (Mac OS X 10.10.1) AuthController "after each" hook FAILED

和

Error: Unexpected request: GET ./modules/main/main.html
No more request expected

这是我的测试代码:

describe('AuthController', function() {
 var createController;
 var $scope;
 var $rootScope;
 var state;
 var $httpBackend;
 var $window;

beforeEach(function() {
  module('stateMock');
  module('myApp');
});
beforeEach(inject(function(_$rootScope_, _$window_, _$httpBackend_, _$controller_, _$state_) {
  $rootScope = _$rootScope_;
  $window = _$window_;
  $httpBackend = _$httpBackend_;
  $scope = $rootScope.$new();
  state = _$state_;
  $scope.user = {username: 'foo'};


  var $controller = _$controller_;
  createController = function() {
    return $controller('AuthController', {
      $scope: $scope,
      $window: $window,
      state: state
    });
  };
  createController();
}));

afterEach(function() {
  $httpBackend.verifyNoOutstandingExpectation();
  $httpBackend.verifyNoOutstandingRequest();
  $window.localStorage.removeItem('token');
  $window.localStorage.removeItem('current_user');
});
it('should store a token in localStorage after signup', function() {
  var token = 'abcdefg';
  $httpBackend.expectPOST('/api/users/signup').respond({token: token});
  $scope.signup();
  $httpBackend.flush();
  state.expectTransitionTo('dashboard');
  state.ensureAllTransitionsHappened();
  expect($window.localStorage.getItem('token')).to.equal(token);
});

推荐答案

您的 afterEach 失败，因为您有待处理的http请求.

Your afterEach is failing because you have pending http requests.

我看到您正在注入 $ state ，在这种情况下，将实例化 $ state 并执行默认路由.这就是为什么要获取其中一个控制器 main.html 的模板的原因.

I see that you are injecting $state in which case $state will be instantiated and default route will be executed. This is why a template of one of your controllers main.html is being fetched.

要绕过此操作，请将 $ state 方法的 go()和 transitionTo()替换为虚拟变量:

To bypass this, replace go() and transitionTo() of $state methods with dummies:

beforeEach( inject( function ( _$state_ ) {
        state = _$state_;
        spyOn( state, 'go' );
        spyOn( state, 'transitionTo' );
    } ) );

这篇关于带有$ state.go和参数传入的AngularJS单元测试控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！