Skip to content

Commit e43c9b9

Browse files
MamadukaMamaduka
authored
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
1 parent f4f22a1 commit e43c9b9

File tree

4 files changed

+165
-158
lines changed

4 files changed

+165
-158
lines changed

‎packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php

+2-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
*/
1313
function enqueue_inner_blocks_allowed_blocks_script() {
1414
wp_enqueue_script(
15-
'gutenberg-test-block-icons',
15+
'gutenberg-test-inner-blocks-allowed-blocks',
1616
plugins_url( 'inner-blocks-allowed-blocks/index.js', __FILE__ ),
1717
array(
1818
'wp-blocks',
@@ -24,5 +24,4 @@ function enqueue_inner_blocks_allowed_blocks_script() {
2424
true
2525
);
2626
}
27-
28-
add_action( 'init', 'enqueue_inner_blocks_allowed_blocks_script' );
27+
add_action( 'enqueue_block_assets', 'enqueue_inner_blocks_allowed_blocks_script' );

‎packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js

+17-58
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,46 @@
11
( function () {
2-
const { withSelect } = wp.data;
2+
const { useSelect } = wp.data;
33
const { registerBlockType } = wp.blocks;
44
const { createElement: el } = wp.element;
55
const { InnerBlocks } = wp.blockEditor;
6-
const __ = wp.i18n.__;
76
const divProps = {
87
className: 'product',
98
style: { outline: '1px solid gray', padding: 5 },
109
};
11-
const template = [
12-
[ 'core/image' ],
13-
[ 'core/paragraph', { placeholder: __( 'Add a description' ) } ],
14-
[ 'core/quote' ],
15-
];
10+
1611
const allowedBlocksWhenSingleEmptyChild = [ 'core/image', 'core/list' ];
1712
const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ];
1813

19-
const save = function () {
20-
return el( 'div', divProps, el( InnerBlocks.Content ) );
21-
};
22-
registerBlockType( 'test/allowed-blocks-unset', {
23-
title: 'Allowed Blocks Unset',
24-
icon: 'carrot',
25-
category: 'text',
26-
27-
edit() {
28-
return el( 'div', divProps, el( InnerBlocks, { template } ) );
29-
},
30-
31-
save,
32-
} );
33-
34-
registerBlockType( 'test/allowed-blocks-set', {
35-
title: 'Allowed Blocks Set',
36-
icon: 'carrot',
37-
category: 'text',
38-
39-
edit() {
40-
return el(
41-
'div',
42-
divProps,
43-
el( InnerBlocks, {
44-
template,
45-
allowedBlocks: [
46-
'core/button',
47-
'core/gallery',
48-
'core/list',
49-
'core/media-text',
50-
'core/quote',
51-
],
52-
} )
53-
);
54-
},
55-
56-
save,
57-
} );
58-
5914
registerBlockType( 'test/allowed-blocks-dynamic', {
6015
title: 'Allowed Blocks Dynamic',
6116
icon: 'carrot',
6217
category: 'text',
6318

64-
edit: withSelect( function ( select, ownProps ) {
65-
const getBlockOrder = select( 'core/block-editor' ).getBlockOrder;
66-
return {
67-
numberOfChildren: getBlockOrder( ownProps.clientId ).length,
68-
};
69-
} )( function ( props ) {
19+
edit: function Edit( props ) {
20+
const numberOfChildren = useSelect(
21+
( select ) => {
22+
const { getBlockCount } = select( 'core/block-editor' );
23+
return getBlockCount( props.clientId );
24+
},
25+
[ props.clientId ]
26+
);
27+
7028
return el(
7129
'div',
7230
{
7331
...divProps,
74-
'data-number-of-children': props.numberOfChildren,
32+
'data-number-of-children': numberOfChildren,
7533
},
7634
el( InnerBlocks, {
7735
allowedBlocks:
78-
props.numberOfChildren < 2
36+
numberOfChildren < 2
7937
? allowedBlocksWhenSingleEmptyChild
8038
: allowedBlocksWhenMultipleChildren,
8139
} )
8240
);
83-
} ),
84-
85-
save,
41+
},
42+
save() {
43+
return el( 'div', divProps, el( InnerBlocks.Content ) );
44+
}
8645
} );
8746
} )();

‎packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js

-97
This file was deleted.

‎test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
5+
6+
test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
7+
test.beforeAll( async ( { requestUtils } ) => {
8+
await requestUtils.activatePlugin(
9+
'gutenberg-test-inner-blocks-allowed-blocks'
10+
);
11+
} );
12+
13+
test.afterAll( async ( { requestUtils } ) => {
14+
await requestUtils.deactivatePlugin(
15+
'gutenberg-test-inner-blocks-allowed-blocks'
16+
);
17+
} );
18+
19+
test.beforeEach( async ( { admin } ) => {
20+
await admin.createNewPost();
21+
} );
22+
23+
test( 'allows all blocks if the allowed blocks setting was not set', async ( {
24+
editor,
25+
page,
26+
} ) => {
27+
await editor.insertBlock( {
28+
name: 'core/group',
29+
attributes: {
30+
layout: { type: 'constrained' },
31+
},
32+
innerBlocks: [
33+
{
34+
name: 'core/paragraph',
35+
attributes: { placeholder: 'Add a description' },
36+
},
37+
],
38+
} );
39+
40+
await editor.canvas
41+
.getByRole( 'document', {
42+
name: 'Empty block',
43+
} )
44+
.click();
45+
46+
const blockInserter = page
47+
.getByRole( 'toolbar', { name: 'Document tools' } )
48+
.getByRole( 'button', { name: 'Toggle block inserter' } );
49+
const blockLibrary = page.getByRole( 'region', {
50+
name: 'Block Library',
51+
} );
52+
53+
await blockInserter.click();
54+
await expect( blockLibrary ).toBeVisible();
55+
expect(
56+
await blockLibrary.getByRole( 'option' ).count()
57+
).toBeGreaterThan( 10 );
58+
} );
59+
60+
test( 'limits the blocks if the allowed blocks setting was set', async ( {
61+
editor,
62+
page,
63+
} ) => {
64+
await editor.insertBlock( {
65+
name: 'core/group',
66+
attributes: {
67+
layout: { type: 'constrained' },
68+
allowedBlocks: [
69+
'core/paragraph',
70+
'core/heading',
71+
'core/image',
72+
],
73+
},
74+
innerBlocks: [
75+
{
76+
name: 'core/paragraph',
77+
attributes: { placeholder: 'Add a description' },
78+
},
79+
],
80+
} );
81+
82+
// Select inner block.
83+
await editor.canvas
84+
.getByRole( 'document', {
85+
name: 'Empty block',
86+
} )
87+
.click();
88+
89+
const blockInserter = page
90+
.getByRole( 'toolbar', { name: 'Document tools' } )
91+
.getByRole( 'button', { name: 'Toggle block inserter' } );
92+
const blockLibrary = page.getByRole( 'region', {
93+
name: 'Block Library',
94+
} );
95+
96+
await blockInserter.click();
97+
await expect( blockLibrary ).toBeVisible();
98+
await expect( blockLibrary.getByRole( 'option' ) ).toHaveText( [
99+
'Paragraph',
100+
'Heading',
101+
'Image',
102+
] );
103+
} );
104+
105+
// Note: This behavior isn't fully supported. See https://github.com/WordPress/gutenberg/issues/14515.
106+
test( 'correctly applies dynamic allowed blocks restrictions', async ( {
107+
editor,
108+
page,
109+
} ) => {
110+
await editor.canvas.click( 'role=button[name="Add default block"i]' );
111+
await page.keyboard.type( '/Allowed Blocks Dynamic' );
112+
await page.keyboard.press( 'Enter' );
113+
114+
const blockAppender = editor.canvas.getByRole( 'button', {
115+
name: 'Add block',
116+
} );
117+
await expect( blockAppender ).toBeVisible();
118+
await blockAppender.click();
119+
120+
const blockListBox = page.getByRole( 'listbox', { name: 'Blocks' } );
121+
await expect( blockListBox ).toBeVisible();
122+
await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
123+
'Image',
124+
'List',
125+
] );
126+
127+
// Insert list block.
128+
await blockListBox.getByRole( 'option', { name: 'List' } ).click();
129+
// Select the list wrapper and then parent block.
130+
await page.keyboard.press( 'ArrowUp' );
131+
await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
132+
133+
// Insert the image.
134+
await blockAppender.click();
135+
await blockListBox.getByRole( 'option', { name: 'Image' } ).click();
136+
137+
await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
138+
await blockAppender.click();
139+
140+
// It should display a different allowed block list.
141+
await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
142+
'Gallery',
143+
'Video',
144+
] );
145+
} );
146+
} );

0 commit comments

Comments
 (0)