dz1984/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Using URL path to determine test case with QUnit framework." />
<link href="http://code.jquery.com/qunit/qunit-git.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="testCase.js"></script>
<meta charset=utf-8 />
<title>Test Demo!</title>
</head>
<body>
  <div id="header">
  <div id="menu">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#home">Home</a></li>
      <li><a href="#books">Books</a></li></ul>
  </div>
  </div>
   <div id="page">
    <h1 id="msg">Home</h1>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
  </div>
</body>
</html>

## main.css
body {
	margin: 0px 0px 0px 0px;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;

}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: 200;
	color: #222222;
}

/* Header */

#header {
	width: 1200px;
	margin: 0 auto;
	padding: 0px 0px;
}

/* Menu */

#menu {
	float: right;
	width: 810px;
	height: 80px;
	padding: 20px 40px 0px 0px;
}

#menu ul {
	float: right;
	margin: 0;
	padding: 40px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	margin-left: 1px;
	padding: 7px 20px 7px 20px;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 300;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
	background: #FFFFFF;
	border-radius: 5px;
	color: #1f31bb;
}

#page {
	overflow: hidden;
	width: 1120px;
	margin: 0px auto;
	padding: 50px 40px;
	color: #8F8F8F;
}

## testCase.js
(function() {

	function BaseTestCase(name) {
		this.name = name;
		this.func = [];
	}

	/*Append the test funciton into the array.*/
	BaseTestCase.prototype.addTest = function(testFunc) {
		if ($.isFunction(testFunc))
			this.func.push(testFunc);
	};

	/*Run the each test function. */
	BaseTestCase.prototype.run = function() {
		console.log("Begin..." + this.name);

		$.each(this.func, function(i, testFunc) {
			test(this.name, testFunc);
		});
		console.log("End..." + this.name);

	};

	function BaseTestCaseSuite() {
		this.tests = [];
	}

	/*Catch the name from the url .  Ex. http://localhost/example/#about => about*/
	BaseTestCaseSuite.prototype.getUrl=function() {
			return window.location.hash;
	};

	/*Search by name that the BaseTestCase object of array.*/
	BaseTestCaseSuite.prototype.getBaseTestCase = function(name) {
		var result = null;
		if (this.tests.length >= 1) {
			$.each(this.tests, function(i, baseTestCase) {
				if (baseTestCase.name == name) {
					result = baseTestCase;
				}
			});
		}
		return result;
	};

	/*Append the test function into the BaseTestCase instance.*/
	BaseTestCaseSuite.prototype.add = function(name, funcs) {
		var obj = this.getBaseTestCase(name);
		if (obj === null) {
			obj = new BaseTestCase(name);
			this.tests.push(obj);
		}
		if ($.isArray(funcs)) {
			$.each(funcs, function(i, func) {
				obj.addTest(func);
			});
		} else if ($.isFunction(funcs)) {
			obj.addTest(funcs);
		}

	};

	/* Run the test case depend on the url.*/
	BaseTestCaseSuite.prototype.run = function() {
		var obj = this.getBaseTestCase(this.getUrl());
		if (obj !== null)
			obj.run();
	};

  var TestView = Backbone.View.extend({
    el: "#msg",

    initialize: function(){
      this.render();
    },

    render: function(){
      this.$el.text("Test Demo!");
    }
  });


  var TestRouter = Backbone.Router.extend({
    routes:{
      "about": "about",
      "home": "home",
      "books": "books"
    },

    initialize: function(){
    },

    about: function(){
      window.suite.run();
    },

    home: function(){
      window.suite.run();
    },
    books: function(){
      window.suite.run();
    }

   });

  window.BaseTestCaseSuite = BaseTestCaseSuite;
  new TestRouter();
  new TestView();
  Backbone.history.start();
})();

var suite = new BaseTestCaseSuite();

suite.add('#about', [ function() {
	ok(suite.getUrl() == '#about',"The hash of url is #about.");
}, function() {
	ok(1 == "1");
} ]);

suite.add('#home', [ function() {
	ok(suite.getUrl() == '#home',"The hash of url is #home.");
}, function() {
	ok(2 == "2");
} ]);

suite.add('#books', [ function() {
	ok(suite.getUrl() == '#books',"The hash of url is #books.");
}, function() {
	ok(3 == "3");
} ]);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Using URL path to determine test case with QUnit framework." />
	<link href="http://code.jquery.com/qunit/qunit-git.css" rel="stylesheet" type="text/css" />
	<link href="main.css" rel="stylesheet" type="text/css" />
	<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
	<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
	<script src="testCase.js"></script>
	<meta charset=utf-8 />
	<title>Test Demo!</title>
	</head>
	<body>
	<div id="header">
	<div id="menu">
	<ul>
	<li><a href="#about">About</a></li>
	<li><a href="#home">Home</a></li>
	<li><a href="#books">Books</a></li></ul>
	</div>
	</div>
	<div id="page">
	<h1 id="msg">Home</h1>
	<div id="qunit"></div>
	<div id="qunit-fixture"></div>
	</div>
	</body>
	</html>
	body {
	margin: 0px 0px 0px 0px;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;

	}

	h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: 200;
	color: #222222;
	}

	/* Header */

	#header {
	width: 1200px;
	margin: 0 auto;
	padding: 0px 0px;
	}

	/* Menu */

	#menu {
	float: right;
	width: 810px;
	height: 80px;
	padding: 20px 40px 0px 0px;
	}

	#menu ul {
	float: right;
	margin: 0;
	padding: 40px 0px 0px 0px;
	list-style: none;
	line-height: normal;
	}

	#menu li {
	float: left;
	}

	#menu a {
	display: block;
	margin-left: 1px;
	padding: 7px 20px 7px 20px;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 300;
	}

	#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
	background: #FFFFFF;
	border-radius: 5px;
	color: #1f31bb;
	}

	#page {
	overflow: hidden;
	width: 1120px;
	margin: 0px auto;
	padding: 50px 40px;
	color: #8F8F8F;
	}
	(function() {

	function BaseTestCase(name) {
	this.name = name;
	this.func = [];
	}

	/Append the test funciton into the array./
	BaseTestCase.prototype.addTest = function(testFunc) {
	if ($.isFunction(testFunc))
	this.func.push(testFunc);
	};

	/Run the each test function. /
	BaseTestCase.prototype.run = function() {
	console.log("Begin..." + this.name);

	$.each(this.func, function(i, testFunc) {
	test(this.name, testFunc);
	});
	console.log("End..." + this.name);

	};

	function BaseTestCaseSuite() {
	this.tests = [];
	}

	/Catch the name from the url . Ex. http://localhost/example/#about => about/
	BaseTestCaseSuite.prototype.getUrl=function() {
	return window.location.hash;
	};

	/Search by name that the BaseTestCase object of array./
	BaseTestCaseSuite.prototype.getBaseTestCase = function(name) {
	var result = null;
	if (this.tests.length >= 1) {
	$.each(this.tests, function(i, baseTestCase) {
	if (baseTestCase.name == name) {
	result = baseTestCase;
	}
	});
	}
	return result;
	};

	/Append the test function into the BaseTestCase instance./
	BaseTestCaseSuite.prototype.add = function(name, funcs) {
	var obj = this.getBaseTestCase(name);
	if (obj === null) {
	obj = new BaseTestCase(name);
	this.tests.push(obj);
	}
	if ($.isArray(funcs)) {
	$.each(funcs, function(i, func) {
	obj.addTest(func);
	});
	} else if ($.isFunction(funcs)) {
	obj.addTest(funcs);
	}

	};

	/* Run the test case depend on the url.*/
	BaseTestCaseSuite.prototype.run = function() {
	var obj = this.getBaseTestCase(this.getUrl());
	if (obj !== null)
	obj.run();
	};

	var TestView = Backbone.View.extend({
	el: "#msg",

	initialize: function(){
	this.render();
	},

	render: function(){
	this.$el.text("Test Demo!");
	}
	});


	var TestRouter = Backbone.Router.extend({
	routes:{
	"about": "about",
	"home": "home",
	"books": "books"
	},

	initialize: function(){
	},

	about: function(){
	window.suite.run();
	},

	home: function(){
	window.suite.run();
	},
	books: function(){
	window.suite.run();
	}

	});

	window.BaseTestCaseSuite = BaseTestCaseSuite;
	new TestRouter();
	new TestView();
	Backbone.history.start();
	})();

	var suite = new BaseTestCaseSuite();

	suite.add('#about', [ function() {
	ok(suite.getUrl() == '#about',"The hash of url is #about.");
	}, function() {
	ok(1 == "1");
	} ]);

	suite.add('#home', [ function() {
	ok(suite.getUrl() == '#home',"The hash of url is #home.");
	}, function() {
	ok(2 == "2");
	} ]);

	suite.add('#books', [ function() {
	ok(suite.getUrl() == '#books',"The hash of url is #books.");
	}, function() {
	ok(3 == "3");
	} ]);