composant indéfini après avoir appelé OnInit() en test de karma lors de l'utilisation de services fictifs

Question

J'écris un test unitaire pour tester un hook OnInit sur un composant angulaire. Il appelle un service sur OnInit() et obtient des modèles comme suit ...

template.component.ts est:

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; } 
    } 

J'ai un fichier template.component.spec qui fait la test unitaire:

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!!! 

     }); 
    }); 

Fondamentalement, j'injecte un service de modèle fictif avec un modèle de modèle fictif dans le composant. C'est à travers. Cependant, malgré l'appel de OnInit() sur le composant, isDraftEditing n'est toujours pas défini. Est-ce que j'ai râté quelque chose? D'après ce que j'ai lu, je devrais être capable de puiser dans les propriétés des composants, non?

Answer 1

OK, Je l'ai travaillé moi-même ...

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"'); 

    }));