JS测试工具JsUnit
2014-03-13 15:29
190 查看
以往在测试js的时候，都是以alert方式来检测错误，很不专业，今天发现竟然有jsunit这个测试工具，感觉非常不错。
废话不说了，是骡子是马拉出来溜溜再说。
1 简单入门实例
首先我们定义我们的函数
这里以最简单的加减乘除四个方法来进行测试
建立我们的js文件myjs.js
Js代码
function add(num1,num2){
return num1 + num2;
}
function minus(num1,num2){
return num1 - num2;
}
function multiply(num1,num2){
return num1 * num2;
}
function divide(num1,num2){
return num1 / num2;
}
建立我们的测试用例，mytest1.html
我们将建立四个测试方法，jsUnit的测试方法必须以test开头。
下面我们对myjs.js中的加减乘除四个函数进行测试,
下面是jsUnit给我们提供的断言方式 [comment] 是可选的 表示断言出错的时候给出的提示 ,任选一种即可。
assert([comment], booleanValue)
assertTrue([comment], booleanValue)
assertFalse([comment], booleanValue)
assertEquals([comment], value1, value2)
assertNotEquals([comment], value1, value2)
assertNull([comment], value)
assertNotNull([comment], value)
assertUndefined([comment], value)
assertNotUndefined([comment], value)
assertNaN([comment], value)
assertNotNaN([comment], value)
fail(comment)
Html代码
<!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(4,2)
assertEquals(6,result);
}
function testMinus(){
var result = minus(4,2)
assertEquals(2,result);
}
function testMultiply(){
var result = multiply(4,2)
assertEquals(8,result);
}
function testDivide(){
var result = divide(4,2)
assertEquals("4 divide 2 is 2",2,result);
}
//-->
</SCRIPT>
<BODY>
</BODY>
</HTML>
我们通过jsunit给我们提供的测试运行器testRunner.html来进行测试
2 setUp()与tearDown()
JsUnit也支持setUp()和tearDown()。JsUnit与JUnit有一点是一样的，即setUp()和tearDown()是可选的，而且setUp()会在每个测试之前调用，tearDown()会在每个测试之后调用。
我们可以在测试页面中加入setUp()和tearDown()的方法。
Js代码
function setUp(){
alert("setUp");
}
function tearDown(){
alert("tearDown");
}
JUnit与JsUnit中setUp()和tearDown()方法的重要区别：
在JUnit中，每次测试运行会导致创建Test类的一个新实例，这说明，声明的所有实例变量在下一次测试运行时会“重置”。
JsUnit有所不同，它不会为每次测试运行重新加载测试页，所以变量状态会在多次测试之间保留。
还有一个重要区别与测试顺序有关，使用JUnit的话，测试执行的顺序是不能保证的。在JsUnit中，测试会按测试页中声明的顺序执行，先从最上面的测试开始。
虽然区别如此，但我们应该了解每个测试用例都是应该相互独立的，不能真的顺序来调整我们的用例
下面是一个具体例子。
这里我们将函数和测试用例都写在一起了，在实际测试中应该避免
Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script>
</HEAD>
<BODY>
<script language="JavaScript">
//原函数
function addTwoNumbers(value1, value2) {
return parseInt(value1) + parseInt(value2);
}
function addNumbers() {
var val1 = document.getElementById("value1").value;
var val2 = document.getElementById("value2").value;
return addTwoNumbers(val1, val2);
}
//初始化测试数据
function setUp() {
document.getElementById("value1").value = "2";
document.getElementById("value2").value = "2";
}
//测试方法
function testValidArgs() {
assertEquals("2 + 2 should equal 4", 4, addNumbers());
}
//清空测试数据
function tearDown() {
document.getElementById("value1").value = "";
document.getElementById("value2").value = "";
}
</script>
<form id="test">
<input type="text" size="3" id="value1"/>
<input type="text" size="3" id="value2"/>
<input type="button" value="Add" onclick="addNumbers()"/>
</form>
</body>
</html>
</BODY>
</HTML>
3 setUpPage()函数
setUpPage()函数只对每个测试页调用一次，即在所有测试函数调用之前调用。现在，你可能已经发现，这里很适合完成预处理，特别是在运行测试之前如果需要向页面加载一些数据，setUpPage()函数就非常有用。不同于setUp()和tearDown()函数的是，使用setUpPage()不只是把处理放在这个函数中就行了的。如果确实选择使用这个特性，一定要保证函数完成时要把setUpPageStatus变量设置为complete，这就告诉JsUnit可以继续，接下来可以执行测试页上的测试了。
我们更改第一个实例来看看结果
Html代码
<!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)
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";
}
//-->
</SCRIPT>
<BODY>
</BODY>
</HTML>
4 exposeTestFunctionNames()函数显示的声明我们的测试方法
JsUnit会自动发现测试函数，就像JUnit会发现所有测试方法一样。
有些操作系统/浏览器不能合作。如果你发现不能如你所愿地发现测试函数，使用exposeTestFunctionNames()方法就能解决这个问题。
在测试页面里定义exposeTestFunctionNames方法，jsunit运行器在执行时会寻找exposeTestFunctionNames方法，只执行在此方法内指定的方法；
我们还是已第一个例子为例
可以变为
Html代码
<!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)
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>
5 jsUnit的日志跟踪
jsUuit的日志跟踪有3各级别：warn、info和debug
看下面的例子就知道了
Html代码
<!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>
在测试运行器中选择Trace level的级别就可以看到相应的日志信息了
6 测试套件(suit test)
测试集是为了把不同的测试页分组组织，其中可以包含测试页或其他测试集，他们会按照顺序执行。
注意点：
测试集中不能包含任何测试函数
必须包含一个返回 jsUnitTestSuite 对象的 suite 函数
有两个方法添加测试页：addTestPage(testPage) addTestSuite(testSuite), 在添加测试页时要注意路径，应是相对于testRunner.html的。
测试集的名称必须是suit()
Html代码
<!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>
Demo下载：http://yunpan.cn/Q44CUhT4BLvke
from:http://llying.iteye.com/blog/258605
废话不说了，是骡子是马拉出来溜溜再说。
1 简单入门实例
首先我们定义我们的函数
这里以最简单的加减乘除四个方法来进行测试
建立我们的js文件myjs.js
Js代码
function add(num1,num2){
return num1 + num2;
}
function minus(num1,num2){
return num1 - num2;
}
function multiply(num1,num2){
return num1 * num2;
}
function divide(num1,num2){
return num1 / num2;
}
建立我们的测试用例，mytest1.html
我们将建立四个测试方法，jsUnit的测试方法必须以test开头。
下面我们对myjs.js中的加减乘除四个函数进行测试,
下面是jsUnit给我们提供的断言方式 [comment] 是可选的 表示断言出错的时候给出的提示 ,任选一种即可。
assert([comment], booleanValue)
assertTrue([comment], booleanValue)
assertFalse([comment], booleanValue)
assertEquals([comment], value1, value2)
assertNotEquals([comment], value1, value2)
assertNull([comment], value)
assertNotNull([comment], value)
assertUndefined([comment], value)
assertNotUndefined([comment], value)
assertNaN([comment], value)
assertNotNaN([comment], value)
fail(comment)
Html代码
<!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(4,2)
assertEquals(6,result);
}
function testMinus(){
var result = minus(4,2)
assertEquals(2,result);
}
function testMultiply(){
var result = multiply(4,2)
assertEquals(8,result);
}
function testDivide(){
var result = divide(4,2)
assertEquals("4 divide 2 is 2",2,result);
}
//-->
</SCRIPT>
<BODY>
</BODY>
</HTML>
我们通过jsunit给我们提供的测试运行器testRunner.html来进行测试
2 setUp()与tearDown()
JsUnit也支持setUp()和tearDown()。JsUnit与JUnit有一点是一样的，即setUp()和tearDown()是可选的，而且setUp()会在每个测试之前调用，tearDown()会在每个测试之后调用。
我们可以在测试页面中加入setUp()和tearDown()的方法。
Js代码
function setUp(){
alert("setUp");
}
function tearDown(){
alert("tearDown");
}
JUnit与JsUnit中setUp()和tearDown()方法的重要区别：
在JUnit中，每次测试运行会导致创建Test类的一个新实例，这说明，声明的所有实例变量在下一次测试运行时会“重置”。
JsUnit有所不同，它不会为每次测试运行重新加载测试页，所以变量状态会在多次测试之间保留。
还有一个重要区别与测试顺序有关，使用JUnit的话，测试执行的顺序是不能保证的。在JsUnit中，测试会按测试页中声明的顺序执行，先从最上面的测试开始。
虽然区别如此，但我们应该了解每个测试用例都是应该相互独立的，不能真的顺序来调整我们的用例
下面是一个具体例子。
这里我们将函数和测试用例都写在一起了，在实际测试中应该避免
Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script>
</HEAD>
<BODY>
<script language="JavaScript">
//原函数
function addTwoNumbers(value1, value2) {
return parseInt(value1) + parseInt(value2);
}
function addNumbers() {
var val1 = document.getElementById("value1").value;
var val2 = document.getElementById("value2").value;
return addTwoNumbers(val1, val2);
}
//初始化测试数据
function setUp() {
document.getElementById("value1").value = "2";
document.getElementById("value2").value = "2";
}
//测试方法
function testValidArgs() {
assertEquals("2 + 2 should equal 4", 4, addNumbers());
}
//清空测试数据
function tearDown() {
document.getElementById("value1").value = "";
document.getElementById("value2").value = "";
}
</script>
<form id="test">
<input type="text" size="3" id="value1"/>
<input type="text" size="3" id="value2"/>
<input type="button" value="Add" onclick="addNumbers()"/>
</form>
</body>
</html>
</BODY>
</HTML>
3 setUpPage()函数
setUpPage()函数只对每个测试页调用一次，即在所有测试函数调用之前调用。现在，你可能已经发现，这里很适合完成预处理，特别是在运行测试之前如果需要向页面加载一些数据，setUpPage()函数就非常有用。不同于setUp()和tearDown()函数的是，使用setUpPage()不只是把处理放在这个函数中就行了的。如果确实选择使用这个特性，一定要保证函数完成时要把setUpPageStatus变量设置为complete，这就告诉JsUnit可以继续，接下来可以执行测试页上的测试了。
我们更改第一个实例来看看结果
Html代码
<!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)
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";
}
//-->
</SCRIPT>
<BODY>
</BODY>
</HTML>
4 exposeTestFunctionNames()函数显示的声明我们的测试方法
JsUnit会自动发现测试函数，就像JUnit会发现所有测试方法一样。
有些操作系统/浏览器不能合作。如果你发现不能如你所愿地发现测试函数，使用exposeTestFunctionNames()方法就能解决这个问题。
在测试页面里定义exposeTestFunctionNames方法，jsunit运行器在执行时会寻找exposeTestFunctionNames方法，只执行在此方法内指定的方法；
我们还是已第一个例子为例
可以变为
Html代码
<!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)
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>
5 jsUnit的日志跟踪
jsUuit的日志跟踪有3各级别：warn、info和debug
看下面的例子就知道了
Html代码
<!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>
在测试运行器中选择Trace level的级别就可以看到相应的日志信息了
6 测试套件(suit test)
测试集是为了把不同的测试页分组组织，其中可以包含测试页或其他测试集，他们会按照顺序执行。
注意点：
测试集中不能包含任何测试函数
必须包含一个返回 jsUnitTestSuite 对象的 suite 函数
有两个方法添加测试页：addTestPage(testPage) addTestSuite(testSuite), 在添加测试页时要注意路径，应是相对于testRunner.html的。
测试集的名称必须是suit()
Html代码
<!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>
Demo下载：http://yunpan.cn/Q44CUhT4BLvke
from:http://llying.iteye.com/blog/258605
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- IE8开发人员工具教程（二）
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理
- javascript asp教程第十课--global asa
- js显示当前星期的起止日期的脚本
- javascript asp教程第十一课--Application 对象
- javascript 获取特定的 CSS属性值