I am writing a jasmine test for my DetailCtrl. I have 10 json file each with file names like this

1.json

2.json

3.json

in my data folder

Here is my Detail Ctrl

backpagecontrollers.controller('DetailCtrl', function($scope, $stateParams, $http) {

  $http.get('data/' +  $stateParams.listingId + '.json').success(function(data) {

      $scope.extrainfo = data; 

  });

}); 

The detail controller is fetching each 1.json, 2.json, 3.json file from my data folder.

Here is a part of my route

.state('listingdetail', {

      url: /listings/:listingId,

      templateUrl: partials/detail.html,

      controller: 'DetailCtrl'

    })

Lets head back to the test, I injected both the $stateParams and the $state into the test.

I want to test that for each json file above the images exist inside my json file.
I am setting the httpbackend to get the local host url plus the listingId from the $stateparams which I configured as part of the routes but the listingId is coming back as undefined. Am I suppose to inject something else into my test?

describe('Detail Ctrl', function() {



      var scope, ctrl, httpBackend, stateparams, listingId; 



      beforeEach(angular.mock.module(backpageApp));

      beforeEach(angular.mock.inject(function($controller, $rootScope, _$httpBackend_,    $stateParams, $state) {

        httpBackend = _$httpBackend_;

        stateparams = $stateParams; 

        listingId = stateparams.listingId;



        httpBackend.expectGET('http://localhost:8000/#/listings/' + listingId).respond([{id: 1 }, {id: 2}, {id:3}, {id:4}, {id:5}, {id:6}, {id:7}, {id:8}, {id:9}, {id:10}]);

        scope = $rootScope.$new(); 

        ctrl = $controller(DetailCtrl, {$scope:scope}); 

      }));



       it('the images for each listing should exist', function() {

        httpBackend.flush(); 

        expect(scope.images).toBe(true)

      });

    });

I am getting this error

Error: Unexpected request: GET data/undefined.json

    Expected GET http://localhost:8000/#/listings/undefined