Unit test stateParams in controller test with Angular - angularjs

Question

I have a basic controller that uses $stateParams.
angular.module('example')
.controller('SampleCtrl', ['$stateParams',
function($stateParams) {
var vm = this;
vm.isSomething = ($stateParams.isSomething === 'true') ? true : false;
}
]);
In my unit test, I need to set the $stateParams.isSomething to true in one test, and false in another test.
describe('SampleCtrl Test', function() {
var ctrl, scope, $stateParams;
// set default stateParams
$stateParams = { isSomething: 'false' };
beforeEach(function(){
inject(function($rootScope, $controller){
scope = $rootScope.$new();
ctrl = $controller('SampleCtrl', {
$scope: scope,
$stateParams: $stateParams
});
});
});
describe('when isSomething is false', function() {
it('should be false', function() {
expect(ctrl.isSomething).toBe(false);
});
});
describe('when isSomething is true', function() {
beforeEach(function() {
$stateParams.isSomething = 'true';
});
it('should be true', function() {
// THIS IS FAILING
expect(ctrl.isSomething).toBe(true);
});
});
});
How can I properly mock different states of $stateParams for different tests?

Answer 1

I think you would need to instantiate the controller again with the updated scope object.
You also have a few naming issues as well, see the comments in the code below.
DEMO
describe('SampleCtrl Test', function() {
var ctrl, scope, $stateParams, $controller;
// set default stateParams
// you have called it 'something' in your controller not 'isSomething'
$stateParams = { something: 'false' };
beforeEach(function(){
// load module
module('example');
inject(function($rootScope, _$controller_){
scope = $rootScope.$new();
// angular removes the _'s for you so you can call it $controller
$controller = _$controller_;
ctrl = $controller('SampleCtrl', {
$scope: scope,
$stateParams: $stateParams
});
});
});
describe('when isSomething is false', function() {
it('should be false', function() {
expect(ctrl.isSomething).toBe(false);
});
});
describe('when isSomething is true', function() {
beforeEach(function() {
// you have called it 'something' in your controller not 'isSomething'
$stateParams.something = 'true';
// instantiate a new controller with the updated $stateParams object
ctrl = $controller('SampleCtrl', {
$scope: scope,
$stateParams: $stateParams
});
});
it('should be true', function() {
// THIS IS FAILING
expect(ctrl.isSomething).toBe(true);
});
});
});

Answer 2

The issue you are having is that the beforeEach of the describe('when isSomething is true') evaluates after the beforeEach of the describe('SampleCtrl Test'), i.e. the controller is already instantiated when the $stateParams values are changed. As Matt wrote in his answer you need to instantiate the controller after the change has taken place.
I usually use a simple workaround to this. Since the beforeEach is instantiated after the controller, I usually write an empty it-statement wherein the incorrect stateParams were sent to the controller and ignore that one. For all preceeding it-statements the change to stateParams changes will have taken place and the controller will then use the correct variables:
describe('when isSomething is true', function() {
beforeEach(function() {
$stateParams.isSomething = 'true';
});
it('should take one iteration to set the state parameter', function() {
// do nothing as the controller will not use the new $stateParams yet
});
it('should be true', function() {
// THIS IS NO LONGER FAILING
expect(ctrl.isSomething).toBe(true);
});
});
While not the most beautiful solution it seems to be the simplest