बाल घटकों को अनदेखा करते समय कोणीय 1.5 इकाई परीक्षण घटक

Question

मैं कोणीय 1.5 में एक घटक के लिए एक इकाई परीक्षण लिखने की कोशिश कर रहा हूं। मैं उस घटक और उसके डोम नोड्स का परीक्षण करना चाहता हूं। इस घटक में एक बाल घटक है जो काफी जटिल है।

मेरा लक्ष्य इकाई घटक को संकलित किए बिना बाहरी घटक का परीक्षण करना है।

चूंकि मैं डीओएम का परीक्षण करना चाहता हूं, इसलिए इस परीक्षण के लिए $ घटक नियंत्रक का उपयोग करने के लिए पर्याप्त नहीं है।

यहाँ मैं प्राप्त करना चाहते हैं की एक छोटी सी उदाहरण है:

घटक कोड:

it('my-component should render username', function() { 
    var template = '<my-component username="username"></my-component>', 
    element, 
    scope, 
    date; 

    scope = $rootScope.$new(); 
    scope.username = 'John'; 

    element = $compile(template)(scope); 
    scope.$digest(); 

    username = element.find('span'); 
    expect(username.text()).to.be.equal('John'); 
}); 

मेरी कॉम्प्लेक्स घटक: मेरे घटक के लिए

angular.module('app').component('myComponent', { 
    bindings: { 
    username: '<', 
    }, 
    template: ` 
    <span>{{ $ctrl.username }}</span> 
    <my-complex-component /> 
    ` 
    controller: function() {} 
}); 

यूनिट परीक्षण तत्काल नहीं होना चाहिए। इसे टेम्पलेट में प्रतिरोध करना चाहिए जैसा कि यह है। यूनिट टेस्ट में तत्व बनाना

<span>John</span> 
<my-complex-component /> 

क्या ऐसा करने का कोई तरीका है?

Answer 1

यह परीक्षण करने के लिए एक तरह से, लेकिन अंतिम परिणाम होगा नहीं है:

<span>John</span> 
<ng-transclude></ng-transclude> 

घटक कोड:

angular.module('app').component('myComponent', { 
    enter code herebindings: { 
    username: '<', 
    }, 
    template: ` 
    <span>{{ $ctrl.username }}</span> 
    <ng-transclude></ng-transclude> 
    `, 
    transclude: true, // Added property 
    controller: function() {} 
}); 

आप देख सकते हैं मैं नष्ट कर दिया <my-complex-component>, और बदले <ng-transclude> गयी।

इसका मतलब है कि आप बाहर से अपनी जानकारी जोड़ सकते हैं और इसे एनजी-ट्रांसफर के स्थान पर इंजेक्शन दिया जाएगा।

आपका मुख्य html में उदाहरण इस के लिए:

<my-component> 
    <my-complex-component></my-complex-component> 
</my-component> 

तरीका है कि आप शुरू से ही चाहते थे में डोम में होगा:

<span>John</span> 
<my-complex-component></my-complex-component> 

के बाद कि आपकी परीक्षण काम करना चाहिए।

मुझे आशा है कि यह उत्तर वही है जो आप चाहते थे और यह आपकी मदद करेगा।

Answer 2

Here is a very good explanation वर्तमान घटक के तहत पूरे पेड़ को प्रस्तुत किए बिना किसी घटक का परीक्षण कैसे करें।

तुम क्या चाहते

उथले प्रतिपादन कहा जाता है (बच्चे घटक के पूरे टेम्पलेट प्रतिपादन से बचने)

और कोणीय 1.5 इसे बाहर के- the- बॉक्स प्रदान नहीं करता है।

यदि आप उपरोक्त लिंक को देखते हैं, तो Wojciech Zawistowski दिखाता है कि उथले प्रतिपादन को प्राप्त करने के लिए नीचे सहायक का उपयोग कैसे करें।

export function componentSpyOn(name) { 
    function componentSpy($provide) { 
    componentSpy.bindings = []; 

    $provide.decorator(name + 'Directive', ($delegate) => { 
     let component = $delegate[0]; 

     component.template = ''; 
     component.controller = class { 
     constructor() { 
      componentSpy.bindings.push(this); 
     } 
     }; 

     return $delegate; 
    }); 
    } 

    return componentSpy; 
} 

Answer 3

आप एक खाली मॉड्यूल के साथ इकाई परीक्षण में बाल घटक मॉड्यूल परिभाषा को ओवरराइट कर सकते हैं।

// Unit Test Parent component 
describe('Unit Testing: myComponent Component',() => { 

    beforeEach(() => { 
    // overwrite module 
    angular.module('myComplexComponent', []); 
    module('myComponent'); 
    }); 
}); 

अब माता-पिता घटक अभी भी इंजेक्षन और बच्चे घटक प्रस्तुत करना करने की कोशिश करेंगे, लेकिन जैसा कि इस बच्चे घटक पूरी तरह से खाली है कुछ नहीं होगा।