कोणीय 1.5 यूनिट परीक्षण नियंत्रक जिसके लिए पैरेंट घटक के नियंत्रक की आवश्यकता होती है

Question

मैं एक कोणीय जेएस 1.5 (वेबपैक के साथ) घटक के एक (बच्चे) नियंत्रक का परीक्षण करने की कोशिश कर रहा हूं जिसके लिए एक मूल घटक और किसी अन्य मॉड्यूल से नियंत्रक की आवश्यकता होती है।

बाल नियंत्रक संरचना:

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 के प्रस्तुत() में आवश्यक है बाहर उपहास करने के लिए है - कार्य करते हैं। मैं वास्तव में ऐसा करने में असमर्थ हूं। मुझे कुछ समान बाल-अभिभावक निर्देश समाधान मिले हैं और उनको आजमाया है, उदाहरण के लिए this child-parent directive example में वर्णित नकली HTML-element के माध्यम से अभिभावक नियंत्रक को इंजेक्शन देना और मूल रूप से वही 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 का परिणाम है। माता-पिता नियंत्रक को नकल करने के लिए मुझे क्या करना चाहिए? कोणीय में मेरे सीमित अनुभव के साथ, मैं विचारों से बाहर हूं।

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}); 

और अपने बच्चे नियंत्रक में, पहले तत्काल स्कोप का उपयोग करके एक नया दायरा तुरंत चालू करें:

AngularJS documentation से

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

उदाहरण:

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'); 

    }); 
});