Skip to main content

Breaking JavaScript code down into components

Following on from my original post of learning how to put JavaScript together it's been a really productive week. Have I managed to write JavaScript that's easy to test? No, but I've wrapped up some reasonably complex logic into a component that can have some of it's functionality tested!

At the moment I've settled on QUnit as my JS unit testing framework and have a couple of tests verifying the default values of exposed properties - these are currently exposed as functions as I've wrapped up the variables in a closure to make them read only. Not sure if JavaScript even has the concept of a read only property in a form similar to C#. When calling the component in test conditions I've also been overwriting functions on the injected underscore library that failed due to a null/undefined reference - so not really mocking yet. The first issue I ran into was that I was pre-compiling the templates and these were defined inside script blocks of the calling ASP.NET view. In C# code you don't verify the view engine running when unit testing calls to the controller actions, so that indicates having a call to the template inside the main component is probably a suitable refactor. Applying this logic it has become apparent that my biggest problem is that my current JavaScript components are just one big black box. Using JQuery, Underscore and JSON/templating has made things cleaner but not really that much more testable!

The next step will be learning how to break the large big black boxes down into more focused components that can be easily tested in isolation to each other; and mocked/replaced when used inside of the calling component. This is much better and already feels closer to the comparable process in .NET. The code I am currently working on has a dialog box, which can be updated - that can be split out into it's own component. That includes initialisation, display updates and some button context functionality (once the processing is complete the text on the button changes from "Cancel" to "Close" but the functionality stays the same. These things become easier to test and wrap up a few of the JQuery/Templating calls quite nicely (making them easier to "Mock"). Another area of functionality which could be split out into it's own component is the AJAX calls. Similarly the "timer" based eventing system could be wrapped up as I noticed that there were several "clearInterval(...)" calls spread through out the code

After all the above refactors have been completed I'm hoping to end up with a single "controller" type object that orchestrates all the newly created components. This should make it far easier to test this controller object and possibly look to finally extract some of the business logic into smaller components too.

It seems strange to say, but it would appear right now that the biggest thing that was holding my JavaScript coding back was a fear of creating too many objects, preferring a single component that tried to contain and wrap everything up.....something that I left behind in the C# world many years ago! This was something of a surprise, up until recently I thought my biggest stumbling block was a lack of knowledge / understanding of JavaScript itself!


Popular posts from this blog

Problem installing AWS CLI

It never feels like a good start when you're trying to start out with something and the install fails with an obscure error! I was just trying to install the Amazon CLI following the instructions at and ran into the following error when running 'pip install awscli': Collecting awscli Could not find a version that satisfies the requirement awscli (from versions: ) No matching distribution found for awscli I appeared to have a correct version of Python installed (v2.7) and checking "PIP -v" indicated that 9.0.1 was installed. That all seemed to tick the required boxes but digging around a little more I did see that some people had had issues with various versions of PIP so I found / ran the following to upgrade to the latest vesion: curl -o python This installed v9.0.3 of PIP which burst into life when I re-ran 'pip install awscli' and everything seems to be ok. Like…

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…