Testing: Add an e2e test to check the interactions in write mode (#65819

)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: kevin940726 <[email protected]>
Co-authored-by: getdave <[email protected]>
Co-authored-by: ntsekouras <[email protected]>

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' ),
 								},
 							] }
 						/>

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 );

packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Switch the editor tool being used.
+ *
+ * @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();
+}

test/e2e/specs/editor/various/write-design-mode.spec.js

@@ -0,0 +1,116 @@
+/**
+ * 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 );
+		await expect( paragraph ).toHaveText( '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(
+			// 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(
+			editorSettings.getByRole( 'button', { name: 'Content' } )
+		).toBeVisible();
+	} );
+} );