How to unit test angularjs controller with $location service

Question

I am trying to create a simple unit test that tests my show function.

I get the following error:

TypeError: Object #<Object> has no method 'show'

It seems like $rootScope isn't the scope of the controller?

Here's my controller:

function OpponentsCtrl($scope, $location) {
    $scope.show = function(url) {
        $location.path(url);
    }
}
OpponentsCtrl.$inject = ['$scope', '$location'];

Here's my controller unit test:

describe('OpponentsCtrl', function() {
    beforeEach(module(function($provide) {
        $provide.factory('OpponentsCtrl', function($location){
            // whatever it does...
        });
    }));

    it('should change location when setting it via show function', inject(function($location, $rootScope, OpponentsCtrl) {
        $location.path('/new/path');
        $rootScope.$apply();
        expect($location.path()).toBe('/new/path');

        $rootScope.show('/test');
        expect($location.path()).toBe('/test');
    }));
});

"Unit test" is two words, just wanted to point it out. Glad you found a solution. — Alex Ross
– Alex Ross, Commented Dec 2, 2012 at 4:20

simonvogensen · Accepted Answer · 2012-12-01 21:59:11Z

65

This is how my test ended up working.

describe('OpponentsCtrl', function() {
    var scope, rootScope, ctrl, location;

    beforeEach(inject(function($location, $rootScope, $controller) {
        location = $location;
        rootScope = $rootScope;
        scope = $rootScope.$new();
        ctrl = $controller(OpponentsCtrl, {$scope: scope});
    }));

    it('should change location when setting it via show function', function() {
        location.path('/new/path');
        rootScope.$apply();
        expect(location.path()).toBe('/new/path');

        // test whatever the service should do...
        scope.show('/test');
        expect(location.path()).toBe('/test');

    });
});

answered Dec 1, 2012 at 21:59

simonvogensen

1,0321 gold badge8 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mgilson Over a year ago

By the way, you can feel free to accept your own answer. It looks like, to date, it has helped 20 people :-).

Andrzej Rehmann Over a year ago

don't you have to mock $httpBackend? i get "Error: Unexpected request: GET No more request expected". I need to mock it.

cassi.lup Over a year ago

I second mgilson -- accept this one as the correct answer. After a thorough search, this is what made it work for me! Lots of thanks!

Pablo Palacios Over a year ago

You really should accept as the correct answer, it helped me a lot.

LondonAppDev · Accepted Answer · 2016-11-08 15:32:26Z

20

Why don't you simply use a spyOn function?

describe('OpponentsCtrl', function() {

    var location;

    beforeEach(module(function($provide) {
        $provide.factory('OpponentsCtrl', function($location){
            location = $location;
        });
    }));

    it('should change location when setting it via show function', inject(function() {    
        spyOn(location, 'path');    
        expect(location.path).toHaveBeenCalledWith('/new/path');
    }));
});

Hope this helps!

edited Nov 8, 2016 at 15:32

LondonAppDev

9,7819 gold badges68 silver badges96 bronze badges

answered Oct 25, 2013 at 17:30

felipekm

2,9305 gold badges34 silver badges45 bronze badges

2 Comments

Katana24 Over a year ago

Why do you have the inject in the test if you aren't using it? I assume this is just left over from when you did?

MIWMIB Over a year ago

@Katana24, I have removed the inject. Please peer review the changes if you like.

Daniil Moskovtsov · Accepted Answer · 2015-01-12 21:01:33Z

I prefer to mock location and services as then it's a unit (not integration) test:

'use strict';
describe('flightController', function () {
  var scope;
  var searchService;
  var location;

  beforeEach(module('app'));
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    mockSearchService();
    mockLocation();
    createController($controller);
  }));

  it('changes location to month page', function () {
    searchService.flightToUrl.and.returnValue('Spain/Ukraine/December/1');
    scope.showMonth();
    expect(location.url).toHaveBeenCalledWith('search/month/Spain/Ukraine/December/1');
  });

  function mockSearchService() {
    searchService = jasmine.createSpyObj('searchService', ['flightToUrl']);
  }

  function mockLocation() {
    location = jasmine.createSpyObj('location', ['url']);
  }

  function createController($controller) {
    $controller('flightController', {
      $scope: scope,
      searchService: searchService,
      $location: location
    });
  }
});

Cheers

Collectives™ on Stack Overflow

How to unit test angularjs controller with $location service

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related