Frontend Testing

In this post, we're going to talk about frontend testing. Because we know why we should test, and what, but not always how.

This post is here to help you get started.

For this post, we are going to create a Todo Application, using vanilla JS so that we can test everything.
The final app demo is here : http://b2l.github.io/todo-app/html/todo.html
And the application code is here : https://github.com/b2l/todo-app

Before we get started, let's create the project directory and jump into it :

mkdir todo-app
cd todo-app

The tools

This project is really basic, so we won’t set up any assets compilation.
We will just have an html entry point that will load any file we need.

We will use the following libraries to test the application :

• Mocha (test framework)
• ChaiJs (assertion library)
• selenium webdriver (from the selenium website: "Selenium automates browsers. That's it!")

Let's install them :

npm install -D mocha chai selenium-webdriver

Mocha provide a Command Line Interface that makes it easier to launch tests, so install it:

npm install -g mocha

Selenium work by having a java application that control the browser. You, as a client, connect to this web server and send it some command.

To use selenium, we need the selenium java server. Download it from here : selenium standalone server

We will need the path to the jar file you just downloaded.

Project structure

The project is a full frontend project, so we will need some JavaScript, CSS and HTML.

Let’s create a structure for this.

mkdir html
mkdir css
mkdir js
mkdir tests

Unit testing

Let's create our first test.

Our todo application will manage a list of todos. So we want to be able to :

• create a todo
• get a todo
• get all todos
• update a todo
• remove a todo
• mark a todo as done
• mark a todo as not done

Here is a part of our test file :

tests/todo-model.js gist

Before looking at the implementation, let's run the test :

mocha tests

Ok mocha complains that the file ../js/Todos.js doesn't exist. Let's create it now :

js/Todos.js gist

Run tests again :

mocha tests

And we are done !

Interface test

The test workflow with selenium is as follow :

• Run the selenium server
• Create a client with options
• Execute command

Everything is a command, or an action, from asking selenium for a node matching a selector to clicking somewhere or closing the browser.

The first point can be achieved in different ways, either by a script which manages the server, or we can start / stop it from the test.

We will use the second option, here is the file to initialize the server :

selenium-server.js gist

I won't go through the todo-application implementation because it's not the point of this article.

If you want to follow this step by step, just copy the css, html and js directories. Run our application :

python -m SimpleHTTPServer

You can test your application here : http://localhost:8000/html/todo.html

Here is the interface test :

tests/todo-interface.js gist

To run the interface test, we can use the same command as before :

Before we run the test: if you are a user of tmux (screen should have the same issue), please note that you will have to attach the selenium server to the user space as describe here : http://borkweb.com/story/chromedriver-doesnt-run-in-tmux

mocha tests/todo-interface.js

You can see a chrome browser starting in background and interacting with our application. Awesome !

Conclusion

There you are ! We have extracted and tested the domain part of the application (the Todos model) and we have test that the interface work properly too. You now have a small setup for testing your frontend application.