Returning the results of an async array in Javascript using ES6

Question

I'm a novice with Javascript and am struggling to understand how or at least, how best to return array values to another script to assert agains their values.

The context is I want to use Puppeteer to obtain some string values from WebElement attributes and then use the Chai expect library to assert for correct values( or otherwise).

The code I have thus far is:

//app.spec.js
const clothingChoice = await frame.$eval('#option-clothing-5787', e => e.getAttribute('value'));
const groceryChoice = await frame.$eval('#option-clothing-4556', e => e.getAttribute('value'));
const wineChoice = await frame.$eval('#option-clothing-4433', e => e.getAttribute('value'));
const voucherChoice = await frame.$eval('#option-clothing-3454', e => e.getAttribute('value'));

function testFunction() {
  return new Promise(function(resolve, reject) {
    resolve([clothingChoice, groceryChoice, wineChoice, voucherChoice]);
  });
}

async function getChosenItemValues() {
  const [clothingChoice, groceryChoice, wineChoice, voucherChoice] = await testFunction();

  console.log(clothingChoice, groceryChoice, wineChoice, voucherChoice);

}

getChosenItemValues();

module.exports = getChosenItemValues;

};

I simply need to understand how to import the values that are currently simply printed out as:

1|clothing|option 1|grocery|option 1|wine|option 1|voucher|option

...into another file test.js in which I want to use chai to assert for their presence like so:

expect(clothingChoice).to.equal('1|clothing|option');

you have 2 layers of functions in your `testChoices` module. — Daniel A. White, Dec 11 '18 at 15:48
From what I can see you're not calling the anonymous function `choiceValue` in your exported module. Also, you're returning an object in `choiceValue`, not an array. — gnusey, Dec 11 '18 at 15:50
Why are you exporting something from your test? How is that anything like an `index.js` file? Isn't it a test file? And what exactly are you exporting? — Dave Newton, Dec 11 '18 at 15:54
@DaveNewton the simple answers are - I don't know. There seems to be very little consensus on Node / JS other than, in this case, I'm wrong all over the place. I tried to find some conventions for file structuring for example but...https://stackoverflow.com/questions/18927298/node-js-project-naming-conventions-for-files-folders — Steerpike, Dec 11 '18 at 17:25
@Steerpike `index.js` files are pretty well understood: they're entry points. Test files, depending on the test framework, are almost always called `WhateverTest.js` or `Whatever.test.js` etc. Test files don't normally export anything, they're tests. If they *do* export something (which IMO they shouldn't) they should export something that actually exists, which in your case, doesn't seem to be the case. — Dave Newton, Dec 11 '18 at 20:10
@DaveNewton fair comment, and I defer to your experience - it's useful to get to know the front end technology stack so I appreciate your clarification and views. — Steerpike, Dec 12 '18 at 09:19

gnusey · Answer 1 · 2018-12-13T10:43:33.043

Try this:

// app.spec.js (.spec is normally reserved for test files, you may to change the name to avoid confusion)
const clothingChoice = frame.$eval('#option-clothing-5787', e => e.getAttribute('value'));
const groceryChoice = frame.$eval('#option-clothing-4556', e => e.getAttribute('value'));
const wineChoice = frame.$eval('#option-clothing-4433', e => e.getAttribute('value'));
const voucherChoice = frame.$eval('#option-clothing-3454', e => e.getAttribute('value'));

async function getChosenItemValues() { 
    return await Promise.all([clothingChoice, groceryChoice, wineChoice, voucherChoice]);
}

module.exports = {
    getChosenItemValues
};

NOTE: does frame.$eval definitely return a Promise? I've not had any experience with Puppeteer.

// test file
const app = require('/path/to/app.spec.js');

describe('Suite', function() {
    it('Returns expected values', function(done) {
        app.getChosenItemValues()
            .then(res => {
                const [clothingChoice, groceryChoice, wineChoice, voucherChoice] = res;

                // assertions here

                done();
            });
    });
});

Excuse me if the test functions aren't in the correct format, I don't use Mocha or Chai.

thanks @gnusey but the values, e.g. choiceValue.clothingChoice is still coming up as 'undefined' when I try and run the test: AssertionError: expected undefined to equal '1|choice |option' — Steerpike, Dec 11 '18 at 17:20
@Steerpike what does `testChoices` return if you run it out of the tests? — gnusey, Dec 12 '18 at 09:06
Ok, I've completely changed the way I'm approaching this but thought it was better to do so and explain in edits than start another question asking the essentially the same question. — Steerpike, Dec 12 '18 at 16:46

Returning the results of an async array in Javascript using ES6

1 Answers1