Laddar extern css i Angular 2 och testar det

Jag försöker skapa en komponent med ett test för den. Komponenten har externa CSS:er som jag vill testa. Jag tror att jag gör allt rätt, men jag kunde inte få testet att gå igenom. Här är min kod: 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;
}

Endast det sista förväntade kommer att misslyckas. Det ser h1.nativeElement.style.color som tomt. Verkar som att CSS inte laddades på något sätt. Om jag sätter stilen som en inline-stil i HTML kommer detta test att gå igenom. Men att ha den som en extern CSS kommer att göra att förväntningen misslyckas.

Vad gör jag fel? Är min antagelse fel att compileComponents borde ladda den externa CSS:en och sätta den som stilen för nativeElement?

Svar #1

h1.nativeElement.style innehåller endast stilar som är uttryckligen inställda på elementet. Till exempel kommer följande element att ha ett stilobjekt med backgroundColor satt till röd

<h1 style="background-color: red;">hello world!</h1>

Istället för att använda ett enhetstest för färgen kan du testa den med protractor e2e-tester. Där kan du skriva ett test som detta:

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

Protractor e2e-tester är inbyggda i Angular2-projekt som genereras av angular-cli. Du kör dem med kommandot ng e2e

Svar #2

Inte säker på om det är en bra praxis, men det är möjligt att testa beräknad stil. Att ändra ditt sista undantag till något liknande detta borde fungera ändå:

expect(window.getComputedStyle(h1.nativeElement).color).toBe('rgb(0, 0, 255)');

Relaterade artiklar