Migrate 'Allowed Blocks Setting on InnerBlocks' tests to Playwright (#…

…51677) * Migrate 'Allowed Blocks Setting on InnerBlocks' tests to Playwright * Remove old test file * Fix inline comment * Avoid ESLint warning without extensive comment
WordPress · Jun 20, 2023 · e43c9b9 · e43c9b9
1 parent f4f22a1
commit e43c9b9
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 158 deletions.
diff --git a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php
@@ -12,7 +12,7 @@
  */
 function enqueue_inner_blocks_allowed_blocks_script() {
 	wp_enqueue_script(
-		'gutenberg-test-block-icons',
+		'gutenberg-test-inner-blocks-allowed-blocks',
 		plugins_url( 'inner-blocks-allowed-blocks/index.js', __FILE__ ),
 		array(
 			'wp-blocks',
@@ -24,5 +24,4 @@ function enqueue_inner_blocks_allowed_blocks_script() {
 		true
 	);
 }
-
-add_action( 'init', 'enqueue_inner_blocks_allowed_blocks_script' );
+add_action( 'enqueue_block_assets', 'enqueue_inner_blocks_allowed_blocks_script' );
diff --git a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js
@@ -1,87 +1,46 @@
 ( function () {
-	const { withSelect } = wp.data;
+	const { useSelect } = wp.data;
 	const { registerBlockType } = wp.blocks;
 	const { createElement: el } = wp.element;
 	const { InnerBlocks } = wp.blockEditor;
-	const __ = wp.i18n.__;
 	const divProps = {
 		className: 'product',
 		style: { outline: '1px solid gray', padding: 5 },
 	};
-	const template = [
-		[ 'core/image' ],
-		[ 'core/paragraph', { placeholder: __( 'Add a description' ) } ],
-		[ 'core/quote' ],
-	];
+
 	const allowedBlocksWhenSingleEmptyChild = [ 'core/image', 'core/list' ];
 	const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ];
 
-	const save = function () {
-		return el( 'div', divProps, el( InnerBlocks.Content ) );
-	};
-	registerBlockType( 'test/allowed-blocks-unset', {
-		title: 'Allowed Blocks Unset',
-		icon: 'carrot',
-		category: 'text',
-
-		edit() {
-			return el( 'div', divProps, el( InnerBlocks, { template } ) );
-		},
-
-		save,
-	} );
-
-	registerBlockType( 'test/allowed-blocks-set', {
-		title: 'Allowed Blocks Set',
-		icon: 'carrot',
-		category: 'text',
-
-		edit() {
-			return el(
-				'div',
-				divProps,
-				el( InnerBlocks, {
-					template,
-					allowedBlocks: [
-						'core/button',
-						'core/gallery',
-						'core/list',
-						'core/media-text',
-						'core/quote',
-					],
-				} )
-			);
-		},
-
-		save,
-	} );
-
 	registerBlockType( 'test/allowed-blocks-dynamic', {
 		title: 'Allowed Blocks Dynamic',
 		icon: 'carrot',
 		category: 'text',
 
-		edit: withSelect( function ( select, ownProps ) {
-			const getBlockOrder = select( 'core/block-editor' ).getBlockOrder;
-			return {
-				numberOfChildren: getBlockOrder( ownProps.clientId ).length,
-			};
-		} )( function ( props ) {
+		edit: function Edit( props ) {
+			const numberOfChildren = useSelect(
+				( select ) => {
+					const { getBlockCount } = select( 'core/block-editor' );
+					return getBlockCount( props.clientId );
+				},
+				[ props.clientId ]
+			);
+
 			return el(
 				'div',
 				{
 					...divProps,
-					'data-number-of-children': props.numberOfChildren,
+					'data-number-of-children': numberOfChildren,
 				},
 				el( InnerBlocks, {
 					allowedBlocks:
-						props.numberOfChildren < 2
+						numberOfChildren < 2
 							? allowedBlocksWhenSingleEmptyChild
 							: allowedBlocksWhenMultipleChildren,
 				} )
 			);
-		} ),
-
-		save,
+		},
+		save() {
+			return el( 'div', divProps, el( InnerBlocks.Content ) );
+		}
 	} );
 } )();
diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-inner-blocks-allowed-blocks'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-inner-blocks-allowed-blocks'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'allows all blocks if the allowed blocks setting was not set', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				layout: { type: 'constrained' },
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: { placeholder: 'Add a description' },
+				},
+			],
+		} );
+
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Empty block',
+			} )
+			.click();
+
+		const blockInserter = page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Toggle block inserter' } );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await blockInserter.click();
+		await expect( blockLibrary ).toBeVisible();
+		expect(
+			await blockLibrary.getByRole( 'option' ).count()
+		).toBeGreaterThan( 10 );
+	} );
+
+	test( 'limits the blocks if the allowed blocks setting was set', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				layout: { type: 'constrained' },
+				allowedBlocks: [
+					'core/paragraph',
+					'core/heading',
+					'core/image',
+				],
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: { placeholder: 'Add a description' },
+				},
+			],
+		} );
+
+		// Select inner block.
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Empty block',
+			} )
+			.click();
+
+		const blockInserter = page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Toggle block inserter' } );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await blockInserter.click();
+		await expect( blockLibrary ).toBeVisible();
+		await expect( blockLibrary.getByRole( 'option' ) ).toHaveText( [
+			'Paragraph',
+			'Heading',
+			'Image',
+		] );
+	} );
+
+	// Note: This behavior isn't fully supported. See https://github.com/WordPress/gutenberg/issues/14515.
+	test( 'correctly applies dynamic allowed blocks restrictions', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/Allowed Blocks Dynamic' );
+		await page.keyboard.press( 'Enter' );
+
+		const blockAppender = editor.canvas.getByRole( 'button', {
+			name: 'Add block',
+		} );
+		await expect( blockAppender ).toBeVisible();
+		await blockAppender.click();
+
+		const blockListBox = page.getByRole( 'listbox', { name: 'Blocks' } );
+		await expect( blockListBox ).toBeVisible();
+		await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
+			'Image',
+			'List',
+		] );
+
+		// Insert list block.
+		await blockListBox.getByRole( 'option', { name: 'List' } ).click();
+		// Select the list wrapper and then parent block.
+		await page.keyboard.press( 'ArrowUp' );
+		await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
+
+		// Insert the image.
+		await blockAppender.click();
+		await blockListBox.getByRole( 'option', { name: 'Image' } ).click();
+
+		await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
+		await blockAppender.click();
+
+		// It should display a different allowed block list.
+		await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
+			'Gallery',
+			'Video',
+		] );
+	} );
+} );