diff -r 000000000000 -r 40c8f766c9b8 src/cm/media/js/lib/yui/yui3.0.0/examples/test/test-async-event-tests.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/test/test-async-event-tests.html Mon Nov 23 15:14:29 2009 +0100 @@ -0,0 +1,354 @@ + + + + + YUI Library Examples: Test: Asynchronous Event Testing + + + + + + + + + + + + +
+
+
+

+ + YUI 3.x Home - + +

+
+ + +
+ + + +
+
+
+
+

YUI Library Examples: Test: Asynchronous Event Testing

+
+
+ + +
+
+
+
+ +

Test: Asynchronous Event Testing

+ +
+
+

This example shows how to create an asynchronous test with the YUI Test framework for testing browser-based JavaScript code. + A code>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.

+ +
+
+

+ View example in new window. +

+
+ + + + +
+
+ + + + + +
+
+
+ +

Asynchronous Events Test Example

+ +

This example begins by creating a namespace:

+
  1. Y.namespace("example.test");
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:

+
  1. Y.example.test.AsyncTestCase = new Y.Test.Case({
  2.  
  3.     //name of the test case - if not provided, one is auto-generated
  4.     name : "Animation Tests",
  5.  
  6.     //---------------------------------------------------------------------
  7.     // Test methods - names must begin with "test"
  8.     //---------------------------------------------------------------------
  9.  
  10.     testAnimation : function (){
  11.  
  12.         var myAnim = new Y.Anim({
  13.                 node: '#testDiv',
  14.                 to: {
  15.                     width: 400
  16.                 },
  17.                 duration: 3,
  18.                 easing: Y.Easing.easeOut
  19.         });
  20.  
  21.         //assign oncomplete handler
  22.         myAnim.on("end", function(){
  23.  
  24.             //tell the TestRunner to resume
  25.             this.resume(function(){
  26.  
  27.                 Y.Assert.areEqual(document.getElementById("testDiv").offsetWidth, 400, "Width of the DIV should be 400.");
  28.  
  29.             });
  30.  
  31.         }, this, true);
  32.  
  33.         //start the animation
  34.         myAnim.run();
  35.  
  36.         //wait until something happens
  37.         this.wait();
  38.  
  39.     }
  40.  
  41. });
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:

+ +
  1. //create the console
  2. var r = new Y.Console({
  3.     verbose : true,
  4.     newestOnTop : false
  5. });
  6.  
  7. r.render('#testLogger');
  8.  
  9. //create the logger
  10. Y.Test.Runner.add(Y.example.test.AsyncTestCase);
  11.  
  12. //run the tests
  13. Y.Test.Runner.run();
//create the console
+var r = new Y.Console({
+    verbose : true,
+    newestOnTop : false
+});
+ 
+r.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.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.Console.

+
+ + + + +
+
+

More Test Resources:

+
+
+ +
+
+
+
+ +
+
+ + + +
+ +
+

Copyright © 2009 Yahoo! Inc. All rights reserved.

+

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

+
+
+ + + + + +