webentwicklung-frage-antwort-db.com.de

Wie prüfe ich Winkel 2-Komponente mit verschachtelten Komponenten im Inneren mit ihren eigenen Abhängigkeiten? (TestBed.configureTestingModule)

Ich habe eine Komponente A, die eine Komponente B, c, D in ihrer Vorlage verwendet:

###template-compA.html

    <comp-b></comp-b>
    <comp-c [myinput]="obj.myinput"></comp-c>
    <comp-d ></comp-d>

...usw

Nehmen wir zur Vereinfachung an, dass es in Komponente A nur eine Direktive gibt:

 ###template-compA.html

    <comp-b></comp-b>

Mein Comp-B hat seine eigenen Abhängigkeiten (Services oder andere Comp).

Wenn ich comp-a auf diese Weise testen möchte:

TestBed.configureTestingModule({
    declarations: [comp-A],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

es würde nicht richtig funktionieren. So ich mache:

TestBed.configureTestingModule({
    declarations: [comp-A, comp-B],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

Es funktioniert auch nicht, weil comp-b keine eigenen Abhängigkeiten hat. Und hier bin ich verwirrt. Wie kann ich einen Gerätetest durchführen, wenn ich alle anderen Komponenten jedes Mal importieren und erneut hinzufügen muss? Es sieht nach einer sehr großen Arbeit aus. Gibt es eine andere Art und Weise? Was wäre die beste Methode, um Komponenten mit verschachtelten Komponenten zu testen, die eigene Abhängigkeiten haben?

Danke vielmals,

Stéphane.

angularunit-testingjasminekarma-jasmine
18
Stefdelec

Wenn Sie in Ihren Tests in keiner Weise auf comp-b verweisen müssen, können Sie schemas: [NO_ERRORS_SCHEMA] or [CUSTOM_ELEMENTS_SCHEMA] zu Ihrer TestBed-Konfiguration hinzufügen oder die Vorlage von comp-A überschreiben und das Tag für comp-b entfernen.

Wenn Sie auf comp-b verweisen müssen, müssen Sie möglicherweise die Abhängigkeiten nicht speziell in einer Überschreibung angeben.

Das Setzen von providers in overrideComponent ist nur erforderlich, wenn die Abhängigkeit in der Komponente selbst angegeben ist. (Wenn Sie eine Anbieterliste in comp-A.ts haben)

angenommen, comp-b benötigt einen comp-AService und comp-AService wird in Ihrer comp-A-Überschreibung angegeben, da comp-b ein untergeordnetes Element von comp-A ist, für das comp-AService bereitgestellt wird.

Wenn Sie diese Abhängigkeiten in Ihrem app.module oder an einer anderen Stelle als die Komponente selbst angeben, müssen Sie sie nicht überschreiben. Wenn beispielsweise comp-bcomp-AService & someOtherService benötigt, die beide in Ihrem app.module enthalten sind, könnte Ihre TestBed-Konfiguration folgendermaßen aussehen:

TestBed.configureTestingModule({
  declarations: [comp-A, comp-B],
  imports: [ReactiveFormsModule],
  providers: [
    { provide: comp-AService, useValue: comp-AListSVC },
    { provide: someOtherService, useValue: someOtherServiceSVC }
  ]
})

Bearbeiten:

Weitere Informationen zum Testen verschachtelter Komponenten finden Sie hier:

https://angular.io/guide/testing#nested-component-tests

13
Borquaye

Dem @yurzui-Rat folgend:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [comp-a],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));
1
Stefdelec