This example shows how to create an asynchronous test with the YUI Test framework for testing browser-based JavaScript code.
A Y.Test.Case object is created to test the
Y.Anim object. The test waits until the animation is complete
before checking the settings of the animated element.
Asynchronous Events Test Example
This example begins by creating a namespace:
Y.namespace("example.test");
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 Y.Test.Caseobject called AsyncTestCase.
To do so, using the Y.Test.Caseconstructor and pass in an object literal containing information about the tests to be run:
Y.example.test.AsyncTestCase = new Y.Test.Case({
//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 myAnim = new Y.Anim({
node: '#testDiv',
to: {
width: 400
},
duration: 3,
easing: Y.Easing.easeOut
});
//assign oncomplete handler
myAnim.on("end", function(){
//tell the TestRunner to resume
this.resume(function(){
Y.Assert.areEqual(document.getElementById("testDiv").offsetWidth, 400, "Width of the DIV should be 400.");
});
}, this, true);
//start the animation
myAnim.run();
//wait until something happens
this.wait();
}
});
The only test in the Y.Test.Caseis 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 end 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
run() method is called to begin the animation and the wait() method is called to
tell the Y.Test.Runner to wait until it is told to resume testing again. When the animation completes,
the end 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:
//create the console
(new Y.Test.Console({
verbose : true,
newestOnTop : false,
filters: {
pass: true,
fail: true
}
}).render('#testLogger');
//create the logger
Y.Test.Runner.add(Y.example.test.AsyncTestCase);
//run the tests
Y.Test.Runner.run();
Before running the tests, it's necessary to create a Y.Test.Console object to display the results (otherwise the tests would run
but you wouldn't see the results). After that, the Y.Test.Runner is loaded with the Y.Test.Caseobject by calling
add() (any number of Y.Test.Caseand TestSuite objects can be added to a Y.Test.Runner,
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 Y.Test.Console.
Complete Example Source
<div id="testLogger"></div>
<div id="testDiv" style="left:0;position:absolute;width:10px;height:10px; background-color:red"></div>
<script>
YUI().use('anim', 'test-console', 'test', function (Y) {
Y.namespace("example.test");
Y.example.test.AsyncTestCase = new Y.Test.Case({
//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 myAnim = new Y.Anim({
node: '#testDiv',
to: {
width: 400
},
duration: 3,
easing: Y.Easing.easeOut
});
//assign oncomplete handler
myAnim.on("end", function(){
//tell the TestRunner to resume
this.resume(function(){
Y.Assert.areEqual(document.getElementById("testDiv").offsetWidth, 400, "Width of the DIV should be 400.");
});
}, this, true);
//start the animation
myAnim.run();
//wait until something happens
this.wait();
}
});
//create the console
(new Y.Test.Console({
newestOnTop : false,
filters: {
pass: true,
fail: true
}
})).render('#testLogger');
//create the logger
Y.Test.Runner.add(Y.example.test.AsyncTestCase);
//run the tests
Y.Test.Runner.run();
});
</script>