Wie Unit-Test, wenn eine Winkel 2 Komponente eine andere Komponente

Question

enthält Ich bin ganz neu in Winkel 2.

ich eine Komponente haben, die wiederum einige andere Komponenten in seiner Vorlage hat.

Wie schreibe ich Komponententests, um zu überprüfen, ob meine Elternkomponente aus anderen Komponenten besteht.

Eine Probe zu nennen oder mich zu einer Ressource zu verweisen wäre wirklich hilfreich.

MyComponent.ts:

import { Component } from '@angular/core'; 
@Component({ 
selector: 'my-component', 
templateUrl: `<div> 
<other-component></other-component> 
</div>` 
}) 
export class MyComponent{ 

} 

OtherComponent.ts:

import { Component } from '@angular/core'; 
@Component({ 
selector: 'other-component', 
templateUrl: `<div> 
<h1>Other Component</h1> 
</div>` 
}) 
export class OtherComponent{ 

} 

Answer 1

Um zu testen, ob eine Komponente, wenn kompiliert, andere Komponenten enthält:

• die Komponente Injizieren Sie testen
• die Komponenten Kind Injizieren
• die Komponente Mutter erstellen
• Änderungen erkennen
• Verwenden Sie querySelector oder querySelectorAll, um die untergeordneten Komponenten

zu finden

Normalerweise überprüfe ich nur, ob das Element vorhanden ist, und führe dann weitere Tests in der Spezifikation für die einzelnen untergeordneten Komponenten durch.

import { TestBed, async } from '@angular/core/testing'; 

import { AppComponent } from './app.component'; 
import { OtherComponent } from './other/other.component'; 

describe('AppComponent',() => { 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     AppComponent, 
     OtherComponent 
     ], 
    }).compileComponents(); 
    })); 

    it('should create the app', async(() => { 
    const fixture = TestBed.createComponent(AppComponent); 
    const app = fixture.debugElement.componentInstance; 
    expect(app).toBeTruthy(); 
    })); 

    it('should have the other component', async(() => { 
    const fixture = TestBed.createComponent(AppComponent); 
    fixture.detectChanges(); 
    const compiled = fixture.debugElement.nativeElement; 
    expect(compiled.querySelector('app-other')).not.toBe(null); 
    })); 
}); 

Überprüfung auf null mit querySelector wird bestimmen, ob die Komponente vorhanden ist. Von der querySelector MDN:

Gibt null zurück, wenn keine Übereinstimmungen gefunden werden; Andernfalls gibt es das erste übereinstimmende Element zurück.

---

Wenn Sie möchten, um zu überprüfen, dass es mehrere Instanzen derselben untergeordnete Komponente, Sie querySelectorAll und überprüfen Sie die length Eigenschaft verwenden:

expect(compiled.querySelectorAll('app-other').length).toBeGreaterThan(4); 

Answer 2

In den meisten Fällen Sie testen gerade die äußere Komponente. Wenn Sie möchten, dass eckig die inneren Komponenten ignoriert, fügen Sie am besten NO_ERRORS_SCHEMA zu Ihrer Spezifikation hinzu.

Import {NO_ERRORS_SCHEMA} von '@ Winkel/Kern'

Und dann in Ihrem TestBed.configureTestingModule die Zeile:

schema: [NO_ERRORS_SCHEMA]

Die Tests werden die Tatsache, dann ignorieren dass Sie die inneren Komponenten nicht in den HTML-Code Ihrer Komponente importiert haben.

Wenn Sie die innere Komponente mit Ihren äußeren Komponenten testen möchten, sehen Sie, wenn Sie angle-cli verwenden, dass die component.spec-Datei, die sie automatisch für Sie generiert, ein declarations-Array enthält das TestBed-Konfigurationsobjekt. Sie müssen also nur die Datei importieren und die Komponente in Ihre Deklarationen einfügen.

So Ihr Beispiel oben:

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { MyComponent } from './my-component.component'; 
import { OtherComponent } from './other-component.component'; 

Dann in Ihrem describe Block haben Sie eine beforeEach

beforeEach(async(() =>{ 
    TestBed.configureTestingModule({ 
    declarations: [ MyComponent, 
        OtherComponent ] 
    }) 
    .compileComponent(); 
}) 

Dann sollten Sie Ihre Komponenten jetzt korrekt ohne Fehler kompilieren. Wenn Sie das gesamte Setup anzeigen möchten, erstellen Sie einfach ein neues Projekt in eckigen Klammern und sehen Sie sich die erstellten Spec-Dokumente an.