Eckige 2-unit-Tests-Komponente, die Verspottung ContentChildren
Ich bin Implementierung eines wizard-Komponente im Winkel 2 RC4, und jetzt bin ich zu schreiben versucht, som unit-tests. Unit-Tests in den Winkel-2 ist langsam gut dokumentiert, aber ich kann einfach nicht herausfinden, wie mock das Ergebnis einer content-Abfrage in der Komponente.
Die app hat 2 Komponenten (zusätzlich zu den app-Komponente), WizardComponent und WizardStepComponent. Die app-Komponente (app.ts) definiert, die Assistenten und die Schritte, die in der Vorlage:
<div>
<fa-wizard>
<fa-wizard-step stepTitle="First step">step 1 content</fa-wizard-step>
<fa-wizard-step stepTitle="Second step">step 2 content</fa-wizard-step>
<fa-wizard-step stepTitle="Third step">step 3 content</fa-wizard-step>
</fa-wizard>
</div>
Den WizardComponent (Assistenten-Komponente.ts) ruft einen Verweis auf die Schritte, die durch die Verwendung eines ContentChildren Abfrage.
@Component({
selector: 'fa-wizard',
template: `<div *ngFor="let step of steps">
<ng-content></ng-content>
</div>
<div><button (click)="cycleSteps()">Cycle steps</button></div>`
})
export class WizardComponent implements AfterContentInit {
@ContentChildren(WizardStepComponent) steps: QueryList<WizardStepComponent>;
....
}
Das problem ist, wie die zu verspotten, die Schritte, die variable in der unit-test:
describe('Wizard component', () => {
it('should set first step active on init', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(WizardComponent)
.then( (fixture) =>{
let nativeElement = fixture.nativeElement;
let testComponent: WizardComponent = fixture.componentInstance;
//how to initialize testComponent.steps with mock data?
fixture.detectChanges();
expect(fixture.componentInstance.steps[0].active).toBe(true);
});
})));
});
Habe ich eine plunker die Implementierung eines sehr einfachen Assistenten demonstriert das problem. Die wizard-Komponente.spec.ts-Datei enthält die Einheit testen.
Ob jemand kann mich in die richtige Richtung, ich würde es sehr zu schätzen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dank drewmoore's Antwort in diese Frage, ich habe in der Lage, damit es funktioniert.
Der Schlüssel ist, erstellen Sie eine wrapper-Komponente für die Prüfung, die angibt, die Assistenten und die Assistenten-Schritte in seiner Vorlage. Winkel werden dann die Inhalte Abfrage für Sie, und füllen Sie die variable.
Bearbeiten: die Umsetzung ist für Eckige 6.0.0-beta.3
Meine komplette test-Implementierung sieht wie folgt aus:
Wenn Euch bessere/andere Lösungen, Sie sind sehr willkommen, fügen Sie beantworten, wie gut. Ich lasse die Frage offen, für einige Zeit.
wizardComponentInstance
) Referenz.Für jemand kommen, um diese Frage vor kurzem haben sich die Dinge etwas geändert und es gibt einen anderen Weg, dies zu tun, das finde ich ein bisschen einfacher. Es ist anders, weil es verwendet ein template Referenz-und
@ViewChild
zum Zugriff auf die Komponente unter test eher alsfixture.debugElement.children[0].componentInstance
. Auch die syntax hat sich geändert.Sagen wir, wir haben eine Komponente auswählen, die erfordert, dass eine option template übergeben werden. Und wir testen wollen, dass unsere
ngAfterContentInit
Methode wirft einen Fehler, wenn die option Vorlage ist nicht vorgesehen.Hier ist eine minimal-version der Komponente:
Erstellen Sie zunächst eine
WrapperComponent
enthält die Komponente unter test, etwa so:Beachten Sie die Verwendung der
@ViewChild
Dekorator in der test-Komponente. Das gibt Zugang zuMySelectComponent
durch Namen wie eine Eigenschaft auf dieTestComponent
Klasse. Dann in das test-setup erklären sowohl dieTestComponent
und dieMySelectComponent
.TestComponent
du meinstWrapperComponent
. Ich hatte auch hinzufügenfixture.detectChanges()
nach Komponente assigment (ref)