Testowanie jednostki Javascript, który obejmuje DOM

Question

W jaki sposób testujesz jednostkę javascript, która używa i modyfikuje DOM?

Podam prosty przykład. Walidator formularzy, który sprawdza puste pola tekstowe, napisane w javascript i używające 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; 
     }; 
    } 

Zastosowanie:

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

Co jest najlepsze praktyki dla próby badanej jednostki czymś takim?

Answer 1

Idealnie należy podzielić kod. Logika walidacji tak naprawdę nie wymaga dostępu do DOM, więc umieścisz to w swojej własnej funkcji i umieścisz logikę, która przetwarza identyfikator na wartość, która jest następnie walidowana na inną.

W ten sposób można łatwiej przetestować logikę walidacji, aw razie potrzeby wykonać test funkcjonalny całości, korzystając z niektórych narzędzi zaproponowanych przez Josepha Dreamera.

Answer 2

Możesz użyć Qunit do testów jednostkowych z wykorzystaniem DOM. Jeśli chcesz go zautomatyzować, możesz użyć zadania Grunt z grunt-contrib-qunit, które uruchamia strony w bezgłowym zestawie WebKit o nazwie PhantomJS.

Answer 3

W mało prawdopodobnym przypadku, gdy większość kodu JavaScript zawiera logikę i polegać na niewielkiej ilości kodu jQuery (lub elementów DOM na żywo), można zmienić kod, aby zastąpienie dostępu do DOM/użytkowania jQuery było łatwe, a test zapisu z fałszywymi implementacjami :

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; 
    }.... 
} 

A w teście dostarczyć makiety realizacji:

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