Wie ApplicationRef in Komponententest Mock

Question

Ich habe versucht, beide Methoden von Jasmine und Angular 4 zu testen, aber this.applicationRef ist immer ein leeres Objekt zurückgegeben. Wie löst man dieses Problem?

Hier ist mein Code:

@Injectable() 
class Dialog { 
    .... 
    getRootViewContainerRef(): ViewContainerRef { 
    const appInstance = this.applicationRef.components[0].instance; 

    if (!appInstance.viewContainerRef) { 
     const appName = this.applicationRef.componentTypes[0].name; 
     throw new Error(`Missing 'viewContainerRef' declaration in ${appName} constructor`); 
    } 

    return appInstance.viewContainerRef; 
    } 
} 

createOverlay(parentContainerRef: ViewContainerRef): ComponentRef<DialogContainerComponent> { 
    const rootContainerRef = parentContainerRef; 
    const rootInjector = rootContainerRef.injector; 

    const bindings = ReflectiveInjector.resolve([]); 
    const injector = ReflectiveInjector.fromResolvedProviders(bindings, rootInjector); 

    const overlayFactory = this.cfr.resolveComponentFactory(DialogContainerComponent); 
    return rootContainerRef.createComponent(overlayFactory, rootContainerRef.length, injector); 
} 

Hier mein Testskript ist:

describe('Dialog service',() => { 
    //let fixture: ComponentFixture<DialogInformationComponent>; 
    //let component: DialogInformationComponent; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [...], 
     providers: [ 
     {provide: APP_BASE_HREF, useValue: '/'}, 
     Dialog, DialogContext 
     ] 
    }); 
    })); 

    it('Dialog should be showed.', inject([Dialog], (service: Dialog) => { 
    let res: any; 
    service.open(DialogInformationComponent, message).subscribe((result) => { 
     res = result; 
    }); 
    expected(true).toBeTruethy(); 
    })); 
}); 

Allerdings ist die ApplicationRef immer leer:

Answer 1

ich durch die Schaffung gelöst eine neue MockComponent und dann schieben Sie es in die aktuelle TedBed App licationRef aussehen wie:

@Component({ 
    selector: 'app-dialog', 
    template: '' 
    }) 
    class MockDialogComponent { 
    constructor(public viewContainerRef: ViewContainerRef) { 
    } 
    } 

    @NgModule({ 
    imports: [DialogModule], 
    declarations: [MockDialogComponent] 
    }) 
    class MockDialogModule { 
    } 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [CommonModule, MockDialogModule] 
    }); 
    })); 

    beforeEach(() => { 
    appRef = TestBed.get(ApplicationRef) as ApplicationRef; 
    fixture = TestBed.createComponent(MockDialogComponent); 
    appRef.components.push(fixture.componentRef); 
    de = fixture.debugElement; 
    fixture.detectChanges(); 
    }); 

    it('Dialog should be showed.', inject([Dialog], (service: Dialog) => { 
    service.open(DialogInformationComponent, message).subscribe(); 
    fixture.detectChanges(); 
    expect(service.isShow).toBe(true); 
    }))