कोणीय 4 स्थिरता घटक डोम में बनी रहती है के दौरान जैस्मीन परीक्षण

Question

जब अचल ब्राउज़र में जैस्मीन चल मैंने देखा है कि TestBed स्थिरता घटक डोम में नष्ट हो जाता है नहीं और बनी रहती है के बाद परीक्षण समाप्त हो:

यहाँ एक परीक्षण किया है घटक:

@Component({ 
    selector: 'test-app', 
    template: `<div>Test</div>`, 
}) 
class Test {} 

और एक परीक्षण (plunk)।

let component; 
    let fixture; 
    let element; 

    beforeAll(() => { 
    TestBed.resetTestEnvironment(); 

    TestBed.initTestEnvironment(
     BrowserDynamicTestingModule, 
     platformBrowserDynamicTesting() 
    ); 
    }); 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [Test], 
    }) 
    .compileComponents(); 

    fixture = TestBed.createComponent(Test); 
    component = fixture.componentInstance; 
    element = fixture.debugElement.query(By.css('div')).nativeElement; 

    fixture.detectChanges(); 
    }); 

    afterEach(() => { 
    fixture.destroy(); 
    }); 

    it('should compile Test',() => { 
    expect(element).toBeTruthy(); 
    }); 

क्यों Test घटक उदाहरण डोम से न निकले और यह कैसे तय किया जाना चाहिए?

डीओएम में स्थिरता घटक क्यों जोड़े गए हैं? क्या उन्हें एंगुलरजेएस में $rootElement जैसे डीओएम से अलग किया जा सकता है?

Answer 1

मुझे लगता है कि कोणीय आपके परीक्षण निष्पादन के बारे में अधिक जानकारी प्राप्त करने में आपकी सहायता के लिए स्वचालित रूप से इसे हटा नहीं देता है। इसे निकालने के लिए आप बस afterEach का उपयोग करें:

beforeEach(() => { 
    fixture = TestBed.createComponent(MyComponent); 
    comp = fixture.componentInstance; 
    debugElement = fixture.debugElement; 
    element = debugElement.nativeElement; 
}); 

afterEach(() => { 
    document.body.removeChild(element); 
}); 

Answer 2

कृपया निम्न समस्याओं पर एक नज़र डालें:

1) सबसे पहले आप afterEach में

fixture.destroy(); 

बुला रहे हैं, तो यह है के बाद इसे अनुभाग कहा जाता है। अर्थात। में अनुभाग स्थिरता अभी भी नष्ट नहीं हुई है

2) आप किस कोड से पता लगाते हैं कि तत्व अभी भी डोम में मौजूद है? एक और दृष्टिकोण से: क्यों जैस्मीन/ब्राउज़र द्वारा उस तत्व को हटाया जाना चाहिए (किस कारण से जैस्मीन/ब्राउज़र बनाना चाहिए)? मैं निम्नलिखित उपयोगकाजों का सुझाव दे सकता हूं:

2.1) एक घटक दूसरे में उपयोग किया जाता है और इसे कुछ बदलावों से बनाया/नष्ट किया जाना चाहिए। अर्थात। ngIf या ngSwitchCase:

<parent-component> 
    <child-component *ngIf="someChangeInComponent1"></child-component> 
</parent-component> 

या

<parent-component [ngSwitch]="type"> 
    <child-component *ngSwitchCase="'something'"></child-component> 
</parent-component> 

2,2) मार्ग बदल दिया गया है (लेकिन यह AFAIK इकाई-परीक्षण)

3) वर्तमान कोड प्राप्त करता है के लिए एक विषय नहीं है केवल एक बार डीओएम तत्व का संदर्भ। की तरह कुछ होना चाहिए:

beforeEach(() => { 
    ... 
    element = ... 
}); 

it('...',() => { 
    ... 
    fixture.detectChanges(); 
    element = ... // try to get element again <--------------------- here 
}) 

4) यदि आप ngOnDestroy() परिभाषित किया गया है लेकिन औजार OnDestroy नहीं किया जाता है तो इसके लिए की तुलना में NPM रन फाहा के लिए एक विषय और भी है की तरह त्रुटियों को खोजने के लिए कोशिश कर रहे हैं यूनिट परीक्षण (उपयोग-जीवन-चक्र-इंटरफ़ेसtslint.json) पर एक नज़र डालें।NPM रन फाहा चलाने के बाद आप सिर्फ देखेंगे:

Implement lifecycle hook interface OnDestroy for method ngOnDestroy in class ... 

यह न केवल इकाई परीक्षण के लिए लेकिन बहुत tslint में कोई त्रुटि नहीं है करने के लिए एक अच्छा अभ्यास है।

Answer 3

एक अधिक संक्षिप्त समाधान:

afterEach(() => { 
    element.remove() 
});