Les tests unitaires Javascript qui implique le DOM

Comment allez-vous les tests unitaires javascript qui utilise et modifie le DOM?

Je vais vous donner un exemple simple. Un validateur de formulaire qui vérifie vide les champs de texte, écrit en javascript et qui utilise 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;
       };
    }

Utilisation:

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

Quelle est la meilleure pratique pour tenter de test unitaire quelque chose comme cela?

InformationsquelleAutor BIOS | 2013-06-01
  1. 19

    Idéalement, vous devriez diviser le code. La logique de validation ne nécessite pas vraiment de DOM accès, de sorte que vous vous mettez que dans sa propre fonction, et mettre de la logique qui traite les ID en une valeur qui est ensuite validée dans un autre.

    En faisant cela, vous pouvez plus facilement de l'unité de test de la logique de validation, et si nécessaire, de faire un test fonctionnel sur l'ensemble de la chose en utilisant certains des outils proposés par Joseph le Rêveur.

    • C'est absolument la voie à suivre. L'interaction avec le DOM signifie généralement que vous font de plus en plus fonctionnel ou test d'intégration. Placez votre code de validation dans un module séparé avec sa propre unité de tests. Puis incorporer le module à l'aide de votre favori chargeur de module comme browserify github.com/substack/browserify
    InformationsquelleAutor Jani Hartikainen
  2. 10

    Vous pouvez utiliser Qunit pour les tests unitaires impliquant des DOM. Si vous le souhaitez automatisé, vous pouvez utiliser Grunt avec grunt-contrib-qunit tâche qui lance vos pages dans une tête WebKit appelé PhantomJS.

    InformationsquelleAutor Joseph
  3. 9

    Dans le cas peu probable où la plupart de votre code JavaScript contient la logique et de s'appuyer sur une petite quantité de code jQuery (ou vivent des éléments du DOM), vous pouvez refactoriser le code pour faire le remplacement de l'accès aux DOM/utilisation de jQuery facile et test d'écriture à la maquette des implémentations:

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

    Et le test de fournir maquette de mise en œuvre:

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