angular - 如何测试 style.background-color 属性

Question

我想创建一个测试来检查背景颜色和组件属性之间是否存在绑定(bind)。

组件模板片段

<div
    class="colored-div"
    [style.background-color]="color"
</div>

测试

it('background should have correct color', () => {
    component.color = '#000000';
    fixture.detectChanges();
    const colorEl: HTMLElement = fixture.debugElement.query(By.css('.colored-div')).nativeElement;
    expect(colorEl.style.backgroundColor).toBe('#000000');
});

我希望通过此测试，但 angular 将背景颜色转换为 rgb 并且测试失败并显示错误:“预期 'rgb(0, 0, 0)' 为 '#000000'”。
所以问题是:有没有办法阻止 angular 将值转换为 rgb 或者我应该将我的测试断言更改为

expect(colorEl.style.backgroundColor).toBe('rgb(0, 0, 0)');

Answer 1

实际上它不是 Angular，而是浏览器:它们在使用 backgroundColor 时返回 RGB。
您可以将断言更改为 RGB(如您所写)，也可以仅使用将 RGB 转换为十六进制的附加函数(选择您喜欢的任何 function example )