javascript - 如何测试 jQuery 3.0 beta 在浏览器中是否兼容 Promises/A+？

Question

根据jQuery 3.0 Beta 发布

jQuery.Deferred 现在与 Promises/A+ 兼容 jQuery.Deferred 对象已更新以兼容 Promises/A+ 和 ES2015 Promises，并通过Promises/A+ Compliance Test Suite进行了验证。

---

如何运行

测试可以在 Node.js 环境中运行，或者，如果设置正确，可以在浏览器中运行。

如何在浏览器中运行测试，无需nodejs验证？

---

请注意，尚未在没有nodejs. @JaredSmith 的帮助对于使用nodejs.

Answer 1

注释中引用的适配器意味着调整 jQuery 延迟构造函数以满足规范中的 API 。这样做的方法可能如下（或多或少取自这里）：

var promisesAplusTests = require("promises-aplus-tests");
var jq                 = require('jquery');
var jsdom              = require('jsdom');
jsdom.env('<p></p>', function(err, window) {
    if (err != null) {
        throw err;
    } else {
        var $ = jq(window);
        var adapter = {};
        adapter.deferred = function() {
            var deferred = $.Deferred();

            return {
                promise: deferred.promise(),
                resolve: deferred.resolve.bind( deferred ),
                reject: deferred.reject.bind( deferred )
            };
        };
        promisesAplusTests(adapter, function (err) {
            // All done; output is in the console. 
            // Or check `err` for number of failures:
            if (err) {
                console.log(err);
            }
        });
    }
});

此时您需要通过 npm 安装依赖项并运行该文件。请注意，使用 jquery需要适当的文档（因此需要 jsdom）。

或者你可以采取简单的路线：

• git 克隆 jquery 存储库
• cd jquery 目录
• npm 安装
• 永远等待它完成，忽略所有警告
• npm test - 运行 jquery 单元测试（包括 A+ 套件）

尽管规范自述文件中有 glib 注释，但在浏览器中运行将涉及一些工作。您将需要使用像 browserify 这样的 commonJS 模块加载器。Browserify 将填充本机节点断言库，我相信文件系统 api。Mocha 应该可以在浏览器中正常工作。然后上面的代码应该运行。

如果您想完全避免使用 node.js（而不仅仅是为了运行测试），您将需要做更多的工作。

步骤 1. 查找或编写兼容的断言库并将其包含在脚本标记中。

步骤 2. 在脚本标签中包含 mocha。

步骤 3. 为 require、assert、fs 等编写自己的存根。每一个本身就是一个问题。

步骤 4. 使用适配器代码。

是否值得做所有这些来避免节点是你的电话。

Answer 2

A+ 兼容的 Promises 和旧的 jQuery Deferreds 之间的最大区别在于 A+ Promises 具有适当的错误处理。您可以通过运行这个简单的测试来验证 jQuery 3 Promise 现在有正确的错误处理。

function test(name, $) {
  var $name = $('<td>').text(name);
  var $result = $('<td>');
  var $row = $('<tr>')
      .append($name)
      .append($result)
      .appendTo('tbody');
  
  var def = $.Deferred();
  def.rejectWith(new Error("Error"));
  def.then(undefined, function() {
    $result.text('Fail').css('color', 'red'); // This will be overriden by success case
  }).then(function() {
    $result.text('Success').css('color', 'green');
  });
}

test('jQuery 1', $1);
test('jQuery 2', $2);
test('jQuery 3', $3);

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
  var $1 = $;
  $.noConflict();
</script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
  var $2 = $;
  $.noConflict();
</script>
<script src="https://code.jquery.com/jquery-3.0.0-beta1.js"></script>
<script>
  var $3 = $;
  $.noConflict();
</script>

<table>
  <thead>
    <tr>
      <td>Version</td>
      <td>Result</td>
    </tr>
  </thead>
  <tbody>
    </tbody>
</table>

Answer 3

如何在浏览器中运行测试，无需 nodejs 进行验证？

---

注意，还没有实现在没有 nodejs 的浏览器中运行测试。@JaredSmith 的帮助对于使用 nodejs 运行测试至关重要。

通过利用和调整WebKit SVN 存储库的非官方镜像 -> 主 -> LayoutTests -> js -> promises-tests 中的文件，已经能够实现问题中描述的要求。

试图尽可能少地改变。更新promises-tests 版本2.1.1从回购2.0.5中出现的版本；将来自 repo 其他部分的文件webkit包含到目录中；内添加源；评论了初始化检查功能的环境中的哪些测试。.jsresourcesjQuery-3.0.0-preadapter.jspromises-in-workers.htmlPromiseWorkerjQuery()document

通过下载jquery-3.0.0-promises-tests-in-browser运行测试，在浏览器中打开index.html。

$(document).ready(function() {
  $("title, h3")
  .html("jQuery version " + jQuery().jquery + " Promises/A+ Compliance Tests");
  var tests = ["promises-tests-2-1-2.html"
               , "promises-tests-2-1-3.html"
               , "promises-tests-2-2-1.html"
               , "promises-tests-2-2-2.html"
               , "promises-tests-2-2-3.html"
               , "promises-tests-2-2-4.html"
               , "promises-tests-2-2-5.html"
               , "promises-tests-2-2-6.html"
               , "promises-tests-2-2-7.html"
               , "promises-tests-2-3-1.html"
               , "promises-tests-2-3-2.html"
               , "promises-tests-2-3-3.html"
               , "promises-tests-2-3-4.html"
               , "Promise-types.html" 
               // TODO test `jQuery.Deferred()` in `Worker` 
               // see http://stackoverflow.com/q/10491448/
               /* , "promises-in-workers.html" */ ];
  $.each(tests, function(index, test) {
    $("<iframe>", {
        width: "100%"
      }).on("load", function(e) {
        setTimeout(function() {
          e.target.height = e.target.contentWindow
                            .document.body.scrollHeight * 1.1 + "px";
        }, 2000 * (1 + index));
        // if (index === tests.length - 1) {
        //    $(e.target.contentWindow.document.body)
        //    .prepend("<span style='font-family:Times New Roman'>"
        //               + "Promises in Workers Test</span>")
        // }
      })
      .attr("src", test).appendTo("body")
  })
});

示范