कैसे इकाई परीक्षण जावास्क्रिप्ट कोड है कि डोम तत्वों के साथ सूचना का आदान प्रदान करने के लिए

Question

पृष्ठभूमि:

मैं जावा पृष्ठभूमि से आ रहा हूँ जावास्क्रिप्ट के साथ भी परिचित तो नहीं।

हम अपने मौजूदा (विरासत) कोड और भविष्य के काम दोनों के लिए जावास्क्रिप्ट इकाई परीक्षण शुरू करने की योजना बना रहे हैं। हम मुख्य रूप से एक जावा दुकान (वसंत, वेबलॉगिक आदि) हैं।

हम उन विकल्पों को देख रहे हैं जो हमें आईडीई (इंटेलिजे विचार) और सोनार के साथ अच्छे एकीकरण के साथ-साथ निरंतर एकीकरण के हिस्से के रूप में चलाने में सक्षम होने के विकल्प भी देख रहे हैं।

जेएसटेस्ट ड्रायवर सभी बक्से पर टिक लग रहा है।

प्रश्न:

का एक बहुत अपने मौजूदा जावास्क्रिप्ट कोड एक है) JSPs भीतर embeded और ख) jQuery का इस्तेमाल सीधे पृष्ठ तत्वों के साथ बातचीत करने के लिए।

हमें किसी ऐसे फ़ंक्शन का परीक्षण करने के बारे में कैसे जाना चाहिए जो डोम पर भारी निर्भर है। यहाँ है कि मैं के बारे में बात कर रहा हूँ कार्यों में से कुछ कोड उदाहरण है:

function enableOccupationDetailsText(){ 
    $("#fldOccupation").val("Unknown"); 
    $("#fldOccupation_Details").attr("disabled", ""); 
    $("#fldOccupation_Details").val(""); 
    $("#fldOccupation_Details").focus(); 
} 

या

jQuery(document).ready(function(){ 

    var oTable = $('#policies').dataTable({ 
      "sDom" : 'frplitip', 
       "bProcessing": true, 
       "bServerSide": true, 
       "sAjaxSource": "xxxx.do", 
       "sPaginationType": "full_numbers", 
       "aaSorting": [[ 1, "asc" ]], 
       "oLanguage": { 
        "sProcessing": "Processing...", 
        "sLengthMenu": "Show _MENU_ policies", 
        "sZeroRecords": "No matching policies found", 
        "sInfo":   "Showing _START_ to _END_ of _TOTAL_ policies", 
        "sInfoEmpty": "Showing 0 to 0 of 0 policies", 
        "sInfoFiltered": "(filtered from _MAX_ total policies)", 
        "sInfoPostFix": "", 
        "sSearch":  "Search:", 
        "sUrl":   "", 
        "oPaginate": { 
         "sFirst": "First", 
         "sPrevious": "Previous", 
         "sNext":  "Next", 
         "sLast":  "Last" 
       } 
      }, 
       "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
         $('td:eq(0)', nRow).html("<a href='/ole/policy/general_details.do?policy_id="+aData[0]+"'>"+aData[0]+"</a>"); 
         return nRow; 

       }, 

       "fnServerData" : function (url, data, callback, settings) { 

       settings.jqXHR = $.ajax({ 
        "url": url, 
        "data": data, 
        "success": function (json) { 
         if (json.errorMessage != null) { 
          var an = settings.aanFeatures.r; 
          an[0].style.fontSize="18px"; 
          an[0].style.backgroundColor="red"; 
          an[0].style.height="70px"; 
          an[0].innerHTML=json.errorMessage; 
          setTimeout('window.location="/xxxx"',1000); 
          //window.location="/xxxxx"; 
         } else { 
          $(settings.oInstance).trigger('xhr', settings); 
          callback(json); 
         } 
        }, 
        "dataType": "json", 
        "cache": false, 
        "error": function (xhr, error, thrown) { 
         if (error == "parsererror") { 
          alert("Unexpected error, please contact system administrator. Press OK to be redirected to home page."); 
          window.location="/xxxx"; 
         } 
        } 
       }); 
       } 

      }); 
     $("#policies_filter :text").attr('id', 'fldKeywordSearch'); 
     $("#policies_length :input").attr('id', 'fldNumberOfRows'); 
     $("body").find("span > span").css("border","3px solid red"); 
     oTable.fnSetFilteringDelay(500); 
     oTable.fnSearchHighlighting(); 
     $("#fldKeywordSearch").focus(); 

} 
); 

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

तो, उपर्युक्त नमूने के मामलों के लिए किसी भी सुझाव की सराहना की जाएगी!

Answer 1

निम्नलिखित कोड का परीक्षण करने के लिए:: आज मैं इस साइट विशेष रूप से एक jQuery पृष्ठभूमि में यूनिट-परीक्षण के लिए अलग अलग तरीकों का वर्णन पर ठोकर खाई

function enableOccupationDetailsText(){ 
    $("#fldOccupation").val("Unknown"); 
    $("#fldOccupation_Details").attr("disabled", ""); 
    $("#fldOccupation_Details").val(""); 
    $("#fldOccupation_Details").focus(); 
} 

आप इस्तेमाल कर सकते हैं निम्नलिखित कोड:

// First, create the elements 
$('<input>', { id: 'fldOccupation' }).appendTo(document.body); 
$('<input>', { disabled: true, id: 'fldOccupation_Details' }) 
    .appendTo(document.body); 

// Then, run the function to test 
enableOccupationDetailsText(); 

// And test 
assert($('#fldOccupation').val(), 'Unknown'); 
assert($('#fldOccupation_Details').prop('disabled'), false); 

जैसा कि आप देखते हैं, यह केवल शास्त्रीय setup > run > assert है पैटर्न।

Answer 2

शायद सेलेनियम/SeleniumGrid आप के लिए उपयोगी है: http://seleniumhq.org/

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

संपादित: http://addyosmani.com/blog/jquery-testing-tools/