将$stateParams和$state注入到jasmine angular js测试中，获取undefined。

Question

将$stateParams和$state注入到jasmine angular js测试中，获取undefined。

6

我正在为我的DetailCtrl编写jasmine测试。我有10个JSON文件，每个文件名都像这样

1.json
2.json
3.json

在我的数据文件夹中

这是我的详细控制器

backpagecontrollers.controller('DetailCtrl', function($scope, $stateParams, $http) {
  $http.get('data/' +  $stateParams.listingId + '.json').success(function(data) {
      $scope.extrainfo = data; 
  });
});

详细控制器正在从我的数据文件夹中获取每个1.json、2.json、3.json文件。

以下是我的路由的一部分：

.state('listingdetail', {
      url: "/listings/:listingId",
      templateUrl: "partials/detail.html",
      controller: 'DetailCtrl'
    })

让我们回到测试中，我将 $stateParams 和 $state 都注入了测试中。我想测试上面的每个JSON文件中是否存在图像。我正在设置httpbackend以获取来自 $stateparams 的listingId与本地主机URL相加，而我已经在路由的配置中进行了设置，但是 listingId 返回为未定义。我需要在我的测试中注入其他内容吗？

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)
      });
    });

我遇到了这个错误。

Error: Unexpected request: GET data/undefined.json
    Expected GET http://localhost:8000/#/listings/undefined

- Jngai1297

2个回答

1

添加stateMock.js文件，然后包含该模块

beforeEach(function() {
    module('stateMock');
    module('mean');
    module('mean.system');
    module('mean.companies');
  });

这是stackMock.js的代码: github stateMock代码

参考文献: UI-router与$httpbackend单元测试干扰，angular js。

- Enkode

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JeffB · Accepted Answer

我认为您可能误解了路由器如何与控制器配合工作。当您对控制器进行单元测试时，您不会执行路由或进入ui-router状态。那些状态和路由是在应用程序正常运行时触发控制器执行的东西。但是在单元测试中，您是使用$controller显式地执行控制器的。因此，您完全跳过了路由部分。这意味着您需要模拟ui-router通常为您创建的对象$stateparams。

describe('Detail Ctrl', function() {

  var scope, ctrl, httpBackend, stateparams, listingId; 

  beforeEach(angular.mock.module("backpageApp"));
  //don't need to inject state or stateparams here
  beforeEach(angular.mock.inject(function($controller, $rootScope, _$httpBackend_) {
    httpBackend = _$httpBackend_;
    stateparams = { listingId: 1 }; //mock your stateparams object with your id

    //you should be expecting the get request url from the controller, not the route
    httpBackend.expectGET('data/' + stateparams.listingId + '.json').respond([{id: 1 }, {id: 2}, {id:3}, {id:4}, {id:5}, {id:6}, {id:7}, {id:8}, {id:9}, {id:10}]);
    scope = $rootScope.$new(); 
    //pass your mock stateparams object to the controller 
    ctrl = $controller("DetailCtrl", {$scope:scope, $stateParams:stateparams}); 
  }));

   it('the images for each listing should exist', function() {
    httpBackend.flush(); 
    //I don't see images set in your controller, but you 
    //could check scope.extrainfo here
    expect(scope.images).toBe(true)
  });
});