QUnit 5分钟教程

时间 2020-01-15

原文原文链接

QUnit是一个很是简单并且强大的单元测试框架，简单到稍微懂点javascript的人，5分钟不到就会了，如下就是这个框架的用法：javascript

首先，既然是一个框架，确定有框架的共有特征（框架的css->qunit.css,框架的js函数库->qunit.js，框架的HTML 显示页面->framework.html，咱们按照规范放置在应该放置的地方，以下图所示：）css

既然是javascript测试框架，那么确定就有两部分组成，一部分是被测试的javascript函数，另外一部分是测试语句的javascript函数，咱们分别建2个文件夹(needTestJS和tcJS来放置）。html

Part 1: 被测试的javascript函数：java

咱们这里写了两个函数，按照QUnit的建议，咱们为其定义一个测试模块（模块化嘛）一个用于测试参数是否为数字，一个用于测试传入的数是否为偶数：json

  
  
  
  
   
   
   
   //定义测试模块 
   
   
   
   module ("测试示例"); 
   
   
   
   //定义一个简单的函数，判断参数是否是数字 
   
   
   
   function  isNumber (para){ 
   
   
   
       if (typeof para=="number") { 
   
   
   
           return true; 
   
   
   
       }else{ 
   
   
   
           return false; 
   
   
   
       } 
   
   
   
   } 
   
   
   
    
   
   
   
   //这个函数用于判断传入的数是否是偶数 
   
   
   
   function isEven(val) { 
   
   
   
       return val % 2 === 0; 
   
   
   
   }

Part 2:测试用例：框架

测试用例也是javascript函数，咱们必须用测试断言来构造这些测试用例，有不少种测试断言，最经常使用的几种有：ok() ,equals(),same()，具体他们用在什么场合见个人代码注释部分：ide

  
  
  
  
   
   
   
   //开始单元测试 
   
   
   
    
   
   
   
   //test的第一个参数是展示在页面上的这个测试集合的名称，能够指定任何有意义的名字 
   
   
   
   test('isNumber()',function(){ 
   
   
   
       //列举各类可能的状况，保证每种条件应该符合的逻辑 
   
   
   
        
   
   
   
       //ok 是QUnit中最多见的用于判断的函数，不过只能判断true和false 
   
   
   
       //正确，则绿色的条子，错误就会爆红 
   
   
   
       ok (isNumber(2), "2是一个数字"); 
   
   
   
       ok(!isNumber("2"),"字符串2不是一个数字"); 
   
   
   
       ok(isNumber(NaN),"NaN是一个数字"); 
   
   
   
        
   
   
   
    
   
   
   
        
   
   
   
   } 
   
   
   
   ); 
   
   
   
    
   
   
   
    
   
   
   
    
   
   
   
   test("isEven()" ,function(){ 
   
   
   
        
   
   
   
    
   
   
   
       //equals(actual,expected,[message]) 用于至关的判断函数 
   
   
   
       equals(true ,isEven(2),'2是偶数'); 
   
   
   
       equals(false,isEven(3),'3不是偶数'); 
   
   
   
   } 
   
   
   
   ); 
   
   
   
    
   
   
   
    
   
   
   
   test("恒等断言" ,function(){ 
   
   
   
        
   
   
   
       //same()是恒等断言，能够用来断定2个对象是否相等（能够不相同） 
   
   
   
       same( {}, {}, 'passes, objects have the same content'); 
   
   
   
       same( {a: 1}, {a: 50} , 'passes'); 
   
   
   
       same( [], [], 'passes, arrays have the same content'); 
   
   
   
       same( [1], [1], 'passes'); 
   
   
   
   } 
   
   
   
   );

Part 3: 显示结果：模块化

测试，要调用这些测试方法和显示结果（无数java developer的为绿条而欢呼雀跃，为红条而忧伤，QUnit中沿用了JUnit中的颜色设定风格），咱们必需要有个底座，幸运的是,QUnit框架已经为咱们提供了这个底座(HTML页面)，咱们只须要吧被测试的js和测试用例js添加进去，以下所示：函数

  
  
  
  
   
   
   
   <!DOCTYPE html> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
       <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
   
   
   
       <title>QUnit Test Suite</title> 
   
   
   
       <link rel="stylesheet" href="../css/qunit.css" type="text/css" media="screen"> 
   
   
   
       <script type="text/javascript" src="../js/qunit.js"></script> 
   
   
   
       <!-- 这里放置被测试的函数所在js文件 --> 
   
   
   
       <script type="text/javascript" src="../project/needTestedJS/module.js"></script> 
   
   
   
       <!-- 这里放测试用例js文件 --> 
   
   
   
       <script type="text/javascript" src="../project/tcJS/moduleTest.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <h1 id="qunit-header">QUnit测试套件</h1> 
   
   
   
       <h2 id="qunit-banner"></h2> 
   
   
   
       <div id="qunit-testrunner-toolbar"></div> 
   
   
   
       <h2 id="qunit-userAgent"></h2> 
   
   
   
       <ol id="qunit-tests"></ol> 
   
   
   
   </body> 
   
   
   
   </html>

而后咱们就能够看到测试结果了，正确的则显示绿条和注解，错误的则显示红条以及错误信息：单元测试

好比咱们这里故意放了一个错误，咱们在测“恒等断言”时候，咱们故意给了2个不等的json 对象，一个是{a:1}，一个是{a,50},因此，这里就“爆红”了。