javascript - Jasmine 中的位置重新加载

Question

我真的不确定如何进行测试？ ( spy ？)

function reloadPage() {
  $('#logo').click(function() {
    location.reload();
  })
}

任何建议都会很棒!

Answer 1

您可能不确定如何测试这段代码的原因是它在做 2 件不同的事情，您应该将它分成更小的 block 。

我在这里看到两个不同的函数:

• 点击事件处理
• 重新加载页面

那么为什么不这样分解逻辑呢？

function reloadPage() {
    location.reload();
}

function bindEvents() {
    $('#logo').click(reloadPage);
}

现在您可以使用 Spies 分别测试它们:

describe('when the logo is clicked', function() {
   var logo;
   var handlers;
   beforeEach(function() {
       handlers = {
           locationReload: location.reload, // handle for location.reload()
           reloadPage: reloadPage      // handle for your reloadPage()
       };

       logo = $('#logo').click(reloadPage);

       // attach Spy on reloadPage() and let the function call through
       spyOn(handlers, 'reloadPage').and.callThrough();

       // attach Spy on location.reload() 
       spyOn(handlers, 'locationReload');

   });

   it('will execute reloadPage function', function() {
        logo.trigger('click');
        expect(handlers.reloadPage).toHaveBeenCalled();
   });

   it('will reload the page', function() {
        logo.trigger('click');
        expect(handlers.locationReload).toHaveBeenCalled();
   });

   afterEach(function() {
       // clean up event bindings after each test
       logo.off('click');
   });

});

没有太多需要测试 reloadPage 处理程序是否正确添加到 #logo 的点击事件，因为测试是模拟 .click( ) 并检查 reloadPage 是否被调用。

因此很可能您只需要拥有 it('will reload the page') 规范，而不是两者。