परीक्षण backbone.js चमेली

Question

मैं सर्वव्यापी backbone.js 'कार्य करने की' उदाहरण के Coffeescript कार्यान्वयन के लिए दृश्य परीक्षण को लागू करने की कोशिश कर रहा हूँ के साथ घटनाओं को देखने के (देखें github.com/rsim/backbone_coffeescript_demo।)

मेरे चमेली उपरोक्त डेमो के परीक्षणों को देखने के लिए घटनाओं को छोड़कर बहुत अच्छी तरह से काम करते हैं। मुझे उम्मीद है कि मैं निम्नलिखित में से एक या दोनों पर फंस गया हूं i) मैं दृश्य कोड में बाध्यकारी घटना को समझ नहीं पा रहा हूं, ii) मुझे समझ में नहीं आता कि दृश्य कोड घटनाओं के जैस्मीन परीक्षण को कैसे व्यवस्थित किया जाए।

यहाँ

class TodoApp.TodoView extends Backbone.View 
    tagName: "li" 
    template: TodoApp.template '#item-template' 
    events: 
    "dblclick div.todo-content" : "edit" 
    ... 

    initialize: -> 
    _.bindAll this, 'render', 'close' 
    @model.bind 'change', @render 
    @model.bind 'destroy', => @remove() 

    render: -> 
    $(@el).html @template @model.toJSON() 
    @setContent() 
    this 

    edit: -> 
    $(@el).addClass "editing" 
    @input.focus() 
    ... 

'संपादन' घटना का एक उदाहरण है ... ... अब यहाँ है कि क्या ध्यान देने का एक परीक्षण है डबल क्लिक पर प्राप्त किया गया था:

describe "edit state", -> 
     li = null 

    beforeEach -> 
     setFixtures('<ul id="todo-list"></ul>') 
     model = new Backbone.Model id: 1, content: todoValue, done: false 
     view = new TodoApp.TodoView model: model, template: readFixtures("_item_template.html") 
     $("ul#todo-list").append(view.render().el) 
      li = $('ul#todo-list li:first') 
     target = li.find('div.todo-content') 
     expect(target).toExist() 
       target.trigger('dblclick') # here's the event! 

    it "input takes focus", -> 
     expect(li.find('.todo-input').is(':focus')).toBe(true) 

उम्मीद पर न तो मैं) जासूस और न ही ii) फोकस पूरा हो गया है।

क्या backbone.js इवेंट कोड का परीक्षण करने के लिए कोई विशिष्टता है जिसके बारे में मुझे जैस्मीन में अवगत होना चाहिए?

Answer 1

आप दृश्य के edit विधि पर जासूसी कर रहे हैं। यह एक जासूस वस्तु के साथ विधि को प्रतिस्थापित करता है, जिसका अर्थ है कि वास्तविक संपादन विधि नहीं बुलाई जाएगी। इसलिए, आप @input.focus कभी नहीं आग लगेंगे।

चूंकि आप वास्तव में अपनी संपादन विधि को कॉल करना चाहते हैं, तो मैं इसके लिए जासूस को हटा दूंगा।

साइड नोट: अपने पहले से प्रत्येक में expect विधियों को कॉल न करें। यदि आपको वास्तव में उन पर अपेक्षा निर्धारित करने की आवश्यकता है, तो उनके लिए it ब्लॉक बनाएं।

Answer 2

मैं ताबूत के साथ बहुत अच्छा नहीं हूं इसलिए मुझे कुछ याद आ रहा है लेकिन आप अपनी जासूसी कहां स्थापित कर रहे हैं?

ईवेंट कॉलिंग का परीक्षण करने के लिए आपको जासूस सेट अप करने के बाद दृश्य की घटनाओं को रीफ्रेश करने की आवश्यकता हो सकती है।

spyOn(view, 'edit'); 
view.delegateEvents(); 
target.trigger('dblclick'); 

it("should call edit when target is double clicked", function() { 
    expect(view.edit).toHaveBeenCalled() 
}); 

Answer 3

मैं coffeescript में अपने परीक्षण लिखना नहीं किया, लेकिन मैं एक ही समस्या है था, इसलिए मुझे आशा है कि तुम मुझे javadcript में जवाब देने के लिए माफ कर देगा। मैंने आपके परीक्षण को दो अलग-अलग परीक्षणों में तोड़ दिया। सबसे पहले, मैंने परीक्षण किया है कि दृश्य के संपादन फ़ंक्शन को कॉल करने पर इनपुट बॉक्स पर फ़ोकस सेट किया गया है। उसके बाद, मैंने परीक्षण किया कि जब लेबल डबल-क्लिक किया गया था, तो संपादन को कॉल किया गया था, और अभी तक उस परीक्षा को पास नहीं किया है। लेकिन यहां बताया गया है कि संपादन फ़ंक्शन ने काम किया है या नहीं।

describe ("A todo item view", function(){ 
    var my_model; 
    var todo_view; 

    beforeEach(function(){ 
     my_model = new Todo({content:"todo value", done:false}); 
     todo_view = new TodoView({model:my_model}); 

    }); 


    it("should set the focus on the input box when the edit function is called", function(){ 
     $('body').append(todo_view.$el); //append the view to Specrunner.html 
     todo_view.edit(); //call the view's edit function 
     var focus= document.activeElement; //finds what element on the page has focus 
     expect(focus).toBe('.todo-input'); //jasmine-jquery matcher checks if focused element has the .todo-input class 
}); 

कुछ ऐसा जो समस्याएं पैदा कर सकता है वह यह है कि आपका मॉडल और आपका दृश्य पहले से अंदर घोषित किया गया है। उन्हें पहले घोषित करना प्रत्येक का मतलब है कि वे केवल प्रत्येक के दायरे के अंदर मौजूद हैं, और जब आप इसे चलाते हैं तो अब अस्तित्व में नहीं है।

इसके अलावा, सेटफिक्चर करता है जो आपको लगता है कि यह करता है? फोकस को उस तत्व पर सेट नहीं किया जा सकता है जो डीओएम पेड़ का हिस्सा नहीं है, इसलिए मैंने दृश्य के एल को जैस्मीन स्पेक के शरीर में जोड़ दिया। (मैं एचटीएमएल specrunner का उपयोग कर रहा हूँ, कमांड लाइन संस्करण नहीं) यह इसे डोम के पेड़ का हिस्सा बनाता है और इसलिए इसे ध्यान केंद्रित करने की अनुमति देता है, और यह भी बनाता है कि यह टेस्ट करने योग्य है या नहीं।

Answer 4

इसके साथ समस्या यह है कि Backbone.View events ऑब्जेक्ट event delegation का उपयोग कर रहा है। घटनाओं को काम करने में सक्षम होने के लिए तत्व को डीओएम का हिस्सा होना पड़ता है, आप इसे $('body').append(someView.el) जैसे beforeEach में कुछ कर कर ऐसा कर सकते हैं।निजी तौर पर, मैं परीक्षण नहीं करता कि बैकबोन events सही तरीके से सेट कर रहा है और मैन्युअल रूप से क्लिक ट्रिगर कर रहा है, यूनिट परीक्षणों के लिए कॉलबैक हैंडलर को सीधे कॉल करने के लिए अधिक व्यावहारिक है जो पूरी तरह से डोम से परहेज करता है जो आपके परीक्षणों को बहुत धीमा कर सकता है।

:focus के लिए एक ही समस्या है, डीओएम में एक तत्व होना चाहिए ताकि jQuery बता सके कि कोई तत्व केंद्रित है या नहीं। इस मामले में कुछ घटक को अपने घटक के हिस्से के रूप में सेट करना बेहतर है और डोम से पूछताछ के माध्यम से राज्य की जांच नहीं करना, उदाहरण: someView.hasFocus === true। वैकल्पिक रूप से आप focus कार्यान्वयन तत्वों पर जासूसी कर सकते हैं और जांच सकते हैं कि इसे कहलाया गया था या नहीं।