Angular2 单元测试 - 为什么 nativeElement 有空的 CSSStyleDeclaration
Angular2 unit testing - why nativeElement has empty CSSStyleDeclaration
我正在尝试测试一个简单的 header 组件,它有一个按钮,并且在获得焦点时 - 仅使用 css 可见性 属性.
打开一个下拉菜单
这是html:
<nav class="navigation">
<button type="button">
<span>click here</span>
</button>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</nav>
这是scss风格:
button {
span {
margin-right: 10px;
}
&:focus {
+ ul {
visibility: visible;
}
}
}
ul {
position: absolute;
list-style: none;
z-index: 1000;
visibility: hidden;
transition: visibility 0.1s linear;
background-color: $color-primary;
}
这是测试:
it('should open dropdown on focus', () => {
let button = fixture.debugElement.query(By.css('button'));
button.triggerEventHandler('focus', null);
fixture.detectChanges();
let dropdownElement = fixture.debugElement.query(By.css('ul')).nativeElement;
console.log(dropdownElement);
console.log(dropdownElement.style);
expect(dropdownElement.style['visibility']).toBe('visible');
});
当我 运行 测试时,我可以看到 console.log(dropdownElement)
存在并且 console.log(button.nativeElement)
returns CSSStyleDeclaration
object - 但所有这些属性有一个空字符串作为值:
CSSStyleDeclaration {
alignContent: ""
alignSelf: ""
...
...
...
color: ""
visibility: ""
...
...
}
所以基本上我需要的是触发按钮上的焦点事件,然后查看下拉列表的 css/style 属性 "visibility" 的值是否为 "visible"。
我不知道出了什么问题,因为我可以看到 Karma-Debug 中的一切都呈现良好,但所有样式属性都是空的...知道问题出在哪里吗?
我在运行时遇到过类似的问题(不是测试)。
样式 属性 是静态的,基于 html 元素的初始样式属性,因此不会动态更新。
解决方案是使用 Window.getComputedStyle()。此函数从样式表计算(当前!)样式。
我正在尝试测试一个简单的 header 组件,它有一个按钮,并且在获得焦点时 - 仅使用 css 可见性 属性.
打开一个下拉菜单这是html:
<nav class="navigation">
<button type="button">
<span>click here</span>
</button>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</nav>
这是scss风格:
button {
span {
margin-right: 10px;
}
&:focus {
+ ul {
visibility: visible;
}
}
}
ul {
position: absolute;
list-style: none;
z-index: 1000;
visibility: hidden;
transition: visibility 0.1s linear;
background-color: $color-primary;
}
这是测试:
it('should open dropdown on focus', () => {
let button = fixture.debugElement.query(By.css('button'));
button.triggerEventHandler('focus', null);
fixture.detectChanges();
let dropdownElement = fixture.debugElement.query(By.css('ul')).nativeElement;
console.log(dropdownElement);
console.log(dropdownElement.style);
expect(dropdownElement.style['visibility']).toBe('visible');
});
当我 运行 测试时,我可以看到 console.log(dropdownElement)
存在并且 console.log(button.nativeElement)
returns CSSStyleDeclaration
object - 但所有这些属性有一个空字符串作为值:
CSSStyleDeclaration {
alignContent: ""
alignSelf: ""
...
...
...
color: ""
visibility: ""
...
...
}
所以基本上我需要的是触发按钮上的焦点事件,然后查看下拉列表的 css/style 属性 "visibility" 的值是否为 "visible"。 我不知道出了什么问题,因为我可以看到 Karma-Debug 中的一切都呈现良好,但所有样式属性都是空的...知道问题出在哪里吗?
我在运行时遇到过类似的问题(不是测试)。 样式 属性 是静态的,基于 html 元素的初始样式属性,因此不会动态更新。 解决方案是使用 Window.getComputedStyle()。此函数从样式表计算(当前!)样式。