Qunit, http://docs.jquery.com/Qunit, is a javascript test suite. It is used by jQuery project for testing. But we can use it to test our javascript code as well.
Firstly, we need to setup our testing environment. Let's create a file called testSuite.html
<html>
<head>
<link rel="stylesheet" href="qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
Secondly, we must include our javascript code that needs to be tested.For example, if we put our javascript code in app.js file, we need to include this file in testSuite.html.
<html>
<head>
<link rel="stylesheet" href="qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit.js"></script>
<!-- The files that include the js code for testing -->
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
Thirdly, we need to write test cases. Assuming we put test cases in testCases.js, we need to include this file in testSuite.html too.
<html>
<head>
<link rel="stylesheet" href="qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit.js"></script>
<!-- The files that include the js code for testing -->
<script type="text/javascript" src="app.js"></script>
<!-- The files that include the test cases -->
<script type="text/javascript" src="testCases.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
Now, suppose we have this simple function in app.js:
function isLarger(a, b) {
return a > b;
}
In testCases.js, we have our test case:
test('isLarger()', function() {
//success
ok(isLarger(3,1), "3 is larger than 1");
// fails
ok(isLarger(3, 5), '3 is larger than 5');
});
Ok, it is time to run our tests. try http://localhost/testSuite.html, and the result is like below:
Looks nice, doesn't it?
However, you may wonder, most of our javascript code is about DOM manipulation, how to test that? Let 's have a look.
DOM manipulation test
Suppose we have a function in app.js:
function domManipulation()
{
var dom = document.getElementById('input');
dom.value = 'henry';
}
Obviously, to run this function correctly, we need to setup our DOM document for testing. Fortunately, Qunit provide us with #qunit-fixture element. Let's change our testSuite.html a bit:
<html>
<head>
<link rel="stylesheet" href="qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit.js"></script>
<!-- The files that include the js code for testing -->
<script type="text/javascript" src="app.js"></script>
<!-- The files that include the test cases -->
<script type="text/javascript" src="testCases.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<!-- The DOM elements for testing -->
<div id="qunit-fixture">
<input id="input" type="text" value="change me" />
</div>
</body>
</html>
And then, add a test case in our testCases.js:
test('domManipulation', function(){
domManipulation();
var dom = document.getElementById('input');
//success
equals('henry', dom.value, 'input value changed!');
//failure
equals('change me', dom.value, 'input value not changed!');
});
Now, refresh our testSuite.html, and the result is like below:
PS: Qunit is a javascript test suite. We know that another popular frontend test suite is Selenium, which is so cool as well. It definitely worth your time on it.
1 comment:
There are so many fun and exciting Things to do and experience around the world that I thought I'd put together a list of my favourite Things to do for all travelers
Post a Comment