Skip to main content

Learning how to put JavaScript together properly

After many years of trial and error / practise I feel fairly happy that I can write clean, testable .NET / C# code, which is free of any external dependencies which traditionally make unit testing harder. It's fair to say that I'm convert to TDD; having implemented it on two separate commercial projects and seen the benefits of the improved maintainability of the code base over time.

But what about Javascript? Thanks to Selenium and Specflow the functionality of those websites is pretty well tested and by default that includes any JavaScript that may be referenced in the UI tests that are run. But that's not the same as having clean testable JavaScript. Those websites have typically included a mixture of JavaScript defined in-line as well as held separately within JS files. Most functionality has been provided by individual functions attached to events and any communication introduced by coupling of functions and/or attaching attributes to FORM elements. AJAX calls and DOM updates are mixed within the application logic making isolated testing pretty much impossible, basically everything we've spent the past years learning how to avoid in our .NET code bases.

But why does this happen? Experience and reading around on the web has highlighted that the above scenario is probably still the norm, rather than the exception. Is it really that difficult to write testable JavaScript? Is JavaScript such a difficult language to learn, or does it lend itself to writing messy code? I've met some very good .NET developers who openly admit that their JavaScript code doesn't live up to their own standards.

As part of the project that I'm now working on, I decided that I'd make sure that this time would be different. I wouldn't settle for writing inline JavaScript, nor would I settle for a mishmash of unrelated functions in the global namespace all somehow working together (and when they didn't I wouldn't just use alert's and console writes to debug what was happening!). This time I was going to write testable, modular JavaScript that was easy to unit test.

As part of this experiment I'll try keeping this blog updated with our findings, including patterns and practises we find that help. An initial search of the web came up with this article (by Ben Cherry) which details his findings when he joined Twitter: Writing testable Javascript. Interestingly this article highlights a few modifications people might want to consider to some currently recommended Javascript best practises to make your code more testable, namely staying away from singletons and not enclosing too much business logic - both valid suggestions that we stay away from in our .NET code for exactly the same reasons!

Comments

Popular posts from this blog

Mocking HttpCookieCollection in HttpRequestBase

When unit testing ASP.NET MVC2 projects the issue of injecting HttpContext is quickly encountered.  There seem to be many different ways / recommendations for mocking HttpContextBase to improve the testability of controllers and their actions.  My investigations into that will probably be a separate blog post in the near future but for now I want to cover something that had me stuck for longer than it probably should have.  That is how to mock non abstract/interfaced classes within HttpRequestBase and HttpResponseBase – namely the HttpCookieCollection class.   The code sample below illustrates how it can be used within a mocked instance of HttpRequestBase.  Cookies can be added / modified within the unit test code prior to being passed into the code being tested.   After it’s been called, using a combination of MOQ’s Verify and NUnit’s Assert it is possible to check how many times the collection is accessed (but you have to include the set up calls) and that the relevant cookies have …

Injecting HttpContextBase into an MVC Controller

It is a shame that when the ASP.NET MVC framework was released they did not think to build IoC support into the infrastructure. All the major components of the MVC engine appear to magically inherit instances of HttpContext and it’s related objects – which can cause no end of problems if you are trying to utilise Unit Testing and IoC. Reading around various articles on the subject just to get around this one problem requires the implementation of several different concepts and you are still left with a work around. The code below, along with the other links referenced in this article is my stab at resolving the issue. There’s probably nothing new here, but it does attempt to relate all the information needed to do this for Castle Windsor. The overview is that all controllers will need to inherit from a base controller, which takes an instance of HttpContext into it’s constructor. It then overrides the property HttpContext in the main controller class, supplying it’s own version…

Unit Testing Workflow Code Activities - Part 1

When I first started looking into Windows Workflow one of the first things that I liked about it was how it separated responsibilities. The workflow was responsible for handling the procedural logic with all it's conditional statements, etc. Whilst individual code activities could be written to handle the business logic processing; created in small easily re-usable components. To try and realise my original perception this series of blog posts will cover the unit testing of bespoke code activities; broken down into: Part One: Unit testing a code activity with a (generic) cast return type (this post)Part Two: Unit testing a code activity that assigns it's (multiple) output to "OutArguments" (Not yet written)So to make a start consider the following really basic code activity; it expects an InArgument<string> of "Input" and returns a string containing the processed output; in this case a reverse copy of the value held in "Input".namespace Ex…