QUnit - 基本用法

现在，我们将使用一个基本示例向您展示在 QUnit 中启动的分步过程。

导入 qunit.js

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

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

导入 qunit.css

Qunit 库的 qunit.css 设计测试套件页面以显示测试结果。

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

添加夹具

添加两个id = "qunit"和"qunit-fixture"的 div 元素。这些 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 复选框- 在 try-catch 块之外运行测试用例，以便在测试抛出异常的情况下，测试运行程序将死亡并显示本机异常。
摘要- 显示运行测试用例所需的总时间。运行的测试用例总数和失败的断言。
内容- 显示测试结果。每个测试结果都有测试名称，后跟失败、通过和总断言。可以单击每个条目以获取更多详细信息。