diff --git a/packages/e2e-tests/specs/editor/various/block-locking.test.js b/packages/e2e-tests/specs/editor/various/block-locking.test.js deleted file mode 100644 index 8bb2833a59201..0000000000000 --- a/packages/e2e-tests/specs/editor/various/block-locking.test.js +++ /dev/null @@ -1,120 +0,0 @@ -/** - * WordPress dependencies - */ -import { - createNewPost, - clickButton, - clickMenuItem, - clickBlockToolbarButton, - getEditedPostContent, - insertBlock, -} from '@wordpress/e2e-test-utils'; - -describe( 'Block Grouping', () => { - beforeEach( async () => { - await createNewPost(); - } ); - - describe( 'General', () => { - it( 'can prevent removal', async () => { - await insertBlock( 'Paragraph' ); - await page.keyboard.type( 'Some paragraph' ); - - await clickBlockToolbarButton( 'Options' ); - await clickMenuItem( 'Lock' ); - - const [ checkbox ] = await page.$x( - '//label[contains(text(), "Prevent removal")]' - ); - await checkbox.click(); - - await clickButton( 'Apply' ); - - const [ removeBlock ] = await page.$x( - '//*[@role="menu"]//*[text()="Remove Paragraph"]' - ); - - expect( removeBlock ).toBeFalsy(); - } ); - - it( 'can disable movement', async () => { - await insertBlock( 'Paragraph' ); - await page.keyboard.type( 'First paragraph' ); - - await insertBlock( 'Paragraph' ); - await page.keyboard.type( 'Second paragraph' ); - - await clickBlockToolbarButton( 'Options' ); - await clickMenuItem( 'Lock' ); - - const [ checkbox ] = await page.$x( - '//label[contains(text(), "Disable movement")]' - ); - await checkbox.click(); - - await clickButton( 'Apply' ); - - // Hide options. - await clickBlockToolbarButton( 'Options' ); - - const blockMover = await page.$( '.block-editor-block-mover' ); - expect( blockMover ).toBeNull(); - - const [ lockButton ] = await page.$x( - '//button[@aria-label="Unlock Paragraph"]' - ); - expect( lockButton ).toBeTruthy(); - } ); - - it( 'can lock everything', async () => { - await insertBlock( 'Paragraph' ); - await page.keyboard.type( 'Some paragraph' ); - - await clickBlockToolbarButton( 'Options' ); - await clickMenuItem( 'Lock' ); - - const [ checkbox ] = await page.$x( - '//label//*[contains(text(), "Lock all")]' - ); - await checkbox.click(); - - await clickButton( 'Apply' ); - - expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` - " -
Some paragraph
- " - ` ); - } ); - - it( 'can unlock from toolbar', async () => { - await insertBlock( 'Paragraph' ); - await page.keyboard.type( 'Some paragraph' ); - - await clickBlockToolbarButton( 'Options' ); - await clickMenuItem( 'Lock' ); - - const [ lockCheckbox ] = await page.$x( - '//label//*[contains(text(), "Lock all")]' - ); - await lockCheckbox.click(); - - await clickButton( 'Apply' ); - - await clickBlockToolbarButton( 'Unlock Paragraph' ); - - const [ unlockCheckbox ] = await page.$x( - '//label//*[contains(text(), "Lock all")]' - ); - await unlockCheckbox.click(); - - await clickButton( 'Apply' ); - - expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` - " -Some paragraph
- " - ` ); - } ); - } ); -} ); diff --git a/test/e2e/specs/editor/various/block-locking.spec.js b/test/e2e/specs/editor/various/block-locking.spec.js new file mode 100644 index 0000000000000..7398cc6be7b18 --- /dev/null +++ b/test/e2e/specs/editor/various/block-locking.spec.js @@ -0,0 +1,86 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Block Locking', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test.describe( 'General', () => { + test( 'can prevent removal', async ( { editor, page } ) => { + await editor.insertBlock( { name: 'core/paragraph' } ); + await page.keyboard.type( 'Some paragraph' ); + + await editor.clickBlockOptionsMenuItem( 'Lock' ); + + await page.click( 'role=checkbox[name="Prevent removal"]' ); + await page.click( 'role=button[name="Apply"]' ); + + await expect( + page.locator( 'role=menuitem[name="Remove Paragraph"]' ) + ).not.toBeVisible(); + } ); + + test( 'can disable movement', async ( { editor, page } ) => { + await editor.insertBlock( { name: 'core/paragraph' } ); + await page.keyboard.type( 'First paragraph' ); + + await editor.insertBlock( { name: 'core/paragraph' } ); + await page.keyboard.type( 'Second paragraph' ); + + await editor.clickBlockOptionsMenuItem( 'Lock' ); + + await page.click( 'role=checkbox[name="Disable movement"]' ); + await page.click( 'role=button[name="Apply"]' ); + + // Hide options. + await editor.clickBlockToolbarButton( 'Options' ); + + // Drag handle is hidden. + await expect( + page.locator( 'role=button[name="Drag"]' ) + ).not.toBeVisible(); + + // Movers are hidden. No need to check for both. + await expect( + page.locator( 'role=button[name="Move up"]' ) + ).not.toBeVisible(); + } ); + + test( 'can lock everything', async ( { editor, page } ) => { + await editor.insertBlock( { name: 'core/paragraph' } ); + await page.keyboard.type( 'Some paragraph' ); + + await editor.clickBlockOptionsMenuItem( 'Lock' ); + + await page.click( 'role=checkbox[name="Lock all"]' ); + await page.click( 'role=button[name="Apply"]' ); + + expect( await editor.getEditedPostContent() ) + .toBe( ` +Some paragraph
+` ); + } ); + + test( 'can unlock from toolbar', async ( { editor, page } ) => { + await editor.insertBlock( { name: 'core/paragraph' } ); + await page.keyboard.type( 'Some paragraph' ); + + await editor.clickBlockOptionsMenuItem( 'Lock' ); + + await page.click( 'role=checkbox[name="Lock all"]' ); + await page.click( 'role=button[name="Apply"]' ); + + await editor.clickBlockToolbarButton( 'Unlock Paragraph' ); + await page.click( 'role=checkbox[name="Lock all"]' ); + await page.click( 'role=button[name="Apply"]' ); + + expect( await editor.getEditedPostContent() ) + .toBe( ` +Some paragraph
+` ); + } ); + } ); +} );