Creating an Eclipse UI to run AngularJS e2e tests using Karma

This post shows how I created a nice set of views in Eclipse to quickly see the execution result of AngularJS e2e (end-to-end) tests, without leaving the Eclipse UI.

The image below shows this UI in action, where:

• The source code of the test is shown in the Eclipse Java editor
• Just below is the console out of the Karma runner (which is detecting files changes)
• On the top-right is the hooked browser (i.e. the one that will run the tests)
• On the middle-right is the simple AngularJS Hello World page
• On the bottom-right is the debug view of the hooked browser (which is what you get if you click on the Debug Button included on the top-right page)

Using WebStorm with Chrome and ChromeDriver (to view KarmaJS execution results)

Following from the example described inWhen the best way to automate Chrome is to use ... Chrome ,  here is a more practical scenario where I’m creating a GUI that has both WebStorm and Chrome running side-by-side

Here is what it looks like:

Adding KarmaJS support to WebStorm to automagically run tests on file changes (and test UI with SublimeText, Chrome and Cmd.exe)

On the AngularJs and KarmaJS theme (see A small AngularJS Jasmine test executed by KarmaJS and the related posts linked at the bottom), here is my first attempt at using Karma to test AngularJS code inside TeamMentor.

I’m using WebStorm instead of VisualStudio, since for Javascript coding WebStorm is MUCH better/faster/cleverer, specially since it has good support for AngularJs and Jasmine (with KarmaJS support easily added, as we are about to see).

Also shown below is a cool tool I created that hijacks windows from SublimeText, Chrome and Cmd.exe windows into the same UI (an O2 Platform .NET Script)

Here is the directory structure:

A small AngularJS Jasmine test executed by KarmaJS

When I try to understand how a particular technology works I always like to create a simple test case with a small number of moving parts.

This post shows such example for an AngularJS page, a Jasmine test, a NodeJS web server and a KarmaJS execution cycle.

The files used/customised were based on the KarmaJS test/e2e/angular-scenario example:

KarmaJS AngularJS Scenario Test Runner execution variations in IE 7,8,9 and 10 when using AngularJS

While trying to get Karma JS to work, I found a number of different behaviours for its AngularJS Scenario Test Runner in IE’s multiple 'compatibility modes'.

TLDR: some of the Jasmine and AngularJS test apis don't work (although Angular does seem to work ok)

Here is the default web page I was using:

Debugging a weird case of missing module in AngularJS and KarmaJS

When I was trying the  Running KarmaJS’s AngularJS example test/e2e/angular-scenario (on Chrome) I hit on the the following weird behaviour.

TLDR; the solution was to run npm install –g karma@canary

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