|
1 |
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
6 <title>Asynchronous Event Testing</title> |
|
7 |
|
8 <style type="text/css"> |
|
9 /*margin and padding on body element |
|
10 can introduce errors in determining |
|
11 element position and are not recommended; |
|
12 we turn them off as a foundation for YUI |
|
13 CSS treatments. */ |
|
14 body { |
|
15 margin:0; |
|
16 padding:0; |
|
17 } |
|
18 </style> |
|
19 |
|
20 <link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
21 <script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
22 |
|
23 |
|
24 <!--begin custom header content for this example--> |
|
25 <style type="text/css"> |
|
26 #testLogger { |
|
27 margin-bottom: 1em; |
|
28 } |
|
29 |
|
30 #testLogger .yui-console .yui-console-title { |
|
31 border: 0 none; |
|
32 color: #000; |
|
33 font-size: 13px; |
|
34 font-weight: bold; |
|
35 margin: 0; |
|
36 text-transform: none; |
|
37 } |
|
38 #testLogger .yui-console .yui-console-entry-meta { |
|
39 margin: 0; |
|
40 } |
|
41 |
|
42 .yui-skin-sam .yui-console-entry-pass .yui-console-entry-cat { |
|
43 background: #070; |
|
44 color: #fff; |
|
45 } |
|
46 </style> |
|
47 |
|
48 <!--end custom header content for this example--> |
|
49 |
|
50 </head> |
|
51 |
|
52 <body class=" yui-skin-sam"> |
|
53 |
|
54 <h1>Asynchronous Event Testing</h1> |
|
55 |
|
56 <div class="exampleIntro"> |
|
57 <p>This example shows how to create an asynchronous test with the YUI Test framework for testing browser-based JavaScript code. |
|
58 A code>Y.Test.Case</code></a> object is created to test the |
|
59 <code>Y.Anim</code> object. The test waits until the animation is complete |
|
60 before checking the settings of the animated element.</p> |
|
61 </div> |
|
62 |
|
63 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
64 |
|
65 <div id="testLogger"></div> |
|
66 <div id="testDiv" style="position:absolute;width:10px;height:10px; background-color:red"></div> |
|
67 <script type="text/javascript"> |
|
68 YUI({base:"../../build/", timeout: 10000}).use("anim", "console", "test",function (Y) { |
|
69 |
|
70 Y.namespace("example.test"); |
|
71 |
|
72 Y.example.test.AsyncTestCase = new Y.Test.Case({ |
|
73 |
|
74 //name of the test case - if not provided, one is auto-generated |
|
75 name : "Animation Tests", |
|
76 |
|
77 //--------------------------------------------------------------------- |
|
78 // Test methods - names must begin with "test" |
|
79 //--------------------------------------------------------------------- |
|
80 |
|
81 testAnimation : function (){ |
|
82 |
|
83 var myAnim = new Y.Anim({ |
|
84 node: '#testDiv', |
|
85 to: { |
|
86 width: 400 |
|
87 }, |
|
88 duration: 3, |
|
89 easing: Y.Easing.easeOut |
|
90 }); |
|
91 |
|
92 //assign oncomplete handler |
|
93 myAnim.on("end", function(){ |
|
94 |
|
95 //tell the TestRunner to resume |
|
96 this.resume(function(){ |
|
97 |
|
98 Y.Assert.areEqual(document.getElementById("testDiv").offsetWidth, 400, "Width of the DIV should be 400."); |
|
99 |
|
100 }); |
|
101 |
|
102 }, this, true); |
|
103 |
|
104 //start the animation |
|
105 myAnim.run(); |
|
106 |
|
107 //wait until something happens |
|
108 this.wait(); |
|
109 |
|
110 } |
|
111 |
|
112 }); |
|
113 |
|
114 //create the console |
|
115 var r = new Y.Console({ |
|
116 newestOnTop : false, |
|
117 style: 'block' // to anchor in the example content |
|
118 }); |
|
119 |
|
120 r.render('#testLogger'); |
|
121 |
|
122 //create the logger |
|
123 Y.Test.Runner.add(Y.example.test.AsyncTestCase); |
|
124 |
|
125 //run the tests |
|
126 Y.Test.Runner.run(); |
|
127 }); |
|
128 |
|
129 </script> |
|
130 |
|
131 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
132 |
|
133 </body> |
|
134 </html> |