JsUnit 简介

Posted 小菜鸟yjm

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JsUnit 简介相关的知识，希望对你有一定的参考价值。

拥抱JsUnit 
以往在测试js的时候，都是以alert方式来检测错误，很不专业，今天发现竟然有jsunit这个测试工具，感觉非常不错。 
废话不说了，是骡子是马拉出来溜溜再说。 

1 简单入门实例 
首先我们定义我们的函数 
这里以最简单的加减乘除四个方法来进行测试 
建立我们的js文件myjs.js 
Js代码  
  1. function add(num1,num2)  
  2.     return num1 + num2;  
  3.   
  4.   
  5. function minus(num1,num2)  
  6.     return num1 - num2;  
  7.   
  8.   
  9. function multiply(num1,num2)  
  10.     return num1 * num2;  
  11.   
  12.   
  13. function divide(num1,num2)  
  14.     return num1 / num2;  
  15.   

建立我们的测试用例，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代码  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE>testHtml</TITLE>  
  5.  </HEAD>  
  6. <script type="text/javascript" src="myjs.js"></script>  
  7. <script type="text/javascript" src="jsunit\\app\\jsUnitCore.js"></script>  
  8. <script type="text/javascript">  
  9. <!--  
  10. function testAdd()  
  11.     var result = add(4,2)  
  12.     assertEquals(6,result);  
  13.   
  14.   
  15. function testMinus()  
  16.     var result = minus(4,2)  
  17.     assertEquals(2,result);  
  18.   
  19.   
  20. function testMultiply()  
  21.     var result = multiply(4,2)  
  22.     assertEquals(8,result);  
  23.   
  24.   
  25. function testDivide()  
  26.     var result = divide(4,2)  
  27.     assertEquals("4 divide 2 is 2",2,result);  
  28.   
  29.   
  30. //-->  
  31. </SCRIPT>  
  32.  <BODY>  
  33.     
  34.  </BODY>  
  35. </HTML>  

我们通过jsunit给我们提供的测试运行器testRunner.html来进行测试 

2 setUp()与tearDown() 
JsUnit也支持setUp()和tearDown()。JsUnit与JUnit有一点是一样的，即setUp()和tearDown()是可选的，而且setUp()会在每个测试之前调用，tearDown()会在每个测试之后调用。 
我们可以在测试页面中加入setUp()和tearDown()的方法。 
Js代码  
  1. function setUp()  
  2.     alert("setUp");  
  3.   
  4.   
  5. function tearDown()  
  6.     alert("tearDown");  
  7.   

JUnit与JsUnit中setUp()和tearDown()方法的重要区别： 
在JUnit中，每次测试运行会导致创建Test类的一个新实例，这说明，声明的所有实例变量在下一次测试运行时会“重置”。 
JsUnit有所不同，它不会为每次测试运行重新加载测试页，所以变量状态会在多次测试之间保留。 
还有一个重要区别与测试顺序有关，使用JUnit的话，测试执行的顺序是不能保证的。在JsUnit中，测试会按测试页中声明的顺序执行，先从最上面的测试开始。 
虽然区别如此，但我们应该了解每个测试用例都是应该相互独立的，不能真的顺序来调整我们的用例 

下面是一个具体例子。 
这里我们将函数和测试用例都写在一起了，在实际测试中应该避免 
Html代码  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE></TITLE>  
  5.   <script type="text/javascript" src="jsunit\\app\\jsUnitCore.js"></script>  
  6.  </HEAD>  
  7.   
  8.  <BODY>  
  9.     <script language="JavaScript">  
  10.         //原函数  
  11.         function addTwoNumbers(value1, value2)   
  12.                 return parseInt(value1) + parseInt(value2);  
  13.           
  14.         function addNumbers()   
  15.             var val1 = document.getElementById("value1").value;  
  16.             var val2 = document.getElementById("value2").value;  
  17.             return addTwoNumbers(val1, val2);  
  18.           
  19.         //初始化测试数据  
  20.         function setUp()   
  21.             document.getElementById("value1").value = "2";  
  22.             document.getElementById("value2").value = "2";  
  23.           
  24.         //测试方法  
  25.         function testValidArgs()   
  26.             assertEquals("2 + 2 should equal 4", 4, addNumbers());  
  27.           
  28.           
  29.         //清空测试数据  
  30.         function tearDown()   
  31.             document.getElementById("value1").value = "";  
  32.             document.getElementById("value2").value = "";  
  33.           
  34.     </script>  
  35.     <form id="test">  
  36.         <input type="text" size="3" id="value1"/>  
  37.         <input type="text" size="3" id="value2"/>  
  38.         <input type="button" value="Add" onclick="addNumbers()"/>  
  39.     </form>  
  40.   </body>  
  41. </html>  
  42.  </BODY>  
  43. </HTML>  


3 setUpPage()函数 
setUpPage()函数只对每个测试页调用一次，即在所有测试函数调用之前调用。现在，你可能已经发现，这里很适合完成预处理，特别是在运行测试之前如果需要向页面加载一些数据，setUpPage()函数就非常有用。不同于setUp()和tearDown()函数的是，使用setUpPage()不只是把处理放在这个函数中就行了的。如果确实选择使用这个特性，一定要保证函数完成时要把setUpPageStatus变量设置为complete，这就告诉JsUnit可以继续，接下来可以执行测试页上的测试了。 
我们更改第一个实例来看看结果 
Html代码  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE>testHtml</TITLE>  
  5.  </HEAD>  
  6. <script type="text/javascript" src="myjs.js"></script>  
  7. <script type="text/javascript" src="jsunit\\app\\jsUnitCore.js"></script>  
  8. <script type="text/javascript">  
  9. <!--  
  10. function testAdd()  
  11.     var result = add(arg1,arg2)  
  12.     assertEquals(6,result);  
  13.   
  14.   
  15. function testMinus()  
  16.     var result = minus(arg1,arg2)  
  17.     assertEquals(2,result);  
  18.   
  19.   
  20. function testMultiply()  
  21.     var result = multiply(arg1,arg2)  
  22.     assertEquals(8,result);  
  23.   
  24.   
  25. function testDivide()  
  26.     var result = divide(arg1,arg2)  
  27.     assertEquals("4 divide 2 is 2",2,result);  
  28.   
  29. JavaScript单元测试框架-Jasmine

    爬虫：Selenium库使用

    来自后端的逆袭 blazor简介 全栈的福音

    拖动对象时会跳到中心

    Java的内存区域划分

    为啥我在尝试编辑离开语音频道的用户时会收到 DiscordAPIError？