Angular2-Testfehler bei Verwendung von templateUrl

Question

Ich schreibe einige Tests für meine Angular2-Anwendung entsprechend der Dokumentation, aber ich bin auf ein Problem gestoßen, das ich anscheinend nicht beheben kann. Ich erhalte die folgende Fehlermeldung beim Versuch, die spec Läufer zu starten:

Failed: This test module uses the component CategoriesComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. 

Ich verstehe dies geschieht, wie ich in der Komponente eine separate Vorlage-Datei für die Vorlage verwenden aber ich jhave versuchten multilpe Lösungen, die nicht scheinen, arbeiten.

Hier ist meine Komponente im Test:

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

Die Kategorien-dashboard.html Datei:

<h1>{{ title }}</h1> 

und mein Test-Modul für die Komponente:

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<CategoriesComponent>; 
let de:  DebugElement; 
let el:  HTMLElement; 

describe('BannerComponent',() => { 
    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ CategoriesComponent ], 
      providers: [ 
       { provide: ComponentFixtureAutoDetect, useValue: true } 
      ] 
     }); 

     TestBed.compileComponents(); 

     fixture = TestBed.createComponent(CategoriesComponent); 

     comp = fixture.componentInstance; // BannerComponent test instance 

     // query for the title <h1> by CSS element selector 
     de = fixture.debugElement.query(By.css('h1')); 
     el = de.nativeElement; 

    })); 

    it('should display original title',() => { 
     expect(el.textContent).toContain(comp.title); 
    }); 
}); 

Ich habe versucht, TestBed.compileComponents() in die Komponente zu implementieren, aber wo auch immer ich es anbringe scheint es nicht Arbeit.

Kann jemand sehen, warum dieser Fehler auftritt oder mich in die Richtung einer Lösung verweisen?

Danke!

Answer 1

compileComponents löst asynchron (wie es eine XHR für die Vorlage macht), so gibt es eine Zusage zurück. Sie sollten etwas verlangt die Auflösung der Versprechen, innerhalb des then Rückruf des Versprechens

TestBed.compileComponents().then(() =>{ 
    fixture = TestBed.createComponent(CategoriesComponent); 

    comp = fixture.componentInstance; // BannerComponent test instance 

    // query for the title <h1> by CSS element selector 
    de = fixture.debugElement.query(By.css('h1')); 
    el = de.nativeElement; 
});