YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: YUI Test Utility: Asynchronous Event Testing

# YUI Test Utility: Asynchronous Event Testing

This example shows how to create an asynchronous test with the YUI Test framework for testing browser-based JavaScript code. A `TestCase` object is created to test the `Anim` object. The test waits until the animation is complete before checking the settings of the animated element.

View example in new window.

## Asynchronous Events Test Example

This example begins by creating a namespace:

YAHOO.namespace("example.yuitest");

This namespace serves as the core object upon which others will be added (to prevent creating global objects).

### Creating the TestCase

The first step is to create a new `TestCase` object called `AsyncTestCase`. To do so, using the `TestCase` constructor and pass in an object literal containing information about the tests to be run:

YAHOO.example.yuitest.AsyncTestCase = new YAHOO.tool.TestCase({ //name of the test case - if not provided, one is auto-generated name : "Animation Tests", //--------------------------------------------------------------------- // Test methods - names must begin with "test" //--------------------------------------------------------------------- testAnimation : function (){ var Assert = YAHOO.util.Assert; var YUD = YAHOO.util.Dom; //animate width to 400px var myAnim = new YAHOO.util.Anim('testDiv', { width: { to: 400 } }, 3, YAHOO.util.Easing.easeOut); //assign oncomplete handler myAnim.onComplete.subscribe(function(){ //tell the TestRunner to resume this.resume(function(){ Assert.areEqual(YUD.get("testDiv").offsetWidth, 400, "Width of the DIV should be 400."); }); }, this, true); //start the animation myAnim.animate(); //wait until something happens this.wait(); } });

The only test in the `TestCase` is called `testAnimation`. It begins by creating a new `Anim` object that will animate the width of a `div` to 400 pixels over three seconds. An event handler is assigned to the `Anim` object's `onComplete` event, within which the `resume()` method is called. A function is passed into the `resume()` method to indicate the code to run when the test resumes, which is a test to make sure the width is 400 pixels. After that, the `animate()` method is called to begin the animation and the `wait()` method is called to tell the `TestRunner` to wait until it is told to resume testing again. When the animation completes, the `onComplete` event is fired and the test resumes, assuring that the width is correct.

### Running the tests

With all of the tests defined, the last step is to run them. This initialization is assigned to take place when the document tree has been completely loaded by using the Event utility's `onDOMReady()` method:

YAHOO.util.Event.onDOMReady(function (){ //create the logger var logger = new YAHOO.tool.TestLogger(); //add the test suite to the runner's queue YAHOO.tool.TestRunner.add(YAHOO.example.yuitest.AsyncTestCase); //run the tests YAHOO.tool.TestRunner.run(); });

Before running the tests, it's necessary to create a `TestLogger` object to display the results (otherwise the tests would run but you wouldn't see the results). After that, the `TestRunner` is loaded with the `TestCase` object by calling `add()` (any number of `TestCase` and `TestSuite` objects can be added to a `TestRunner`, this example only adds one for simplicity). The very last step is to call `run()`, which begins executing the tests in its queue and displays the results in the `TestLogger`.

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Test Utility Examples:

### More YUI Test Utility Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings