如何对与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( "stem 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世界中的方式重构事物以使其更易于测试变得非常复杂.

因此,非常感谢上述样本案例的任何建议！

最佳答案

要测试以下代码：

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

您可以使用以下代码：

// First,create the elements
$( '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 );

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

原文地址：https://www.jb51.cc/jquery/428614.html

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

相关推荐