javascript - 无法在 Jasmine 测试中获取 scrollTop 值

Question

这是我向 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 并希望它只是下一行的值。这个测试怎么会失败？

如果重要的话，我正在使用 Jasmine 1.3.1 和 requirejs 以及 jasmine-jquery 作为扩展。

Answer 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

希望对您有所帮助，谢谢。