dz1984 · December 16, 2015 08:18 · dz1984 · Apr 17, 2013
diff --git a/index.html b/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>
diff --git a/main.css b/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;
 }
diff --git a/testCase.js b/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");
	} ]);