On May 30, 2019, at 11:01 PM, Ryosuke Niwa <rniwa@webkit.org> wrote:

I’m gonna give you a game changing function:

function listenForEventOnce(target, name, timeout) {
return new Promise((resolve, reject) => {
const timer = timeout ? setTimeout(reject, timeout) : null;
target.addEventListener(name, () => {
if (timer)
clearTimeout(timer);
resolve();
}, {once: true});
});
}

You can then write a test like this:
await listenForEventOnce(document.body, 'load');
// do stuff after load event.

await listenForEventOnce(document.querySelector('input'), 'focus');
await listenForEventOnce(visualViewport, 'scroll', 5000);
// After the input element is focused, then the visual viewport scrolled or 5 seconds has passed.

Ryosuke++.

Just FYI, if you’re writing LayoutTests, we’ve got something very similar in LayoutTests/media/video-test.js:

function waitFor(element, type) {
return new Promise(resolve => {
element.addEventListener(type, event => {
consoleWrite(`EVENT(${event.type})`);
resolve(event);
}, { once: true });
});
}

And:

function sleepFor(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration);
});
}

And also:

function shouldReject(promise) {
return new Promise((resolve, reject) => {
promise.then(result => {
logResult(Failed, 'Promise resolved incorrectly');
reject(result);
}).catch((error) => {
logResult(Success, 'Promise rejected correctly');
resolve(error);
});
});
}

So you could also do:

await Promise.race(waitFor(document.body, ‘load’), shouldReject(sleepFor(5000)));

Although we’d probably want a new function, “rejectIn(duration)”, and then it’d be:

await shouldResolve(Promise.race(waitFor(document.body, ‘load’), rejectIn(5000)));

But all that said, I agree that wrapping events in Promises makes it very easy to write readable, single `async` function test cases. A+++, would write test again.

-Jer

- R. Niwa

_______________________________________________
webkit-dev mailing list
webkit-dev@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-dev