title: Unit testing Javascript that involves the DOM
body: <p>How do you go about unit testing javascript that uses and modifies the DOM?</p>
  
  <p>I'll give an easy example. A form validator that checks for blank text fields, written in javascript and that uses JQuery. </p>
  
  <pre><code>      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;
         };
      }
  </code></pre>
  
  <p>Usage:</p>
  
  <pre><code>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');
  }
  </code></pre>
  
  <p>What is the best practice for attempting to unit test something like this?</p>