AngularJS Unit testing controller with $state.go a

Question

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});
    })
  }

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();
}));

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********************

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

and

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

Here is my test code:

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);
});

Answer 1

Your afterEach is failing because you have pending http requests.

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.

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

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

Answer 2

The error means $scope.user is undefined. You can mock it before creating the controller.

$scope = $rootScope.$new();
$scope.user = { username: 'foo' };