使用 andThen 和 click 助手的 Ember.JS 集成测试问题答案

【问题标题】：Ember.JS Integration Testing Issues with andThen and click helpers使用 andThen 和 click 助手的 Ember.JS 集成测试问题
【发布时间】：2014-08-27 15:01:05
【问题描述】：

Ember 的测试助手andThen 和click 得到了奇怪的结果。根据 Ember 的documentation：

andThen 助手将等待所有前面的异步助手在继续前进之前完成。

但是，我发现情况并非总是如此。在下面的示例中，有 3 个 console.debug 语句。我希望他们以 A -> B -> C 的顺序登录。但我一直得到这个顺序：A -> C -> B。当我只使用两次单击中的一次时，我只能获得预期的 ABC 顺序帮手。没有与单击帮助程序中引用的 <div> 元素关联的事件侦听器（操作）。

谁能解释这种意外行为？我对助手的使用是否有错误？还是 Ember 测试框架的错误？

andThen(function() {
    console.debug('mark A');

    click('div:first'); // with just 1 click helper, debug order is ABC
    click('div:first'); // with this second click helper, debug order is ACB

    andThen(function() {
        console.debug('mark B');
    });
});

andThen(function() {
    console.debug('mark C');
});

编辑：

根据 Kingpin2k 给出的答案，我最终寻求以下解决方案来获得我正在寻求的测试风格。

首先，我创建了一个名为next 的异步测试助手。其次，我将代码中的所有 andThen 助手替换为自定义的 next 助手。这让我的代码可以按照我期望的顺序运行。

// test-helper.js
Ember.Test.registerAsyncHelper('next', function(app, fn) {
    fn();
});

// my-integration-test.js
next(function() {
    console.debug('mark A');

    click('div:first');
    click('div:first');

    next(function() {
        console.debug('mark B');
    });
});

next(function() {
    console.debug('mark C');
});

【问题讨论】：

标签： javascript ember.js integration-testing

【解决方案1】：

andThen 只是 lastPromiseEmberSawCreated.then 的语法糖，所以它看起来像这样：

lastPromiseEmberSawCreated.then(function(){
  console.debug('mark A');

    click('div:first'); // with just 1 click helper, debug order is ABC
    click('div:first'); // with this second click helper, debug order is ACB

  nextLastPromiseEmberSawCreated.then(function() {
        console.debug('mark B');
    });
});

// the promise won't have changed in between these two `andThen` calls 
// because Ember had no cpu time, and you didn't make any additional calls 

lastPromiseEmberSawCreated.then(function(){
    console.debug('mark C');
});

【讨论】：

您的解释与我根据emberjs.com/guides/testing/test-helpers/#toc_wait-helpers 的文档所理解的不同。但是您的解释是有道理的，并引导我找到了我在编辑后的帖子中描述的解决方案。
有点隐蔽，但在Note andThen has a single argument of the function that contains the code to execute after the other test helpers have finished.这个声明中暗示了，但是The andThen helper will wait for all preceding asynchronous helpers to complete prior to progressing forward.这个声明是有误导性的，真的需要一起阅读才能得到准确的声明。这实际上意味着插入的代码在当前全局承诺完成之前不会执行，但它将继续执行 andThen 之外的代码。

【解决方案2】：

不再有理由在测试中使用andThen，这有望减少混淆。您可以重写您的示例（假设这是在标记为 async 的函数中：

console.debug('mark A');

await click('div:first');
await click('div:first');

console.debug('mark B');

console.debug('mark C');

语句按顺序执行。

【讨论】：