2017-03-22 11 views
10

मैं एक घटक एक है कि एक घटक बी का उपयोग किया है, सी, डी अपने टेम्पलेट में:अपने स्वयं के निर्भरताओं के साथ घोंसला वाले घटकों के साथ कोणीय 2 घटक का परीक्षण कैसे करें? (TestBed.configureTestingModule)

###template-compA.html 

    <comp-b></comp-b> 
    <comp-c [myinput]="obj.myinput"></comp-c> 
    <comp-d ></comp-d> 

... आदि

आसान बनाने के लिए, मान लें कि उनके केवल एक ही निर्देश है चलो घटक एक में:

###template-compA.html 

    <comp-b></comp-b> 

मेरे COMP-बी का अपना निर्भरता (सेवाओं या अन्य कंप्यूटर अनुप्रयोग) है।

मैं कंप्यूटर अनुप्रयोग-एक इस तरह से परीक्षण करना चाहते हैं:

TestBed.configureTestingModule({ 
    declarations: [comp-A], 
    imports: [ReactiveFormsModule], 
}).overrideComponent(FAQListComponent, { 
    set: { 
    providers: [ 
     { provide: comp-AService, useValue: comp-AListSVC } 
    ] 
    } 
}) 
    .compileComponents(); 

वह ठीक से काम नहीं होता। तो मैं करता हूं:

TestBed.configureTestingModule({ 
    declarations: [comp-A, comp-B], 
    imports: [ReactiveFormsModule], 
}).overrideComponent(FAQListComponent, { 
    set: { 
    providers: [ 
     { provide: comp-AService, useValue: comp-AListSVC } 
    ] 
    } 
}) 
    .compileComponents(); 

यह काम भी नहीं करता है क्योंकि कंप-बी की अपनी निर्भरता नहीं है। और यहां मैं उलझन में हूं, अगर मैं हर बार अन्य सभी घटकों को आयात और रीमेक करना चाहता हूं तो मैं यूनिट टेस्ट कैसे कर सकता हूं? यह काम की एक बड़ी राशि की तरह दिखता है। क्या कोई और तरीका है? नेस्टेड घटक के साथ घटक का परीक्षण करने का सबसे अच्छा अभ्यास क्या होगा जिनकी अपनी निर्भरताएं हों?

बहुत बहुत धन्यवाद,

स्टीफन।

+2

क्या आपने कोशिश की है चीमा: [NO_ERRORS_SCHEMA] '? https://blog.nrwl.io/essential-angular-testing-192315f8be9b#.vygkcekn0 – yurzui

उत्तर

7

आप अपने परीक्षण में किसी भी तरह से comp-b संदर्भित करने के लिए आप अपने TestBed विन्यास को schemas: [NO_ERRORS_SCHEMA] जोड़ सकते हैं या comp-A ओवरराइड कर सकते हैं की जरूरत नहीं है 'के बाद रों टेम्पलेट और comp-b

के लिए टैग को हटाएं यदि आपको comp-b संदर्भित करने की आवश्यकता है तो आपको विशेष रूप से ओवरराइड में इसकी निर्भरता प्रदान करने की आवश्यकता नहीं हो सकती है।

में सेट करना केवल तभी जरूरी है जब निर्भरता घटक में ही प्रदान की जाती है। (आप comp-A.ts में एक प्रदाताओं सूची है)

मान लीजिए कि comp-b एक comp-AService और comp-AService की जरूरत है अपने comp-A ओवरराइड में प्रदान की जा रही है चलो, क्योंकि comp-bcomp-A का एक बच्चा यह comp-AService इसके लिए प्रदान की जाती होगा।

यदि आप इन निर्भरताओं को अपने app.module में या कहीं भी घटक से कहीं अधिक प्रदान कर रहे हैं तो आपको ओवरराइड करने की आवश्यकता नहीं है।उदाहरण के लिए comp-b की जरूरत है comp-AService & someOtherService जो दोनों अपने app.module अपने TestBed विन्यास में उपलब्ध कराई जा रही ऐसा दिखाई दे सकता:

TestBed.configureTestingModule({ 
    declarations: [comp-A, comp-B], 
    imports: [ReactiveFormsModule], 
    providers: [ 
    { provide: comp-AService, useValue: comp-AListSVC }, 
    { provide: someOtherService, useValue: someOtherServiceSVC } 
    ] 
}) 

संपादित करें:

आप यहाँ उथले घटक परीक्षण के बारे में अधिक पढ़ सकते हैं:

https://angular.io/guide/testing#shallow-component-tests-with-no_errors_schema

+1

'NO_ERROR_SCHEMA' क्या करता है? क्या इसका मतलब यह है कि आप सभी बच्चों के घटक को अनदेखा करना चाहते हैं: https://medium.com/@voorkanter/there-is-a-way-to-ingore-all-child-components-while-unit-testing-a-component -ceddeb56cc0c? – skofgar

+1

@sk_gar 'NO_ERROR_SHEMA' संकलक को अज्ञात तत्वों और विशेषताओं को अनदेखा करने के लिए कहता है। आप यहां परीक्षणों में इसका उपयोग करने के बारे में अधिक पढ़ सकते हैं: https://angular.io/docs/ts/latest/testing/#!#shallow-component-test मैंने इस लिंक को शामिल करने के लिए उत्तर अपडेट किया है – Borquaye

+0

जानकारी जोड़ने के लिए धन्यवाद! – skofgar

1

एक @yurzui की सलाह:

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [comp-a], 
     schemas: [NO_ERRORS_SCHEMA] 
    }) 
     .compileComponents(); 
    })); 
संबंधित मुद्दे

 संबंधित मुद्दे