Fix E2E tests in WordPress 5.8

packages/e2e-test-utils/src/focusSelectedBlock.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+async function focusSelectedBlock() {
+  // Ideally there shouuld be a UI way to do this. (Focus the selected block)
+  await page.evaluate(() => {
+    wp.data
+      .dispatch('core/block-editor')
+      .selectBlock(
+        wp.data.select('core/block-editor').getSelectedBlockClientId(),
+        0
+      );
+  });
+}
+export default focusSelectedBlock;

packages/e2e-test-utils/src/index.js

@@ -49,6 +49,7 @@ export { default as createNewPost } from './createNewPost';
 export { default as minWPVersionRequired } from './minWPVersionRequired';
 export { default as visitBlockWidgetScreen } from './visitBlockWidgetScreen';
 export { default as insertWidget } from './insertWidget';
+export { default as focusSelectedBlock } from './focusSelectedBlock';
 export {
   getEditedPostContent,
   setPostContent,

packages/e2e-test-utils/src/insertBlock.js

@@ -17,35 +17,33 @@
 /**
  * WordPress dependencies
  */
-import { searchForBlock } from '@wordpress/e2e-test-utils';
+import { canvas, searchForBlock } from '@wordpress/e2e-test-utils';
+/**
+ * Internal dependencies
+ */
+import focusSelectedBlock from './focusSelectedBlock';
 
 /**
- * Retrieves the document container by css class and checks
- * to make sure the document's active element is within it.
- *
- * Differs from waitForInserterCloseAndContentFocus() in `@wordpress/e2e-test-utils`
- * by using a simpler selector and optional chaining to avoid crashes.
+ * Retrieves the document container by css class and checks to make sure the document's active element is within it
  */
 async function waitForInserterCloseAndContentFocus() {
-  await page.waitForFunction(() =>
-    document.body
-      .querySelector('.block-editor-block-list__layout')
-      ?.contains(document.activeElement)
+  await canvas().waitForFunction(
+    () =>
+      document.activeElement.closest('.block-editor-block-list__layout') !==
+      null
   );
 }
 
 /**
  * Opens the inserter, searches for the given term, then selects the first
  * result that appears. It then waits briefly for the block list to update.
  *
- * Avoids using waitForInserterCloseAndContentFocus() from `@wordpress/e2e-test-utils`
- * because the selector it relies on does not exist in older versions of Gutenberg.
- *
  * @param {string} searchTerm The text to search the inserter for.
  */
 async function insertBlock(searchTerm) {
   await searchForBlock(searchTerm);
   await expect(page).toClick('button span', { text: searchTerm });
+  await focusSelectedBlock();
   // We should wait until the inserter closes and the focus moves to the content.
   await waitForInserterCloseAndContentFocus();
 }

packages/e2e-tests/src/specs/wordpress/blockWidget.js

@@ -25,6 +25,7 @@ import {
   visitBlockWidgetScreen,
   insertWidget,
   minWPVersionRequired,
+  focusSelectedBlock,
 } from '@web-stories-wp/e2e-test-utils';
 
 describe('Web Stories Widget Block', () => {
@@ -38,17 +39,17 @@ describe('Web Stories Widget Block', () => {
 
   it('should insert a new web stories block', async () => {
     await visitBlockWidgetScreen();
+
     await expect(page).toClick('button[aria-label="Add block"]');
     await page.type('.block-editor-inserter__search-input', 'Web Stories');
     await expect(page).toClick('button span', { text: 'Web Stories' });
+    await focusSelectedBlock();
 
     await page.waitForSelector('[data-testid="ws-block-configuration-panel"]');
     await expect(page).toMatchElement(
       '[data-testid="ws-block-configuration-panel"]'
     );
 
-    await expect(page).toClick('[data-testid="ws-block-configuration-panel"]');
-
     await expect(page).toClick('div.components-card__body', {
       text: 'Story URL',
     });

packages/e2e-tests/src/specs/wordpress/webStoriesBlock.js

@@ -38,9 +38,7 @@ const EMBED_BLOCK_CONTENT = `
 <!-- /wp:web-stories/embed -->
 `;
 
-// TODO Fix https://github.com/google/web-stories-wp/issues/8160
-// eslint-disable-next-line jest/no-disabled-tests
-describe.skip('Web Stories Block', () => {
+describe('Web Stories Block', () => {
   let stopRequestInterception;
   let removeErrorMessage;
   let removeError404Message;