Home思洋影视事业部网站建设知识库
0 Comments

Web开发者必备的JavaScript单元测试工具(2)

发布于：2014-03-07  |   作者：广州网站建设  |   已聚集：人围观

开源的单元测试工具Qunit

接下来，介绍另外一款开源的单元测试工具Qunit(下载地址：http://code.jquery.com/qunit)，它是完全基于浏览器运行的，因此不需要象jsTestDriver那么安装麻烦，而且值得一提的是，这个框架是jQuery的单元测试Javascript框架，功能十分强大。下面是安装方法：

1) 只需要下载qunit.js(http://code.jquery.com/qunit/qunit-git.js)和qunit.css(http://code.jquery.com/qunit/qunit-git.css)
广州网站建设,网站建设,广州网页设计,广州网站设计

2) 我们需要编写一个Qunit的界面，命名为testrunner.html,代码如下：



    
	
  1. 
		<DOCTYPE html>   
    2. 
	
  2. 
		<html>   
    3. 
	
  3. 
		<head>   
    4. 
	
  4. 
		    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>   
    5. 
	
  5. 
		    <script src="qunit.js" type="text/javascript"></script>   
    6. 
	
  6. 
		    <link rel="stylesheet" media="all" href="qunit.css" />   
    7. 
	
  7. 
		 
    8. 
	
  8. 
		    <script src="src/mystuff.js" type="text/javascript"></script>   
    9. 
	
  9. 
		    <script src="src-test/mystuff_qunit.js" type="text/javascript"></script>   
    10. 
	
  10. 
		 
    11. 
	
  11. 
		</head>   
    12. 
	
  12. 
		<body>   
    13. 
	
  13. 
		    <h1 id="qunit-header">MyStuff</h1>   
    14. 
	
  14. 
		    <h2 id="qunit-banner"></h2>   
    15. 
	
  15. 
		    <h2 id="qunit-userAgent"></h2>   
    16. 
	
  16. 
		    <ol id="qunit-tests"></ol>   
    17. 
	
  17. 
		</body>   
    18. 
	
  18. 
		</html> 
    19. 




	这个页面中分别引入了jquery类库，qunit的类库，还有就是我们之前编写的，位于Src目录下的原先的javascript脚本mystuff.js，以及位于src-test目录下的测试用例Mystuff_qunit.js。

	广州网站建设,网站建设,广州网页设计,广州网站设计



	接下来，来看下测试用例文件Mystuff_qunit.js，代码如下：




    
	
  1. 
		module("Sample Test Case");  
    2. 
	
  2. 
		test("Number plus Zero Equals Number", function(){  
    3. 
	
  3. 
		var adder = new myAwesomeApp.MyAwesomeClass();  
    4. 
	
  4. 
		equals( adder.add(5,0),5);  
    5. 
	
  5. 
		});  
    6. 
	
  6. 
		test("Number plus Number Equals Sum", function(){  
    7. 
	
  7. 
		var adder = new myAwesomeApp.MyAwesomeClass();  
    8. 
	
  8. 
		equals(adder.add(5,3),8);  
    9. 
	
  9. 
		});  
    10. 
	
  10. 
		test("Zero plus Number Equals Number", function(){  
    11. 
	
  11. 
		var adder = new myAwesomeApp.MyAwesomeClass();  
    12. 
	
  12. 
		equals(adder.add(0,5),5);  
    13. 
	
  13. 
		});  
    14. 
	
  14. 
		test("Number plus Negative of Number Equals Zero", function(){  
    15. 
	
  15. 
		var adder = new myAwesomeApp.MyAwesomeClass();  
    16. 
	
  16. 
		equals(adder.add(5,-5),0);  
    17. 
	
  17. 
		});  
    18. 
	
  18. 
		test("Fails miserably", function(){  
    19. 
	
  19. 
		ok(false,"miserably");  
    20. 
	
  20. 
		}); 
    21. 




	这个看上去跟jsTestDriver有点象，但注意的是在断言方法中，参数的顺序不同，即在qunit中，断言的参数顺序为：Qunit.equals(actual, expected)，即实际的数值。在前面，而期望的数值在后面，这点请注意。最后，直接在浏览器中运行test.html,可以看到效果如下：



	 



	开源的单元测试工具Qunit



	 



	其中，红色部分即时表示没能通过的单元测试。



	整合jsTestDriver和Qunit



	由于jsTestDriver和Qunit各有优势，因此我们可以考虑对其进行整合。比如，我们可以将jsTestDriver编写的脚本移植到Qunit中去，由于它们的断言参数顺序有不同，因此可以修改一下，编写名为jsTestDriverInQunit.js的脚本如下：




    
	
  1. 
		function TestCase(name, tests){  
    2. 
	
  2. 
		if(tests != null)  
    3. 
	
  3. 
		module(name);  
    4. 
	
  4. 
		for(var key in tests){  
    5. 
	
  5. 
		if(tests[key] instanceof Function && key.indexOf("test") == 0){  
    6. 
	
  6. 
		test(key,tests[key]);  
    7. 
	
  7. 
		}  
    8. 
	
  8. 
		}  
    9. 
	
  9. 
		return function(){};  
    10. 
	
  10. 
		}  
    11. 
	
  11. 
		function assertEquals(arg0,arg1){  
    12. 
	
  12. 
		equals(arg1,arg0);  
    13. 
	
  13. 
		}  
    14. 
	
  14. 
		function fail(msg){  
    15. 
	
  15. 
		ok(false,msg);  
    16. 
	
  16. 
		} 
    17. 




	并且将testrunner.html修改如下：




    
	
  1. 
		<DOCTYPE html>   
    2. 
	
  2. 
		    <html>   
    3. 
	
  3. 
		    <head>   
    4. 
	
  4. 
		        <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>   
    5. 
	
  5. 
		        <script src="qunit.js" type="text/javascript"></script>   
    6. 
	
  6. 
		        <script src="jsTestDriverInQunit.js" type="text/javascript"></script>   
    7. 
	
  7. 
		        <link rel="stylesheet" media="all" href="qunit.css" />   
    8. 
	
  8. 
		      
    9. 
	
  9. 
		        <script src="src/mystuff.js" type="text/javascript"></script>   
    10. 
	
  10. 
		        <script src="src-test/mystuff.js" type="text/javascript"></script>   
    11. 
	
  11. 
		    </head>   
    12. 
	
  12. 
		    <body>   
    13. 
	
  13. 
		        <h1 id="qunit-header">MyStuff</h1>   
    14. 
	
  14. 
		        <h2 id="qunit-banner"></h2>   
    15. 
	
  15. 
		        <h2 id="qunit-userAgent"></h2>   
    16. 
	
  16. 
		        <ol id="qunit-tests"></ol>   
    17. 
	
  17. 
		    </body>   
    18. 
	
  18. 
		    </html>  
    19. 




	此外，还有一个开源项目提供了将Qunit转化为jsTestDriver的功能，项目地址为：



	http://code.google.com/p/js-test-driver/wiki/QUnitAdapter。



	原文：http://tech.it168.com/a2011/1019/1260/000001260942_all.shtml


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机