Angular 2测试 - 获取DOM元素样式

Question

我想在我的Angular 2应用程序中测试我的隐藏显示按钮的功能（测试是用Jasmine编写的），所以我需要检查相关元素的display属性的值。如何使用Angular debugElement获取此属性？ 测试代码：

let input = fixture.debugElement.query(By.css('input'));
expect(input.styles['visibility']).toBe('false');

我收到错误： 预期未定义为'假'。

Answer 1

我遇到了同样的问题。 DebugElement.styles总是一个空对象，即使我明确地将一些样式设置为该元素（也许是角度代码中的错误？）。所以我宁愿直接从浏览器native element获取它：

let input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.style.visibility).toBe('false');

Answer 2

对于遇到此示例的任何人，display针对此特定问题的解决方案是hidden上的debugElement属性。如果元素被隐藏，它将包含true，否则将包含false。