11

親コンポーネントと別のモジュールのコントローラーを必要とする AngularJS 1.5 (Webpack を使用) コンポーネントの (子) コントローラーを単体テストしようとしています。

子コントローラーの構造:

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 要素を介して親コントローラーを挿入し、基本的に同じスタックオーバーフローソリューションを結果なしで挿入しました。私の問題は、少なくとも子コントローラーと親コントローラーが異なるモジュールにあるという点で異なります。そして、スコープ トリックは 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: Cannot read property 'submitTextSearch' of undefined. 親コントローラーをモックアウトするにはどうすればよいですか? Angular での経験が限られているため、アイデアがありません。

4

3 に答える 3

4

あなたの場合parentCtrl、コンポーネントの依存関係として追加しているので、テストするには、親コンポーネントもモックしてコントローラーに割り当てる必要があります。したがって、次のようにする必要があります。

beforeEach(inject(function(_$componentController_) {
  controller = _$componentController_('child');
  parentCtrl = _$componentController_('parent');
  controller.parentCtrl = parentCtrl;
}))
于 2016-08-10T15:46:22.527 に答える
1

以下のコードを使用すると初期化され、動作する Jasmine ユニット テストPlunkerを確認してください。

var ctrP = $componentController('parentComp');
var ctrl = $componentController('childComp', {}, {
  parentCtrl: ctrP
});

そして、あなたのテストケースは以下のようになるはずです:

'use strict';

describe('component: heroDetail', function() {
  var $componentController, $compile, $rootScope;

  beforeEach(module('plunker'));
  beforeEach(inject(function(_$componentController_) {
    $componentController = _$componentController_;
  }));

  it('should expose a `hero` object', function() {
    var ctrP = $componentController('parentComp');
    console.log(ctrP);
    var ctrl = $componentController('childComp', {}, {
      parentCtrl: ctrP
    });
    console.log(ctrl);
    ctrl.submit('some data');
    expect(ctrl.parentCtrl.searchText).toEqual('some data');

  });
});
于 2017-03-07T05:19:02.177 に答える