背景:
我来自Java背景,所以不太熟悉Javascript。
我们计划对现有(遗留)代码和未来工作引入JavaScript单元测试。我们主要是一家java商店(Spring,Weblogic等)。
我们正在寻找能够与IDE(IntelliJ构思)和声纳良好集成的选项,以及能够将它们作为持续集成的一部分运行。
JsTestDriver似乎勾选了所有方框。
问题:
我们现有的许多javascript代码都是a)嵌入在JSP中,b)利用jQuery直接与页面元素进行交互。
我们应该如何测试严重依赖于DOM的函数。以下是我正在谈论的函数的一些代码示例:
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();
}
);
在后一种情况下,我的方法是所讨论的函数太大而且应该被打破到较小的(单位),以便可以对其进行测试。但是所有与DOM,jQuery,datatables,ajax等的交互点使我们在Java世界中重构事物变得非常复杂,以使其更易于测试。
因此,非常感谢上述样本案例的任何建议!
答案 0 :(得分:6)
测试以下代码:
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
模式。
答案 1 :(得分:4)
也许Selenium / SeleniumGrid对您有用:http://seleniumhq.org/
根据定义,它不是“UnitTest”,但您可以使用java或python(以及更多......)编写selenium测试作为单元测试。 Seleniumtests在真实浏览器中启动Web测试,并且非常适合测试前端(和dom操作)。
编辑:今天我偶然发现这个网站描述了不同的单元测试方法,尤其是在jQuery背景中:http://addyosmani.com/blog/jquery-testing-tools/