33

DOM を使用および変更する JavaScript の単体テストを行うにはどうすればよいですか?

簡単な例を挙げます。JavaScript で記述され、JQuery を使用する空白のテキスト フィールドをチェックするフォーム バリデーター。

      function Validator() {

        this.isBlank = function(id) {
            if ($(id).val() == '') {
                return true;
            } else {
                return false;
          }
        };

        this.validate = function(inputs) {

           var errors = false;

           for (var field in inputs) {
               if (this.isBlank(inputs[field])) {
                   errors = true;
                   break;
               }
           }

           return errors;
       };
    }

使用法：

var validator = new Validator();
var fields = { field_1 : '#username', field_2 : '#email' };

if (!validator.validate(fields)) {
    console.log('validation failed');
} else {
    console.log('validation passed');
}

このような単体テストを試みるためのベスト プラクティスは何ですか?

4

3 に答える 3

22

理想的には、コードを分割する必要があります。検証ロジックは実際には DOM アクセスを必要としないため、それを独自の関数に入れ、ID を処理するロジックを値に入れ、それを別の値に検証します。

これにより、検証ロジックの単体テストをより簡単に行うことができ、必要に応じて、Joseph the Dreamer によって提案されたツールのいくつかを使用して、全体の機能テストを実行できます。

于 2013-06-01T04:41:24.590 に答える
9

ほとんどの JavaScript コードにロジックが含まれていて、少量の jQuery コード (またはライブ DOM 要素) に依存しているようなまれなケースですが、コードをリファクタリングして DOM へのアクセス/jQuery の使用を簡単に置き換え、モック実装でテストを書くことができます。

 function Validator(){
    this.getElementValue = function(id){return $(id).val();}

    this.check_blank = function(id){
    if(this.getElementValue(id) == '') // replace direct call to jQuery mock-able call
       return false;
    else
       return true;
    }....
}

テストでは、モック実装を提供します。

 test("Basic valid field", function() {
   var validation = new Validator();

   // replace element accessor with mock implementation:
   validation.getElementValue = function(id){
     equals(id, "#my_field"); // assert that ID is expected one
     return "7";
   }
   var form_fields = {field_1 : '#my_field'};

   ok(validation.validate(form_fields), "non-empty field should be valid");
 }
于 2013-06-01T04:16:55.250 に答える