AngularJS Karma check url param is present

Question

I'm new to unit testing and trying to write a unit test for my app. My Route is :

{
    name: 'details',
    url: '/accounts/company/:companyId',
    controller: 'controllere',
    templateUrl: 'templateurl',
}

My Controller :

if (!$stateParams.companyId) {
    $scope.promise = $state.go('home');
} else {
    // get company details
}

In my unit test I need to test if "companyId" is present in the URL, then only proceed with the rest else redirect to "home". I tried this code but it fails everytime. I don't know what wrong I'm doing.

it('should respond to URL with params', function() {
    expect($state.href('/accounts/company/', { companyId: 'test-company' })).toEqual('#/accounts/company/test-company');
});

Everytime I run this test it says : Expected null to equal '#/accounts/company/test-company'.

Pankaj Parkar · Answer 1 · 2018-04-10T07:46:15.243

0

$state.href method expects stateName as in first parameter followed by parameters need to form URL and you've passed state URL in it, which is wrong.

expect(
   $state.href('details', { 
      companyId: 'test-company' 
   })
).toEqual('#/accounts/company/test-company')

I see something wrong with your approach to unit test this functionality, rather it should have been tested in different way. Like you should 1st calling the underlying method from the test case and check whether you get desired results or not.

Controller

function redirect() {
  if (!$stateParams.companyId) {
    $scope.promise = $state.go('home');
  } else {
    // get company details
  }
}
$scope.redirect = redirect;

spec.js

//test pseudo code
describe('should redirect correctly', function(){
   it('should redirect to details page when companyId is passed', function(){
      //arrange
      //TODO: please make sure, you avail useful dependency before using them  
      var $scope = $rootScope.$new(),
          mockParams = { companyId: 1 }
      $controller('myCtrl', {$scope: $scope, $stateParams: mockParams });

      //assert
      $scope.redirect();

      //act
      $scope.$apply(); //apply the changes
      expect($state.current.url).toEqual('#/accounts/company/test-company');

   })
})

edited Apr 10 '18 at 07:46

answered Apr 10 '18 at 06:33

Pankaj Parkar

134,766
23
234
299

Thank you @Pankaj Parker. Now it is not showing error. Do you think I'm doing the correct unit test. Do I need to test both the condition if true then proceed else redirect to "home". I don't know how to do that. – pkdq Apr 10 '18 at 06:44
@pkdq I think its not correct, please have a look at the updated answer. – Pankaj Parkar Apr 10 '18 at 07:00
Parker it says $scope.redirect(); is not a function. – pkdq Apr 10 '18 at 07:14
@pkdq I wrote pseudo code, that can be something else in your code.. What I meant by calling `$scope.redirect` is, call redirection logic and expect the URL will change to desired. Please map my psuedo code with your piece of code. – Pankaj Parkar Apr 10 '18 at 07:17
Parker I appreciate your help but I'm still not getting the point how to get this done. I'm very new to this today only I started scratching my head. – pkdq Apr 10 '18 at 08:47
@pkdq Can you provide me a plunker/fiddle of the same? – Pankaj Parkar Apr 10 '18 at 09:49
Parker I'm very close. Can you please let me know how to test $stateParam.companyId of controller is empty or not in my spec.js. – pkdq Apr 10 '18 at 11:17
You can mock `$stateParams` dependency likewise I suggested. and then test mocked(dummy values) `$stateParams`.. check [this post](https://stackoverflow.com/a/21318600/2435473) for implementation – Pankaj Parkar Apr 10 '18 at 12:23

AngularJS Karma check url param is present

1 Answers1