在Angular 2中加载外部css并进行测试

import { AppComponent } from "./app.component";
import { async,TESTBed } from "@angular/core/tesTing";
import { By } from "@angular/platform-browser";

describe("App Component",function () {
    beforeEach(async(() => {
        TESTBed.configureTesTingModule({
            declarations: [AppComponent],}).compileComponents()
    }));
    it("should instantiate component",() => {
        let fixture = TESTBed.createComponent(AppComponent);
        expect(fixture.componenTinstance instanceof AppComponent).toBe(true);
    });
    it("should have expected <h1> text",() => {
        let fixture = TESTBed.createComponent(AppComponent);
        fixture.detectChanges();

        let h1 = fixture.debugElement.query(By.css("h1"));

        expect(h1.nativeElement.innerText).toBe("Hello World!");

        expect(h1.nativeElement.style.color).toBe("blue");
    });
});

app.component.ts：

import { Component } from "@angular/core";

@Component({
    modulEID: module.id,SELEctor: "nebula-app",styleUrls: ["./app.component.css"],templateUrl: "./app.component.html",})
export class AppComponent { }

app.component.html：

<h1>Hello World!</h1>

app.component.css：

h1{
    color: blue;
}

只有最后的期望才会失败.它将h1.nativeElement.style.color视为空.好像它没有以某种方式加载CSs.如果我在html中将样式设置为线条样式,则此测试将通过.但是将它作为外部css将会失败.

我究竟做错了什么？我的假设是错误的,compileComponents应该加载外部CSS并将其作为nativeElement的样式？

解决方法

<h1 style="BACkground-color: red;">Hello World!</h1>

expect(element(by.css('h1')).getCssvalue('color')).toEqual('rgba(0,255,1)');