Secret of the JavaScript Ninja 学习笔记 - 1

最新推荐文章于 2024-09-28 17:32:53 发布

jsongrts

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量437

点赞数

文章标签： javascript JavaScript Javascript javaScript JAVASCRIPT web前端 Web前端 WEB前端编程语言

本文链接：https://blog.csdn.net/jsongrts/article/details/8579740

版权

第二章 Arming with testing and debugging

两种主要的调试策略：

日志（console.log()，alert()）
断点

示例一使用console.log()

<html>
<head>
  <script type="text/javascript">
    console.log("strat initialization");
    console.log("done");
  </script>
</head>
<body>
hello world
</body>

下图是采用Chrome装载该页面时，JavaScript console内现实的信息：

两种主要类型的测试用例

解构性用例
构造性用例

jsbin - http://jsbin.com 这是一个很方便的自己用来测试一些小代码片段，分享示例代码的网站。

四大测试工具

QUnit
YUI Test
JsUnit
Selenium

创建一个简单的测试框架

先实现一个ASSERT方法

<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>

下面是该网页的运行结果：

接下来，我们在前面程序的基础上开发一个可以操作测试集合的程序。

<html>
  <head>
    <title>Test Suite</title>
    <script>
      (function() {
        var results;

        this.assert = function assert(value, desc) {
          var li = document.createElement("li");
          li.className = value ? "pass" : "fail";
          li.appendChild(document.createTextNode(desc));
          results.appendChild(li);
          if (!value) {
            li.parentNode.parentNode.className = "fail";
          }
          return li;
        };

        this.test = function test(name, fn) {
          results = document.getElementById("results");
          results = assert(true, name).appendChild(document.createElement("ul"));
          fn();
        };
      })();


      window.onload = function() {
        test("A test.", function() {
          assert(true, "1 assert");
          assert(true, "2 assert");
        });
        test("2 test.", function() {
          assert(true, "1 assert");
          assert(false, "2 assert");
        });
      }
    </script>

    <style>
      #results li.pass { color: green; }
      #results li.fail { color: red; }
    </style>
  </head>

  <body>
    <ul id="results"></ul>
  </body>
</html>

注 - 此处的this是Window.

下图是运行结果

<html>
  <head>
    <title>Test Suite</title>
    <script>
      (function() {
        var queue = [], paused = false, results;


        this.test = function(name, fn) {
          queue.push(function() {
            results = document.getElementById("results");
            results = assert(true, name).appendChild(document.createElement("ul"));
            fn();
          });
          runTest();
        };


        this.pause = function() {
            paused = true;
        }


        this.resume = function() {
            paused = false;
            setTimeout(runTest, 1);
        }


        function runTest() {
          if (!paused && queue.length) {
            queue.shift()();
            if (!paused) {
              resume();
            }
          }
        }


        this.assert = function assert(value, desc) {
          var li = document.createElement("li");
          li.className = value ? "pass" : "fail";
          li.appendChild(document.createTextNode(desc));
          results.appendChild(li);
          if (!value) {
            li.parentNode.parentNode.className = "fail";
          }
          return li;
        };

        this.test = function test(name, fn) {
          results = document.getElementById("results");
          results = assert(true, name).appendChild(document.createElement("ul"));
          fn();
        };
      })();


      window.onload = function() {
        test("A test.", function() {
          pause();
          setTimeout(function() {
            assert(true, "1 assert");
            assert(true, "2 assert");
            resume();
          }, 1000);
        });
        test("B test.", function() {
          pause();
          setTimeout(function() {
            assert(true, "1 assert");
            assert(true, "2 assert");
            resume();
          }, 1000);
        });
      }
    </script>

    <style>
      #results li.pass { color: green; }
      #results li.fail { color: red; }
    </style>
  </head>

  <body>
    <ul id="results"></ul>
  </body>
</html>