JsUnit 简介

最新推荐文章于 2022-07-19 19:44:57 发布
最新推荐文章于 2022-07-19 19:44:57 发布
阅读量828 收藏 1
点赞数
分类专栏： 转载 文章标签： 测试 JsUnit 浏览器 ant
拥抱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.   
  30. function setUpPage(){  
  31.     arg1 = 4;  
  32.     arg2 = 2;  
  33.     setUpPageStatus = "complete";  
  34. }  
  35.   
  36. //-->  
  37. </SCRIPT>  
  38.  <BODY>  
  39.  </BODY>  
  40. </HTML>  


4 exposeTestFunctionNames()函数显示的声明我们的测试方法 
JsUnit会自动发现测试函数，就像JUnit会发现所有测试方法一样。 
有些操作系统/浏览器不能合作。如果你发现不能如你所愿地发现测试函数，使用exposeTestFunctionNames()方法就能解决这个问题。 
在测试页面里定义exposeTestFunctionNames方法，jsunit运行器在执行时会寻找exposeTestFunctionNames方法，只执行在此方法内指定的方法； 
我们还是已第一个例子为例 
可以变为 
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.   
  30. function setUpPage(){  
  31.     arg1 = 4;  
  32.     arg2 = 2;  
  33.     setUpPageStatus = "complete";  
  34. }  
  35.   
  36. function exposeTestFunctionNames(){  
  37.     var tests = new Array();  
  38.     tests[0]="testAdd";  
  39.     tests[1]="testMinus";  
  40.     tests[2]="testMultiply";  
  41.     return tests;  
  42. }  
  43.   
  44. //-->  
  45. </SCRIPT>  
  46.  <BODY>  
  47.     
  48.  </BODY>  
  49. </HTML>  


5 jsUnit的日志跟踪 
jsUuit的日志跟踪有3各级别：warn、info和debug 
看下面的例子就知道了 
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.     warn("result", result);  
  13.     debug("result", result);  
  14.     info("result", result);  
  15.     assertEquals(6,result);  
  16. }  
  17.   
  18. function testMinus(){  
  19.     var result = minus(arg1,arg2)  
  20.     assertEquals(2,result);  
  21. }  
  22.   
  23. function testMultiply(){  
  24.     var result = multiply(arg1,arg2)  
  25.     assertEquals(8,result);  
  26. }  
  27.   
  28. function testDivide(){  
  29.     var result = divide(arg1,arg2)  
  30.     assertEquals("4 divide 2 is 2",2,result);  
  31. }  
  32.   
  33. function setUpPage(){  
  34.     arg1 = 4;  
  35.     arg2 = 2;  
  36.     setUpPageStatus = "complete";  
  37. }  
  38.   
  39. function exposeTestFunctionNames(){  
  40.     var tests = new Array();  
  41.     tests[0]="testAdd";  
  42.     tests[1]="testMinus";  
  43.     tests[2]="testMultiply";  
  44.     return tests;  
  45. }  
  46.   
  47. //-->  
  48. </SCRIPT>  
  49.  <BODY>  
  50.     
  51.  </BODY>  
  52. </HTML>  

在测试运行器中选择Trace level的级别就可以看到相应的日志信息了 

6 测试套件(suit test) 
测试集是为了把不同的测试页分组组织，其中可以包含测试页或其他测试集，他们会按照顺序执行。 
注意点： 
测试集中不能包含任何测试函数 
必须包含一个返回 jsUnitTestSuite 对象的 suite 函数 
有两个方法添加测试页：addTestPage(testPage) addTestSuite(testSuite), 在添加测试页时要注意路径，应是相对于testRunner.html的。 
测试集的名称必须是suit() 
Html代码   收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE>suit test</TITLE>  
  5.  </HEAD>  
  6. <script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script>  
  7. <script type="text/javascript">  
  8. <!--  
  9. function suite()  
  10. {  
  11.     var testSuite = new top.jsUnitTestSuite();  
  12.     //增加的测试页面的路径是相对于测试运行器的路径的（testRunner.html），而不是相对于当前的页面  
  13.     testSuite.addTestPage("../mytest1.html");  
  14.     //套件里还可以在包含套件  
  15.     testSuite.addTestSuite(Suite2());  
  16.     return testSuite;  
  17. }  
  18. function Suite2() //需要与suite定义在同一个页面中  
  19. {  
  20.     var testSuite = new top.jsUnitTestSuite();  
  21.     testSuite.addTestPage("../mytest2.html");  
  22.     return testSuite;  
  23. }  
  24.   
  25. //-->  
  26. </SCRIPT>  
  27.  <BODY>  
  28.     
  29.  </BODY>  
  30. </HTML>  


7 通过浏览器完成自动测试 
file:///D:/mytest/jsunit/testRunner.html?testPage=D:/mytest/mytest1.html&autoRun=true 
个人感觉没有实际意义 

8 采用ant方式完成自动测试 
首先进入jsunit目录，build.xml是junit定义好的模板，我们只需要简单的添加就可以了。 
配置property属性 
browserFileNames：浏览器地址；多个可以用逗号隔开； 
closeBrowsersAfterTestRuns：执行测试后，是否关闭浏览器；默认true 
logsDirectory：日志存放目录 
url：测试文件地址；如： 
   file:///c:/jsunit/testRunner.html?testPage=c:/jsunit/tests/jsUnitTestSuite.html 
在控制台下进入相关目录运行ant standalone_test 即可。 
standalone_test是在单机上行运行测试； 
distributed_test：是分布式远程测试； 
ant不能执行或者执行出错： 
查看环境变量 
path下是否有java与ant的bin 
是否设置Java_Home
小菜鸟yjm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSunit2.2(上)
11-25
很好的JavaScript测试工具,呵呵,首次发表望多多支持.
拥抱JsUnit
llying
10-27 169
拥抱JsUnit 以往在测试js的时候，都是以alert方式来检测错误，很不专业，今天发现竟然有jsunit这个测试工具，感觉非常不错。 废话不说了，是骡子是马拉出来溜溜再说。 1 简单入门实例 首先我们定义我们的函数 这里以最简单的加减乘除四个方法来进行测试 建立我们的js文件myjs.js [code="js"] function add(num1,num2){ ret...
JsUnit测试JS
清风抚白杨
11-17 6655
为什么要用JsUnit，因为项目不是WEB项目，JS代码无法用网页测试，同样无法通过alert测试，所以采用JsUnit来测试编写的JS代码。 准备工作：下载JsUnit相关资源：www.jsunit.net 解压后如下图： JsUnit的核心文件（jsUnitCore.js、jsUnitTestManager.js等 ）都在app文件夹中，testRunner.html是
jsunit
张议的博客
02-06 404
文章目录 javaScript 单元测试（jsUnit）：http://www.jsunit.net/ JavaScript 编码规范：通常在 JavaScript 不希望外界访问的成员和方法名以下划线开始。 jsUnit 测试函数的要遵循的规则与 JUnit 3.8 类似（比如说测试函数名以 test 开头等） 一定要记住testRunner.html一定要用IE浏览器打开，并且要在本地打开不...
js测试
qq_42776672的博客
07-25 153
想知道js里面哪错了可以加一个alert一句句试 js真的是很不友好的语言，它是区分大小写的，只是不给你报错而已 比如说 var e=new date();就是错的，运行不出来，应该写成Date() ...
JSUnit Javascript单元测试
05-23
javascript单元测试，入门简介，简单应用（一般应用，Ajax，测试套件）
Ajax基础教程
07-22
资源名称：Ajax基础教程内容简介：Ajax技术可以提供高度交互的Web应用，给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术，主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、...
Ajax基础教程（扫描版）
01-10
本书重点介绍ajax及相关的工具和技术，主要内容包括xmlhttprequest对象及其属性和方法、发送请求和处理响应、构建完备的ajax开发工具、使用jsunit测试javascript、分析javascript调试工具和技术，以及ajax开发模式和...
ajax基础教程（5）
12-17
（亚马逊计算机榜首图书，国内第1本Ajax图书） 【作 者】（美）Ryan Asleson,Nathaniel T.Schutta [同作者作品] [作译者介绍] 【译 者】 金灵[同译者作品] 等 【内容简介】 Ajax技术可以提供高度交互...
ajax基础教程（4）
12-17
（亚马逊计算机榜首图书，国内第1本Ajax图书） 【作 者】（美）Ryan Asleson,Nathaniel T.Schutta [同作者作品] [作译者介绍] 【译 者】 金灵[同译者作品] 等 【内容简介】 Ajax技术可以提供高度交互...
JSUnit单元测试
06-21
前台单元测试材料，适合初学者对前台测试的了解和学习。
JavaScript单元测试框架JsUnit基本介绍和使用
weixin_34329187的博客
09-05 124
  JavaScript单元测试框架JsUnit基本介绍和使用   XUnit framework 　　XUnit是一套标准化的独立于语言的概念和结构集合,用于编写和运行单元测试(Unit tests). 　　每一个语言都有一个用于单元测试的XUnit框架,比如Java有JUnit, C++有CppUnit, PHP有PHPUnit, Oracle SQL有UTPL/SQL.   J...
JS基础测试（上）
qq_48962360的博客
07-19 555
js基础测试，面经
JsUnit入门
rainyspring4540的专栏
02-09 1366
感谢 http://blog.csdn.net/sdyy321/article/details/6981912 http://blog.csdn.net/sdtsfhh/article/details/1640279 和官网demo：https://github.com/pivotal/jsunit/blob/master/testRunner.html 下载后的目录 入门看
jsunit_使用JsUnit和JSMock进行JavaScript测试驱动的开发
cunfu6353的博客
07-09 222
jsunit 本文是编写可维护JavaScript的速成班。 我们将通过遵循以下简单原则，在正在运行的示例中添加功能：编写单元测试，使其通过。 每个测试将充当质量反馈回路，为想要更改生产代码的任何人创建安全网和可执行的文档形式。 通过以简单的失败测试开始每个功能，我们确保测试所有功能。 我们避免了为以后进行测试而重写代码的成本。 考虑到JavaScript开发人员有很多东西可以缠住他们，这一点特...
js在线测试工具
weixin_34072857的博客
11-24 341
http://www.w3school.com.cn/tiy/t.asp?f=jquery_traversing_each
Js测试框架学习笔记（一）
weixin_34304013的博客
09-20 105
什么时候使用Karma？ 在真实浏览器里测试。 在多种浏览器里进行测试（包括桌面、移动）。 在本地开发环境执行测试。 想在持续集成CI内运行测试。 想在每次保存代码时，自动执行测试。 热衷于terminal小黑屏。 不想陷入令人厌烦的测试生活。 想使用Istanbul自动生成coverage报告。 想在源码中使用RequireJS。 Karma: Karma一直作为...
如何用Qunit测试你的JavaScript代码
woiweb
03-31 280
原文地址：如何用Qunit测试你的JavaScript代码   QUnit, 由jquery团队开发，是一个对JavasScript进行单元测试的很好的框架。在这篇指南中, 我将具体介绍什么是Qunit，以及为什么你要关心严格地测试你的代码。   什么是QUnit QUnit 是一个非常强大的javascript单元测试框架，可以帮你调试代码。它是由 jQuery 团队的成员写的，而...
JavaScript单元测试入门
热门推荐
u012510478的博客
01-25 1万+
首先要弄清楚什么是单元。单元就是一个相对独立的功能模块，可以是一个类，或是一个模块，或是一个方法。单元测试的目的，就是首先保证一个系统的基本组成单元（类、模块或方法）能正常工作。打个比方，你想一台机器能正常工作，首先要保证它的每一个零件和组件能正常工作。而单元测试就是对这些零件和组件进行的测试。所谓”测试框架”，就是运行测试的工具。通过它，可以为JavaScript应用添加测试，从而保证代码的质量。
python selenium使用
最新发布
08-15
Selenium核心Selenium Core是基于JsUnit开发的，完全由JavaScript编写，因此可以在任何支持JavaScript的浏览器上使用。Selenium支持多种编程语言，包括C#、Java、Perl、PHP、Python和Ruby，其中Python和C#是最受欢迎...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值