Click here to Skip to main content
11,417,750 members (50,205 online)
Click here to Skip to main content

Unit Testing JavaScript Functions

, 13 Feb 2011 CPOL
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 10 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

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

5. Grand Prize Winner of CodeProject HTML5 &CSS3 Article Contest 2014

6. Grand Prize Winner of CodeProject Android Article Contest 2014

7. Grand Prize Winner of IOT on Azure Contest 2015

Comments and Discussions

 
GeneralMy vote of 4 Pin
hasan.rounak18-Feb-11 6:44
memberhasan.rounak18-Feb-11 6:44 
GeneralMy vote of 4 Pin
corol123414-Feb-11 11:03
membercorol123414-Feb-11 11:03 
GeneralMy vote of 5 Pin
ramakrishna.pal114-Feb-11 8:21
memberramakrishna.pal114-Feb-11 8:21 
GeneralMy vote of 5 Pin
sraoh14-Feb-11 7:23
membersraoh14-Feb-11 7:23 
GeneralRe: My vote of 5 Pin
Ranjan.D14-Feb-11 8:06
memberRanjan.D14-Feb-11 8:06 
Generalthanks for sharing - have 5 Pin
Pranay Rana14-Feb-11 3:46
memberPranay Rana14-Feb-11 3:46 
GeneralRe: thanks for sharing - have 5 Pin
Ranjan.D14-Feb-11 5:07
memberRanjan.D14-Feb-11 5:07 

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 | Terms of Use | Mobile
Web01 | 2.8.150427.4 | Last Updated 13 Feb 2011
Article Copyright 2011 by Ranjan.D
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid