モックサービスを使用してカルマテストでOnInit（）を呼び出した後、コンポーネントが未定義になる

Question

角型コンポーネントのOnInitフックをテストするための単体テストを作成しています。私はありませんtemplate.component.specファイルを持っている

import { Component, OnInit, Input } from '@angular/core'; 
import { template} from '../core/model/template'; 
import { templateService } from '../core/service/template.service'; 


@Component({ 
    selector: 'app-template', 
    templateUrl: './template.component.html', 
    styleUrls: ['./template.component.css'], 
    providers: [templateService ] 

}) 
export class TemplateComponent implements OnInit { 

    displayTemplate: template; 

    private _isDraftEditing: boolean; 
    get isDraftEditing(): boolean { 
     return this._isDraftEditing; 
    } 
    set isDraftEditing(draftediting: boolean) { 
     this._isDraftEditing = draftediting; 
    } 

    getErrorMessage: any; 

    constructor(
     private templateService: templateService) { } 

    ngOnInit() { 
     this.isDraftEditing = false; 
     this.getTemplateByID('id inserted here from route'); 

    } 


    getTemplateByID(id: number): boolean { 
     this.templateService.getTemplateById(id) 
      .subscribe(
      getTemplate => { 
       this.displayTemplate= getTemplate ; 
       if (this.displayTemplate.status.code === 'draft') { 
        this.isDraftEditing = true; 
       } 

      }, 
      error => { 
       this.getErrorMessage = <any>error; 
       console.error(error); 
       console.error('getErrorMessage=' + this.getErrorMessage); 
      } 
      ); 
     if (this.getErrorMessage != null) { return false; } else { return true; } 
    } 

：それはある

template.component.ts ...のOnInit上のサービスを（）を呼び出すと、次のようにテンプレートを取得しますユニットテスト：

describe('TemplateComponent...',() => { 
     let component: TemplateComponent; 
     let fixture: ComponentFixture<TemplateComponent>; 
     let templateService: TemplateService, 
      serverservice: ServerService, 
      userService: UserService; 
     let componentTemplateService: TemplateService; 
     let testBedTemplateService: TemplateService; 

     beforeEach(() => { 
      serverservice = new MockServerService(); 
      userService = new MockUserService(serverservice); 
      TemplateService = new MockTemplateService(serverservice); 

     }); 


     beforeEach(() => { 
      TestBed.configureTestingModule({ 
       declarations: [TemplateComponent], 
       imports: [HttpModule, MdDialogModule, RouterTestingModule], 
       schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA], 
       providers: [ServerService, 
        { provide: TemplateService, useValue: templateService }, 
        { provide: UserService, useValue: userService } 
       ] 
      }) 
       .overrideComponent(TemplateComponent, { 
        set: { 
         providers: [ 
          { provide: TemplateService, useValue: templateService }, 
          { provide: UserService, useValue: userService } 
         ] 
        } 
       }) 
       .compileComponents(); 
     }); 

     beforeEach(() => { 
      fixture = TestBed.createComponent(TemplateComponent); 
      component = fixture.componentInstance; 

      componentTemplateService = fixture.debugElement.injector.get(TemplateService); 
      testBedTemplateService = TestBed.get(TemplateService); 


     //mock objects 
     it('...',() => { 

      fixture.detectChanges(); 
      fixture.whenStable() 
       .then(() => fixture.detectChanges()); 
      component.ngOnInit(); 
      expect(component.isDraftEditing).toBe(true);<--this line here: component is undefined!!! 

     }); 
    }); 

基本的に、モックテンプレートモデルを持つモックテンプレートサービスをコンポーネントに挿入しています。それは横行している。ただし、コンポーネントでOnInit（）を呼び出しても、isDraftEditingは未定義です。私はここに何かを逃していますか私が読んだことから、私はコンポーネントのプロパティに触れることができるはずですか？

Answer 1

OK、私は...自分自身をそれを働い

it('...', fakeAsync(() => { 
     fixture.detectChanges(); 
     component.displayOutline = MockTemplateToCreate; 
     component.isDraftEditing = true; 
     component.ngOnInit(); 
     discardPeriodicTasks(); 
     tick(1000); 
     fixture.detectChanges(); 
     const el = de.nativeElement; 
     const content = el.textContent; 
     expect(content).toContain('Save', '"Save"'); 

    }));