web-dev-qa-db-fra.com

Comment tester un composant angulaire 2 avec des composants imbriqués à l'intérieur avec leurs propres dépendances? (TestBed.configureTestingModule)

J'ai un composant A qui utilise un composant B, c, D dans son modèle:

###template-compA.html

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

...etc

Pour simplifier, supposons qu’il n’existe qu’une directive dans le composant A:

 ###template-compA.html

    <comp-b></comp-b>

Mon comp-b a ses propres dépendances (services ou autre comp).

Si je veux tester comp-a de cette façon:

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

cela ne fonctionnerait pas correctement. Moi aussi:

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

Cela ne fonctionne pas aussi parce que comp-b n'a pas ses propres dépendances. Et là, je suis confus. Comment puis-je effectuer des tests unitaires si je dois importer et remocker tous les autres composants à chaque fois? Cela ressemble à une très grosse quantité de travail. Y a-t-il un autre moyen? Quelle serait la meilleure pratique pour tester les composants avec des composants imbriqués ayant leurs propres dépendances?

Merci beaucoup,

Stéphane.

angularunit-testingjasminekarma-jasmine
18
Stefdelec

Si vous n'avez pas besoin de référencer comp-b de quelque manière que ce soit dans vos tests, vous pouvez ajouter schemas: [NO_ERRORS_SCHEMA] or [CUSTOM_ELEMENTS_SCHEMA] à votre configuration TestBed ou remplacer le modèle de comp-A et supprimer le tag pour comp-b.

Si vous devez faire référence à comp-b, il se peut que vous n’ayez pas besoin de fournir ses dépendances spécifiquement dans un remplacement.

La définition de providers dans overrideComponent n'est nécessaire que si la dépendance est fournie dans le composant lui-même. (Si vous avez une liste de fournisseurs dans comp-A.ts)

disons que comp-b a besoin d'un comp-AService et que comp-AService soit fourni dans votre substitution comp-A, puisque comp-b est un enfant de comp-A, il aura comp-AService fourni.

Si vous fournissez ces dépendances dans votre app.module ou à un niveau supérieur à celui du composant, vous n'avez pas besoin de le remplacer. Par exemple, si comp-b a besoin de comp-AService & someOtherService qui sont tous deux fournis dans votre app.module, votre configuration TestBed pourrait ressembler à ceci:

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

Modifier:

Vous pouvez en savoir plus sur les tests de composants imbriqués ici:

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

13
Borquaye

Suivant un conseil de @yurzui:

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