diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js new file mode 100644 index 00000000000000..7e75fdb0f6c69c --- /dev/null +++ b/test/e2e/specs/editor/various/patterns.spec.js @@ -0,0 +1,76 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Unsynced pattern', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.deleteAllBlocks(); + } ); + + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test.afterEach( async ( { requestUtils } ) => { + await requestUtils.deleteAllBlocks(); + } ); + + test( 'create a new unsynced pattern via the block options menu', async ( { + editor, + page, + } ) => { + await editor.insertBlock( { + name: 'core/paragraph', + attributes: { content: 'A useful paragraph to reuse' }, + } ); + const before = await editor.getBlocks(); + + // Create an unsynced pattern from the paragraph block. + await editor.showBlockToolbar(); + await page + .getByRole( 'toolbar', { name: 'Block tools' } ) + .getByRole( 'button', { name: 'Options' } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click(); + + const createPatternDialog = page.getByRole( 'dialog', { + name: 'Create pattern', + } ); + await createPatternDialog + .getByRole( 'textbox', { name: 'Name' } ) + .fill( 'My unsynced pattern' ); + await createPatternDialog + .getByRole( 'checkbox', { name: 'Synced' } ) + .setChecked( false ); + + await page.keyboard.press( 'Enter' ); + + // Check that the block content is still the same. If the pattern was added as synced + // the content would be wrapped by a pattern block. + await expect + .poll( + editor.getBlocks, + 'The block content should be the same after converting to an unsynced pattern' + ) + .toEqual( before ); + + // Check that the new pattern is available in the inserter and that it gets inserted as + // a plain paragraph block. + await page.getByLabel( 'Toggle block inserter' ).click(); + await page + .getByRole( 'searchbox', { + name: 'Search for blocks and patterns', + } ) + .fill( 'My unsynced pattern' ); + await page.getByLabel( 'My unsynced pattern' ).click(); + + // Just compare the block name and content as the clientIDs will be different. + before.forEach( ( block ) => { + delete block.clientId; + } ); + await expect + .poll( editor.getBlocks ) + .toMatchObject( [ ...before, ...before ] ); + } ); +} );