I am trying to create a component with a test for it. The component has external CSSs that I want to test. I think I am doing everything right, but I couldn't make it to pass the test. Here are my code: app.component.spec.ts
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;
}
Only the last expect will fail. It sees h1.nativeElement.style.color as empty. Seems like it didn't load the CSS somehow. If I put the style as in line style in html this test will pass. But having it as an external css will fail the expect.
What am I doing wrong? Is my assumption wrong that the compileComponents should load the external CSS and put it as the style of the nativeElement?
