JavaScript DHTML/YUI Library/Test Case
Содержание
Asynchronous Event Testing
<source lang="html4strict">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Asynchronous Event Testing</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/logger/assets/skins/sam/logger.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/yuitest/assets/skins/sam/yuitest.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/logger/logger-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/yuitest/yuitest-min.js"></script>
</head> <body class=" yui-skin-sam">
Asynchronous Event Testing
This example shows how to create an asynchronous test with the YUI Test framework for testing browser-based JavaScript code.
A <a href="/yui/yuitest/#testcase">TestCase
</a> object is created to test the
<a href="/yui/docs/YAHOO.util.Anim.html">Anim
</a> object. The test waits until the animation is complete
before checking the settings of the animated element.
<script type="text/javascript">
YAHOO.namespace("example.yuitest"); 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(); } }); YAHOO.util.Event.onDOMReady(function (){ //create the logger var logger = new YAHOO.tool.TestLogger("testLogger"); YAHOO.tool.TestRunner.add(YAHOO.example.yuitest.AsyncTestCase); //run the tests YAHOO.tool.TestRunner.run(); });
</script>
</body>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Asynchronous Testing
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Asynchronous Testing</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/logger/assets/skins/sam/logger.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/yuitest/assets/skins/sam/yuitest.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/logger/logger-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/yuitest/yuitest-min.js"></script>
</head> <body class=" yui-skin-sam">
Asynchronous Testing
This example shows how to create an asynchronous test with the YUI Test framework for testing browser-based JavaScript code.
A <a href="/yui/yuitest/#testcase">TestCase
</a> object is created with a test that waits for a
few seconds before continuing. The <a href="/yui/yuitest/#testrunner">TestRunner
</a>
is then used to run the tests once the page has loaded.
<script type="text/javascript">
YAHOO.namespace("example.yuitest"); YAHOO.example.yuitest.AsyncTestCase = new YAHOO.tool.TestCase({ //name of the test case - if not provided, one is auto-generated name : "Asynchronous Tests", //--------------------------------------------------------------------- // setUp and tearDown methods - optional //--------------------------------------------------------------------- /* * Sets up data that is needed by each test. */ setUp : function () { this.data = { name: "yuitest", year: 2007, beta: true }; }, /* * Cleans up everything that was created by setUp(). */ tearDown : function () { delete this.data; }, //--------------------------------------------------------------------- // Test methods - names must begin with "test" //--------------------------------------------------------------------- testWait : function (){ var Assert = YAHOO.util.Assert; //do some assertions now Assert.isTrue(this.data.beta); Assert.isNumber(this.data.year); //wait five seconds and do some more this.wait(function(){ Assert.isString(this.data.name); }, 5000); } }); YAHOO.util.Event.onDOMReady(function (){ //create the logger var logger = new YAHOO.tool.TestLogger("testLogger"); YAHOO.tool.TestRunner.add(YAHOO.example.yuitest.AsyncTestCase); //run the tests YAHOO.tool.TestRunner.run(); });
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Simple Testing Example
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Simple Testing Example</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/logger/assets/skins/sam/logger.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/yuitest/assets/skins/sam/yuitest.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/logger/logger-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/yuitest/yuitest-min.js"></script>
</head> <body class=" yui-skin-sam">
Simple Testing Example
This example shows basic usage of the YUI Test framework for testing browser-based JavaScript code.
Two different <a href="/yui/yuitest/#testcase">TestCase
</a> objects are created and added to a
<a href="/yui/yuitest/#testsuite">TestSuite
</a> object. The <a href="/yui/yuitest/#testrunner">TestRunner
</a>
is then used to run the tests once the page has loaded.
<script type="text/javascript">
YAHOO.namespace("example.yuitest"); YAHOO.example.yuitest.DataTestCase = new YAHOO.tool.TestCase({ //name of the test case - if not provided, one is auto-generated name : "Data Tests", //--------------------------------------------------------------------- // setUp and tearDown methods - optional //--------------------------------------------------------------------- /* * Sets up data that is needed by each test. */ setUp : function () { this.data = { name: "yuitest", year: 2007, beta: true }; }, /* * Cleans up everything that was created by setUp(). */ tearDown : function () { delete this.data; }, //--------------------------------------------------------------------- // Test methods - names must begin with "test" //--------------------------------------------------------------------- testName : function () { var Assert = YAHOO.util.Assert; Assert.isObject(this.data); Assert.isString(this.data.name); Assert.areEqual("yuitest", this.data.name); }, testYear : function () { var Assert = YAHOO.util.Assert; Assert.isObject(this.data); Assert.isNumber(this.data.year); Assert.areEqual(2007, this.data.year); }, testBeta : function () { var Assert = YAHOO.util.Assert; Assert.isObject(this.data); Assert.isBoolean(this.data.beta); Assert.isTrue(this.data.beta); } }); YAHOO.example.yuitest.ArrayTestCase = new YAHOO.tool.TestCase({ //name of the test case - if not provided, one is auto-generated name : "Array Tests", //--------------------------------------------------------------------- // setUp and tearDown methods - optional //--------------------------------------------------------------------- /* * Sets up data that is needed by each test. */ setUp : function () { this.data = [0,1,2,3,4] }, /* * Cleans up everything that was created by setUp(). */ tearDown : function () { delete this.data; }, //--------------------------------------------------------------------- // Test methods - names must begin with "test" //--------------------------------------------------------------------- testPop : function () { var Assert = YAHOO.util.Assert; var value = this.data.pop(); Assert.areEqual(4, this.data.length); Assert.areEqual(4, value); }, testPush : function () { var Assert = YAHOO.util.Assert; this.data.push(5); Assert.areEqual(6, this.data.length); Assert.areEqual(5, this.data[5]); }, testSplice : function () { var Assert = YAHOO.util.Assert; this.data.splice(2, 1, 6, 7); Assert.areEqual(6, this.data.length); Assert.areEqual(6, this.data[2]); Assert.areEqual(7, this.data[3]); } }); YAHOO.example.yuitest.ExampleSuite = new YAHOO.tool.TestSuite("Example Suite"); YAHOO.example.yuitest.ExampleSuite.add(YAHOO.example.yuitest.DataTestCase); YAHOO.example.yuitest.ExampleSuite.add(YAHOO.example.yuitest.ArrayTestCase); YAHOO.util.Event.onDOMReady(function (){ //create the logger var logger = new YAHOO.tool.TestLogger("testLogger"); YAHOO.tool.TestRunner.add(YAHOO.example.yuitest.ExampleSuite); //run the tests YAHOO.tool.TestRunner.run(); });
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Use advanced test options, which allow you to specify additional information about how a test should be run.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Advanced Test Options</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/logger/assets/skins/sam/logger.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/yuitest/assets/skins/sam/yuitest.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/logger/logger-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/yuitest/yuitest-min.js"></script>
</head> <body class=" yui-skin-sam">
Advanced Test Options
This example shows how to use advanced test options, which allow you to specify additional information about how a test should be run.
Each <a href="/yui/yuitest/#testcase">TestCase
</a> can specify up to three different options for tests,
including tests that should be ignored, tests that should throw an error, and tests that should fail.
<script type="text/javascript">
YAHOO.namespace("example.yuitest"); YAHOO.example.yuitest.AdvancedOptionsTestCase = new YAHOO.tool.TestCase({ //the name of the test case - if not provided, one is automatically generated name: "Advanced Options Tests", /* * Specifies tests that "should" be doing something other than the expected. */ _should: { /* * Tests listed in here should fail, meaning that if they fail, the test * has passed. This is used mostly for YuiTest to test itself, but may * be helpful in other cases. */ fail: { //the test named "testFail" should fail testFail: true }, /* * Tests listed here should throw an error of some sort. If they throw an * error, then they are considered to have passed. */ error: { /* * You can specify "true" for each test, in which case any error will * cause the test to pass. */ testGenericError: true, /* * You can specify an error message, in which case the test passes only * if the error thrown matches the given message. */ testStringError: "I"m a specific error message.", testStringError2: "I"m a specific error message.", /* * You can also specify an error object, in which case the test passes only * if the error thrown is on the same type and has the same message. */ testObjectError: new TypeError("Number expected."), testObjectError2: new TypeError("Number expected."), testObjectError3: new TypeError("Number expected.") }, /* * Tests listed here should be ignored when the test case is run. For these tests, * setUp() and tearDown() are not called. */ ignore : { testIgnore: true } }, //------------------------------------------------------------------------- // Basic tests - all method names must begin with "test" //------------------------------------------------------------------------- testFail : function() { //force a failure - but since this test "should" fail, it will pass YAHOO.util.Assert.fail("Something bad happened."); }, testGenericError : function() { throw new Error("Generic error"); }, testStringError : function() { //throw a specific error message - this will pass because it "should" happen throw new Error("I"m a specific error message."); }, testStringError2 : function() { //throw a specific error message - this will fail because the message isn"t expected throw new Error("I"m a specific error message, but a wrong one."); }, testObjectError : function() { //throw a specific error and message - this will pass because it "should" happen throw new TypeError("Number expected."); }, testObjectError2 : function() { //throw a specific error and message - this will fail because the type doesn"t match throw new Error("Number expected."); }, testObjectError3 : function() { //throw a specific error and message - this will fail because the message doesn"t match throw new TypeError("String expected."); }, testIgnore : function () { alert("You"ll never see this."); } }); YAHOO.util.Event.onDOMReady(function (){ //create the logger var logger = new YAHOO.tool.TestLogger("testLogger"); YAHOO.tool.TestRunner.add(YAHOO.example.yuitest.AdvancedOptionsTestCase); //run the tests YAHOO.tool.TestRunner.run(); });
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Use the ArrayAssert object, which contains assertions designed to be used specifically with JavaScript Arrays and array-like objects.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Array Processing</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/logger/assets/skins/sam/logger.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/yuitest/assets/skins/sam/yuitest.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/logger/logger-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/yuitest/yuitest-min.js"></script>
</head> <body class=" yui-skin-sam">
Array Processing
This example shows how to use the <a href="/yui/yuitest/#arrayassert">ArrayAssert
</a> object, which
contains assertions designed to be used specifically with JavaScript Arrays and array-like objects.
<script type="text/javascript">
YAHOO.namespace("example.yuitest"); YAHOO.example.yuitest.ArrayTestCase = new YAHOO.tool.TestCase({ //the name of the test case - if not provided, one is automatically generated name: "Array Tests", //------------------------------------------------------------------------- // Setup and teardown //------------------------------------------------------------------------- /* * The setUp() method is used to setup data that necessary for a test to * run. This method is called immediately before each test method is run, * so it is run as many times as there are test methods. */ setUp : function () { this.data = new Array (0,1,2,3,4,5); }, /* * The tearDown() method is used to clean up the initialization that was done * in the setUp() method. Ideally, it should free up all memory allocated in * setUp(), anticipating any possible changes to the data. This method is called * immediately after each test method is run. */ tearDown : function () { delete this.data; }, //------------------------------------------------------------------------- // Basic tests - all method names must begin with "test" //------------------------------------------------------------------------- /* * Test the push() method. */ testPush : function() { //shortcut variables var ArrayAssert = YAHOO.util.ArrayAssert; //do whatever data manipulation is necessary this.data.push(6); //array-specific assertions ArrayAssert.isNotEmpty(this.data, "Array should not be empty."); ArrayAssert.contains(6, this.data, "Array should contain 6."); ArrayAssert.indexOf(6, this.data, 6, "The value in position 6 should be 6."); //check that all the values are there ArrayAssert.itemsAreEqual([0,1,2,3,4,5,6], this.data, "Arrays should be equal."); }, /* * Test the pop() method. */ testPop : function() { //shortcut variables var Assert = YAHOO.util.Assert; var ArrayAssert = YAHOO.util.ArrayAssert; //do whatever data manipulation is necessary var value = this.data.pop(); //array shouldn"t be empty ArrayAssert.isNotEmpty(this.data, "Array should not be empty."); //basic equality assertion - expected value, actual value, optional error message Assert.areEqual(5, this.data.length, "Array should have 5 items."); Assert.areEqual(5, value, "Value should be 5."); ArrayAssert.itemsAreSame([0,1,2,3,4], this.data, "Arrays should be equal."); }, /* * Test the reverse() method. */ testReverse : function() { //shortcut variables var ArrayAssert = YAHOO.util.ArrayAssert; //do whatever data manipulation is necessary this.data = this.data.reverse(); ArrayAssert.itemsAreEqual([5,4,3,2,1,0], this.data, "Arrays should be equal."); }, /* * Test the shift() method. */ testShift : function() { //shortcut variables var Assert = YAHOO.util.Assert; var ArrayAssert = YAHOO.util.ArrayAssert; //do whatever data manipulation is necessary var value = this.data.shift(); //array shouldn"t be empty ArrayAssert.isNotEmpty(this.data, "Array should not be empty."); //basic equality assertion - expected value, actual value, optional error message Assert.areEqual(5, this.data.length, "Array should have 6 items."); Assert.areEqual(0, value, "Value should be 0."); ArrayAssert.itemsAreEqual([1,2,3,4,5], this.data, "Arrays should be equal."); }, /* * Test the splice() method. */ testSplice : function() { //shortcut variables var Assert = YAHOO.util.Assert; var ArrayAssert = YAHOO.util.ArrayAssert; //do whatever data manipulation is necessary var removed = this.data.splice(1, 2, 99, 100); //basic equality assertion - expected value, actual value, optional error message Assert.areEqual(6, this.data.length, "Array should have 6 items."); //the new items should be there ArrayAssert.indexOf(99, this.data, 1, "Value at index 1 should be 99."); ArrayAssert.indexOf(100, this.data, 2, "Value at index 2 should be 100."); ArrayAssert.itemsAreEqual([0,99,100,3,4,5], this.data, "Arrays should be equal."); ArrayAssert.itemsAreEqual([1,2], removed, "Removed values should be an array containing 1 and 2."); }, /* * Test the unshift() method. */ testUnshift : function() { //shortcut variables var Assert = YAHOO.util.Assert; var ArrayAssert = YAHOO.util.ArrayAssert; //do whatever data manipulation is necessary this.data.unshift(-1); //basic equality assertion - expected value, actual value, optional error message Assert.areEqual(7, this.data.length, "Array should have 7 items."); //the new item should be there ArrayAssert.indexOf(-1, this.data, 0, "First item should be -1."); ArrayAssert.itemsAreEqual([-1,0,1,2,3,4,5], this.data, "Arrays should be equal."); } }); YAHOO.util.Event.onDOMReady(function (){ //create the logger var logger = new YAHOO.tool.TestLogger("testLogger"); YAHOO.tool.TestRunner.add(YAHOO.example.yuitest.ArrayTestCase); //run the tests YAHOO.tool.TestRunner.run(); });
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>