Skip to content

Latest commit

 

History

History
117 lines (95 loc) · 3.75 KB

15.附录.md

File metadata and controls

117 lines (95 loc) · 3.75 KB

ES6 附加特性

  • 模板字符串
  • 解构
  • 增强版的对象字面量

测试与调试的武器

  • JavaScript 代码调试工具
  • 生成器测试技巧
  • 创建测试套件
  • 浏览一些受欢迎的测试框架

创建测试用例

优质的测试有 3 个重要特征。

  • 可重复性——重复运行测试应该产生相同的结果。如果测试结果是不确定的，我们怎么能知道哪些结果是有效的、哪些是无效的呢?同时，可重复性需要确保测试不依赖于外部因素，如网络或 CPU 负载。
  • 简易性——我们的测试应该只关注测试这一件事。在不影响测试用例意图的情况下，我们应该尽可能努力消除 HTML 标记、CSS 或 JavaScript，消除得越彻底，测试用例只受被测代码的影响的概率越大。
  • 独立性——应该单独执行测试。应该避免测试之间的依赖。将测试尽可能集成到最小的单元，这有助于我们确定发生错误的来源。

创建简单的测试用例

糟糕的是，运行这些测试时，需要我们手动打开测试，手动检查运行的结果。如果只有几个测试，是很方便的，但通常我们会有很多的测试用例，用于检查代码的每个角落和方方面面。

测试框架的基本原理

  • 断言
    • 断言方法通常需要一个 值——预设的表达式的值以及该断言目的的描述。如果该值为 true，则断言通过;否则，被认为失败。相关的信息通常使用一个适当的通过/失败指标进行记录。

JavaScript 断言的简单实现

<!DOCTYPE html>
<html>
  <head>
    <title>Test Suite</title>
    <script>
      function assert(value, desc) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild(document.createTextNode(desc));
        document.getElementById("results").appendChild(li);
      }
      window.onload = function() {
        assert(true, "The test suite is running."); // 通过断言执行测试用例
        assert(false, "Fail!");
      };
    </script>
    <style>
      #results li.pass {color: green;}
      #results li.fail {color: red;}
    </style>
  </head>
  <body>
    <ul id="results"></ul>
  </body>
</html>

通过复用 assert 函数来构建report函数

function report(text) {
  assert(true,text);
}

流行的测试框架

在 JavaScript 单元测试框架中，根据测试的需要，我们需要几个功能。具体如下:

  • 模拟浏览器行为的能力(单击、按钮等)。

  • 交互式控制测试(暂停、继续测试)。

  • 处理异步测试超时。

  • 能够过滤已经执行过的测试用例。

  • QUnit

    • QUnit 最初是用于测试 jQuery 的单元测试框架。现在它已经扩展并超出其最初的目标，现在它是一个独立的单元测试框架。
    • QUnit 主要用于单元测试的解决方案，它提供最小、易用的 API。QUnit 的特点如下:
      • API 简单。
      • 支持异步测试。
      • 不局限于 jQuery 或使用 jQuery 的代码。
      • 特别适用于回归测试。

QUnit 测试示例

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="qunit/qunit-git.css" />
  <script src="qunit/qunit-git.js"></script>
</head>
<body>
  <div id="qunit"></div>
  <script>
    function sayHiToNinja(ninja) {
      return "Hi " + ninja;
    }
    QUnit.test("Ninja hello test", function(assert) {
      assert.ok(sayHiToNinja("Hatori") == "Hi Hatori", "Passed");
      assert.ok(false, "Failed");
    });
  </script>
</body>
</html>
  • Jasmine
    • describe 函数，描述了测试套件。
    • it 函数，指定每个测试。
    • expect 函数，检查每个断言。