angularjs - Angular 1.5 单元测试 Controller 需要父组件的 Controller

Question

我正在尝试对 AngularJS 1.5(带有 Webpack)组件的(子) Controller 进行单元测试，该组件需要父组件和来自另一个模块的 Controller 。

子 Controller 结构:

function ChildController () {
  var vm = this;

  vm.searchText = '';

  vm.submit = function() {
    var data = {};
    data['srch'] = vm.searchText;
    vm.parentCtrl.submitTextSearch(data);
  };
}

module.exports = ChildController;

子组件:

var template = require('./child.html');
var controller = require('./child.controller');

var childComponent = {
  require: {
    parentCtrl: '^parent'
  },
  template: template,
  controller: controller,
  controllerAs: 'vm'
};

module.exports = childComponent;

所以我想做的是模拟childController的submit()函数中所需的parentCtrl。我一直无法找到如何实际做到这一点。我找到了一些类似的子父指令解决方案并尝试了这些解决方案，例如通过假 HTML 元素注入(inject)父 Controller ，如 this child-parent directive example 中所述和基本相同stackoverflow solutions没有结果。我的问题至少在于子 Controller 和父 Controller 位于不同的模块中。我想范围技巧并不是 Angular 1.5 风格的？

我的 Jasmine 测试的框架，没有失败的模拟尝试:

describe('child component', function() {
  describe('child controller', function() {
    var controller;
    beforeEach(angular.mock.module('child'));
    beforeEach(inject(function(_$componentController_) {
      controller = _$componentController_('child');
    }))
    it('should work', function() {
      controller.searchText = "test";
      controller.submit();
    })
  })
})

这会导致TypeError:无法读取未定义的属性“submitTextSearch”。我到底应该做什么来模拟父 Controller ？由于我在 Angular 方面的经验有限，我没有什么想法。

Answer 1

在您的情况下，您将添加 parentCtrl 作为组件的依赖项，因此为了测试它，您还必须模拟父组件并将其分配给 Controller 。所以你需要做类似的事情:

beforeEach(inject(function(_$componentController_) {
  controller = _$componentController_('child');
  parentCtrl = _$componentController_('parent');
  controller.parentCtrl = parentCtrl;
}))