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%;。有没有更好的方法来访问内联样式的width属性？

Answer 1

您可以尝试这样的事情：

const style = document.defaultView.getComputedStyle(buyBar, null);
expect(style.getPropertyValue('width')).toEqual('0%');

Answer 2

所以人们已经在讨论解决方案，这就是我的想法。
为什么还要打扰“ 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函数是否可以正常工作。但是我认为这可能是您的测试用例的解决方法。

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

2 个答案: