I'm trying to unit test a (child) controller of an AngularJS 1.5 (with Webpack) component that requires a parent component and a controller from another module.
Child controller structure:
function ChildController () {
var vm = this;
vm.searchText = '';
vm.submit = function() {
var data = {};
data['srch'] = vm.searchText;
vm.parentCtrl.submitTextSearch(data);
};
}
module.exports = ChildController;
Child component:
var template = require('./child.html');
var controller = require('./child.controller');
var childComponent = {
require: {
parentCtrl: '^parent'
},
template: template,
controller: controller,
controllerAs: 'vm'
};
module.exports = childComponent;
So what I would like to do is to mock out the parentCtrl that's required in the childController's submit()-function. I've been unable to find how to actually do this. I've found some similar child-parent directive solutions and tried those, e.g. injecting the parent controller through fake html-element as described in this child-parent directive example and basically the same stackoverflow solutions with no results. My problems differs at least in the fact that the child and parent controller are in different modules. And I suppose scope-tricks are not that much Angular 1.5-style?
The skeleton of my Jasmine test without my failed mock attempts:
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();
})
})
})
That results in TypeError: Cannot read property 'submitTextSearch' of undefined
. What exactly should I do to mock the parent controller out? With my limited experience in Angular I'm out of ideas.
Aucun commentaire:
Enregistrer un commentaire