I’m attempting to write a module that includes a test. I want to test the component’s external CSSs. I believe I did everything correctly, yet I was unable to pass the test. Here’s 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.colour).toBe("red");
});
});
and 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 { }
also app.component.html:
<h1>hello world!</h1>
at last app.component.css
h1{
color: red;
}
Only the last expectation will fail. It considers h1.nativeElement.style.color to be empty. It appears that the CSS was not loaded properly. This test will pass if I use the inline style in html as described in this article. But, having it as an external CSS will fail the test.
What am I doing incorrectly? Is it correct that the compileComponents should load the external CSS and apply it to the nativeElement’s style?