Monday 24 March 2014

E2E testing AngularJS links and routes using NCrunch, VisualStudio and FluentSharp.WatiN

In order to have real TDD while developing AngularJS inside VisualStudio, I needed a way to write C# Unit Tests that could be executed in the background by NCrunch (i.e. in real-time during coding).

Since I wanted to do E2E (End-to-End) testing of the AngularJS app, I needed either a good mocking environment (like the one provided by KarmaJS/AngularJS Mocks) or the real thing (i.e. actually running the app on a local IIS/Cassini server).

If I have the choice, I always prefer to run my tests without mocking (or with as least amount of Mocks as possible), since that allows for a much more realistic test environment, and promotes much better engineering and coding practices.

This post shows how I created such environment and provides a couple examples of C# tests written to check if links created by AngularJS directives and routes are being correctively set.

The objective is to be able to run a test that looks like this:

image

This unit test (written in C# inside VisualStudio) is opening up an AngularJS powered page in an IE 11 browser, and checking to to see if the expected links+urls are there.

To see this in action we can setup a breakpoint in one of the tests (line 109 below) and run the test under the debugger (using NCrunch in this case, but I could also had used the ReSharper NUnit test runner):

image

Here is what is looks like during execution:

image

Creating the IE TBot page

The 'IE TBot' popup window that you can see at the background (image above),  was created by the IE_UnitTest class (below), which contains a static Current properly, and calls the extension method open_IE on its constructor:

image

The open_IE method is the one that creates the popup window, if there isn’t already an instance created and stored in the Current property.

This really makes a massive difference in the speed of tests since there is no need (in most cases) to start a new instance of IE on a separate WinForm control (this is also compatible with NCrunch since there will be a level of reuse between executions)

image

The IE_UnitTest class is then extended by the API_IE_TBot which is the one that contains the TBot (TeamMentor Admin Bot) specific configuration:

image

… and methods:

image

Finally the API_IE_TBot is extended by the NUnit test class like the TBot_V2_MainPages (shown below) which is the one that also contains the Check_UsersMenu_Directive method shown in the beginning of this post:

image


Seeing Unit Tests in action

One way to run the tests is to use ReSharper NUnit test runner:

image

Looking at the Check_Root_Level_Pages test (couple screenshots above) you will notice that we are testing for the presence of the "TBot v2.0" text (which is from the main.html page, that is mapped as a templateUrl, by the $routeProvider config mapping, defined in the routes.js file):

Here is what the main.html page looks like at the moment:
image

If we change it to:

image

… and run the tests again (using ReSharper NUnit test runner), we will get a failed test:

image

This is already quite nice, but since I’m using NCrunch, I will be able to see this even faster :)

To see this in action, I can run the test from the NCrunch UI (or make a small change in the Check_Root_Level_Pages method)

image

… and the failed test and location will be nicely visualised like this:

image

Then as I edit the file, as soon as there is a change made, NCrunch (after about 1 sec of inactivity) will re-run the test:

image

… and one I got the fix right, the test will be green again:

image

It is hard to see/experience this type development environment in these screenshots, but it is really fast, and it really, really, really …  improves my productivity and UnitTests coverage :)

Another examples of similar AngularJS types of tests

1) Check_Top_Links:

image

2) Login into TBot:

image

3) Bug_IE_Out_of_Sync_afer_REST_Call___PoC

image