Click here to Skip to main content
Click here to Skip to main content
Go to top

Unit Testing JavaScript Functions

, 13 Feb 2011
Rate this:
Please Sign up or sign in to vote.
This article is all about Unit Testing of JavaScript functions.

Introduction

This article is all about unit testing JavaScript functions using the unittest.js library provided by Script.aculo.us.

We always use UI and test against, and that is what dev and QA folks do. But there is some thing which can be done by developers apart from that. We can unit test JavaScript functions without the UI getting ready. Which means we can completely test JavaScript functions at a very early stage.

All you have to do is follow the three steps mentioned in the article, and you will surely enjoy unit testing.

Using the code

Following are the steps for downloading Script.aculo.us.

  1. Go to http://script.aculo.us/downloads to grab the latest version in a convenient package.
  2. Unpack the downloaded file and you will find the following:
    • lib: This folder has the prototype.js file.
    • src: This folder has these eight files:
      1. builder.js
      2. controls.js
      3. dragdrop.js
      4. effects.js
      5. scriptaculous.js
      6. slider.js
      7. sound.js
      8. unittest.js
    • test (folder): has files for testing purpose.

How to use?

All we require is unittest.js and the stylesheet test.css available in the downloaded folders.

  1. Create a JavaScript file which contains the functions which you wish to unit test.
  2. var Validator = {
       // Returns the string, or null if not a valid email
       email: function (str) {
         str = str.squash();
         var result = (/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i).exec(str);
         return (result) ? result[0] : null;
       }
    };
  3. Create a unit test JavaScript class:
  4. new Test.Unit.Runner({
    
       testValidator: function () { 
         this.assertNull(Validator.email(' ranjancse@gmail.com '));
         this.assertNull(Validator.email(' roshancse@gmail.com  '));
     });

    The Test.Unit.Runner object receives our test object and executes all the methods. In our case, there is only one method for testing. Each of the test methods performs a series of checks called assertions to ensure that our code works correctly.

    There exists a good number of assert methods available in the JavaScript library unittest.js, just try to explore and use them.

  5. Create a sample HTML page and include the following scripts:
    • unittest.js - The framework library provided by Script.aculo.us.
    • Experniment.js - This file contains the JavaScript functions.
    • test.js - This file contains the unit test methods. We can add as many unit tests as we want.

    We create a DIV with id="testlog" which will be used by the unit test library to fill the test results. We include the stylesheet test.css, which contains the styles to show the test results in a more colorful way.

Unit Test Results

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ranjan.D
Web Developer
United States United States
Profile
 
Around 9 years of professional software development experience in analysis, design, development, testing and implementation of enterprise web applications for healthcare domain with good exposure to object-oriented design, software architectures, design patterns, test-driven development and agile practices.
 
In Brief
 
Analyse and create High Level , Detailed Design documents.
Use UML Modelling and create Use Cases , Class Diagram , Component Model , Deployment Diagram, Sequence Diagram in HLD.
 
Area of Working : Dedicated to Microsoft .NET Technologies
Experience with : C# , J2EE , J2ME, Windows Phone 8, Windows Store App
Proficient in: C# , XML , XHTML, XML, HTML5, Javascript, Jquery, CSS, SQL, LINQ, EF
 
Software Development
 
Database: Microsoft SQL Server, FoxPro
Development Frameworks: Microsoft .NET 1.1, 2.0, 3.5, 4.5
UI: Windows Forms, Windows Presentation Foundation, ASP.NET Web Forms and ASP.NET MVC3, MVC4
Coding: WinForm , Web Development, Windows Phone, WinRT Programming, WCF, WebAPI
 
Healthcare Domain Experience
 
CCD, CCR, QRDA, HIE, HL7 V3, Healthcare Interoperability
 
Others:
 
TTD, BDD
 
Education
 
B.E (Computer Science)
 
CodeProject Contest So Far:
 
1. Windows Azure Developer Contest - HealthReunion - A Windows Azure based healthcare product , link - http://www.codeproject.com/Articles/582535/HealthReunion-A-Windows-Azure-based-healthcare-pro
 
2. DnB Developer Contest - DNB Business Lookup and Analytics , link - http://www.codeproject.com/Articles/618344/DNB-Business-Lookup-and-Analytics
 
3. Intel Ultrabook Contest - Journey from development, code signing to publishing my App to Intel AppUp , link - http://www.codeproject.com/Articles/517482/Journey-from-development-code-signing-to-publishin
 
4. Intel App Innovation Contest 2013 - eHealthCare - http://www.codeproject.com/Articles/635815/eHealthCare
 
5. Grand Prize Winner of CodeProject HTML5 &CSS3 Article Content 2014

Comments and Discussions

 
GeneralMy vote of 4 Pinmemberhasan.rounak18-Feb-11 5:44 
GeneralMy vote of 4 Pinmembercorol123414-Feb-11 10:03 
GeneralMy vote of 5 Pinmemberramakrishna.pal114-Feb-11 7:21 
GeneralMy vote of 5 Pinmembersraoh14-Feb-11 6:23 
GeneralRe: My vote of 5 PinmemberRanjan.D14-Feb-11 7:06 
Generalthanks for sharing - have 5 PinmemberPranay Rana14-Feb-11 2:46 
GeneralRe: thanks for sharing - have 5 PinmemberRanjan.D14-Feb-11 4:07 
Thanks for your 5. Hope you will make use of Unit Test Library.
Ranjan.D

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 13 Feb 2011
Article Copyright 2011 by Ranjan.D
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid