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 its 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 its 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 its 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 throughout 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!