Patterns: add a new spec for for adding an unsynced pattern (#54892)

* Add a new spec for for adding an unsynced pattern * Add additional check to make sure the new pattern gets inserted back in post as unsynced * Fix typo * Remove redundant label click * Changes from code review * Simplify the block comparison * Fix typo * Name the checkbox Co-authored-by: Kai Hao <[email protected]> * Fix linting * Fix and tweak test --------- Co-authored-by: Kai Hao <[email protected]> Co-authored-by: Kai Hao <[email protected]>
WordPress · Sep 28, 2023 · 232e37f · 232e37f
1 parent 88c8c66
commit 232e37f
Showing 1 changed file with 76 additions and 0 deletions.
diff --git a/test/e2e/specs/editor/various/patterns.spec.js 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 ] );
+	} );
+} );