Skip to content

Commit

Permalink
Remove hasIframe for editor.canvas
Browse files Browse the repository at this point in the history
  • Loading branch information
kevin940726 committed Jan 9, 2023
1 parent d3c0c9d commit deb36c6
Show file tree
Hide file tree
Showing 8 changed files with 11 additions and 90 deletions.
18 changes: 2 additions & 16 deletions docs/contributors/code/e2e/MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 1 addition & 3 deletions packages/e2e-test-utils-playwright/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
22 changes: 3 additions & 19 deletions packages/e2e-test-utils-playwright/src/editor/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
9 changes: 1 addition & 8 deletions test/e2e/specs/editor/blocks/comments.spec.js
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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', () => {
Expand Down
12 changes: 1 addition & 11 deletions test/e2e/specs/editor/blocks/navigation.spec.js
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
12 changes: 1 addition & 11 deletions test/e2e/specs/site-editor/push-to-global-styles.spec.js
Original file line number Diff line number Diff line change
@@ -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 } ) => {
Expand Down
12 changes: 1 addition & 11 deletions test/e2e/specs/site-editor/template-part.spec.js
Original file line number Diff line number Diff line change
@@ -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 } ) => {
Expand Down
12 changes: 1 addition & 11 deletions test/e2e/specs/site-editor/writing-flow.spec.js
Original file line number Diff line number Diff line change
@@ -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 } ) => {
Expand Down

0 comments on commit deb36c6

Please sign in to comment.