Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify editor.canvas by removing hasIframe #46986

Merged
merged 1 commit into from
Jan 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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