前端测试进化论2

说完了，前端技术的发展史，那么对应的前端测试发展史也随之发展。

石器时代——纯手工测试

早期的页面基本都是静态化的页面，只有几个链接或者图片，那么相对测试工作量不大，只需要我们打开页面查看加载是否正确。

铁器时代–xunit

到了javascript时代，随着其他语言xunit 风靡天下,js 也出现了它的xunit 框架。

Jsunit，以往在测试js的时候，都是以alert方式来检测错误，很不专业。

2001年 jsunit 出现，让js调试称为可能。

Jsunit 主要参考junit的设计，只要你会使用junit 那么jsunit 对你来说，根本不是什么事，具体使用参考

http://llying.iteye.com/blog/258605
DEMO:

测试代码

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE>testHtml</TITLE> </HEAD><script type="text/javascript" src="myjs.js"></script><script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script><script type="text/javascript"><!--function testAdd(){	var result = add(arg1,arg2);	warn("result", result);	debug("result", result);	info("result", result);	assertEquals(6,result);}

function testMinus(){	var result = minus(arg1,arg2)	assertEquals(2,result);}

function testMultiply(){	var result = multiply(arg1,arg2)	assertEquals(8,result);}

function testDivide(){	var result = divide(arg1,arg2)	assertEquals("4 divide 2 is 2",2,result);}

function setUpPage(){	arg1 = 4;	arg2 = 2;	setUpPageStatus = "complete";}

function exposeTestFunctionNames(){	var tests = new Array();	tests[0]="testAdd";	tests[1]="testMinus";	tests[2]="testMultiply";	return tests;}

//--></SCRIPT> <BODY>

</BODY></HTML>

测试驱动

123456789101112131415161718192021222324252627282930

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE>suit test</TITLE> </HEAD><script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script><script type="text/javascript"><!--function suite(){	var testSuite = new top.jsUnitTestSuite();	//增加的测试页面的路径是相对于测试运行器的路径的（testRunner.html），而不是相对于当前的页面	testSuite.addTestPage("../mytest1.html");    //套件里还可以在包含套件	testSuite.addTestSuite(Suite2());	return testSuite;}function Suite2() //需要与suite定义在同一个页面中{	var testSuite = new top.jsUnitTestSuite();	testSuite.addTestPage("../mytest2.html");	return testSuite;}

//--></SCRIPT> <BODY>

</BODY></HTML>

http://www.jsunit.net/

工业革命–ajax流行

随着ajax的流行，jquery框架在前端开发中的普及，让开发者看到了前端的新纪元，
jquery 团队也为广大开发人员开发了Qunit.QUnit 是一款强大而且容易使用的JavaScript 测试框架，它被用于jQuery 与其插件的测试，同时它也同样可以测试普通的JavaScript 代码.

TDD的时代来临 QUnit框架版本

将要被测试的代码需要添加到myProject.js中，并且你的测试用例应该插入到myTest.js。要运行这些测试，只需在一个浏览器中打开这个html文件。现在需要写一些测试用例了。

12345678910111213141516171819

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

参考
http://www.cnblogs.com/nuaalfm/archive/2010/02/26/1674235.html
http://qunitjs.com/