如何对与DOM元素交互的Javascript代码进行单元测试

背景：

我来自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( "


在后一种情况下,我的方法是所讨论的函数太大而且应该被打破到较小的(单位),以便可以对其进行测试.但是所有与DOM,jQuery,datatables,ajax等的交互点使得以我们在Java世界中的方式重构事物以使其更易于测试变得非常复杂.
因此,非常感谢上述样本案例的任何建议！


最佳答案
要测试以下代码：

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

您可以使用以下代码：

// First,create the elements
$( '

如你所见,它只是经典的设置>运行>断言模式.

如何对与DOM元素交互的Javascript代码进行单元测试

猜你在找的jQuery相关文章