qUnit में किसी DOM ऑब्जेक्ट के विरुद्ध परीक्षण कैसे करें?

Question

मैं qUnit के साथ कुछ जावास्क्रिप्ट का परीक्षण कर रहा हूं। एक ऑब्जेक्ट में मैं एक डोम तत्व पास करता हूं, और कुछ विधियां तत्व के कुछ गुणों को बदल देती हैं।

मैं qUnit में एक DOM ऑब्जेक्ट का नकल कैसे कर सकता हूं?

मैं एक समाधान ब्राउज़र का स्वतंत्र उपयोग करना चाहता हूं, क्योंकि मैं XUL अनुप्रयोगों का भी परीक्षण करता हूं।

Answer 1

आप जावास्क्रिप्ट में हमेशा एक तत्व बना सकते हैं। आप इसे संलग्न नहीं है, तो (जैसे शरीर के लिए), यह नहीं देखा जा सकेगा, ताकि आप इसे एक नकली तत्व कह सकते हैं:

document.createElement('div'); // 'div' will create a '<div>' 

तो तुम बस के रूप में अच्छी तरह से एक qUnit परीक्षण समारोह में इसका उपयोग कर सकते : http://jsfiddle.net/LeMFH/।

test("test", function() { 
    expect(1); 

    var elem = document.createElement("div"); 

    elem.style.position = "absolute"; 

    equals(elem.style.position, "absolute"); 
}); 

Answer 2

मुझे यह स्थिति थी जहां मैं एक JQuery प्लगइन के लिए एक यूनिट टेस्ट बनाना चाहता था जिसे मैंने लिखा था जो सरल मूल वृक्ष विस्तार क्षमता प्रदान करता है। मुझे क्विनिट "ओके" विधि का उपयोग करके डमी लाइन आइटम ("एलआई" तत्व) बनाने और इस सूची आइटम के बच्चे के रूप में परीक्षण डीओएम इंजेक्ट करने का एक तरीका मिला, इस प्रकार परिणामस्वरूप छेड़छाड़ की जांच परीक्षण को बढ़ाकर जांच की जा सकती है। अगर परीक्षण विफल हो गया है, तो मैन्युअल डीओएम तत्व स्वचालित रूप से QUNit सिस्टम द्वारा प्रदर्शित किए जाएंगे। जिसके परिणामस्वरूप QUnit उत्पादन की तरह लग रहा है:

इस समस्या का समाधान मेरे एक समारोह "testSpace" जहां लाइन आइटम पाठ और परीक्षण HTML इसलिए QUnit परीक्षण आदेशों की जांच कर सकते परिभाषित किया जा सकता कहा जाता है का निर्माण करना था परिणामी डोम। निम्न परीक्षण कोड इस सुविधा का उपयोग करता है:

test("$.fn.tocControl", function() { 
    var sTest = 
      "<div>" 
      + "<ul>" 
       + "<li>item1</li>" 
       + "<li>item2" 
        + "<ul>" 
         + "<li>s1item1</li>" 
         + "<li>s1item2" 
         + "<ul>" 
          + "<li>s2item1</li>" 
          + "<li>s2item2" 
          + "</li>" 
          + "<li>s2item3</li>" 
          + "<li>s2item4</li>" 
         + "</ul>" 
         + "</li>" 
         + "<li>s1item3</li>" 
         + "<li>s1item4</li>" 
        + "</ul>" 
       + "</li>" 
       + "<li>item3</li>" 
       + "<li>item4</li>" 
       + "<li>item5</li>" 
      + "</ul>" 
     + "</div>"; 

    // Create the test HTML here. 
    var jqTest = testSpace("$.fn.tocControl.test", sTest); 

    // Invoke the JQuery method to test. 
    jqTest.find("ul").tocControl(); 

    // QUnit tests check if DOM resulting object is as expected. 
    equal(jqTest.find("ul.ea-toc-control").length, 1, '$("div#testSpace ul.tocControl").length'); 
    equal(jqTest.find("ul:first").hasClass("ea-toc-control"), true, '$("div#testSpace ul:first").hasClass("tocControl")'); 
}); 

"testSpace" समारोह लाइन आइटम को परिभाषित करता है QUnit "ठीक है" पद्धति का उपयोग करके, लेकिन शुरू में निर्माण करती डोम QUnit प्रणाली को परिभाषित करता है जब तक एक अस्थायी स्थान में वस्तुओं रेखा वस्तु। इस फ़ंक्शन को निम्नानुसार परिभाषित किया गया है:

function testSpace(sName, sHTML) { 
    ok(true, sName); 

    var jqTestItem = $("ol#qunit-tests > li:last"); 
    jqTestItem.append('<div id="testSpaceContainer" style="display:none;">' + sHTML + '</div>'); 

    var jqTestSpace = jqTestItem.children("div#testSpaceContainer:first"); 

    var moveTestSpaceStart = $.TimeStamp(); 
    var moveTestSpace = function() { 
     var jqTestArea = jqTestItem.find("ol > li:contains(" + sName + ")").filter(function() { return $(this).text() == sName; }); 
     if (jqTestArea.length <= 0) { 
      if (!$.HasTimedOut(moveTestSpaceStart, 5000)) setTimeout(moveTestSpace, 200); 
      return false; 
     } 
     var oTestSpace = jqTestSpace.detach(); 
     jqTestArea.append(oTestSpace); 
     jqTestArea.find("div#testSpaceContainer").show(); 
     return true; 
    } 
    moveTestSpace(); 

    return jqTestSpace.children().first(); 
}