चाकिंग बाल घटक - कोणीय 2

Question

परीक्षण करते समय आप बच्चे के घटक का नकल कैसे करते हैं?

<section id="selected-container" class="container-fluid"> 
    <hr/> 
    <product-settings></product-settings> 
    <product-editor></product-editor> 
    <product-options></product-options> 
</section> 

और घटक घोषणा इस तरह दिखता है:

import { Component, Input }    from '@angular/core'; 

import { ProductSettingsComponent } from '../settings/product-settings.component';          
import { ProductEditorComponent } from '../editor/product-editor.component';          
import { ProductOptionsComponent } from '../options/product-options.component';           

@Component({ 
    selector: 'product-selected', 
    templateUrl: './product-selected.component.html', 
    styleUrls: ['./product-selected.component.scss'] 
}) 
export class ProductSelectedComponent {} 

इस घटक वास्तव में अन्य घटकों में रहते हैं और करने के लिए सिर्फ एक जगह है मैं एक माता पिता के घटक कहा जाता product-selected जिसका टेम्पलेट इस तरह दिखता है शायद कोई अन्य कार्य नहीं होगा।

Error: Template parse errors: 
    'product-editor' is not a known element: 
    1. If 'product-editor' is an Angular component, then verify that it is part of this module. 
    2. If 'product-editor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
     <hr/> 
     <product-settings></product-settings> 
     [ERROR ->]<product-editor></product-editor> 

मैं बच्चे के घटकों का एक मज़ाक उड़ाया संस्करण लोड करने के लिए कोशिश की है, लेकिन पता नहीं कैसे:

लेकिन जब मैं परीक्षण मैं निम्नलिखित टेम्पलेट त्रुटि मिलती है की स्थापना की, सभी तीन घटकों के लिए बार-बार करने के लिए - मैंने जो उदाहरण देखा है, वे केवल माता-पिता को ओवरराइड करते हैं और बाल घटकों का भी उल्लेख नहीं करते हैं। तो मैं इसे करने के बारे में कैसे जा सकता हूँ?

Answer 1

आम तौर पर, यदि आपके पास उस घटक के दृश्य के अंदर उपयोग किया गया घटक है जिसका आप परीक्षण कर रहे हैं और आप उन घटकों को घोषित नहीं करना चाहते हैं, क्योंकि वे ** से बचने के लिए अपनी निर्भरताएं ले सकते हैं, कुछ ज्ञात तत्व नहीं है: ** त्रुटि आपको NO_ERRORS_SCHEMA का उपयोग करना चाहिए।

import { NO_ERRORS_SCHEMA }   from '@angular/core'; 

TestBed.configureTestingModule({ 
     declarations: declarations, 
     providers: providers 
     schemas:  [ NO_ERRORS_SCHEMA ] 
    }) 

डॉक्स के आधार पर:

परीक्षण मॉड्यूल के स्कीमा मेटाडाटा को NO_ERRORS_SCHEMA जोड़े गैर मान्यता प्राप्त तत्वों और विशेषताओं की अनदेखी करने के संकलक बताने के लिए। अब आपको अप्रासंगिक घटकों और निर्देशों की घोषणा नहीं करनी है।

अधिक इस पर: https://angular.io/docs/ts/latest/guide/testing.html#!#shallow-component-test

Answer 2

मैंने इस प्रश्न को पोस्ट किया ताकि मैं एक उत्तर पोस्ट कर सकूं क्योंकि मैंने एक या दो दिन के लिए संघर्ष किया था। यहाँ कैसे आप यह कर दिया गया है:

let declarations = [ 
    ProductSelectedComponent, 
    ProductSettingsComponent, 
    ProductEditorComponent, 
    ProductOptionsComponent 
]; 

beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: declarations, 
      providers: providers 
     }) 
     .overrideComponent(ProductSettingsComponent, { 
      set: { 
       selector: 'product-settings', 
       template: `<h6>Product Settings</h6>` 
      } 
     }) 
     .overrideComponent(ProductEditorComponent, { 
      set: { 
       selector: 'product-editor', 
       template: `<h6>Product Editor</h6>` 
      } 
     }) 
     .overrideComponent(ProductOptionsComponent, { 
      set: { 
       selector: 'product-options', 
       template: `<h6>Product Options</h6>` 
      } 
     }); 

     fixture = TestBed.createComponent(ProductSelectedComponent); 
     cmp = fixture.componentInstance; 
     de = fixture.debugElement.query(By.css('section')); 
     el = de.nativeElement; 
    }); 

आप श्रृंखला के लिए बच्चे घटकों से प्रत्येक के लिए overrideComponent समारोह है।

Answer 3

NO_ERRORS_SCHEMA के बारे में सावधान। आइए डॉक्स के दूसरे भाग का उद्धरण दें:

NO_ERRORS_SCHEMA के साथ शैलो घटक परीक्षण जटिल टेम्पलेट्स के यूनिट परीक्षण को बहुत सरल बनाते हैं। हालांकि, संकलक अब आपको गलत वर्तनी या दुरुपयोग घटकों और निर्देशों जैसी गलतियों पर अलर्ट नहीं करता है।

मुझे लगता है कि यह परीक्षण एक परीक्षा लिखने के प्रयोजनों के विपरीत है। और भी इतना है कि बुनियादी घटक का नकल करना मुश्किल नहीं है।

एक दृष्टिकोण अभी तक यहां नहीं बताई उन्हें config समय में घोषित करने के लिए बस है:

@Component({ 
    selector: 'product-settings', 
    template: '<p>Mock Product Settings Component</p>' 
}) 
class MockProductSettingsComponent {} 

@Component({ 
    selector: 'product-editor', 
    template: '<p>Mock Product Editor Component</p>' 
}) 
class MockProductEditorComponent {} 

... // third one 

beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     ProductSelectedComponent, 
     MockProductSettingsComponent, 
     MockProductEditorComponent, 
     // ... third one 
     ], 
     providers: [/* your providers */] 
    }); 
    // ... carry on 
}); 

Answer 4

मिले एक लगभग पूर्ण समाधान है, अगर किसी को एक घटक refactors कि यह भी सही ढंग से त्रुटियों फेंक देते हैं।

npm install mock-component 

अब आप अपने .spec.ts में आप कर सकते हैं

import { MockComponent } from 'mock-component'; 
import { ChildComponent } from './child.component.ts'; 
... 
    beforeEach(
async(() => { 
    TestBed.configureTestingModule({ 
    imports: [FormsModule, ReactiveFormsModule, RouterTestingModule], 
    declarations: [ 
     ComponentUnderTest, 
     MockComponent(ChildComponent), 
     ... 

यह एक नई अज्ञात घटक, @Input() एक ही चयनकर्ता और @Output() ChildComponent का गुण है कि बनाता है, लेकिन कोई कोड संलग्न नहीं है।

मान लें आपके ChildComponent एक @Input() childValue: number है, कि, परीक्षण के तहत अपने घटक में ही है <app-child-component [childValue]="inputValue" />

केवल नकारात्मक पक्ष यह है मैं अब तक पाया है, कि आप अपने परीक्षण में By.directive(ChildComponent) उपयोग नहीं कर सकते, के रूप में, है परिवर्तन टाइप किया, लेकिन आप की तरह तो

it('sets the right value on the child component`,()=> { 
    component.inputValue=5; 
    fixture.detectChanges(); 
    const element = fixture.debugElement.query(By.css('app-child-component')); 
    expect(element).toBeTruthy(); 

    const child: ChildComponent = element.componentInstance; 

    expect(child.childValue).toBe(5); 
});