javascript - Zombie.js pressButton如何访问post-ajax版本的浏览器？

Question

我使用 zombie .js 来自动测试浏览器操作，在本例中单击按钮来提交表单。

在测试之外，在真实的浏览器中，单击按钮时，会触发 AJAX 请求。 AJAX 请求完成后，两个 div.alert 元素将添加到文档正文中。

下面的测试按下按钮并触发请求，但是当测试随后查询文档寻找预期的 div 元素时，却找不到它们。我相信测试正在查询 AJAX 调用完成之前存在的文档的“旧”版本。我的问题是:如何访问 AJAX 调用完成并添加元素后存在的文档版本？

context("when visited on the 'new' page", function(){
  before(function(){  return browser.visit('/');  });
  before(function(){  return browser.clickLink('new');  });

  context("when submitted with invalid values", function(){
    before(function(){
      return browser.pressButton("Submit")
    })

    it("flash should include error messages", function(){
      var messages = browser.queryAll(".alert")
      console.log(messages)
      expect(messages.length).toEqual(2)
    })
  })
})

注意:我一直在研究 zombie .js 测试，并发现使用 async 和 await，但是当我尝试在我的 .js 中使用这些关键字时文件，它无法识别它们。这可能是一个单独的问题，但如果解决方案需要 async/await，我如何使 mocha 识别这些关键字？

Answer 1

您可以更改 ajax 调用，以便在更新屏幕后，它们会针对主体发送一个事件，例如“ Action 完成”。然后，在您的测试中，您可以创建一个监听器函数，该函数返回一个 Promise，该 Promise 在收到事件之前不会解析。

const actionAndWait = ( action, eventName ) => new Promise( resolve => {

    const listener = () => {
        browser.body.removeEventListener( eventName, listener );
        resolve();
    };

    browser.body.addEventListener( eventName, listener );
    action();
    browser.wait();

} );

然后你的“之前”会打电话

return actionAndWait( () => browser.pressButton("Submit"), "action-completed" );