title: Angular2 tests running before compileComponents variables are set
body: <p>I am having an issue in an Angular2 text component where I am getting the following error when I attempt to run the testrunner:</p>
  
  <pre><code>Component: Product Component Should ensure component subscribes to service EventEmitter on instantiation
  Failed: Cannot read property 'detectChanges' of undefined
  TypeError: Cannot read property 'detectChanges' of undefined
  Component: Product Component Should check that service getProducts is called when component getProducts is called
  Failed: Cannot read property 'getProducts' of undefined
  TypeError: Cannot read property 'getProducts' of undefined
  </code></pre>
  
  <p>Here is my test module:</p>
  
  <pre><code>import { ProductService } from "../../../../services/product.service";
  import { TestBed, ComponentFixture, async } from "@angular/core/testing";
  import { ProductComponent } from "../../../../components/catalog/products/ProductComponent";
  import { HttpModule } from "@angular/http";
  import { DebugElement, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
  import { Observable } from "rxjs/Rx";
  
  class MockProductService {
      emitter = Observable.of({});
      constructor() {
  
      }
  
      getProducts() {
          return this;
      }
  }
  
  let comp:    ProductComponent;
  let fixture: ComponentFixture&lt;ProductComponent&gt;;
  let de:      DebugElement;
  let el:      HTMLElement;
  
  describe('Component: Product Component', () =&gt; {
      let mockProductService;
  
      beforeEach(() =&gt; {
          mockProductService = new MockProductService();
  
          TestBed.configureTestingModule({
              declarations: [
                  ProductComponent
              ],
              providers: [
                  {
                      provide: ProductService, useValue: mockProductService
                  }
              ],
              imports: [
                  HttpModule
              ],
              schemas: [CUSTOM_ELEMENTS_SCHEMA]
          })
          .compileComponents()
              .then(() =&gt; {
                  fixture = TestBed.createComponent(ProductComponent);
                  comp = fixture.componentInstance;
              });
      });
  
      it('Should ensure component subscribes to service EventEmitter on instantiation', () =&gt; {
         // TestBed.compileComponents()
              //.then(() =&gt; {
                  //spyOn(mockProductService, 'emitter').and.returnValue({
                  //    subscribe: () =&gt; {}
                  //});
  
  
                  fixture.detectChanges();
                  fixture.whenStable().then(() =&gt; {
                      expect(comp.products).toBe({});
                  });
                  //expect(mockProductService.emitter).toHaveBeenCalled();
              //});
      });
  
      it('Should check that service getProducts is called when component getProducts is called', () =&gt; {
  
          //TestBed.compileComponents()
           //   .then(() =&gt; {
  
                  spyOn(mockProductService, 'getProducts').and.returnValue({
                      subscribe: () =&gt; {}
                  });
  
                  comp.getProducts({});
                  expect(mockProductService.getProducts).toHaveBeenCalled();
         // });
      });
  
  
  });
  </code></pre>
  
  <p>As the component under test uses an external template via the templateUrl property of the class I have to use the compileComponents method of the TestBed to compile this template ready for the test. As you can see this retyrns a promise which inside the call back I then define the fixture and the component instance ready for each test. As this is in the beforeEach this will be done for every test.</p>
  
  <p>When I attempt to access the fixture and component instances from within my tests it is saying they are undefined which leads me to believe that the tests are being called before the promise is being returned from the compileComponents method. I have tried moving the TestBed.CompileComponents to within each test spec but this causes an error too.</p>
  
  <p>Can anyone advise as to what I need to change here?
  Thanks</p>