Injecting $stateParams for angular unit testing testing with karma

Question

Lets start with the controller code:

angular
.module('hc.hotelContent')
.controller('NameLocationController', nameLocationCtrlFn); //Todo change hotelDataService
nameLocationCtrlFn.$inject = ['$stateParams', 'hotelDataService'];

  function nameLocationCtrlFn($stateParams, hotelDataService) {
       var vm = this,
       hotelId = $stateParams.hotelId;
       vm.Keys = {
        Name: 'Name',
        Street: 'Street',
        City: 'City',
        State: 'State',
        Zip: 'Zip',
        Country: 'Country'
    }
}

i do have some more code but its irellevant logic, my tests work fine when i do not inject the $stateParmas to the controller.
so heres the Test file:

    describe('nameLocation component Controller', function () {
    var $controller,
            hotelDataServiceMock,
           stateParams,
            hotelId = "4611";
Keys = {
        Name: 'Name',
        Street: 'Street',
        City: 'City',
        State: 'State',
        Zip: 'Zip',
        Country: 'Country'
    }//@
    beforeEach(module('hc.hotelContent'));
        beforeEach(module('hc.app.core'));
        beforeEach(inject(injectFn));
       function injectFn(_$controller_, $stateParams, _hotelDataService_) {
            $controller = _$controller_;
            stateParams = $stateParams;

            hotelDataServiceMock = _hotelDataService_;
        } //controller injection fn

        function initCtrl() {
            controller = $controller('NameLocationController', {
                $stateParams: stateParams,
                hotelDataService: hotelDataServiceMock
            });
        }
describe('inserting a new hotel', function () {
        it('should populate Keys object', function () {
            var controller = initCtrl();
            expect(controller.Keys).toEqual(Keys);
        });
   }
}

im getting the Unknown Provider error. which has nothing to yet with my controller, all im doing in the controller is getting the variable set to the $stateParams variable. how do i work with this injection? my karma.conf file is configured to load jquery,angular,ui-router,mocks in this particular order and after that all the js and html

edit: i did see this post this post before but im using ui-router in my main app module, so ive added beforeEach(module('hc.app')); to the code but still nothing

Answer 1

Had a similar issue testing $stateParams in a directive:

Try injecting $state ,

Then you can use: $state.go('namedurl', {your_params_here}) $rootScope.$digest() or $apply in your controller

Which will update the $stateParams . If you try injecting $stateParams as a mock with a provider they just get overwritten by the $state service.

Answer 2

Is the problem that in injectFn your parameter name $stateParams doesn't match the variable you referring to ( _$stateParams_ )? _$stateParams_ is undefined in injectFn .

If that doesn't work, do you have ui-router injected into your module as well, and has that module been loaded in your test? There was a similar problem in this question .

If you want to just test that the controller uses $stateParams.hotelId , you could also mock out $stateParams with something like this:

function injectFn(_$controller_, _hotelDataService_, $provide) {
    $controller = _$controller_;
    hotelDataServiceMock = _hotelDataService_;
    $provide.value('$stateParams', {
        hotelId: 'someId',
    });
}

function initCtrl() {
    return $controller('NameLocationController', {
         hotelDataService: hotelDataServiceMock,
    });
}