QUnit - 基本用法 - Gingerdoc 姜知笔记

笔记首页 >> qunit >> QUnit – 基本用法

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 函数。

Name – 显示测试结果的测试名称。
功能– 功能测试代码，具有一个或多个断言。

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()并将测试添加到队列中。测试用例的执行由测试运行器延迟和控制。

验证输出

您应该会看到以下结果 –

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