Wednesday 19 June 2013

Running KarmaJS’s AngularJS example test/e2e/angular-scenario (on Chrome)

To learn and get an idea of how Karma (the 'Spectacular Test Runner for JavaScript') works, and how it can be used to create browser automations tests, here are the steps I took to get the test/e2e/angular-scenario example to work.

It all started with a clone of: git@github.com:karma-runner/karma.git


image

With this KarmaJS test example (see below), being the one that we are going to use:

image

I then opened an nodejs command prompt and navigated to the folder shown above:

image

... used node server.js to start a local webserver

image

... on port 8000:

image

The test case we are using (on KarmaJS's test/e2e/angular-scenario) is a simple AngularJS example, which just consumes the angular-min.js file model attribute:

image

... and uses angular to populate the {{yourName}} value dynamically (wired to the input field via the ng-model="yourName")

image

Next we are going to run this Jasmine ('Behavior-Driven Development framework for testing JavaScript code') test using KarmaJS

image

... which should work with just: karma start karma.conf.js

image

... but it didn't

There is a module dependency missing, which in this case can be resolved by running this command from the root of the karma repository:

image

UPDATE: the issue above was caused by the fact that I had an the official released version of karma installed globally which is the one that was running when I tried it on the 'test/e2e/angular-scenario' folder'

And now (based on an option from the karma.conf.js) a Chrome window opened up:

image

Clicking on the Debug button:

image

… we can more details on the test that failed:

image

In this case the problem is that the ‘proxy mapping’ that karma does is not correct

If we look at the karma.config.js file

image

.... and the unit test brower().navigateTo command

image

... we can see that karma will try to open /index.html from http://localhost:8000/test/e2e/angular-scenario/index.html

That is not going to work since the page we want it is on http://localhost:8000/index.html (which happened because we started node server.js on the …/test/e2e/angular-scenario folder)

image

One way to solved this, is to change the ‘proxies’ mapping to ‘/’ : ‘http://localhost:8000/’

image

... and after stopping and starting the karma server:

image

all tests pass :)

image


Changing and executing tests in real time

What is really cool with this set-up is that (as long as the karma process is running), because the autoWatch value (in karma.config.js) was set to true, if I make a change to the test file:

image

… the karma runner will detect the changes and rerun the tests (note that there are 2 tests executed now)

image

This 2nd test shows an interesting behaviors since it will make the test wait for 15 seconds (with the browser window opened):

image 

Note how the time execution time for the 2nd test was ~15 secs

image

And if we modify the 2nd test to:

image

... the execution test UI will look like this (note that the execution was triggered when I saved the test file :)

image


NOTE 1: to solve the ENOENT error shown the first screenshot of localhost:8000, we just needed to a favicon.ico file to the lib/nodeserver folder

image

… and now the error doesn’t happen anymore

image


Note 2: when trying to run Karma for the first time, I had a prob with grunt where it was failing with an Error: spawn ENOENT:

image

... this was resolved by installed the 32bit version of nodeJS and running npm install on the karma folder (after cloning it)

image