Unit testing Javascript that involves the DOM

Question

How do you go about unit testing javascript that uses and modifies the DOM?

I'll give an easy example. A form validator that checks for blank text fields, written in javascript and that uses 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;        };     } 

Usage:

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

What is the best practice for attempting to unit test something like this?

Answer 1

Ideally you should split the code. The validation logic does not really require DOM access, so you would put that into its own function, and put the logic that processes the ID into a value that is then validated into another.

By doing this, you can more easily unit test the validation logic, and if necessary do a functional test on the whole thing using some of the tools suggested by Joseph the Dreamer.