Google Git
Sign in
chromium / apps / ftp / c0101b250bc2d45b65bc9dc80d46d23bd1969f3b / . / Prototype / third_party / qunit / QUnitExample.html
blob: 29c7db4981215ed77f9db1c499d15efdd9f5c7bf [file] [log] [blame]
<!DOCTYPE html>
<!-- saved from url=(0019)http://qunitjs.com/ -->
<html class="js multiplebgs boxshadow cssgradients wf-klavikaweb-i7-active wf-klavikaweb-n7-active wf-sourcecodepro-n4-active wf-sourcecodepro-n7-active wf-active" lang="en-US"><!--<![endif]--><head data-live-domain="qunitjs.com"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script async="" src="http://engine.adzerk.net/ados.js?_=1402609172177"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>QUnit</title>
<meta name="author" content="jQuery Foundation - jquery.org">
<meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="http://qunitjs.com/jquery-wp-content/themes/qunitjs.com/i/favicon.ico">
<link rel="stylesheet" href="http://qunitjs.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
<link rel="stylesheet" href="http://qunitjs.com/jquery-wp-content/themes/qunitjs.com/style.css">
<link rel="pingback" href="http://qunitjs.com/xmlrpc.php">
<!--[if lt IE 7]><link rel="stylesheet" href="css/font-awesome-ie7.min.css"><![endif]-->
<script type="text/javascript" async="" src="./QUnitExample_files/ga.js"></script><script src="./QUnitExample_files/modernizr.custom.2.6.2.min.js"></script>
<script src="./QUnitExample_files/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape('%3Cscript src="http://qunitjs.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<script src="./QUnitExample_files/plugins.js"></script>
<script src="./QUnitExample_files/main.js"></script>
<script src="./QUnitExample_files/wde1aof.js"></script>
<style type="text/css">.tk-source-code-pro{font-family:"source-code-pro",sans-serif;}.tk-klavika-web{font-family:"klavika-web",sans-serif;}</style><link rel="stylesheet" href="http://use.typekit.net/c/d4d852/klavika-web:i7:n7,source-code-pro:n4:n7.PYh:F:2,PYg:F:2,Y1M:F:2,Y1P:F:2/d?3bb2a6e53c9684ffdc9a98f2135b2a6250f2340d8ca0853b7df9676f5fa610fe069f9d29c9b5e67ae7b6312a16ff95d3a73356eed53502d6630d88cb0fe9789e0ac2d9a6c14ac282069f97be80efceecd4f5e0e58b889e8649ff22efc0c4063e9f9f87c7a8920dcab32add3496e6b09e6a94141aaaeb81a4bb1d4a09b8a14ac46d7d0dff3bf6532c044b0313c5ed1d7226c76cac5039645b4082ff59a8953c4e06ef9a344cf9265e8de3ed48ac2f34b281583cbaf6f2f580f7709eba9ea284dc14f4722ed0e264d7faa135466fbba043f093297f0efc92bfcb7b3eb8761407436be31d8029117f1a72aa7b8b6319c956c739e1c25b7a993a45"><script>try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="./QUnitExample_files/comment-reply.min.js"></script>
<meta name="generator" content="WordPress 3.8">
<style type="text/css"></style></head>
<body class="qunitjs home page page-id-5 page-template-default page-slug-index single-author singular">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="projects">
<li class="project jquery"><a href="http://jquery.com/" title="jQuery">jQuery</a></li>
<li class="project jquery-ui"><a href="http://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
<li class="project jquery-mobile"><a href="http://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
<li class="project sizzlejs"><a href="http://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
<li class="project qunitjs"><a href="./QUnitExample_files/QUnitExample.html" title="QUnit">QUnit</a></li>
</ul>
<ul class="links l_tinynav1">
<li><a href="http://plugins.jquery.com/">Plugins</a></li>
<li class="dropdown"><a href="http://contribute.jquery.org/">Contribute</a>
<ul>
<li><a href="http://contribute.jquery.org/cla/">CLA</a></li>
<li><a href="http://contribute.jquery.org/style-guide/">Style Guides</a></li>
<li><a href="http://contribute.jquery.org/triage/">Bug Triage</a></li>
<li><a href="http://contribute.jquery.org/code/">Code</a></li>
<li><a href="http://contribute.jquery.org/documentation/">Documentation</a></li>
<li><a href="http://contribute.jquery.org/web-sites/">Web Sites</a></li>
</ul>
</li>
<li class="dropdown"><a href="http://events.jquery.org/">Events</a>
<ul class="wide">
<li><a href="http://appendto.com/what-we-do/training/schedule/jquery-virtual-training-april-2014/">Apr 16-17 | jQuery Virtual Training</a></li>
<li><a href="http://jqueryuk.com/?utm_source=jqueryorg&utm_medium=banner&utm_campaign=jqueryorgbanner">May 16 | jQuery UK</a></li>
<li><a href="http://appendto.com/what-we-do/training/schedule/jquery-virtual-training-june-2014/">Jun 17-19 | jQuery Virtual Training</a></li>
<li><a href="http://events.jquery.org/2014/chicago/">Sep 12-13 | jQuery Chicago</a></li>
<li><a href="http://2014.cssdevconf.com/">Oct 13-15 | CSS Dev Conf 2014</a></li>
</ul>
</li>
<li class="dropdown"><a href="https://jquery.org/support/">Support</a>
<ul>
<li><a href="http://learn.jquery.com/">Learning Center</a></li>
<li><a href="http://try.jquery.com/">Try jQuery</a></li>
<li><a href="http://irc.jquery.org/">IRC/Chat</a></li>
<li><a href="http://forum.jquery.com/">Forums</a></li>
<li><a href="http://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
<li><a href="https://jquery.org/support/">Commercial Support</a></li>
</ul>
</li>
<li class="dropdown"><a href="https://jquery.org/">jQuery Foundation</a>
<ul>
<li><a href="https://jquery.org/join/">Join</a></li>
<li><a href="https://jquery.org/members/">Members</a></li>
<li><a href="https://jquery.org/team/">Team</a></li>
<li><a href="http://brand.jquery.org/">Brand Guide</a></li>
<li><a href="https://jquery.org/donate/">Donate</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</section>
</header>
<div id="container">
<div id="logo-events" class="constrain clearfix">
<h2 class="logo"><a href="./QUnitExample_files/QUnitExample.html" title="QUnit">QUnit</a></h2>
<aside><div id="broadcast"></div></aside>
</div>
<nav id="main" class="constrain clearfix">
<div class="menu-top-container">
<ul id="menu-top" class="menu l_tinynav2">
<li class="menu-item current"><a href="./QUnitExample_files/QUnitExample.html">Home</a></li>
<li class="menu-item"><a href="http://qunitjs.com/intro/">Intro to Unit Testing</a></li>
<li class="menu-item"><a href="http://api.qunitjs.com/">API Documentation</a></li>
<li class="menu-item"><a href="http://qunitjs.com/cookbook/">Cookbook</a></li>
<li class="menu-item"><a href="http://qunitjs.com/plugins/">Plugins</a></li>
</ul><select id="tinynav2" class="tinynav tinynav2"><option>Navigate...</option><option value="http://qunitjs.com/">Home</option><option value="http://qunitjs.com/intro/">Intro to Unit Testing</option><option value="http://api.qunitjs.com/">API Documentation</option><option value="http://qunitjs.com/cookbook/">Cookbook</option><option value="http://qunitjs.com/plugins/">Plugins</option></select>
</div>
<form method="get" class="searchform" action="./QUnitExample_files/QUnitExample.html">
<button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
<label>
<span class="visuallyhidden">Search QUnit</span>
<input type="text" name="s" value="" placeholder="Search">
</label>
</form>
</nav>
<div id="content-wrapper" class="clearfix row">
<div class="content-full full-width">
<div id="content">
<h1 class="entry-title">QUnit: A JavaScript Unit Testing framework.</h1>
<hr>
<div class="six columns">
<h2>What is QUnit?</h2>
<p class="blurb">
QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, <a href="https://github.com/jquery/qunit/tree/master/test">including itself</a>!
</p>
<h2>Getting Started</h2>
<p>
A minimal QUnit test setup:
</p>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">title</span>&gt;</span>QUnit Example<span class="tag">&lt;/<span class="title">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/qunit/qunit-1.14.0.css"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"qunit"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"qunit-fixture"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/qunit/qunit-1.14.0.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"tests.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
The contents of tests.js:
</p>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>QUnit.test( <span class="string">"hello test"</span>, <span class="keyword">function</span>( assert ) {</code></div></div><div class="container"><div class="line"><code> assert.ok( <span class="number">1</span> == <span class="string">"1"</span>, <span class="string">"Passed!"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
The result:
</p>
<iframe src="./QUnitExample_files/example-index.html" style="width:100%;height:250px;border:0px"></iframe>
<h3>Browser Support</h3>
<p>QUnit supports <a href="http://jquery.com/browser-support/">the same browsers as jQuery 1.x</a>.</p>
<p>That's IE6+ and Current - 1 for Chrome, Firefox, Safari and Opera.</p>
</div>
<div class="six columns">
<div class="download-box">
<h2>Download</h2>
<p>QUnit is available from the <a href="http://code.jquery.com/" target="_blank">jQuery CDN</a> hosted by <a href="http://www.maxcdn.com/" target="_blank">MaxCDN</a>.
</p><h3>Current Release - v1.14.0</h3>
<ul>
<li><a href="./QUnitExample_files/qunit-1.14.0.js">qunit-1.14.0.js</a></li>
<li><a href="http://code.jquery.com/qunit/qunit-1.14.0.css">qunit-1.14.0.css</a></li>
<li><a href="https://github.com/jquery/qunit/blob/1.14.0/History.md" target="_blank">Changelog</a></li>
<li><a href="https://npmjs.org/package/qunitjs">NPM</a>: <input class="copyable" value="npm install --save-dev qunitjs" readonly=""></li>
<li>Bower: <input class="copyable" value="bower install --save-dev qunit" readonly=""></li>
</ul>
<p></p><p>To test the latest features and bug fixes to QUnit, a version automatically generated from the latest commit to the <a href="http://github.com/jquery/qunit" target="_blank">QUnit Git repository</a> is also available for use.</p>
<ul>
<li><a href="http://code.jquery.com/qunit/qunit-git.js">qunit-git.js</a></li>
<li><a href="http://code.jquery.com/qunit/qunit-git.css">qunit-git.css</a></li>
</ul>
</div>
<h3>Learn More</h3>
<ul>
<li>Check out the <a href="http://api.qunitjs.com/">API documentation</a> or the <a href="http://qunitjs.com/cookbook">Cookbook</a> to learn how to use QUnit</li>
<li>To see more examples, check out the unit tests of <a href="https://github.com/jquery/jquery/tree/master/test/unit">jQuery</a>, <a href="https://github.com/jquery/jquery-ui/tree/master/tests/unit">jQuery UI</a> or the <a href="https://github.com/jzaefferer/jquery-validation/tree/master/test">jQuery Validation Plugin</a>.</li>
<li>For custom assertions, reporters and themes, check out <a href="http://qunitjs.com/addons/">official and third-party add-ons</a></li>
<li>Please post to the <a href="http://forum.jquery.com/qunit-and-testing">QUnit and testing forum</a> for anything related to QUnit or testing in general.</li>
<li>For announcements, follow <a href="http://twitter.com/qunitjs">@qunitjs</a></li>
</ul>
<h3>Get Involved</h3>
<ul>
<li>The code is located at: <a href="http://github.com/jquery/qunit">http://github.com/jquery/qunit</a></li>
<li>The code for this site is <a href="http://github.com/jquery/qunitjs.com">also on GitHub</a>, with the <a href="http://github.com/jquery/api.qunitjs.com">API pages in a separate repository</a>.</li>
<li>Find the QUnit team in <a href="http://irc.jquery.org/">#jquery-dev on Freenode</a>.
</li></ul>
<h3>History</h3>
<p>
QUnit was originally developed by John Resig as part of jQuery. In 2008 it got its own home, name and API documentation, allowing others to use it for their unit testing as well. At the time it still depended on jQuery. A rewrite in 2009 fixed that, and now QUnit runs completely standalone.
</p>
<p>
QUnit's assertion methods follow the <a href="http://wiki.commonjs.org/wiki/Unit_Testing/1.0">CommonJS Unit Testing</a> specification, which was to some degree influenced by QUnit.
</p>
</div> </div>
</div>
</div>
</div>
<footer class="clearfix simple">
<div class="constrain">
<div id="legal">
<ul class="footer-site-links">
<li><a class="icon-pencil" href="http://learn.jquery.com/">Learning Center</a></li>
<li><a class="icon-group" href="http://forum.jquery.com/qunit-and-testing/">Forum</a></li>
<li><a class="icon-wrench" href="http://api.qunitjs.com/">API</a></li>
<li><a class="icon-twitter" href="http://twitter.com/qunitjs">Twitter</a></li>
<li><a class="icon-comments" href="http://irc.jquery.org/">IRC</a></li>
<li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
</ul>
<p class="copyright">
Copyright 2014 <a href="https://jquery.org/team/">The jQuery Foundation</a>.
<a href="https://jquery.org/license/">jQuery License</a>
<span class="sponsor-line"><a href="http://mediatemple.net/" rel="noindex,nofollow" class="mt-link">Web hosting by Media Temple</a> | <a href="http://www.maxcdn.com/" rel="noindex,nofollow" class="mc-link">CDN by MaxCDN</a> | <a href="http://wordpress.org/" class="wp-link">Powered by WordPress</a> | Thanks: <a href="https://jquery.org/members/">Members</a>, <a href="https://jquery.org/sponsors/">Sponsors</a></span>
</p>
</div>
</div>
</footer>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1076265-1']);
_gaq.push(['_setDomainName', 'qunitjs.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<div id="cboxOverlay" style="display: none;"></div><div id="colorbox" class="" style="display: none;"><div id="cboxWrapper"><div><div id="cboxTopLeft" style="float: left;"></div><div id="cboxTopCenter" style="float: left;"></div><div id="cboxTopRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxMiddleLeft" style="float: left;"></div><div id="cboxContent" style="float: left;"><div id="cboxLoadedContent" style="width: 0px; height: 0px; overflow: hidden; float: left;"></div><div id="cboxTitle" style="float: left;"></div><div id="cboxCurrent" style="float: left;"></div><div id="cboxNext" style="float: left;"></div><div id="cboxPrevious" style="float: left;"></div><div id="cboxSlideshow" style="float: left;"></div><div id="cboxClose" style="float: left;"></div></div><div id="cboxMiddleRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxBottomLeft" style="float: left;"></div><div id="cboxBottomCenter" style="float: left;"></div><div id="cboxBottomRight" style="float: left;"></div></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div></div></body></html>