Let’s imagine that we are doing a web application supporting front-end developers. Among all the functionalities we have a simple reusable module to recalculate color values: RGB/HEX.
Separation of Concerns is one of the most important things while doing TDD, that’s why I chose “KnockoutJS” as the framework connecting our view with the logic. Architecture of such application is very simple. At the moment we don’t even have any “back-end” code, but still can do TDD.
The first test
Let’s pick out the ColorCalculator as the target. This is a “class” that is responsible for calculating color values between RGB and HEX.
Immediately after closing the test() function resharper will add “Run test” button on the left. In case of QUnit Resharper will run the test in the default browser using QUnit default template, showing the result as it is:
Test result is also shown normally in ReSharper “Unit Test Sessions” window.
Extracting test project
First add a new project to the current solution. The project type should be “Empty Web Application” (in contrary to normal unit test project when we add “Class library”). Then you can add your test files to the project. You also need to reference the tested code. To do it, add existing script files as “links”:
This is the drawback of our solution. Whole reference tree needs to be reproduced . But it’s not that bad, we don’t change the reference tree that often but instead we have all the code in one place and it’s checked during the build time. Complete test solution should look like that:
Next you need to do a little trick to copy referenced files to the solution. To do it “Edit project file” and add the following code to the end of the test project:
I hope in the next releases of Visual Studio such behaviour will be applied automatically.
Finally modify a little the test code adding a reference to the code under testing (///<reference …/> expression):
And that’s it! – after adding some tests and implementing the functionality correctly you can right click the solution, click “Run all tests” and be sure that everything is correct!
Debugging the tests
Wiseman said: “If you need to debug unit test then something is wrong with it’s unitness.”
Switching to PhantomJS
You need to specify the path to PhantomJS that can be downloaded from here.
Download and play
You can download the whole solution here: FrontEndTools.zip
There’s still a lot to do – you can add tests to the ColorBoxViewModel and test “toRgb” function that is far more interesting.