jquery unit testing, how can I use it?


Hello Experts,

Can someone please guide me to use Qunittesting?
I understand the concept but I am not sure how to use it. I read a tutorial from net.tuts but still I am not sure how to use it on my code... could someone please guide me? what can I test from my code?
The following is the code I would like to unit test, it works, but I would like to know how can I unit test it, perhaps if you guys give me an example using my own code (I've been seeing codes around but still I can;t get it) I may understand. it is a simple script pagination:

    var currentPage = 1;
    $("div[class^='section']").hide();
    showPage(currentPage);
    $("ul li.back a").live('click', function (e) {
        e.preventDefault();
    });
    $("ul li.next a").live('click', function (e) {
        e.preventDefault();
        if (currentPage != $("div[class^='section']").length) {
            currentPage++;
            showPage(currentPage);            
        }
    });
    function showPage() {
        $("div[class^='section']").hide();
        $(".section" + currentPage).fadeIn();

    }
And the following is the environment they use for unit testing. you don't need to download jquery files since everything in on a server:


<!DOCTYPE html>
<html>
<head>
      <title>QUnit Test Suite</title>
      <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">
      <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
      <!-- Your project file goes here -->
      <script type="text/javascript" src="myProject.js"></script>
      <!-- Your tests file goes here -->
      <script type="text/javascript" src="myTests.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>

glepizaAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
Check this :


<!DOCTYPE html>
<html>
<head>
      <title>QUnit Test Suite</title>
      <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
      <script language="javascript" type="text/javascript">
      	$(document).ready(function() {

		    var currentPage = 1;

		    function showPage() {
		        $("div[class^='section']").hide();
		        $(".section" + currentPage).fadeIn();		
		    }

      		module("http://www.experts-exchange.com/Programming/Languages/Scripting/JScript/Q__26895431.html");

      		test("Phase 1 : hide all div where class start by \"section\"", function() {
			    // doing the job
			    $("div[class^='section']").hide();
			    // checking :
			    notEqual( $("div[class^='section']:visible").length, 0, "Some element(s) still visible(s)");
			});
			
      		test("Phase 2 : show the current page", function() {
			    showPage(currentPage);
			    equals( $(".section" + currentPage).is(":visible"), true, "page not visible");
			});

      	});
      </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>

Open in new window

0
 
glepizaAuthor Commented:
Thanks!!, that was a great example!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.