我想知道如何使用 Karma 测试 Angular.js + UI 路由器？

我定义了以下状态:其中有两个 resolve，它们获取一些数据并为 Controller 准备数据。 (来自 Ember 背景，这很有意义。)

$stateProvider
  .state('users', {
    resolve: {
      getData: function (User) {
        return User.query().$promise
      },
      stateModels: function (getData) {
        var models = {}
        models.users = getData
        return models
      }
    },
    url: '/',
    templateUrl: '/views/users/index.html',
    controller: 'UsersIndexCtrl'
  })

我们的 UserIndexCtrl 看起来像:(它采用 resolved stateModels 并将其分配给 $scope，以便 View 可以使用它)

app.controller('UsersIndexCtrl', [
  '$scope', '$state', 'stateModels',
  function ($scope, $state, stateModels) {

    $scope.users = stateModels.users

  }])

这在浏览器中运行良好，我看到了正确的结果。然而，当涉及到测试时，它给我带来了奇怪的错误。

这是一个 Karma 单元测试示例:

describe('controllers', function () {

  var $httpBackend
    , $rootScope
    , $scope
    , $state
    , $httpBackend
    , $controller

  beforeEach(module('app'))

  beforeEach(inject(function ($injector) {
    $state = $injector.get('$state')
    $rootScope = $injector.get('$rootScope')
    $httpBackend = $injector.get('$httpBackend')
    $scope = $rootScope.$new()
    $controller = $injector.get('$controller')
  }))

  it('UserIndexCtrl should exist', inject(function () {
    $httpBackend
      .expect('GET', '/api/users')
      .respond(200, {users: [ {}, {}, {} ]})

    $state.go('users')
    $rootScope.$apply()

    $controller('AdminZonesIndexCtrl', { $scope: $scope, $state: $state });
    $rootScope.$apply()
    assert.equal($scope.users.length, 3)
  }))

})

我看到了:

[$injector:unpr] Unknown provider: stateModelsProvider <- stateModels
http://errors.angularjs.org/1.3.0-build.2937+sha.4adc44a/$injector/unpr?p0=stateModelsProvider%20%3C-%20stateModels
Error: [$injector:unpr] Unknown provider: stateModelsProvider <- stateModels
http://errors.angularjs.org/1.3.0-build.2937+sha.4adc44a/$injector/unpr?p0=stateModelsProvider%20%3C-%20stateModels

这里的想法是:

• 我们模拟 API 请求，以便对/api/users 的 GET 请求将返回一个包含 3 个对象的数组。
• 我们进入名为 users 的状态
• 我们希望看到 $scope.users 应该是一个包含 3 个对象的数组。
• 从这个测试中，我们测试了路由器中定义的解析，以及 Controller 正确分配解析的对象。

谢谢 账单

最佳答案

你的错误的原因是你首先转换到一个状态，它用一个新的范围实例化你的 UsersIndexCtrl，但随后创建另一个 Controller 实例(同样，一个新的范围)测试之内。两者相互独立，在第二种情况下，stateModels 是一种未知/不可用的依赖项。

因此，虽然您的想法是有效的测试关注点，但在尝试同时断言所有这三个问题时，您实际上是在单元测试环境中执行端到端测试。您不应该这样做 - 这样做会产生对以下内容的脆弱依赖:

• 属于“用户”状态的 Controller
• 在状态转换的某处调用了一个特定的 http 请求
• stateModels 依赖项绑定(bind)到范围。

在这些断言中，只有最后一个与 Controller 有关。 Controller 的单元测试不关心它是如何/何时被实例化的或者 stateModels 依赖项来自哪里，它们只关心 Controller 自己的行为。所以，让我们把这个行为分开:

Controller 单元测试

您的第一个测试应简化为以下内容:

it('binds the users to the scope', function(){
   var stateModels = [{}, {}, {}];
   $controller('UserIndexCtrl', {$scope: $scope, stateModels: stateModels});
   assert.equal($scope.users, stateModels);
});

请注意，随着您添加更多测试，您可能希望将 Controller 实例化移动到 beforeEach block 中。

测试路由

测试路由的关注点实际上是应用程序行为的关注点，对此您应该遵从 Protractor .但是，如果您特别想对状态执行单元测试，最好通过测试状态本身的配置来实现。例如:

it('resolves the stateModels dependency', function() {
   var state = $state.get('users');
   assert.isDefined(state.resolve.stateModels); 
   // perform assertion that stateModels function resolves to what is expected
   // Note: any such assertion should stub any dependency being used, to ensure
   // we are testing in isolation.
});

尽管如此，我个人并不选择对路由/路由配置进行单元测试，而是通过使用 Protractor 进行端到端测试来获得此类覆盖。

关于javascript - 使用 Angular.js + UI 路由器进行 Karma 测试，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24783932/