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

Angular 2 tests - get DOM element styles(Angular 2 测试 - 获取 DOM 元素样式)
本文介绍了Angular 2 测试 - 获取 DOM 元素样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I want to test the functionality of my hide-show button in my Angular 2 app(Tests are written in Jasmine), so I need to check the value of the display property of the relevant element. How can I get this property using Angular's debugElement? Test code:

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

我得到错误:预期 undefined 为假".

I get the error: Expected undefined to be 'false'.

推荐答案

对于任何偶然发现这个例子的人来说,display 这个特定问题的解决方案是 hidden 属性在 debugElement 上.如果元素被隐藏,它将包含 true,否则将包含 false.

For anyone stumbling upon this example, the solution for this specific issue with display is the hidden property on the debugElement. It will contain true if the element is hidden and false otherwise.

这篇关于Angular 2 测试 - 获取 DOM 元素样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Canamp;#39;t pass a DOM element to a constructor function in Javascript when trying to abstract section of WebAudio API xhr request(尝试抽象WebAudio API xhr请求的部分时,无法将DOM元素传递给Java脚本中的构造函数)
wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
Minify CSS with Node-sass(使用Node-Sass缩小CSS)
Nested Table in jspdf(Jspdf中的嵌套表)
How to rotate outer div not inner content(如何旋转外部div而不是内部内容)
how to apply css transform to child on parent hover(如何对父级悬停时的子级应用CSS变换)