QUnit教程

QUnit - 基本用法

现在我们将向您展示使用基本示例在QUnit中获取kickstart的分步过程.

导入qunit.js

Qunit库的qunit.js代表测试运行器和测试框架.

 <script src ="https://code. jquery.com/qunit/qunit-1.22.0.js"></script>

导入qunit.css

quunit库的quunit.css样式测试套件页面以显示测试结果.

<link rel ="stylesheet"href ="https://code.jquery.com/qunit/qunit-1.22.0. CSS"&GT;

添加夹具

添加两个div元素 id ="qunit"和 "qunit夹具"的.这些div元素是必需的，并提供测试夹具.

<div id ="qunit"></div> 
<div id ="qunit-fixture"></div>

创建要测试的函数

function square(x) {
   return x * x;
}

创建测试用例

调用QUnit.test函数，有两个参数.

姓名 : 显示测试结果的测试名称.
功能 : 函数测试代码，有一个或多个断言.

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

运行测试

现在让我们看看完整的代码.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      
      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

在浏览器中加载页面.当页面加载时，测试运行器调用 QUnit.test()并将测试添加到队列中.测试用例延迟并控制测试用例的执行.

验证输出

您应该看到以下结果 :

标题 : 测试套件标题显示页面标题，传递所有测试时为绿色条.否则，当至少一个测试失败时出现红色条，带有三个复选框的栏用于过滤测试结果，带有navigator.userAgent文本的蓝色栏用于显示浏览器详细信息.
隐藏传递的测试复选框 : 隐藏传递的测试用例并仅显示失败的测试用例.
检查全局复选框 : 要在每个测试之前和之后显示窗口对象上的所有属性的列表，请检查差异.修改属性将无法通过测试.
没有试用复选框 : 要在try-catch块之外运行测试用例，以便在测试中抛出异常，testrunner将会死并显示本机异常.
摘要 : 显示运行测试用例所需的总时间.总测试用例运行且断言失败.
内容 : 显示测试结果.每个测试结果都有测试名称，后跟失败，传递和总断言.可以单击每个条目以获取更多详细信息.