測試提交的表單不會與sinon，mocha和chai一起提交

我有一個簡單的表單，它不會在任何地方提交（使用preventDefault），而是更新UI。我想要測試在提交表單時是否有錯誤提交了UI，但是submit未在我的測試套件中運行。測試提交的表單不會與sinon，mocha和chai一起提交

該套件使用jsdom,mocha和sinon進行設置。一個例子如下。我的問題是，是否有可能在jsdom /用sinon測試手動表單提交（通過jQuery處理），其中的動作是""，並且有onsubmit回調？

在我的類文件中有一個簡單的表單提交處理程序。

# MyClass.coffee 
$('#my-form').on 'submit', (e) -> 
    e.preventDefault() 
    @doSomeStuff()

我的測試用例將內容注入到表單域並調用提交。想象一下，在套件中有一個MyClass的實例

# MyClass_spec.coffee 
it 'can submit a form', -> 
    myClass = new MyClass() 
    doSomeStuffSpy = sinon.spy MyClass, 'doSomeStuff' 
    $('#my-form').find('textarea').val('content') 
    $('#my-form').submit() 
    expect(doSomeStuffSpy).to.have.been.calledOnce

看來，提交從未發生，並且我的斷言總是錯誤的。有沒有一種方法可以像這樣測試表單提交？我不需要測試任何東西。我只是想測試在onsubmit回調運行後發生的事情。

在此先感謝。

來源

2014-12-03 grammar

夫婦的想法。你確定你正在監視該方法的正確實例/原型嗎？

在您的測試中，您是否應該檢查實例上的方法是否正在調用，因爲它似乎是MyClass類的實例上的方法。

doSomeStuffSpy = sinon.spy myClass, 'doSomeStuff'

在您提交處理程序，你可能在事件，而不是調用類@doSomeStuff()，因爲事件處理函數不是綁定到類=>的情況下。

在上下文中，您可能需要確保您沒有將這些事件綁定到全局上下文$('#my-form').on 'submit', (e) ->，而是將其綁定到類本身的實例（這使得更容易將事件窺探並封裝到dom片段中）。類似於骨幹視圖。

class MyClass 
    constructor: (el)-> 
    @$el = $(el) 
    @$el.on 'submit', @doStuff 

    doStuff: (e)=> # bound to the context of the class, not the event.

這應該是可檢驗的，是這樣的：

myClass = MyClass.new("<form></form") 
spy = Sinon.createSpy myClass, 'doStuff' 
myClass.trigger 'submit' 
expect(spy).toHaveBeenCalled()

您還可以檢查DOM更新，從回調發生這樣做的期望像

value = myClass.$el.find('input').val() 
expect(value).toEqual('foo')

這是不太容易出故障而不是從全局的角度出發，並且允許你測試你的組件與你應用中的實際dom隔離。

來源

2014-12-06 12:24:05

測試提交的表單不會與sinon，mocha和chai一起提交

回答

相關問題