Remove hasIframe for editor.canvas (#46986)

WordPress · Jan 13, 2023 · eb396ec · eb396ec · github-actions · Jan 13, 2023
1 parent 77b9d9e
commit eb396ec
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 90 deletions.
diff --git a/docs/contributors/code/e2e/MIGRATION.md b/docs/contributors/code/e2e/MIGRATION.md
@@ -12,22 +12,8 @@ This document outlines a typical flow of migrating a Jest + Puppeteer test to Pl
 3. Change all occurrences of `describe`, `beforeAll`, `beforeEach`, `afterEach` and `afterAll` with the `test.` prefix. For instance, `describe` turns into `test.describe`.
 4. Use the [fixtures API](https://playwright.dev/docs/test-fixtures) to require previously global variables like `page` and `browser`.
 5. Delete all the imports of `e2e-test-utils`. Instead, use the fixtures API to directly get the `admin`, `editor`, `pageUtils` and `requestUtils`. (However, `admin`, `editor` and `pageUtils` are not allowed in `beforeAll` and `afterAll`, rewrite them using `requestUtils` instead.)
-6. If tests are for the site editor, configure the editor utils to use an iframe:
-    ```js
-    const {
-        test,
-        expect,
-        Editor,
-    } = require( '@wordpress/e2e-test-utils-playwright' );
-
-    test.use( {
-        editor: async ( { page }, use ) => {
-            await use( new Editor( { page, hasIframe: true } ) );
-        },
-    } );
-    ```
-7. If there's a missing util, try to inline the operations directly in the test if there are only a few steps. If you think it deserves to be implemented as a test util, then follow the [guide](#migration-steps-for-test-utils) below.
-8. Manually migrate other details in the tests following the proposed [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md#best-practices). Note that even though the differences in the API of Playwright and Puppeteer are similar, some manual changes are still required.
+6. If there's a missing util, try to inline the operations directly in the test if there are only a few steps. If you think it deserves to be implemented as a test util, then follow the [guide](#migration-steps-for-test-utils) below.
+7. Manually migrate other details in the tests following the proposed [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md#best-practices). Note that even though the differences in the API of Playwright and Puppeteer are similar, some manual changes are still required.
 
 ## Migration steps for test utils
 

diff --git a/packages/e2e-test-utils-playwright/README.md b/packages/e2e-test-utils-playwright/README.md
@@ -41,13 +41,11 @@ To use these utilities, instantiate them within each test file:
 ```js
 test.use( {
 	editor: async ( { page }, use ) => {
-		await use( new Editor( { page, hasIframe: true } ) );
+		await use( new Editor( { page } ) );
 	},
 } );
 ```
 
-The `hasIframe` property denotes whether the editor canvas uses an Iframe, as the site editor currently does. Omit this for non-iframe editors.
-
 Within a test or test utility, use the `canvas` property to select elements within the iframe canvas:
 
 ```js

diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts
@@ -22,39 +22,23 @@ import { transformBlockTo } from './transform-block-to';
 
 type EditorConstructorProps = {
 	page: Page;
-	hasIframe?: boolean;
 };
 
 export class Editor {
 	browser: Browser;
 	page: Page;
 	context: BrowserContext;
-	#hasIframe: boolean;
 
-	constructor( { page, hasIframe = false }: EditorConstructorProps ) {
+	constructor( { page }: EditorConstructorProps ) {
 		this.page = page;
 		this.context = page.context();
 		this.browser = this.context.browser()!;
-		this.#hasIframe = hasIframe;
 	}
 
 	get canvas(): Frame | Page {
-		let frame;
-
-		if ( this.#hasIframe ) {
-			frame = this.page.frame( 'editor-canvas' );
-		} else {
-			frame = this.page;
-		}
-
-		if ( ! frame ) {
-			throw new Error(
-				'EditorUtils: unable to find editor canvas iframe or page'
-			);
-		}
-
-		return frame;
+		return this.page.frame( 'editor-canvas' ) || this.page;
 	}
+
 	clickBlockOptionsMenuItem = clickBlockOptionsMenuItem.bind( this );
 	clickBlockToolbarButton = clickBlockToolbarButton.bind( this );
 	getBlocks = getBlocks.bind( this );

diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js
@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-const {
-	test,
-	expect,
-	Editor,
-} = require( '@wordpress/e2e-test-utils-playwright' );
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 /**
  * @typedef {import('@playwright/test').Page} Page
@@ -16,9 +12,6 @@ test.use( {
 	commentsBlockUtils: async ( { page, admin, requestUtils }, use ) => {
 		await use( new CommentsBlockUtils( { page, admin, requestUtils } ) );
 	},
-	editor: async ( { page }, use ) => {
-		await use( new Editor( { page, hasIframe: true } ) );
-	},
 } );
 
 test.describe( 'Comments', () => {

diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js
@@ -1,17 +1,7 @@
 /**
  * WordPress dependencies
  */
-const {
-	test,
-	expect,
-	Editor,
-} = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.use( {
-	editor: async ( { page }, use ) => {
-		await use( new Editor( { page, hasIframe: true } ) );
-	},
-} );
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.describe(
 	'As a user I want the navigation block to fallback to the best possible default',

diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -1,17 +1,7 @@
 /**
  * WordPress dependencies
  */
-const {
-	test,
-	expect,
-	Editor,
-} = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.use( {
-	editor: async ( { page }, use ) => {
-		await use( new Editor( { page, hasIframe: true } ) );
-	},
-} );
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.describe( 'Push to Global Styles button', () => {
 	test.beforeAll( async ( { requestUtils } ) => {

diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js
@@ -1,17 +1,7 @@
 /**
  * WordPress dependencies
  */
-const {
-	test,
-	expect,
-	Editor,
-} = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.use( {
-	editor: async ( { page }, use ) => {
-		await use( new Editor( { page, hasIframe: true } ) );
-	},
-} );
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.describe( 'Template Part', () => {
 	test.beforeAll( async ( { requestUtils } ) => {

diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js
@@ -1,17 +1,7 @@
 /**
  * WordPress dependencies
  */
-const {
-	test,
-	expect,
-	Editor,
-} = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.use( {
-	editor: async ( { page }, use ) => {
-		await use( new Editor( { page, hasIframe: true } ) );
-	},
-} );
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.describe( 'Site editor writing flow', () => {
 	test.beforeAll( async ( { requestUtils } ) => {