Unit test for Jquery

Today in this blog, I would like to write about how to change theme in website. This very simple task.
The below mention line of code will change css in the page.

$('#styleTheme[rel=stylesheet]').attr('href', 'newTheme.css');

I am also including a prototype code which helps to understand it's uses. Before jumping in the code. I would recommend to create 4 css file in your folder. Name those css file as :

css1.css
p { color:black; }
css2.css
p { color:red; }

css3.css
p { color:green; }

cssdefault.css
p{color:blue;}

Create a html file index.html. now download jQuery file and put it in your local directory. Here is the contents for index.html file

<html>
<head>
<style></style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="cssdefault.css" media="screen" type="text/css" id="styleTheme">
<script>
$(document).ready(function () {
$("#theme").change(function(){
var styleTheme = this.value + ".css";
$('#styleTheme[rel=stylesheet]').attr('href', styleTheme);
});
});
</script>
</head>
<body>

<p class="themePara"><b>Note:</b> This section of text will change color on changing theme of the page.</p>

<form action="">
Theme <select id="theme" name="theme">
<option value="">Select a Theme</option>
<option value="css1">CSS 1</option>
<option value="css2">Css 2</option>
<option value="css3">Css 3</option>
</select>
</form>

</body>
</html>

This file consists of <p> html tag and <select> tag. on change event is attached with select by jQuery. Inside onchange event corresponding css theme is choosen.

I hope this will give you idea on how to change theme in a html page.

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.

Unit test for Jquery

Monday, April 9, 2012

dynamicthemechange

Friday, April 6, 2012

About Me