Угловой контрольный контроллер 1.5, который требует контроллера родительского компонента

Question

Я пытаюсь выполнить тестирование тестового (дочернего) контроллера компонента 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; 

Так что я хотел бы сделать это, чтобы дразнить вне parentCtrl, что требуется в подать() в childController в - функции. Я не смог найти, как это сделать на самом деле. Я нашел некоторые аналогичные решения для дочерних и родительских директив и попробовал их, например. вводя родительский контроллер через поддельный HTML-элемент, как описано в this child-parent directive example, и в основном тот же stackoverflow solutions без каких-либо результатов. Мои проблемы различаются, по крайней мере, тем, что дочерний и родительский контроллеры находятся в разных модулях. И я полагаю, что фокус-трюки не так сильно Угловой 1.5-стиль?

скелет моего теста Жасмин без моих неудачных попыток фиктивных:

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, у меня нет идей.

Answer 1

В вашем случае вы добавляете parentCtrl в качестве зависимости вашего компонента, поэтому для его проверки вы должны также макетировать родительский компонент и назначить его контроллеру. Таким образом, вы должны были бы сделать что-то вроде:

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

Answer 2

1. Решение

В тесте экземпляр родительский контроллер с новой областью действия:

mainScope = $rootScope.$new(); 
$controller('ParentController', {$scope: mainScope}); 

и в вашем дочернем контроллере, создайте новую область действия с использованием ранее созданной области:

childScope = mainScope.$new(); 
$controller('ChildController', {$scope: childScope}); 

Пример из AngularJS documentation:

describe('state', function() { 

    var mainScope, childScope, grandChildScope; 

    beforeEach(module('myApp')); 

    beforeEach(inject(function($rootScope, $controller) { 
     mainScope = $rootScope.$new(); 
     $controller('MainController', {$scope: mainScope}); 
     childScope = mainScope.$new(); 
     $controller('ChildController', {$scope: childScope}); 
     grandChildScope = childScope.$new(); 
     $controller('GrandChildController', {$scope: grandChildScope}); 
    })); 

    it('should work', function() { 
     grandChildScope.searchText = "test"; 
     grandChildScope.submit(); 
    }); 
}); 

2.Решение

Детский структура контроллера:

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 = { 
     bindings: { 
     searchText: 'test' 
     }, 
     template: template, 
     controller: controller, 
     controllerAs: 'vm' 
    }; 

module.exports = childComponent; 

var ChildController = $componentController('childComponent', null, {...}); 
ChildController.$onInit(); 
expect(ChildController.searchText).to.equal('test'); 
expect(ChildController.submit()).to.equal('*expected result value should come here*'); 

REFRENCES:

AngularJS documentation - Testing Controllers

AngularJS documentation - $componentController

Unit Testing Angular Components with $componentController

Answer 3

Используя приведенный ниже код будет получить его инициализации и проверьте рабочий модульный тест жасмин 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'); 

    }); 
});