Wie unit-Tests, wenn eine eckige 2-Komponente eine weitere Komponente enthält

Ich bin ziemlich neu eckig 2.

Ich habe eine Komponente, die wiederum hat einige andere Komponenten in der Vorlage.

Wie Schreibe ich unit-tests zu überprüfen, ob meine Eltern Komponente aus anderen Komponenten.

Erwähnen, eine Probe oder leitet mich auf eine Ressource 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{

}

InformationsquelleAutor Chan15 | 2016-11-11

  1. 19

    Um zu testen, ob eine Komponente, wenn Sie erstellt wird, enthält weitere Komponenten:

    • Injizieren Sie die Komponente, die Sie testen wollen
    • Injizieren die untergeordneten Komponenten
    • Erstellen Sie die übergeordnete Komponente
    • Veränderungen erkennen,
    • Verwenden querySelector oder querySelectorAll zu finden, die die untergeordneten Komponenten

    Ich in der Regel nur überprüfen, dass das element vorhanden ist, und führen Sie dann weitere Tests in der spec für das einzelne Kind Komponente.

    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);
  }));
});

    Null mit querySelector bestimmen, ob die Komponente vorhanden ist. Aus der querySelector MDN:

    Gibt null zurück, wenn keine übereinstimmung gefunden wird; andernfalls gibt es die ersten
    übereinstimmendes element.

    Wenn Sie möchten, um zu überprüfen, dass es mehrere Instanzen der gleichen Kind-Komponente, die Sie verwenden können querySelectorAll und überprüfen Sie die length Eigenschaft:

    expect(compiled.querySelectorAll('app-other').length).toBeGreaterThan(4);
    Schön, war nicht sicher, wie dies zu erreichen. Ist die Prüfung nicht null-das einzige, was wir tun können, in diesem Stadium?

    InformationsquelleAutor silencedmessage

  2. 11

    In den meisten Fällen sind Sie nur die Prüfung der äußeren Komponente. Wenn Sie wollen einfach nur eckig zu ignorieren, die inneren Komponenten, die einfachste Möglichkeit ist das hinzufügen der NO_ERRORS_SCHEMA zu Ihrem spec.

    import { NO_ERRORS_SCHEMA } '@eckig/core'

    Und dann in Ihre Testumgebung.configureTestingModule fügen Sie die Zeile:

    schemas: [NO_ERRORS_SCHEMA]

    Den tests wird dann ignorieren Sie die Tatsache, dass Sie noch nicht importiert haben, die inneren Komponenten in der Komponente HTML.

    Wenn Sie möchten, testen Sie die innere Komponente mit Ihrem äußeren Komponenten, wenn Sie die Winkel-cli, wirst du sehen, dass die Komponente.spec-Datei automatisch generieren für Sie umfasst eine declarations array, das ist Teil der TestBed-Konfiguration-Objekt. So alle Sie tun müssen ist, importieren Sie die Datei und fügen Sie die Komponente in Ihre Erklärungen.

    Also dein 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 Ihre describe block, den Sie haben eine beforeEach

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

    Dann deine Komponenten sollten nun ordnungsgemäß kompiliert ohne Fehler. Wenn Sie möchten, um zu sehen, wie das ganze setup, nur erzeugen Sie ein neues Projekt in Winkel-cli und werfen Sie einen Blick auf das spec-docs, die es generiert.

    Dies nicht wirklich die Frage beantworten, die Sie hatten. Sie wollen sicherstellen, dass eine Komponente existiert, die in der Vorlage nicht test der inneren Komponente aus dem äußeren oder testen Sie die Komponente unabhängig.

    InformationsquelleAutor Felix Tsai

Schreibe einen Kommentar