Javascript 茉莉花的位置

我真的不知道如何测试这个？（间谍？）

---

任何建议都很好

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

我在这里看到两个不同的功能：

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

那么，为什么不打破这样的逻辑呢

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'）

spec，而不是两者都需要。

谢谢@sweetammase！这是将一个函数分解为两个函数的好建议。当我运行测试时，它会显示“Expected spy reloadPage已被调用”和“Expected spy locationReload已被调用”？你知道它为什么这么做吗？

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

});