May 6, 2015

450 Views

JavaScript Unit Testing and Its Benefits

We hear and talk a lot about unit testing for programming languages such as Java, PHP or .NET. As a UI Developer, I’m not really sure that we actually talk about unit testing for Java Script or other script languages, but we do have discussions on how to write unit tests, on what could be the outcomes, and how they impact our project timelines, resources or coding standards.

Is it really necessary to write unit test cases for Java Script?

After spending many years in a project where I use Java Script and J-Query, I believe that it is indeed very important to write unit test cases for scripts that encompass different functionalities.

Unit Tests and their usage

Unit tests are basically used to verify code that breaks into smaller units, individual units, or smaller pieces of code that are usually based on a particular functionality. They are also used for verifying output. We can write test cases by ourselves or they can be programmatically generated. Output from a piece of code may be very simple - like an alert or console output. Basically, unit tests are written simply and are usually based upon functions to determine if the return value is the same as that of what we are expecting.

Let’s move to specific areas of Unit Tests, i.e. when and how do we write them.

In my opinion, it’s very important how we write a test case, so let’s discuss this point first.

Depending on the starting point, we first need to know if we are going to write the code from scratch. This way, writing test cases are pretty straightforward as we know about the functionality, and based on that, we can write test cases parallel to our code. It becomes a daunting task when we have to deal with legacy or old code that doesn’t consist of any unit tests. This becomes worse when the code is a mix and match with Java code/logic (or backend code) with specified HTML, or completely overruled by HTML code with inline event handlers. Now, if someone tries to detach inline handlers and write a separate code in the JS file, that doesn’t testify that our code is ready for unit testing. If it is not, break out in units - page by page, function by function.

Now, the next step would involve writing a unit test case. As I mentioned earlier, this is not so hard, but there are different aspects to writing a good unit test case, one of which is the JS framework you are using and how modular the code is.

There are frameworks available online, such as QUnit and JUnit. As of now, both are pretty popular in the market.

Here is a code snippet for displaying and hiding one section at a time (assuming that you have multiple sections), which is very simple and easy to understand.

<div id="testCase1"></div>

<div id="testCase2"></div>

<div id="testCase3"></div>

<div id="testCase4"></div>

module("Hide and Display");

test("hide the elements when hide is called except one", function (){

      // Arrange

      jQuery("#testCase1").hide();

      // Action

jQuery("#testCase2, #testCase3, #testCase4").hide();

// Assertion

// actual or expected

equals(jQuery ("#testCase1").css("display"), "block", "The element should be display");

equals(jQuery ("("#testCase2, #testCase3, #testCase4").css("display"), "none", "The elements should be hidden");

});

In this scenario, I am hiding all the divisions except one, which is clicked. Initially, all the divisions are hidden through CSS or JS. I just demonstrated for a single section, but the test can follow the same pattern for other elements to show and hide, and if we want to compress the code we can use jQuery(this) rather than specific Ids.                                                                                                        

Conclusion

There can be a number of stages for refactoring the legacy code based upon which, specific unit test cases can be written. In normal day-to-day work, we don’t think about unit testing of Java Script. However, if it is mandatory for Java Developers, why not add it to our “Things to do” list?

All we need to understand about Java Script Unit Testing is that the benefits outweigh the efforts; it makes code easier to understand and helps generate the desired output. Sometimes, it is really hard to do all this when working under a strict deadline with a release around the corner. However, to ensure smooth delivery according to deadlines, these strategies must become part of your project estimation and timelines.

Reference