問題描述

我真的不確定如何進行測試?(間諜?)

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.

這篇關于茉莉花中的位置重新加載的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！