I am writing about unit testing on jQuery codes. We have been using firebug, chrome and IE developers tool during our development. It is best idea to use them so that we can debug our javascript code. Some of the time we have to open firebug and developers tool to see minor minor issue. I feel annoying most of the time when i forget to close my bracket in some javascript code and have to dig down to debugger tool to find it out. But now i come to find these small issue as soon as I open my browser. Because I use qunit. Qunit is jQuery unit test library. It is very simple to use There are some basic steps you have to follow to use in your application.
1) Download Qunit.js and qunit.css files. (Download location may change depending on which date you view this blog).
2) Link these files in your HTML head script as specified below:
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
3) Now you can add follow code to enable Qunit to display any Javascript error occur in your html page.
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
I recommend you to use this at the end of your whole page ie. Include those code just above your closing tag for body dom element. You can customize these display error in development mode only and remove in production mode. Here is what you can do.
Put is wrapper div for these code and give an id for it like this.
<div id = "development_unitTest">
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</div>
now your css file for development can have
.development_unitTest{
display:block;
}
and css for your production can have
.development_unitTest{
display:none;
}
This will make sure that all javascript issue will display only during development and issue will be hidden during production.
There are lots of things you can do with qunit test. You can test your javascript function. a smiple javascript function testing can be:
Here is a simple Example for Unit testing a function. This function takes an argument
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script>
/**
* methods return value
* @args id DOM element id
* returns id element value
*/
function showText(id){
return $("#"+id).val();
}
$(document).ready(function(){
module("Module A");
test("Test empty", function() {
equal(showText("text1"),"","we expect empty");
});
test("Test Text value", function() {
equal(showText("text2"),"Text","we expect Text");
});
});
</script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<input type="text" value="" id="text1" />
<input type="text" value="Text" id="text2" />
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
This will help for the beginners who want to use qunit test on their codes.
Good Luck.
1) Download Qunit.js and qunit.css files. (Download location may change depending on which date you view this blog).
2) Link these files in your HTML head script as specified below:
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
3) Now you can add follow code to enable Qunit to display any Javascript error occur in your html page.
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
I recommend you to use this at the end of your whole page ie. Include those code just above your closing tag for body dom element. You can customize these display error in development mode only and remove in production mode. Here is what you can do.
Put is wrapper div for these code and give an id for it like this.
<div id = "development_unitTest">
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</div>
now your css file for development can have
.development_unitTest{
display:block;
}
and css for your production can have
.development_unitTest{
display:none;
}
This will make sure that all javascript issue will display only during development and issue will be hidden during production.
There are lots of things you can do with qunit test. You can test your javascript function. a smiple javascript function testing can be:
Here is a simple Example for Unit testing a function. This function takes an argument
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script>
/**
* methods return value
* @args id DOM element id
* returns id element value
*/
function showText(id){
return $("#"+id).val();
}
$(document).ready(function(){
module("Module A");
test("Test empty", function() {
equal(showText("text1"),"","we expect empty");
});
test("Test Text value", function() {
equal(showText("text2"),"Text","we expect Text");
});
});
</script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<input type="text" value="" id="text1" />
<input type="text" value="Text" id="text2" />
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
This will help for the beginners who want to use qunit test on their codes.
Good Luck.
No comments:
Post a Comment