javascript - 模拟 jquery 选择器并返回一个 html 元素

Question

我正在尝试测试一个要求 DOM 中存在特定元素的 javascript 函数。以下是我要测试的功能:

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

当我运行测试并进入调试器时，任何类型 $('#all-items').length它返回 0表示找不到该元素。我正在尝试形成某种 Jasime spy ，它将模拟 jquery 选择器。我的测试如下:

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

主要目标是确保scrollTop()在一些具有 id="all-items" id 标记的 HTML 元素上被调用.

任何帮助将不胜感激

Answer 1

不理想，但可以这样做:

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

请注意，仅在 .test 上调用 scrollTop，测试忽略了 DOM 中真实的 .test 元素。