HTML with external CSS

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(() => {
            declarations: [AppComponent],
    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);

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

        expect(h1.nativeElement.innerText).toBe("hello world!");


and app.component.ts:

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

    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

    color: red;

Only the last expectation will fail. It considers 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?

Probably that?

1 Like