title: Angular2 testing. Promise never resolved inside TestBed.compileComponents
body: <p>I am currently writing a test module for a module within my Angular2 component which uses the templateUrl property and therefore requires the TestBed.compileComponents async call to be made to compile before testing. </p>
  
  <p>The problem I am having is that anything inside the promise callback (then) function does not run at all... As if the promise is not resolving.</p>
  
  <p>Here is my code.</p>
  
  <p>The module:</p>
  
  <pre><code>import { Component } from "@angular/core";
  
  @Component({
      selector: 'categories-component',
      templateUrl: '/app/views/catalog/categories/categories-dashboard.html',
      moduleId: module.id
  })
  
  export class CategoriesComponent {
      title: 'Categories;
  }
  </code></pre>
  
  <p>HTML template:</p>
  
  <pre><code>&lt;h1&gt;{{ title }}&lt;/h1&gt;
  </code></pre>
  
  <p>And the testing module:</p>
  
  <pre><code>import {TestBed, ComponentFixture, ComponentFixtureAutoDetect, async} from "@angular/core/testing";
  import { By} from "@angular/platform-browser";
  import { CategoriesComponent } from "../../../../components/catalog/categories/CategoriesComponent";
  import { DebugElement } from "@angular/core";
  
  let comp:    CategoriesComponent;
  let fixture: ComponentFixture&lt;CategoriesComponent&gt;;
  let de:      DebugElement;
  let el:      HTMLElement;
  
  describe('CategoriesComponent', () =&gt; {
      beforeEach(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [ CategoriesComponent ],
              providers: [
                  { provide: ComponentFixtureAutoDetect, useValue: true }
              ]
          });
      });
  
      it('should display original title', () =&gt; {
          TestBed.compileComponents()
              .then(() =&gt; {
                  fixture = TestBed.createComponent(CategoriesComponent);
  
                  comp = fixture.componentInstance; // BannerComponent test instance
  
                  // query for the title &lt;h1&gt; by CSS element selector
                  de = fixture.debugElement.query(By.css('h1'));
                  el = de.nativeElement;
  
                  expect(el.textContent).toContain(comp.title);
              });
  
  });
  </code></pre>
  
  <p>});</p>
  
  <p>As you can see, inside my test I call compileComponents to compile the testing module asynchronously then inside the callback I create the fixture and instance of the test component. None of this ever gets run and I have added breakpoints inside this which never fire.</p>
  
  <p>Can anyone point out what I am doing wrong here?</p>
  
  <p>Thanks!</p>