ユニットテストDOMを含むJavascript

Question

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'); 
} 

ユニットテストにこのような何かをしようとするためのベストプラクティスは何ですか？

Answer 1

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

このようにすることで、検証ロジックの単体テストをより簡単に行うことができ、必要に応じてJoseph the Dreamerが提案したツールの一部を使用して機能テストを行うことができます。

Answer 2

QunitはDOMを含む単体テストに使用できます。自動化したい場合はPhantomJSというヘッドレスWebKitでページを起動するgrunt-contrib-qunitタスクでGruntを使用できます。

Answer 3

ほとんどのJavaScriptコードにロジックが含まれていて、少量のjQueryコード（またはライブDOM要素）に頼っている場合は、jQueryのDOM /使用へのアクセスを簡単に置き換えて模擬実装：

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"); 
}