From 8c788d7b80f67bd0b13f0a2843b09d231c222123 Mon Sep 17 00:00:00 2001 From: Nicholas Ray Date: Fri, 7 Oct 2022 16:10:40 -0600 Subject: [PATCH] Replace jsReady.js and moduleReady.js with waitForNetworkIdle call jsReady.js and moduleReady.js effectively wait for various JS resource loader modules to load which can be tedious to write and error prone. There might be a better and more future-proof alternative by waiting for the network to idle instead. Therefore, this commit: * Replaces all usages of waitForModule with waitForNetworkIdle * Removes moduleReady.js and jsReady.js Bug: T322454 --- src/engine-scripts/puppet/echo.js | 9 ++--- src/engine-scripts/puppet/jsReady.js | 44 ------------------------ src/engine-scripts/puppet/moduleReady.js | 20 ----------- src/engine-scripts/puppet/onReady.js | 4 +-- src/engine-scripts/puppet/search.js | 6 ++-- 5 files changed, 7 insertions(+), 76 deletions(-) delete mode 100644 src/engine-scripts/puppet/jsReady.js delete mode 100644 src/engine-scripts/puppet/moduleReady.js diff --git a/src/engine-scripts/puppet/echo.js b/src/engine-scripts/puppet/echo.js index c32cd826..581c7b0f 100644 --- a/src/engine-scripts/puppet/echo.js +++ b/src/engine-scripts/puppet/echo.js @@ -1,5 +1,3 @@ -const moduleReady = require( './moduleReady' ); - /** * Setup Echo notifications * @@ -15,15 +13,12 @@ module.exports = async ( page, hashtags ) => { // Open the drawer for tests that require interaction if ( hashtags.includes( '#echo-drawer' ) ) { - await moduleReady( page, 'ext.echo.init' ); await page.evaluate( async () => { const btn = document.querySelector( '#pt-notifications-alert a' ); btn.click(); } ); - await moduleReady( - page, - hashtags.includes( '#mobile' ) ? 'ext.echo.mobile' : 'ext.echo.ui.desktop' - ); + // Wait for JS to load. + await page.waitForNetworkIdle(); // Wait for the OOUI pending element to disappear. await page.waitForSelector( '.oo-ui-pendingElement-pending', { diff --git a/src/engine-scripts/puppet/jsReady.js b/src/engine-scripts/puppet/jsReady.js deleted file mode 100644 index 8f64845e..00000000 --- a/src/engine-scripts/puppet/jsReady.js +++ /dev/null @@ -1,44 +0,0 @@ -const moduleReady = require( './moduleReady' ); - -const getSkinModuleFromHashtags = ( hashtags ) => { - if ( hashtags.includes( '#minerva' ) ) { - return 'skins.minerva.scripts'; - } else if ( hashtags.includes( '#vector' ) ) { - return 'skins.vector.legacy.js'; - } else if ( hashtags.includes( '#timeless' ) ) { - return 'skins.timeless.js'; - } else if ( hashtags.includes( '#vector-2022' ) ) { - return 'skins.vector.js'; - } else if ( hashtags.includes( '#cologneblue' ) ) { - // Webfonts updates languages in top right on CologneBlue. - return 'ext.uls.webfonts'; - } else { - return 'mediawiki.page.ready'; - } -}; - -/** - * Returns a promise that resolves when the vector or vector-2022's main module - * is ready. - * - * @param {import("puppeteer").Page} page - * @param {Array} hashtags - */ -module.exports = async ( page, hashtags ) => { - await moduleReady( page, getSkinModuleFromHashtags( hashtags ) ); - if ( hashtags.includes( 'quicksurvey' ) ) { - await moduleReady( page, 'ext.quicksurveys.lib.vue' ); - } - await page.evaluate( () => { - // Wait until the next frame before resolving. collapsibleTabs.js in Vector - // and Vector-2022 make use of rAF. - return new Promise( ( resolve ) => { - requestAnimationFrame( () => { - requestAnimationFrame( () => { - resolve(); - } ); - } ); - } ); - - } ); -}; diff --git a/src/engine-scripts/puppet/moduleReady.js b/src/engine-scripts/puppet/moduleReady.js deleted file mode 100644 index 6f2fa98d..00000000 --- a/src/engine-scripts/puppet/moduleReady.js +++ /dev/null @@ -1,20 +0,0 @@ -module.exports = async ( page, moduleName ) => { - await page.evaluate( async ( m ) => { - let times = 0; - await new Promise( ( resolve, reject ) => { - const id = setInterval( () => { - // eslint-disable-next-line no-undef - if ( mw.loader.getState( m ) === 'ready' ) { - clearInterval( id ); - resolve(); - } - if ( times > 10 ) { - // eslint-disable-next-line no-undef - const debug = `codex=${mw.loader.getState( '@wikimedia/codex' )}, ${moduleName}=${mw.loader.getState( moduleName )}`; - reject( `Cannot find module ${m} (${debug}). Is scenario setup with correct hashtags?` ); - } - times++; - }, 1000 ); - } ); - }, moduleName ); -}; diff --git a/src/engine-scripts/puppet/onReady.js b/src/engine-scripts/puppet/onReady.js index c9ecec30..c64d0d27 100644 --- a/src/engine-scripts/puppet/onReady.js +++ b/src/engine-scripts/puppet/onReady.js @@ -12,8 +12,8 @@ module.exports = async ( page, scenario ) => { const label = scenario.label; const hashtags = label.match( /(#[^ ,)]*)/g ) || []; - // Make sure the main skin JavaScript module has loaded. - await require( './jsReady' )( page, hashtags ); + // Wait for async js to finish loading. + await page.waitForNetworkIdle(); if ( hashtags.includes( '#scroll' ) ) { await require( './scroll.js' )( page ); diff --git a/src/engine-scripts/puppet/search.js b/src/engine-scripts/puppet/search.js index 860b2f53..7fd1c454 100644 --- a/src/engine-scripts/puppet/search.js +++ b/src/engine-scripts/puppet/search.js @@ -1,4 +1,3 @@ -const moduleReady = require( './moduleReady' ); const fastForwardAnimations = require( './fastForwardAnimations' ); /** @@ -49,8 +48,9 @@ module.exports = async ( page, hashtags ) => { } else { // Make sure Codex kicked in. await page.waitForSelector( '.cdx-typeahead-search' ); - // Wait for Vue to load. - await moduleReady( page, 'vue' ); + // Wait for JS to load. + await page.waitForNetworkIdle(); + // focus and type into the newly added input await page.focus( selectorSearchInput ); await page.keyboard.type( 't' );