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 plex, 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.

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 plex, 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.

• javascript
• jquery
• jasmine
• jasmine-jquery

Share Improve this question Follow edited Sep 14, 2019 at 12:59 balzafin asked Nov 7, 2014 at 18:03 balzafinbalzafin 1,42611 gold badge1717 silver badges2828 bronze badges 3

• 1 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 – Krzysztof Safjanowski Commented Nov 7, 2014 at 18:58
• 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 es 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. – balzafin Commented Nov 7, 2014 at 20:14
• 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) – Krzysztof Safjanowski Commented Nov 7, 2014 at 21:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.