From 3265fdf8dcba504516f6314ffb7c5a09ca9c28f5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 2 Oct 2024 10:32:56 +0100 Subject: [PATCH 1/3] Testing: Add an e2e test to check the interactions in write mode --- .../src/components/tool-selector/index.js | 2 + .../src/editor/index.ts | 3 + .../src/editor/switch-editor-tool.ts | 34 ++++++ .../editor/various/write-design-mode.spec.js | 113 ++++++++++++++++++ 4 files changed, 152 insertions(+) create mode 100644 packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts create mode 100644 test/e2e/specs/editor/various/write-design-mode.spec.js diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js index fbbf03af7921a7..d328554f384b77 100644 --- a/packages/block-editor/src/components/tool-selector/index.js +++ b/packages/block-editor/src/components/tool-selector/index.js @@ -78,6 +78,7 @@ function ToolSelector( props, ref ) { ), info: __( 'Focus on content.' ), + 'aria-label': __( 'Write' ), }, { value: 'edit', @@ -88,6 +89,7 @@ function ToolSelector( props, ref ) { ), info: __( 'Edit layout and styles.' ), + 'aria-label': __( 'Design' ), }, ] } /> diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts index c222f68aecc90a..4ed32134f0979a 100644 --- a/packages/e2e-test-utils-playwright/src/editor/index.ts +++ b/packages/e2e-test-utils-playwright/src/editor/index.ts @@ -28,6 +28,7 @@ import { saveSiteEditorEntities } from './site-editor'; import { setIsFixedToolbar } from './set-is-fixed-toolbar'; import { switchToLegacyCanvas } from './switch-to-legacy-canvas'; import { transformBlockTo } from './transform-block-to'; +import { switchEditorTool } from './switch-editor-tool'; type EditorConstructorProps = { page: Page; @@ -84,6 +85,8 @@ export class Editor { /** @borrows setIsFixedToolbar as this.setIsFixedToolbar */ setIsFixedToolbar: typeof setIsFixedToolbar = setIsFixedToolbar.bind( this ); + /** @borrows switchEditorTool as this.switchEditorTool */ + switchEditorTool: typeof switchEditorTool = switchEditorTool.bind( this ); /** @borrows switchToLegacyCanvas as this.switchToLegacyCanvas */ switchToLegacyCanvas: typeof switchToLegacyCanvas = switchToLegacyCanvas.bind( this ); diff --git a/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts b/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts new file mode 100644 index 00000000000000..ed9406f72cec2d --- /dev/null +++ b/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts @@ -0,0 +1,34 @@ +/** + * Internal dependencies + */ +import type { Editor } from './index'; + +/** + * Clicks a block toolbar button. + * + * @param this + * @param label The text string of the button label. + */ +export async function switchEditorTool( this: Editor, label: string ) { + const toolsToolbar = this.page.getByRole( 'toolbar', { + name: 'Document tools', + } ); + await toolsToolbar + .getByRole( 'button', { + name: 'Tools', + } ) + .click(); + const menu = this.page.getByRole( 'menu', { + name: 'Tools', + } ); + await menu + .getByRole( 'menuitemradio', { + name: label, + } ) + .click(); + await toolsToolbar + .getByRole( 'button', { + name: 'Tools', + } ) + .click(); +} diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js new file mode 100644 index 00000000000000..e6f9fb03b17d1b --- /dev/null +++ b/test/e2e/specs/editor/various/write-design-mode.spec.js @@ -0,0 +1,113 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Write/Design mode', () => { + test.beforeEach( async ( { admin, editor } ) => { + await admin.createNewPost(); + await expect( + editor.canvas.getByRole( 'textbox', { name: 'Add title' } ) + ).toBeFocused(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deleteAllPosts(); + } ); + + test( 'Should prevent selecting intermediary blocks', async ( { + editor, + page, + } ) => { + // Insert a section with a nested block and an editable block. + await editor.insertBlock( { + name: 'core/group', + attributes: { + style: { + spacing: { + padding: '20px', + }, + color: { + background: 'darkgray', + }, + }, + }, + innerBlocks: [ + { + name: 'core/group', + attributes: { + style: { + spacing: { + padding: '20px', + }, + color: { + background: 'lightgray', + }, + }, + }, + innerBlocks: [ + { + name: 'core/paragraph', + attributes: { + content: 'Something', + }, + }, + ], + }, + ], + } ); + + // Switch to write mode. + await editor.switchEditorTool( 'Write' ); + + const sectionBlock = editor.canvas + .getByRole( 'document', { + name: 'Block: Group', + } ) + .nth( 0 ); + const sectionClientId = await sectionBlock.getAttribute( 'data-block' ); + const nestedGroupBlock = sectionBlock.getByRole( 'document', { + name: 'Block: Group', + } ); + const paragraph = nestedGroupBlock.getByRole( 'document', { + name: 'Block: Paragraph', + } ); + const paragraphClientId = await paragraph.getAttribute( 'data-block' ); + + // We should not be able to select the intermediary group block. + // if we try to click on it (the padding area) + // The selection should land on the top level block. + const nestedGroupPosition = await nestedGroupBlock.boundingBox(); + await page.mouse.click( + nestedGroupPosition.x + 5, + nestedGroupPosition.y + 5 + ); + + const getSelectedBlock = async () => + await page.evaluate( () => + window.wp.data + .select( 'core/block-editor' ) + .getSelectedBlockClientId() + ); + + expect( await getSelectedBlock() ).toEqual( sectionClientId ); + + // We should be able to select the paragraph block and write in it. + await paragraph.click(); + await page.keyboard.type( ' something' ); + expect( await getSelectedBlock() ).toEqual( paragraphClientId ); + expect( await paragraph.innerHTML() ).toEqual( 'Something something' ); + + // Check that the inspector still shows the group block with the content panel. + await editor.openDocumentSettingsSidebar(); + const editorSettings = page.getByRole( 'region', { + name: 'Editor settings', + } ); + await expect( + editorSettings.locator( '.block-editor-block-card__title' ) + ).toHaveText( 'Group' ); + await expect( + editorSettings.getByRole( 'button', { name: 'Content' } ) + ).toBeVisible(); + } ); +} ); From f158e0e9f30e8eec0e1f613e3c21254ffb2130f2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 2 Oct 2024 10:56:38 +0100 Subject: [PATCH 2/3] Changes per review --- .../e2e-test-utils-playwright/src/editor/switch-editor-tool.ts | 2 +- test/e2e/specs/editor/various/write-design-mode.spec.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts b/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts index ed9406f72cec2d..67894abe0dcf7f 100644 --- a/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts +++ b/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts @@ -4,7 +4,7 @@ import type { Editor } from './index'; /** - * Clicks a block toolbar button. + * Switch the editor tool being used. * * @param this * @param label The text string of the button label. diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js index e6f9fb03b17d1b..55dbde954563db 100644 --- a/test/e2e/specs/editor/various/write-design-mode.spec.js +++ b/test/e2e/specs/editor/various/write-design-mode.spec.js @@ -96,7 +96,7 @@ test.describe( 'Write/Design mode', () => { await paragraph.click(); await page.keyboard.type( ' something' ); expect( await getSelectedBlock() ).toEqual( paragraphClientId ); - expect( await paragraph.innerHTML() ).toEqual( 'Something something' ); + await expect( paragraph ).toHaveText( 'Something something' ); // Check that the inspector still shows the group block with the content panel. await editor.openDocumentSettingsSidebar(); From 2bded8699d678935224f0cf82d7a2b93008291e3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 7 Oct 2024 09:21:30 +0200 Subject: [PATCH 3/3] Add a comment to the e2e test about the usage of the CSS selector --- test/e2e/specs/editor/various/write-design-mode.spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js index 55dbde954563db..635ba17f63ee90 100644 --- a/test/e2e/specs/editor/various/write-design-mode.spec.js +++ b/test/e2e/specs/editor/various/write-design-mode.spec.js @@ -104,6 +104,9 @@ test.describe( 'Write/Design mode', () => { name: 'Editor settings', } ); await expect( + // Ideally we should be using CSS selectors + // but in this case there's no easy role/label + // to retrieve the "selected block title" editorSettings.locator( '.block-editor-block-card__title' ) ).toHaveText( 'Group' ); await expect(