Added compound test suite and updated QUnit.

This commit is contained in:
Scott González 2011-07-28 08:13:01 -04:00
parent 8d43fe7e34
commit f7202b8793
20 changed files with 828 additions and 448 deletions

124
external/qunit.css vendored
View File

@ -1,7 +1,17 @@
/**
* QUnit - A JavaScript Unit Testing Framework
*
* http://docs.jquery.com/QUnit
*
* Copyright (c) 2011 John Resig, Jörn Zaefferer
* Dual licensed under the MIT (MIT-LICENSE.txt)
* or GPL (GPL-LICENSE.txt) licenses.
*/
/** Font Family and Sizes */ /** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult { #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
} }
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
@ -10,7 +20,7 @@
/** Resets */ /** Resets */
#qunit-tests, #qunit-tests li ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult { #qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -21,10 +31,13 @@
#qunit-header { #qunit-header {
padding: 0.5em 0 0.5em 1em; padding: 0.5em 0 0.5em 1em;
color: #fff; color: #8699a4;
text-shadow: rgba(0, 0, 0, 0.5) 4px 4px 1px;
background-color: #0d3349; background-color: #0d3349;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0; -moz-border-radius: 15px 15px 0 0;
-webkit-border-top-right-radius: 15px; -webkit-border-top-right-radius: 15px;
@ -33,7 +46,12 @@
#qunit-header a { #qunit-header a {
text-decoration: none; text-decoration: none;
color: white; color: #c2ccd1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #fff;
} }
#qunit-banner { #qunit-banner {
@ -41,7 +59,9 @@
} }
#qunit-testrunner-toolbar { #qunit-testrunner-toolbar {
padding: 0em 0 0.5em 2em; padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
} }
#qunit-userAgent { #qunit-userAgent {
@ -64,11 +84,25 @@
list-style-position: inside; list-style-position: inside;
} }
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
display: none;
}
#qunit-tests li strong { #qunit-tests li strong {
cursor: pointer; cursor: pointer;
} }
#qunit-tests li ol { #qunit-tests li a {
padding: 0.5em;
color: #c2ccd1;
text-decoration: none;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
}
#qunit-tests ol {
margin-top: 0.5em; margin-top: 0.5em;
padding: 0.5em; padding: 0.5em;
@ -83,6 +117,45 @@
-webkit-box-shadow: inset 0px 2px 13px #999; -webkit-box-shadow: inset 0px 2px 13px #999;
} }
#qunit-tests table {
border-collapse: collapse;
margin-top: .2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #e0f2be;
color: #374e0c;
text-decoration: none;
}
#qunit-tests ins {
background-color: #ffcaca;
color: #500;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: black; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li { #qunit-tests li li {
margin: 0.5em; margin: 0.5em;
padding: 0.4em 0.5em 0.4em 0.5em; padding: 0.4em 0.5em 0.4em 0.5em;
@ -99,13 +172,11 @@
border-left: 26px solid #C6E746; border-left: 26px solid #C6E746;
} }
#qunit-tests li.pass { color: #528CE0; background-color: #D2E0E6; } #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests li.pass span.test-name { color: #366097; } #qunit-tests .pass .test-name { color: #366097; }
#qunit-tests li li.pass span.test-actual, #qunit-tests .pass .test-actual,
#qunit-tests li li.pass span.test-expected { color: #999999; } #qunit-tests .pass .test-expected { color: #999999; }
strong b.pass { color: #5E740B; }
#qunit-banner.qunit-pass { background-color: #C6E746; } #qunit-banner.qunit-pass { background-color: #C6E746; }
@ -117,20 +188,24 @@ strong b.pass { color: #5E740B; }
border-left: 26px solid #EE5757; border-left: 26px solid #EE5757;
} }
#qunit-tests li.fail { color: #000000; background-color: #EE5757; } #qunit-tests > li:last-child {
#qunit-tests li.fail span.test-name, border-radius: 0 0 15px 15px;
#qunit-tests li.fail span.module-name { color: #000000; } -moz-border-radius: 0 0 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
#qunit-tests li li.fail span.test-actual { color: #EE5757; } #qunit-tests .fail { color: #000000; background-color: #EE5757; }
#qunit-tests li li.fail span.test-expected { color: green; } #qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000000; }
strong b.fail { color: #710909; } #qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: green; }
#qunit-banner.qunit-fail, #qunit-banner.qunit-fail { background-color: #EE5757; }
#qunit-testrunner-toolbar { background-color: #EE5757; }
/** Footer */ /** Result */
#qunit-testresult { #qunit-testresult {
padding: 0.5em 0.5em 0.5em 2.5em; padding: 0.5em 0.5em 0.5em 2.5em;
@ -138,10 +213,7 @@ strong b.fail { color: #710909; }
color: #2b81af; color: #2b81af;
background-color: #D2E0E6; background-color: #D2E0E6;
border-radius: 0 0 15px 15px; border-bottom: 1px solid white;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
} }
/** Fixture */ /** Fixture */

835
external/qunit.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -60,7 +60,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixtures">
<div> <div>
<div id="list1" class="foo"> <div id="list1" class="foo">

45
tests/unit/all.html Normal file
View File

@ -0,0 +1,45 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Test Suite</title>
<script src="../../jquery-1.5.1.js"></script>
<link rel="stylesheet" href="../../external/qunit.css">
<script src="../../external/qunit.js"></script>
<script src="testsuites.js"></script>
<script>
QUnit.testSuites([
"accordion/accordion.html",
"autocomplete/autocomplete.html",
"button/button.html",
"core/core.html",
"datepicker/datepicker.html",
"dialog/dialog.html",
//"draggable/draggable.html",
//"droppable/droppable.html",
"position/position.html",
"progressbar/progressbar.html",
//"resizable/resizable.html",
//"selectable/selectable.html",
"slider/slider.html",
//"sortable/sortable.html",
"tabs/tabs.html",
"widget/widget.html"
]);
</script>
</head>
<body>
<h1 id="qunit-header">jQuery UI Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
</div>
</body>
</html>

View File

@ -34,7 +34,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<div id="ac-wrap1" class="ac-wrap"></div> <div id="ac-wrap1" class="ac-wrap"></div>
<div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo" /></div> <div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo" /></div>

View File

@ -33,7 +33,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<div><button id="button" class="foo">Label</button></div> <div><button id="button" class="foo">Label</button></div>

View File

@ -31,7 +31,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<img src="../images/jqueryui_32x32.png" usemap="#mymap" width="10", height="10"> <img src="../images/jqueryui_32x32.png" usemap="#mymap" width="10", height="10">
<map name="mymap"> <map name="mymap">

View File

@ -46,7 +46,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<p><input type="text" id="inp"/><input type="text" id="alt"/><div id="inl"></div></p> <p><input type="text" id="inp"/><input type="text" id="alt"/><div id="inl"></div></p>
<p><input type="text" id="inp2"/></p> <p><input type="text" id="inp2"/></p>
</div> </div>

View File

@ -38,7 +38,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
</div> </div>
</body> </body>

View File

@ -42,7 +42,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div> <div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
<div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div> <div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div>
<div style='width: 1px; height: 1000px;'></div> <div style='width: 1px; height: 1000px;'></div>

View File

@ -43,7 +43,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<div id="draggable1" style="width: 25px; height: 25px;">Draggable</div> <div id="draggable1" style="width: 25px; height: 25px;">Draggable</div>
<div id="droppable1" style="width: 100px; height: 100px;">Droppable</div> <div id="droppable1" style="width: 100px; height: 100px;">Droppable</div>
<div style='width:1000px;height:1000px;'>&nbsp;</div> <div style='width:1000px;height:1000px;'>&nbsp;</div>

View File

@ -29,7 +29,7 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6
.height() returns the greater of the height and line-height .height() returns the greater of the height and line-height
--> -->
<div id="main" style="position: absolute; top: 0; left: 0;"> <div id="qunit-fixtures">
<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> <div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> <div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div> <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>

View File

@ -33,7 +33,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<div id="progressbar"></div> <div id="progressbar"></div>
</div> </div>

View File

@ -44,7 +44,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<div id="resizable1" style="background: green; width: 100px; height: 100px;">I'm a resizable.</div> <div id="resizable1" style="background: green; width: 100px; height: 100px;">I'm a resizable.</div>
<img src="images/test.jpg" id="resizable2" style="width: 100px; height: 100px;"/> <img src="images/test.jpg" id="resizable2" style="width: 100px; height: 100px;"/>
</div> </div>

View File

@ -42,7 +42,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<ul id="selectable1"> <ul id="selectable1">
<li>Item 1</li> <li>Item 1</li>
<li>Item 2</li> <li>Item 2</li>

View File

@ -44,7 +44,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<div id="slider1"></div> <div id="slider1"></div>
<div id="slider3" style="position: relative; margin: 40px; width: 217px; height: 28px;"> <div id="slider3" style="position: relative; margin: 40px; width: 217px; height: 28px;">
<div class="ui-slider-handle" style="position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px;"></div> <div class="ui-slider-handle" style="position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px;"></div>

View File

@ -42,7 +42,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<ul id="sortable"> <ul id="sortable">
<li>Item 1</li> <li>Item 1</li>
<li>Item 2</li> <li>Item 2</li>

View File

@ -44,7 +44,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<div id="tabs1"> <div id="tabs1">
<ul> <ul>

76
tests/unit/testsuites.js Normal file
View File

@ -0,0 +1,76 @@
(function( $, QUnit ) {
$.extend( QUnit, {
testSuites: function( suites ) {
$.each( suites, function( i, suite ) {
asyncTest( suite, function() {
runSuite( suite );
});
});
},
testStart: function( data ) {
// update the test status to show which test suite is running
$( "#qunit-testresult" ).html( "Running " + data.name + "...<br>&nbsp;" );
},
testDone: function() {
// undo the auto-expansion of failed tests
$( "#qunit-tests > li.fail" ).each(function() {
var test = $( this );
// avoid collapsing test results that the user manually opened
if ( test.data( "auto-collapsed" ) ) {
return;
}
test.data( "auto-collapsed", true )
.children( "ol" ).hide();
});
}
});
// generate an iframe to run the test suite and proxy the iframe's QUnit
// to pass all test info to the main page
function runSuite( suite ) {
var body = $( "body" ),
iframe = $( "<iframe>", { src: suite } )
.css({
width: 1000,
height: 1000
})
.appendTo( body )
[0],
iframeWin = iframe.contentWindow;
$( iframeWin ).bind( "load", function() {
var module, test,
count = 0;
$.extend( iframeWin.QUnit, {
moduleStart: function( data ) {
// capture module name for messages
module = data.name;
},
testStart: function( data ) {
// capture test name for messages
test = data.name;
},
log: function( data ) {
// pass all test details through to the main page
var message = module + ": " + test + ": " + data.message;
expect( ++count );
QUnit.push( data.result, data.actual, data.expected, message );
},
done: function() {
// hide the iframe from the main page once the tests are done
// and start the wrapper test from the main page
$( iframe ).hide();
start();
}
});
});
}
}( jQuery, QUnit ) );

View File

@ -26,7 +26,7 @@
<ol id="qunit-tests"> <ol id="qunit-tests">
</ol> </ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> <div id="qunit-fixture">
<div id="widget-wrapper"> <div id="widget-wrapper">
<div id="widget"> <div id="widget">