18、JavaScript单元测试框架jsUnit
费学
1、JavaScript编码规范：通常在Javascript不希望外界访问的成员和方法名以下划线开始
2、jsUnit测试函数的要遵循的规则与JUnit3.8类似（比如说测试函数名以test开头等）
想要使用jsUnit，要引入jsUnit库jsUnitCore.js，使用如下语句：
<script type="text/javascript" src="jsunit/app/jsUnitCore.js"> </script>
<html>
<HEAD>
<title>test</title>
<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
</script>
<script type="text/javascript">
function add(num1,num2)
{
return num1 + num2;
}
function subtract(num1,num2)
{
return num1 - num2;
}
function multiply(num1,num2)
{
return num1 * num2;
}
//以下为测试函数（Test Function）
function testAdd()
{
var result = add(1,2);
assertEquals(3,result)
}
function testSubtract()
{
var result = substract(1,2);
assertEquals(-1,result);
}
function testMultiply()
{
var result = multiply(3,2);
assertEquals(6,result);
}
</script>
</HEAD>
<body>
</body>
</HTML>
对于正常的工程项目来说，一般将测试代码和实际代码分开，将实际代码单独放到一个js文件中，如：test1.js
function add(num1,num2)
{
return num1 + num2;
}
function subtract(num1,num2)
{
return num1 - num2;
}
function multiply(num1,num2)
{
return num1 * num2;
}
测试：
<html>
<HEAD>
<title>test</title>
<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
</script>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
//以下为测试函数（Test Function）
function testAdd()
{
var result = add(1,2);
assertEquals(3,result)
}
function testSubtract()
{
var result = subtract(1,2);
assertEquals(-1,result);
}
function testMultiply()
{
var result = multiply(3,2);
assertEquals(6,result);
}
</script>
</HEAD>
<body>
</body>
</HTML>
3、对于jsUnit来说，其setUp和tearDown方法与Junit的运行原理是不同的，JUnit中的setUo和tearDown之间是没有关系的，也就是说不同的测试方法运行在不同的测试对象之中，而jsUnit的各个测试函数是运行在同一个测试页面中的。因此setUp和tearDown会针对同一个变量进行操作：
<html>
<HEAD>
<title>test</title>
<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
</script>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
var count = 0;
function setUp()
{
alert("setUp：" + count++);
}
function tearDown()
{
alert("tearDown");
}
//以下为测试函数（Test Function）
function testAdd()
{
var result = add(1,2);
assertEquals(3,result)
}
function testSubtract()
{
var result = subtract(1,2);
assertEquals(-1,result);
}
function testMultiply()
{
var result = multiply(3,2);
assertEquals(6,result);
}
</script>
</HEAD>
<body>
</body>
</HTML>
jsUnit提供了setUpPage方法，类似于JUnit4中的@BeforeClass，此函数只执行一次（在页面加载后），并且必须在函数最后一行添加：setUpPageStatus = "complete";
这行代码必须放在setUpPage函数的最后一行，告诉jsUnit setUpPage函数已经执行完毕，如果不加页面就会停止在这里，直到浏览器提示超时
<html>
<HEAD>
<title>test</title>
<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
</script>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
var count = 0;
//此函数只执行一次（在页面加载后），类似于JUnit4中的@BeforeClass
function setUpPage()
{
alert("setUpPage invoke");
//这行代码必须放在setUpPage函数的最后一行，
//告诉jsUnit setUpPage函数已经执行完毕，如果不加
//页面就会停止在这里，直到浏览器提示超时
setUpPageStatus = "complete";
}
function setUp()
{
alert("setUp" + count++);
}
function tearDown()
{
alert("tearDown");
}
//以下为测试函数（Test Function）
function testAdd()
{
var result = add(1,2);
assertEquals(3,result)
}
function testSubtract()
{
var result = subtract(1,2);
assertEquals(-1,result);
}
function testMultiply()
{
var result = multiply(3,2);
assertEquals(6,result);
}
</script>
</HEAD>
<body>
</body>
</HTML>
没有提供与@AfterClass对应的函数
3、网页上的三个输入文本，在1，2上输入数字，提供一个add按钮，点击按钮将相加结果填到第三个文本域，然后测试add函数
<html>
<HEAD>
<title>test</title>
<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
</script>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
var count = 0;
//此函数只执行一次（在页面加载后），类似于JUnit4中的@BeforeClass
function setUpPage()
{
alert("setUpPage invoke");
//这行代码必须放在setUpPage函数的最后一行，
//告诉jsUnit setUpPage函数已经执行完毕，如果不加
//页面就会停止在这里，直到浏览器提示超时
setUpPageStatus = "complete";
}
function setUp()
{
//给文本域赋初值
document.getElementById("value1").value = 2;
document.getElementById("value2").value = 3;
}
function tearDown()
{
//恢复初始值
document.getElementById("value1").value = "";
document.getElementById("value2").value = "";
document.getElementById("value3").value = "";
}
//以下为测试函数（Test Function）
function testAdd()
{
var result = add(1,2);
assertEquals(3,result)
}
function testSubtract()
{
var result = subtract(1,2);
assertEquals(-1,result);
}
function testMultiply()
{
var result = multiply(3,2);
assertEquals(6,result);
}
function testAddNumbers()
{
addNumbers();
assertEquals("5",document.getElementById("value3").value);
}
</script>
</HEAD>
<body>
<input type="text" id="value1"><br>
<input type="text" id="value2"><br>
<input type="text" id="value3"><br>
<input type="button" value="add" οnclick="addNumbers();"><br>
</body>
</HTML>
test1.js文件：
function add(num1,num2)
{
return num1 + num2;
}
function subtract(num1,num2)
{
return num1 - num2;
}
function multiply(num1,num2)
{
return num1 * num2;
}
function addNumbers()
{
var v1 = document.getElementById("value1").value;
var v2 = document.getElementById("value2").value;
v1 = parseInt(v1);
v2 = parseInt(v2);
var v3 = v1 + v2;
document.getElementById("value3").value = v3;
}
4、测试套件
<html>
<HEAD>
<title>test</title>
<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
</script>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
//测试套件名一定为suite
function suite()
{
var testSuite = new top.jsUnitTestSuite();
//这里增加的测试页面的路径是相对于
//测试运行器（testRunner.html）的路径,而不是当前页面
testSuite.addTestPage("../test2.html");
testSuite.addTestPage("../test2.html");
testSuite.addTestPage("../test2.html");
return testSuite;
}
</script>
</HEAD>
<body>
<input type="text" id="value1"><br>
<input type="text" id="value2"><br>
<input type="text" id="value3"><br>
<input type="button" value="add" οnclick="addNumbers();"><br>
</body>
</HTML>
上例是在套件里只增加测试页面，下面的例子是套件里既增加测试页面，也增加测试套件，即测试套件嵌套：
<html>
<HEAD>
<title>test</title>
<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
</script>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
//定义自己的一个测试套件
function mySuite()
{
var testSuite = new top.jsUnitTestSuite();
//这里增加的测试页面的路径是相对于
//测试运行器（testRunner.html）的路径,而不是当前页面
testSuite.addTestPage("../test2.html");
testSuite.addTestPage("../test2.html");
testSuite.addTestPage("../test2.html");
return testSuite;
}
//测试套件名一定为suite
function suite()
{
var testSuite = new top.jsUnitTestSuite();
//这里增加的测试页面的路径是相对于
//测试运行器（testRunner.html）的路径,而不是当前页面
testSuite.addTestPage("../test2.html"); //这是增加测试页面
testSuite.addTestSuite(mySuite());//这是增加测试套件
return testSuite;
}
</script>
</HEAD>
<body>
<input type="text" id="value1"><br>
<input type="text" id="value2"><br>
<input type="text" id="value3"><br>
<input type="button" value="add" οnclick="addNumbers();"><br>
</body>
</HTML>
类似资料：