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

Question

我正在尝试创建一个对其进行测试的组件。该组件具有我要测试的外部 CSS。我认为我做的一切都是正确的，但我无法通过考试。这是我的代码： 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;
}

只有最后一个期望会失败。它认为 h1.nativeElement.style.color 为空。似乎它没有以某种方式加载CSS。如果我将样式设置为 html 中的线条样式，则此测试将通过。但是将其作为外部 css 会失败。

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

Answer 1

h1.nativeElement.style 仅包含在元素上显式设置的样式。例如，下面的元素会有一个样式对象，backgroundColorset 为 red

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

您可以使用量角器 e2e 测试来测试它，而不是对颜色使用单元测试。在那里你可以写一个这样的测试：

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

Protractor e2e 测试内置于 angular-cli 生成的 Angular2 项目中。您可以使用命令ng e2e 运行它们

Answer 2

不确定这是否是一个好习惯，但可以测试计算样式。 不过，将您的最后一个 except 更改为类似的内容应该可以：

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