未能在 Jasmine 测试中获取 scrollTop 值答案

【问题标题】：Failing to get the scrollTop value inside a Jasmine test未能在 Jasmine 测试中获取 scrollTop 值
【发布时间】：2019-09-14 20:59:08
【问题描述】：

这是我向 Stack Overflow 提出的第一个问题，Jasmine 对我来说还很陌生，所以我希望我在这里一切顺利。

我有一个 Jasmine 测试，我尝试将页面的滚动位置设置为某个值。实际代码非常复杂，但我设法制作了一个更简单的失败测试示例：

it("should set scrollTop to equal 100", function () {
  setFixtures("<div id='page' style='height: 1000px;'>Page content</div>");

  spyOn($.fn, "scrollTop");
  $("#page").scrollTop(100);

  expect($.fn.scrollTop).toHaveBeenCalledWith(100); // this test passes
  expect($("#page").scrollTop()).toEqual(100);
});

结果：预期 0 等于 100。

我将 scrollTop 设置为 100，并希望它只是在下一行。这个测试是怎么失败的？

如果重要的话，我将使用带有 requirejs 和 jasmine-jquery 作为扩展的 Jasmine 1.3.1。

【问题讨论】：

你要测试什么？那个 scrollTop 工作吗？这是第三方库——该库的作者应该对其进行测试。我建议在 scrollTop 上设置 spy 并期望 spy 会被调用
实际上，当点击列表中的项目时，我将值保留在 sessionStorage 对象中。我稍后在用户返回列表时使用它，因为我将 scrollPostion 设置为该值。这样用户就可以从他们离开的地方开始。这似乎在应用程序本身上运行良好。我确实在它上面设置了一个间谍，它工作正常（也更新了示例代码）。你可能是对的，我做得过火了，但我仍然很想知道为什么这个测试失败了。
在当前版本中，spyOn 将捕获对scrollTop 的所有调用并结束。请考虑使用callThrough 或callFake 来了解正在发生的事情。还有一件事……您可以将debugger statemanet 放在第一个expect 之前并在webbrowser 中运行测试（请同时打开控制台，以便浏览器可以捕获debugger）

标签： javascript jquery jasmine jasmine-jquery

【解决方案1】：

我看不到setFixtures 做了什么，但我猜是因为；

创建的 DOM 节点尚未附加到活动 DOM 中的任何位置。
DIV 的样式不是可滚动的。
DIV 内容不足，无法显示滚动条。

这是一个简单的例子；

var div = document.createElement('div');
div.style.height = '100px';
div.style.width = '100px';

// ensure the content has a track for scrollbars (won't work without this)
div.style.overflow = 'scroll';

// it also needs enough content to actually be scrollable (won't work without this)
div.innerHTML = '<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x';

// needs to be appended to the live DOM (won't work without this)
document.body.appendChild(div);

// we can now set this value
div.scrollTop = 50;

// and read it back
console.log(div.scrollTop);
// == 50

希望对你有帮助，谢谢。

【讨论】：