Failing to get the scrollTop value inside a Jasmine test

Question

This is my first question to Stack Overflow and Jasmine is fairly new to me, so I hope I'm doing ok here.

I have a Jasmine test where I try to set the scroll position of my page to a certain value. The actual code is pretty complex, but I managed to make a more simple example of the failing test:

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);
});

The result: Expected 0 to equal 100.

I set the scrollTop to 100 and expect it to be just that on the next line. How does this test fail?

If it matters, I'm using Jasmine 1.3.1 with requirejs and jasmine-jquery as an extension.

Zasuwa

And what you are going to test? That scrollTop is working? This is third part library – author of that library should test it. I suggest to set spy on scrollTop and expect that spy will be called – Tajo

In reality, I'm persisting the value in the sessionStorage object when an item in a list is tapped. I use it later when the user comes back to the list as I set the scrollPostion to that value. That way the users can start from where they left off. This seems to be working fine on the app itself. I did set a spy on it and it is working correctly (updated the example code as well). You may be right that I’m overdoing it, but I’m still curious to know why this test fails. – Zasuwa

In current version spyOn will catch every calls to scrollTopand end. Please consider to use callThrough or callFake to have knowledge about whats happening. One other thing to do … You can put debugger statemanet before first expect and run test in webbrowser (please also open console, so browser can catch debugger) – Tajo

Answer 1

I can't see what setFixtures does, but my guess is because;

• The DOM nodes created have not been appended anywhere in the live DOM.
• The DIV is not styled to be scrollable.
• The DIV does not have enough content to show a scrollbar.

Here is a plain example;

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

I hope this helps, thanks.

Jubbulpore