Question

我已经搜索了互联网，但没有找到适合我的解决方案。情况是我有一个带有控制器的组件。我可以使用Jasmine来测试是否已创建控制器，也可以毫无问题地调用$ onInit挂钩。

但是，当我尝试调用使用返回承诺的服务功能的组件功能时，事情会惨败。我正在使用以下版本：

AngularJS v1.5.11 茉莉花v3.3.0 业力v3.1.4

我的简化组件是：

(function ()
{
  "use strict";

  angular
    .module("app")
    .component("MyComponent", {
      controller: "MyController"
    })
    .controller("MyController", MyController);

  function MyController(MyService)
  {
    "ngInject";

    var vm = this;
    vm.$onInit = $onInit;
    vm.onPaginate = onPaginate;

    function $onInit()
    {
      vm.data = [];
    }

    function onPaginate()
    {
      getData();
    }

    function getData()
    {
      MyService.getData().then(onComplete);

      function onComplete(response)
      {
        vm.data = response.list;
      }
    }
  }
})();

函数MyService.getData查询REST API来检索一些数据。它将返回一个承诺，在收到数据时将解决该承诺。这一切都在应用程序中起作用。

我想测试MyController.onPaginate函数并编写了以下Jasmine测试规范：

describe("MyComponent: MyController", function ()
{
  var $componentController, $rootScope, $q, $scope;

  var componentBindings = {
  };
  var data = {
    list: [{
      "id": 23,
    }],
    total_count: 1
  };

  var mock_MyService = {
    getData: function ()
    {
      return $q.resolve(data);
    }
  };

  beforeEach(function ()
  {
    angular.mock.module("app", function ($provide)
    {
      $provide.value("MyService", mock_MyService);
    });

    angular.mock.inject(function ($injector)
    {
      $q = $injector.get("$q");
      $componentController = $injector.get("$componentController");
      $rootScope = $injector.get("$rootScope");
      $scope = $rootScope.$new();
    });
  });

  it("should retrieve data", function ()
  {
    var $ctrl = $componentController("MyComponent", { $scope: $scope, MyService: mock_MyService }, componentBindings);
    $ctrl.$onInit();
    $ctrl.onPaginate($ctrl.tableState);

    $scope.$apply();

    expect($ctrl.data.length).toEqual(1);
  });
});

运行此命令时出现错误：

TypeError: e is not a function
        at <Jasmine>
        at b.$apply (node_modules/angular/angular.min.js:147:388)
        at UserContext.<anonymous> (myComponent.spec.js:...)
        at <Jasmine>

那我该如何正确测试呢？

使用Jasmine进行的AngularJS组件控制器测试因服务返回诺言而失败

0 个答案: