title: component undefined after calling OnInit() in karma test when using mock services
body: <p>I'm writing a unit test to test an OnInit hook on a angular component. It calls a service on OnInit() and gets templates as follows...</p>
  
  <p><strong>template.component.ts</strong> is:</p>
  
  <pre><code> 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 =&gt; {
                  this.displayTemplate= getTemplate ;
                  if (this.displayTemplate.status.code === 'draft') {
                      this.isDraftEditing = true;
                  }
  
              },
              error =&gt; {
                  this.getErrorMessage = &lt;any&gt;error;
                  console.error(error);
                  console.error('getErrorMessage=' + this.getErrorMessage);
              }
              );
          if (this.getErrorMessage != null) { return false; } else { return true; }
      }
  </code></pre>
  
  <p>I have a <strong>template.component.spec</strong> file that does the unit test:</p>
  
  <pre><code> describe('TemplateComponent...', () =&gt; {
          let component: TemplateComponent;
          let fixture: ComponentFixture&lt;TemplateComponent&gt;;
          let templateService: TemplateService,
              serverservice: ServerService,
              userService: UserService;
          let componentTemplateService: TemplateService;
          let testBedTemplateService: TemplateService;
  
          beforeEach(() =&gt; {
              serverservice = new MockServerService();
              userService = new MockUserService(serverservice);
             TemplateService = new MockTemplateService(serverservice);
  
          });
  
  
          beforeEach(() =&gt; {
              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(() =&gt; {
              fixture = TestBed.createComponent(TemplateComponent);
              component = fixture.componentInstance;
  
              componentTemplateService = fixture.debugElement.injector.get(TemplateService);
              testBedTemplateService = TestBed.get(TemplateService);
  
  
          //mock objects
          it('...', () =&gt; {
  
              fixture.detectChanges();
              fixture.whenStable()
                  .then(() =&gt; fixture.detectChanges());
              component.ngOnInit();
              expect(component.isDraftEditing).toBe(true);&lt;--this line here: component is undefined!!!
  
          });
      });
  </code></pre>
  
  <p>Basically I'm injecting a mock template service with a mock template model into the component. That's coming across. However, despite calling OnInit() on the component, isDraftEditing is still undefined. Am I missing something here? From what I've read, I should be able to tap into the components properties, no?</p>