jquery - Jasmine jQuery：使用 toBeHidden() 和 toBeVisible()

Question

我需要帮助使用 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 看到文本字段向上滑动？

score 10 · Accepted Answer

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

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

score 5 · Accepted Answer

.toBeHidden或.toBeVisible不相反，请参阅Jasmine-jquery 文档。我建议你使用.toBeHidden和.not.toBeHidden结合。

请注意，这意味着它不占用空间（.toBeHiddenhttps://api.jquery.com/hidden-selector/ ），因此它希望您的固定装置附加到正文中。this.actual.is(':hidden')

.toBeVisible根据 jQuery 文档，检查this.actual.is(':visible')这意味着它检查元素是否具有visibility: hidden或opacity: 0. 所以它可能会占用空间，但应该没有可见性。

2 回答 2