YUI Test

Exclusive offer: get 50% off this eBook here
JavaScript Unit Testing

JavaScript Unit Testing — Save 50%

Your comprehensive and practical guide to efficiently performing and automating JavaScript unit testing book and ebook.

$14.99    $7.50
by Hazem Saleh | March 2013 | Java Open Source

This article will help you to learn what YUI Test is and how to use this JavaScript unit testing framework for testing JavaScript code. In this article by Hazem Saleh, author of JavaScript Unit Testing ,we will cover the following topics:

  • Basics of YUI Test framework

  • Writing your first YUI test

(For more resources related to this topic, see here.)

YUI Test is one of the most popular JavaScript unit testing frameworks. Although YUI Test is part of the Yahoo! User Interface (YUI) JavaScript library (YUI is an open source JavaScript and CSS library that can be used to build Rich Internet Applications), it can be used to test any independent JavaScript code that does not use the YUI library. YUI Test provides a simple syntax for creating JavaScript test cases that can run either from the browser or from the command line; it also provides a clean mechanism for testing asynchronous (Ajax) JavaScript code. If you are familiar with the syntax of xUnit frameworks (such as JUnit), you will find yourself familiar with the YUI Test syntax.

In YUI Test, there are different ways to display test results . You can display the test results in the browser console or develop your custom test runner pages to display the test results. It is preferable to develop custom test runner pages in order to display the test results in all the browsers because some browsers do not support the console object. The console object is supported in Firefox with Firebug installed, Safari 3+, Internet Explorer 8+, and Chrome.

Before writing your first YUI test, you need to know the structure of a custom YUI test runner page. We will create the test runner page, BasicRunner.html, that will be the basis for all the test runner pages used in this article. In order to build the test runner page, first of all you need to include the YUI JavaScript file yui-min.js—from the Yahoo! Content Delivery Network (CDN)—in the BasicRunner.html file, as follows:

<script src = "http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></ script>

At the time of this writing, the latest version of YUI Test is 3.6.0, which is the one used in this chapter. After including the YUI JavaScript file, we need to create and configure a YUI instance using the YUI().use API, as follows:

YUI().use('test', 'console', function(Y) { ... });

The YUI().use API takes the list of YUI modules to be loaded. For the purpose of testing, we need the YUI 'test' and 'console' modules (the 'test' module is responsible for creating the tests, while the 'console' module is responsible for displaying the test results in a nifty console component). Then, the YUI().use API takes the test's callback function that is called asynchronously once the modules are loaded. The Y parameter in the callback function represents the YUI instance.

As shown in the following code snippet taken from the BasicRunner.html file, you can write the tests in the provided callback and then create a console component using the Y.Console object:

<HTML> <HEAD> <TITLE>YUITest Example</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src = "http://yui.yahooapis.com/3.6.0/build/yui/yuimin. js"></script> </HEAD> <BODY> <div id="log" class="yui3-skin-sam" style="margin:0px"></div> <script> // create a new YUI instance and populate it with the required modules. YUI().use('test', 'console', function(Y) { // Here write your test suites with the test cases (tests)... //create the console var console = new Y.Console({ style: 'block', newestOnTop : false }); console.render('#log'); // Here run the tests }); </script> </BODY> </HTML>

The console object is rendered as a block element by setting the style attribute to 'block', and the results within the console can be displayed in the sequence of their executions by setting the newestOnTop attribute to false . Finally, the console component is created on the log div element.

Now you can run the tests, and they will be displayed automatically by the YUI console component. The following screenshot shows the BasicRunner.html file's console component without any developed tests:

Writing your first YUI test

The YUI test can contain test suites, test cases, and test functions. A YUI test suite is a group of related test cases. Each test case includes one or more test functions for the JavaScript code. Every test function should contain one or more assertion in order to perform the tests and verify the outputs.

The YUI Test.Suite object is responsible for creating a YUI test suite, while the YUI Test.Case object creates a YUI test case. The add method of the Test.Suite object is used for attaching the test case object to the test suite. The following code snippet shows an example of a YUI test suite:

YUI().use('test', 'console', function(Y){ var testcase1 = new Y.Test.Case({ name: "testcase1", testFunction1: function() { //... }, testFunction2: function() { //... } }); var testcase2 = new Y.Test.Case({ name: "testcase2", testAnotherFunction: function() { //... } }); var suite = new Y.Test.Suite("Testsuite"); suite.add(testcase1); suite.add(testcase2); //... });

As shown in the preceding code snippet, two test cases are created. The first test case is named testcase1; it contains two test functions, testFunction1 and testFunction2. In YUI Test, you can create a test function simply by starting the function name with the word "test". The second test case is named testcase2; and it contains a single test function, testAnotherFunction. A test suite is created with the name Testsuite. Finally, testcase1 and testcase2 are added to the Testsuite test suite. In YUI Test, you have the option of creating a friendly test name for the test function, as follows:

var testCase = new Y.Test.Case({ name: "some Testcase", "The test should do X": function () { //... }, "The test should do Y": function () { //... } });

The "some Testcase" test case contains two tests with the names "The test should do X" and "The test should do Y".


In this article, we learned about the basics of YUI Test framework which is used for testing JavaScript applications, and also a walkthrough on how to write your YUI test using the Test.Suite object (that is responsible for creating a YUI test suite) and the Test.Case object (for creating a YUI test case).

Resources for Article :


Further resources on this subject:

JavaScript Unit Testing Your comprehensive and practical guide to efficiently performing and automating JavaScript unit testing book and ebook.
Published: January 2013
eBook Price: $14.99
Book Price: $29.99
See more
Select your format and quantity:

About the Author :

Hazem Saleh

Hazem Saleh has ten years of experience in Java EE, mobile, and open source technologies. He worked as a technical consultant for many clients in Europe (Sweden), North America (USA, Canada), South America (Peru), Africa (Egypt, Morocco, Zambia), and Asia (Qatar, Kuwait, KSA). He is an Apache committer and someone who has spent many years of his life writing open source software. Beside being the author of JavaScript Unit Testing, Pro JSF and HTML5, and the co-author of Definitive Guide to Apache MyFaces, Hazem is also the author of many technical articles, a developerWorks contributing author, and a technical speaker in both local and international conferences such as ApacheCon North America, Geecon, JSFDays, CON-FESS Vienna, and JavaOne (San Francisco, Moscow, and Shanghai). Hazem is now working for IBM Egypt as an advisory software engineer. He is a member of the IBM Mobile Global CoC (Center of Competency), and an IBM Certified Expert IT Specialist (L2).

Books From Packt

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

JavaScript Testing Beginner's Guide
JavaScript Testing Beginner's Guide

Moodle JavaScript Cookbook
Moodle JavaScript Cookbook

Getting Started with Meteor.js JavaScript Framework
Getting Started with Meteor.js JavaScript Framework

Learning JavaScriptMVC
Learning JavaScriptMVC

Sencha Touch Mobile JavaScript Framework
Sencha Touch Mobile JavaScript Framework

Django JavaScript Integration: AJAX and jQuery
Django JavaScript Integration: AJAX and jQuery

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software