web-dev-qa-db-fra.com

Angular Erreur de test unitaire: aucune fabrique de composants trouvée pour le composant. L'avez-vous ajouté à @ NgModule.entryComponents

J'essaie de m'apprendre à coder avec Angular et j'ai un problème. Je crée une application pour moi-même et je viens d'implémenter le Angular Boîte de dialogue Matériel. Je mets cela dans un service wrapper et tout semble bien. Donc dans un composant j'appelle le service Wrapper pour augmenter un modal comme ça ...

public assignInstrument(instrument: any): void {
    this.modalDialogWrapperService.openAssignmentWindow({
        product: 'instrument',
        type: instrument.type,
        serial: instrument.serial,
        id: instrument.id
  });
}

la méthode de service ressemble à ça, remarquez que je passe le nom d'un composant que je souhaite augmenter dans la fenêtre modale

openAssignmentWindow(instrument) {
    const dialogRef = this.dialog.open(ChangeAssignmentComponent, {
        data: instrument,
        width: '693px',
        height: '498px'
        });
    dialogRef.afterClosed().subscribe(() => {});
    });
}

Tout fonctionne très bien! Mais en tant que bon développeur, je devrais écrire des tests unitaires ... donc pour tester mon composant, j'ai le test suivant (j'ai inclus comment je moque le service et un autre code pour donner une impression du fichier de test)

let modalDialogWrapperServiceSpy: jasmine.SpyObj<ModalDialogWrapperService>;
    const mockModalDialogWrapperService = jasmine.createSpyObj('ModalDialogWrapperService', ['openAssignmentWindow']);
    mockModalDialogWrapperService.openAssignmentWindow.and.returnValue({});

TestBed.configureTestingModule({
    imports: [...],
    declarations: [...],
    providers: [{
      provide: ModalDialogWrapperService,
      useValue: mockModalDialogWrapperService
    }]
}).compileComponents();

beforeEach(() => {
    fixture = TestBed.createComponent(InstrumentsPageComponent);
    modalDialogWrapperServiceSpy = TestBed.get(ModalDialogWrapperService);
    component = fixture.componentInstance;
    fixture.detectChanges();
 })

describe('assignInstrument', () => {
  it('should call the Modal Dialog Service', () => {
    component.assignInstrument({});
    expect(modalDialogWrapperServiceSpy.openAssignmentWindow).toHaveBeenCalledTimes(1);
  });
});

Ce seul test échoue! Avec l'erreur "Erreur: aucune fabrique de composants trouvée pour ChangeAssignmentComponent. L'avez-vous ajoutée à @ NgModule.entryComponents" - cela semble étrange car dans mon fichier app.module je déclare "ChangeAssignmentComponent" dans les tableaux entryComponents et declarations? Je suis confus - quelqu'un sait-il ce que je pourrais faire de mal?

angularunit-testingjasmine
14
NewToAngular

Testintg doute.

Plus sérieusement, permettez-moi de vous répondre.

Dans Angular, vos composants sont gérés par un module. Lorsque vous utilisez des boîtes de dialogue de matériaux et des collations, vous utilisez en fait une fonctionnalité du CDK, qui s'appelle Portal . Cela vous permet de créer vos composants dynamiquement.

Mais lorsque vous le faites, vous devez les ajouter au entryComponents de votre module. Vous l'avez fait dans votre module, vous devriez donc également le faire dans vos tests.

La syntaxe est

TestBed
  .configureTestingModule(...)
  .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [YourComponent] } });
28
user4676340

il y a deux endroits où cela est censé être fait .... les composants d'entrée et également les déclarations (lors de la configuration de votre module de test) ....

  TestBed
  .configureTestingModule({
              declarations: [YourComponent],
   })
  .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [YourComponent] } });
7
Ajay Reddy

Si quelqu'un a du mal à trouver BrowserDynamicTestingModule, utilisez simplement BrowserModule à la place.

   TestBed
  .configureTestingModule(...)
  .overrideModule(BrowserModule, { set: { entryComponents: [YourComponent] } });
0
Adam Ostapkiewicz