Replace deprecated waitFor in e2e tests (#28360)

david-szabo97 · web-flow · commit fcdd9b7f381d · 2021-01-21T13:01:20.000+08:00
* Replace waitFor with waitForTimeout

* Replace waitFor with waitForFunction

* Replace waitFor with waitForSelector and waitForTimeout

* Update message for waitFor and add rule for waitForTimeout

* Disable rule for next line
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -110,6 +110,12 @@ module.exports = {
 			{
 				selector:
 					'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',
+				message:
+					'This method is deprecated. You should use the more explicit API methods available.',
+			},
+			{
+				selector:
+					'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]',
 				message: 'Prefer page.waitForSelector instead.',
 			},
 			{
diff --git a/packages/e2e-test-utils/src/delete-theme.js b/packages/e2e-test-utils/src/delete-theme.js
@@ -41,7 +41,7 @@ export async function deleteTheme(
 
 	// Wait for the theme to be removed from the page.
 	// eslint-disable-next-line no-restricted-syntax
-	await page.waitFor(
+	await page.waitForFunction(
 		( themeSlug ) =>
 			! document.querySelector( `[data-slug="${ themeSlug }"]` ),
 		slug
diff --git a/packages/e2e-test-utils/src/preview.js b/packages/e2e-test-utils/src/preview.js
@@ -15,12 +15,14 @@ export async function openPreviewPage( editorPage = page ) {
 	let openTabs = await browser.pages();
 	const expectedTabsCount = openTabs.length + 1;
 	await editorPage.click( '.block-editor-post-preview__button-toggle' );
-	await editorPage.waitFor( '.edit-post-header-preview__button-external' );
+	await editorPage.waitForSelector(
+		'.edit-post-header-preview__button-external'
+	);
 	await editorPage.click( '.edit-post-header-preview__button-external' );
 
 	// Wait for the new tab to open.
 	while ( openTabs.length < expectedTabsCount ) {
-		await editorPage.waitFor( 1 );
+		await editorPage.waitForTimeout( 1 );
 		openTabs = await browser.pages();
 	}
 
diff --git a/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js b/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js
@@ -63,8 +63,7 @@ describe( 'Test Custom Post Types', () => {
 		await page.waitForSelector( PARENT_PAGE_INPUT );
 		// Wait for the list of suggestions to fetch
 		// There should be a better way to do that.
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitFor(
+		await page.waitForFunction(
 			( [ value, inputSelector ] ) =>
 				document.querySelector( inputSelector ).value === value,
 			{},
diff --git a/packages/e2e-tests/specs/editor/plugins/nonce.test.js b/packages/e2e-tests/specs/editor/plugins/nonce.test.js
@@ -24,7 +24,7 @@ describe( 'Nonce', () => {
 	it( 'should refresh when expired', async () => {
 		await page.keyboard.press( 'Enter' );
 		// eslint-disable-next-line no-restricted-syntax
-		await page.waitFor( 5000 );
+		await page.waitForTimeout( 5000 );
 		await page.keyboard.type( 'test' );
 		// `saveDraft` waits for saving to be successful, so this test would
 		// timeout if it's not.
diff --git a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
@@ -293,7 +293,7 @@ describe( 'adding blocks', () => {
 		// We need to wait a bit after typing otherwise we might an "early" result
 		// that is going to be "detached" when trying to click on it
 		// eslint-disable-next-line no-restricted-syntax
-		await page.waitFor( 100 );
+		await page.waitForTimeout( 100 );
 		const coverBlock = await page.waitForSelector(
 			'.block-editor-block-types-list .editor-block-list-item-cover'
 		);
diff --git a/packages/e2e-tests/specs/editor/various/autosave.test.js b/packages/e2e-tests/specs/editor/various/autosave.test.js
@@ -34,7 +34,7 @@ async function sleep( durationInSeconds ) {
 	// `waitFor`, which isn't apt for the use case, when provided an integer,
 	// of waiting for a given amount of time.
 	// eslint-disable-next-line no-restricted-syntax
-	await page.waitFor( durationInSeconds * 1000 );
+	await page.waitForTimeout( durationInSeconds * 1000 );
 }
 
 async function clearSessionStorage() {
diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js
@@ -318,7 +318,7 @@ describe( 'Links', () => {
 		// Disable reason: Wait for the animation to complete, since otherwise the
 		// click attempt may occur at the wrong point.
 		// eslint-disable-next-line no-restricted-syntax
-		await page.waitFor( 100 );
+		await page.waitForTimeout( 100 );
 
 		// Publish the post
 		await page.click( '.editor-post-publish-button' );
diff --git a/packages/e2e-tests/specs/editor/various/nux.test.js b/packages/e2e-tests/specs/editor/various/nux.test.js
@@ -50,7 +50,7 @@ describe( 'New User Experience (NUX)', () => {
 		);
 		// This shouldn't be necessary
 		// eslint-disable-next-line no-restricted-syntax
-		await page.waitFor( 500 );
+		await page.waitForTimeout( 500 );
 
 		// Press the right arrow key for Page 3
 		await page.keyboard.press( 'ArrowRight' );
diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
@@ -315,7 +315,7 @@ describe( 'Reusable blocks', () => {
 
 		// Wait for async mode to dispatch the update.
 		// eslint-disable-next-line no-restricted-syntax
-		await page.waitFor( 1000 );
+		await page.waitForTimeout( 1000 );
 
 		// Check that the content of the second reusable block has been updated.
 		const reusableBlocks = await page.$$( '.wp-block-block' );
diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -316,6 +316,7 @@ async function saveWidgets() {
 
 	// FIXME: The snackbar above is enough for the widget areas to get saved,
 	// but not enough for the widgets to get saved.
+	// eslint-disable-next-line no-restricted-syntax
 	await page.waitForTimeout( 500 );
 }
 

Original file line number	Diff line number	Diff line change
`@@ -110,6 +110,12 @@ module.exports = {`
`110`	`110`	`{`
`111`	`111`	`selector:`
`112`	`112`	`'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',`
	`113`	`+ message:`
	`114`	`+ 'This method is deprecated. You should use the more explicit API methods available.',`
	`115`	`+ },`
	`116`	`+ {`
	`117`	`+ selector:`
	`118`	`+ 'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]',`
`113`	`119`	`message: 'Prefer page.waitForSelector instead.',`
`114`	`120`	`},`
`115`	`121`	`{`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ async function sleep( durationInSeconds ) {`
`34`	`34`	// `waitFor`, which isn't apt for the use case, when provided an integer,
`35`	`35`	`// of waiting for a given amount of time.`
`36`	`36`	`// eslint-disable-next-line no-restricted-syntax`
`37`		`- await page.waitFor( durationInSeconds * 1000 );`
	`37`	`+ await page.waitForTimeout( durationInSeconds * 1000 );`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`async function clearSessionStorage() {`