Jak wypróbować testowanie komponentu za pomocą `entryComponents`?

Question

Załóżmy, że masz następujący komponent:

import { Another } from "./Another"; 
@Component({ 
    entryComponents: [ 
     Another 
    ] 
}) 
export class App {} 

Nawet podczas korzystania NO_ERRORS_SCHEMA wciąż muszę to Another jako część deklaracji Test:

import { ComponentFixture, TestBed } from "@angular/core/testing"; 
import { NO_ERRORS_SCHEMA } from '@angular/core'; 
import { App } from "./App"; 
import { Another } from "./Another"; 

describe("App",() => { 
    let comp: App; 
    let fixture: ComponentFixture<App>; 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ App, Another ], 
     schemas: [ NO_ERRORS_SCHEMA ] 
    }); 
    fixture = TestBed.createComponent(App); 
    comp = fixture.componentInstance; 
    }); 

    it("can load instance",() => { 
    expect(comp).toBeTruthy(); 
    }); 

}); 

Answer 1

Planują na dodanie EntryComponents do interfejs modułu testującego. Zobacz temat: https://github.com/angular/angular/issues/10760

Aby uzyskać bieżące obejście, zobacz bibliotekę materiałów kątowych, patrz https://github.com/angular/material2/blob/master/src/lib/dialog/dialog.spec.ts#L479.

Zasadniczo tworzą one prawdziwy moduł w locie, a następnie importują go do testów.

// Create a real (non-test) NgModule as a workaround for 
// https://github.com/angular/angular/issues/10760 
const TEST_DIRECTIVES = [ 
    ComponentWithChildViewContainer, 
    PizzaMsg, 
    DirectiveWithViewContainer, 
    ContentElementDialog 
]; 

@NgModule({ 
    imports: [MdDialogModule], 
    exports: TEST_DIRECTIVES, 
    declarations: TEST_DIRECTIVES, 
    entryComponents: [ComponentWithChildViewContainer, PizzaMsg, ContentElementDialog], 
}) 
class DialogTestModule { } 

Teraz można użyć DialogTestModule

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [MdDialogModule.forRoot(), DialogTestModule] 
     ... 

Answer 2

moje rozwiązania jest baza na rozwiązanie @kampsj, ale myślę, że jest czystsze.

TestBed utwórz moduł dynamiczny. Tak więc możemy użyć modułu, który ma entryComponents (nic nowego). Różnica polega na tym, że Nie tworzę modułu TestModule, Po prostu zaimportuję moduł, w którym ten komponent należy do, i jest czystszy ponieważ nie musisz dodawać niczego innego (serwis, inne komponenty itp..) . Powinno to sugerować, że jeśli ng serve działa, to powinno być ng test (przynajmniej z perspektywy komponentu kreacji).

Załóżmy, że mamy strukturę następująco:

app 
├--- app.module.ts 
├--- app.component.ts 
├--- ... 
├--- SomeModule2 
| ├--- somemodule2.module.ts 
| ├--- componentThatCreateDynamicsComponents 
|   ├--- componentThatCreateDynamicsComponents.component.ts 
|   ├--- componentThatCreateDynamicsComponents.html 
|   ├--- componentThatCreateDynamicsComponents.component.spec.ts 
| ├--- someCOmponent 
|   ├--- someCOmponent.component.ts 
|   ├--- someCOmponent.html 
|   ├--- someCOmponent.component.spec.ts 

TestBed z componentThatCreateDynamicsComponents.component.spec.ts powinny importować somemodule2 z somemodule2.module.ts. Jeśli nie podzielisz projektu na moduły, powinien to być unikalny moduł, który posiadasz.

Prawdą jest, że będziesz miał komponent, którego nie używasz w tym teście, ale nie ma to znaczenia, ponieważ jest to tylko test. I zyskujesz elastyczność, kiedy zmieniasz moduł testowy.