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

Question

jQuery.Deferred is now Promises/A+ compatible jQuery.Deferred objects have been updated for compatibility with Promises/A+ and ES2015 Promises, verified with the Promises/A+ Compliance Test Suite.

How To Run

The tests can run in either a Node.js environment or, if you set things up correctly, in the browser.

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

请注意，尚未在没有 nodejs 的情况下在浏览器中实现运行ning 测试。 @JaredSmith 的帮助对于使用 nodejs.

运行ning 测试至关重要

Answer 1

符合 A+ 的 Promise 与旧的 jQuery Deferred 之间的最大区别在于 A+ Promise 具有适当的错误处理。您可以通过运行这个简单的测试来验证 jQuery 3 个承诺现在有正确的错误处理。

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', );
test('jQuery 2', );
test('jQuery 3', );

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

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

Answer 2

注释中引用的适配器是指适配jQuery延迟构造函数以满足spec. The way to do so might be as follows (taken more or less from here中的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 3

How to run the tests in browser, without nodejs to verify ?

Note, have not yet achieved running tests in browser without nodejs. @JaredSmith 's assistance was essential to running tests at all using nodejs.

通过利用和调整 Unofficial mirror of the WebKit SVN repository -> master -> LayoutTests -> js -> promises-tests.

中的文件，已经能够实现问题中描述的要求

试图尽可能少地改变。将 promises-tests 版本从 2.0.5 更新到 2.1.1，该版本存在于 webkit 仓库；将 repo 其他部分的 .js 文件包含到 resources 目录；在 adapter.js 中添加了 jQuery-3.0.0-pre 来源；评论 promises-in-workers.html 在 Worker 环境中测试 Promise，其中 jQuery() 初始化检查 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 
               /* , "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")
  })
});

Demonstration

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

How to test if jQuery 3.0 beta is Promises/A+ compatible in browser?

javascript

jquery

promise

jquery-3