test: Add List block merge test

- List blocks merge into other list blocks. - List blocks unwrap list items when merging into non-list blocks.
WordPress · Oct 19, 2022 · e9e4526 · e9e4526
1 parent 999d038
commit e9e4526
Showing 1 changed file with 102 additions and 3 deletions.
diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js
@@ -3,6 +3,7 @@
  */
 import {
 	changeTextOfRichText,
+	changeAndSelectTextOfRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
@@ -18,6 +19,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import { BACKSPACE } from '@wordpress/keycodes';
 
 describe( 'List block', () => {
 	beforeAll( () => {
@@ -210,7 +212,7 @@ describe( 'List block', () => {
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 2</li>
-		<!-- /wp:list-item -->	
+		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 3</li>
 		<!-- /wp:list-item --></ul>
@@ -238,7 +240,7 @@ describe( 'List block', () => {
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 2</li>
-		<!-- /wp:list-item -->	
+		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 3</li>
 		<!-- /wp:list-item --></ul>
@@ -277,7 +279,7 @@ describe( 'List block', () => {
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 2</li>
-		<!-- /wp:list-item -->	
+		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 3</li>
 		<!-- /wp:list-item --></ul>
@@ -311,4 +313,101 @@ describe( 'List block', () => {
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'merges with other lists', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li><!-- /wp:list-item --></ul>
+		<!-- /wp:list --><!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li><!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+
+		// Select List Item block
+		const listItemBlock = within( listBlock ).getByA11yLabel(
+			/List item Block\. Row 1/
+		);
+		fireEvent.press( listItemBlock );
+
+		// With cursor positioned at the beginning of the first List Item, press
+		// backward delete
+		const listItemField =
+			within( listItemBlock ).getByA11yLabel( /Text input. .*Two.*/ );
+		changeAndSelectTextOfRichText( listItemField, 'Two' );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+			"<!-- wp:list -->
+			<ul><!-- wp:list-item -->
+			<li>One</li>
+			<!-- /wp:list-item -->
+
+			<!-- wp:list-item -->
+			<li>Two</li>
+			<!-- /wp:list-item --></ul>
+			<!-- /wp:list -->"
+		` );
+	} );
+
+	it( 'unwraps list items when attempting to merge with non-list block', async () => {
+		const initialHtml = `<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li><!-- /wp:list-item --><!-- wp:list-item -->
+		<li>Two</li><!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+
+		// Select List Item block
+		const listItemBlock = within( listBlock ).getByA11yLabel(
+			/List item Block\. Row 1/
+		);
+		fireEvent.press( listItemBlock );
+
+		// With cursor positioned at the beginning of the first List Item, press
+		// backward delete
+		const listItemField =
+			within( listItemBlock ).getByA11yLabel( /Text input. .*One.*/ );
+		changeAndSelectTextOfRichText( listItemField, 'One' );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>One</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>Two</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );