Jasmine jQuery:使用toBeHidden()和toBeVisible()

时间:2013-10-29 19:10:17

标签: jquery jasmine bdd jasmine-jquery

我需要帮助使用jQuery-Jasmine的toBeHidden()toBeVisible()方法。

当用户选中复选框时,文本字段应向下滑动 - 并取消选中将其向上滑动。页面加载时隐藏文本字段。

代码在我的应用程序中工作正常,但我对我在测试中得到的结果感到困惑。

前两个正在工作 - 检查字段是否默认隐藏并在第一次更改时可见:

expect($('#text-field')).toBeHidden(); // passes

$('#checkbox').prop('checked', true).change();
expect($('#text-field')).toBeVisible(); // passes

但是当取消选中该复选框时,文本字段会在实际版本中向上滑动但在我的测试中失败:

$('#checkbox').prop('checked', false).change();
expect($('#text-field')).toBeHidden(); // fails

我也试过了:

expect($('#text-field')).not.toBeVisible(); // fails
expect($('#text-field')).toHaveCss({display: "none"}); // fails

有谁知道我做错了什么或者知道我还需要做些什么来帮助Jasmine看到文本字段滑了?

2 个答案:

答案 0 :(得分:10)

您可能遇到了与我相同的问题,您的视图在测试中是标准的,因为它没有附加到DOM。在测试中试试这个:

$('body').append(view);

答案 1 :(得分:5)

.toBeHidden.toBeVisible或不是对立面,请参阅Jasmine-jquery docs。 我建议您同时使用.toBeHidden.not.toBeHidden

请注意,.toBeHidden执行this.actual.is(':hidden')这意味着它不占用任何空间(https://api.jquery.com/hidden-selector/),因此它希望您的灯具可以附加到正文中。

.toBeVisible检查this.actual.is(':visible'),根据jQuery文档,它意味着它会检查元素是否包含visibility: hiddenopacity: 0。所以它可能消耗空间,但应该没有可见性。