angular - 在 Angular 单元测试中访问元素的内联样式

Question

有一个 Angular 组件可以呈现这样的跨度:

<span class="buy" [style.width.%]="percent"></span>

在我的单元测试中，我想检查内联样式是否有正确的百分比数字。比如组件渲染如下，我想测试百分比是否为50%:

<span class="buy" style="width: 50%;"></span>

目前这是我能做的最好的:

const debugElm = fixture.debugElement;
const htmlElm = debugElm.nativeElement;
const buyBar = htmlElm.querySelector('.buy');
expect(buyBar.getAttribute('style')).toEqual('width: 0%;');

我不喜欢测试 style 属性的值是否等于字符串 width: 0%;。有没有更好的方法来访问内联样式的宽度属性？

Answer 1

所以人们已经在谈论解决方案，这是我的想法。
不过，为什么要为“50%”这个数字烦恼。

如果您的目的是测试“.buy”类的宽度为某物的 50%
我们只是简单地

it('element with buy class should have width equal 50% of parent element', () => {})

你的测试用例可能是(让我假设你有一个父类)

<div class="parent"><span class="buy" style="width: 50%;"></span></div>

const debugElm = fixture.debugElement;
const htmlElm = debugElm.nativeElement;
const parent = htmlElm.querySelector('.parent');
const buyBar = htmlElm.querySelector('.buy');

const parentStyle = getComputedStyle(parent);
const barStyle = getComputedStyle(buyBar);
expect(barStyle.width / parentStyle.width).toEqual(0.5);

这里我只是重用了上面其他人的代码，所以不太确定 expect 函数是否可以工作。但我认为这可能是您的测试用例的解决方法。