模拟jquery选择器并返回html元素

Question

I am trying to test a javascript function that requires that a certain element be present in the DOM. Below is the function that I am trying to test:

auction.save_scroll_state = function() {
    var user_agent = $window.navigator.userAgent.toLowerCase();
    var is_android = user_agent.indexOf("android") > -1;

    if (is_android) {
      var restore_pos = null;
      debugger
      if ($location.search().section == "items") {
        restore_pos = $('#all-items').scrollTop();
        $('#all-items').one('scroll', function(){$('#all-items').scrollTo(restore_pos)});
      }
      else if ($location.search().section == "user_items"){
        restore_pos = $('#your-items').scrollTop();
        $('#your-items').one('scroll', function(){$('#your-items').scrollTo(restore_pos)});
      }
    }
  };

When I run the test and get to the debugger any type $('#all-items').length it returns 0 indicating that the element cannot be found. I am trying to form some kind of Jasime spy that will mock out the jquery selector. My test is below:

it ('save_scroll_state android user_agent all-items', inject(function($bwAppState, $location, $window) {
  $window.navigator = {userAgent: "Mozilla/5.0 (Linux; Android 7.0; SM-G950F Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Mobile Safari/537.36"};
  var items_div = $("<div id='all-items'></div>");
  var jq_div_spy = spyOn($.fn, 'html' ).and.returnValue(items_div);
  var items_div_spy = spyOn(items_div, 'scrollTop');
  spyOn($location, "search").and.returnValue({section: 'items'});
  $bwAppState.auction.save_scroll_state();
  expect(items_div_spy).toHaveBeenCalled();
  delete $window.nagivator;
}));

The main goal is to make sure that scrollTop() gets called on some HTML element that has and id tag of id="all-items" .

Any help would be much appreciated

Answer 1

Not ideally, but could do as:

describe('ScrollTop on .test', function(){

    var scrollTopSpy;

    beforeEach(function(){
        scrollTopSpy = jasmine.createSpyObj('$-spy', ['scrollTop']); 
        spyOn(window, '$').and.callFake(function(selector){
            if(selector == '.test') {
                return scrollTopSpy;
            }
            else {
                return $(selector);
            }
        });
    });

    it('is called', function(){
        $('.test').scrollTop();
        expect($('.test').scrollTop).toHaveBeenCalled();
    });

    it('is not called', function(){
        expect($('.test').scrollTop).not.toHaveBeenCalled();
    })
})

Please not that only call of scrollTop on .test is performed, test is ignorant of real .test element existence in DOM.