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>
