问题描述

我真的不确定如何进行测试?(间谍?)

I'm really not sure how to approach testing this? (spyOn?)

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

任何建议都会很棒！

推荐答案

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

The reason you may be unsure about how to test this piece of code is because it's doing 2 different things and you should break it up into smaller chunks.

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

I see two distinct functions here:

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

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

So why not break up the logic like so?

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

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

现在您可以使用 Spies 单独测试它们:

Now you can test them separately using 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 是否被调用.

There's not much need to test that the reloadPage handler was correctly added to the #logo's click event because the test is simulating a .click() and checking if reloadPage gets called or not.

所以很可能你只需要 it('will reload the page') 规范，而不是两者.

So most likely you'd only need to have the it('will reload the page') spec, not both.

这篇关于茉莉花中的位置重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！