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.
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:
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>
No comments:
Post a Comment