实习生 JS - 如何在链式命令方法中使用 Promise.all()? [英] Intern JS - how can I use Promise.all() within chained Command methods?

问题描述

我是使用 Intern JS 编写测试的新手，并且一直在关注他们的文档以使用 对象interface 和 页面对象，特别是.根据文档，页面对象背后的想法是封装特定页面的 DOM，以防标记发生变化.

I am new to writing tests with Intern JS and have been following their documentation to use the Object interface and Page objects, particularly. According to the docs, the idea behind page objects is to encapsulate the DOM for a particular page, in case of the markup changing.

在尝试遵循页面对象模式时，我的目标是在 myPage 上有一个方法，它使用 Promise.all() 来查找多个 DOM 元素，然后将这些返回给实际的测试函数.

In attempting to follow the page object pattern, my goal is to have a method on myPage which uses Promise.all() to find several DOM elements, and then return these to an actual test function.

我大致基于 Promise.all() 示例rel="nofollow">铅食品/命令的文档.我怀疑我在调用 testOneStuff() 时返回我想要返回到 test 1 函数的链接错误......但是因为我没有看到在链中包含 Promise.all() 的方法，我发现自己不知所措.

I'm roughly basing this on the Promise.all() example near the top of the documentation for leadfood/Command. I'm suspecting I'm getting the chaining wrong to return what I want to go back to the test 1 function when it calls testOneStuff() ... but since I don't see a way to include the Promise.all() in the chain, I'm finding myself at a loss.

当我尝试运行此测试时，它似乎可以启动 function (unitWrapper)(我在那里有一个 console.log)，然后几秒钟后它失败了 CancelError: 超时....

When I try running this test, it seems to work up to starting the function (unitWrapper) (I have a console.log in there), then after several seconds it fails with CancelError: Timeout reached....

这个想法可能吗?我也意识到我可能会以一种不寻常的方式处理这个问题，因为除了他们文档中的一些基本示例之外，我不熟悉 Intern JS 中的典型模式.

Is this idea even possible? I also realize I might be approaching this in an unusual way since I am not familiarized with typical patterns in Intern JS beyond a few basic examples in their docs.

以下是我正在做的相关部分:

Here are the relevant parts of what I'm doing:

在定义测试的文件中:

define([
  'intern!object',
  'intern/chai!assert',
  '../support/pages/MyPage'
], function (registerSuite, assert, MyPage) {
  registerSuite(function () {
    var myPage;

    return {
      name: 'my_test',

      setup: function () {
        myPage = new MyPage(this.remote);
      },

      'test 1': function () {
        return myPage
          .testOneStuff()
          .then(function (elements) {
            // here I would like 'elements' to be the object I'm
            // returning in function passed into Promise.all().then().
          });
      }
    };
  });
});

在定义 MyPage 的文件中:

define(function (require) {

  // Constructor to exec at runtime
  function MyPage(remote) {
    this.remote = remote;
  }

  MyPage.prototype = {
    constructor: MyPage,

    testOneStuff: function () {
      return this.remote
        .findByCssSelector('.unit-question')
        .then(function (unitWrapper) {

          // Note that 'this' is the command object.
          return Promise.all([
            // Note we've left the 'find' context with .unit-question as parent
            this.findByCssSelector('ul.question-numbers li.current').getVisibleText(),
            this.findAllByCssSelector('ul.answers li a.answer'),
            this.findByCssSelector('a.action-submit-answer'),
            this.findByCssSelector('a.action-advance-assessment')
          ]).then(function (results) {
            return {
              currentQuestionNumber: results[0],
              answerLinks: results[1],
              btnSubmit: results[2],
              btnNext: results[3]
            };
          });
        });
    }
  };

  return MyPage;
});

推荐答案

我刚刚在不经意间回到了非常相似的情况.

I ended up back in a very similar situation just now, inadvertently.

现在我的测试有了更进一步的发展，我有很多结构不同的东西.所以这一次，我不想从我的页面对象的方法中返回 Promise.all().then() 的结果，我只想获取两个命令链的结果并将它们一起使用在断言中，然后继续链.

I have a bunch of things structured differently now that my tests have developed much further. So this time, instead of wanting to return the result of a Promise.all().then() from my page object's method, I simply wanted to grab the results of two Command chains and use them together in an assertion, then continue the chain.

这是一个显示似乎有效的模式的摘录.所有控制台日志都按照它们被调用的顺序打印出来(在此处的链中可见)，所以我假设所有链接的调用都在等待先前的调用完成，正如所希望的那样.该链位于定义我的测试之一的函数中(即我的问题示例代码中的 test 1 函数).

Here's an excerpt showing the pattern that seems to work. All the console logs print out in the order they're called (visibly in the chain here), so I assume all chained calls are waiting for the prior ones to complete, as is desired. This chain goes within a function defining one of my tests (i.e. the test 1 function in my question's example code).

// Store the instance of leadfoot/Command object in clearly named
// variable to avoid issues due to different contexts of `this`.
var command = this.remote;

... // other Command function calls
.end()
.then(function () {
  console.log('=== going to Promise.all');
  return Promise.all([
    command
      .findByCssSelector('li.question.current')
      .getAttribute('data-question-id'),
    command
      .findByCssSelector('h3.question')
      .getVisibleText()
  ]);
})
.then(function (results) {
  console.log('=== hopefully, then() for Promise.all?');
  var qid = results[0];
  var questionText = results[1];
  console.log(qid, questionText);
  console.log('=== then() is completed');

  // This allows continuing to chain Command methods
  return command;
})
.findByCssSelector('h3.question')
  .getVisibleText()
  .then(function (questionText) {
    console.log('=== I\'m the next then()!');
  })
.end()
... // chain continues as usual

这篇关于实习生 JS - 如何在链式命令方法中使用 Promise.all()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！