I don’t think that we have to discuss the importance of having tests.
That’s not something that we add to the project in addition. That’s
something that the project is based on. And because testing is so
important we have bunch of tools in our disposal. We all know (I hope)
how to test our back-end code. However, once we move to the front-end is
a bit different. At the moment
we
are working on a big single page application and testing is one of our
main focuses. In this article you will see how to unit test our
client-side JavaScript.
Note: this article does not follow best practices working with
AngularJS. The client-side code here is definitely not the best one. The
idea is to show how jsdom may be used for testing browser apps. Here is an article that will guide you for better testing of AngularJS apps.
The example
In order to illustrate the problem and its solution we will create a simple
AngularJS
application. AngularJS because it is a popular framework and probably
you are familiar with it. Originally the concepts described in this
article were applied to a project that uses
Ractive.js but it works for AngularJS and it will probably work for
Ember.js or
Backbone.js.
Let’s say that we have a menu and the last link there shows a form
for registering a new user. The fields in the form have some validation
mechanisms. The are mandatory and have requirements for a minimum number
of letters. Overall the example looks like that:

We have a placeholder below the form that shows an error message.
Here is the code that we start with:
<!doctype html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="./css/styles.css">
<script src="./vendor/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', [])
.controller('Controller', function($scope) {})
.directive('registerForm', function() {
...
})
.directive('appHeader', function() {
...
});
</script>
</head>
<body>
<div ng-controller="Controller">
<app-header></app-header>
</div>
</body>
</html>