[RNMobile] Add block transforms integration tests for Container blocks (

#48883)

* Add Columns block transform tests

* Add Group block transform tests

packages/block-library/src/columns/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Columns block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:columns {"className":"gutenberg-landing\\u002d\\u002ddevelopers-columns has-2-columns"} -->
+<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Columns block transforms unwraps content 1`] = `
+"<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph -->"
+`;

packages/block-library/src/columns/test/transforms.native.js

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlock,
+	openBlockActionsMenu,
+	fireEvent,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Columns';
+const initialHtml = `
+<!-- wp:columns {"className":"gutenberg-landing\u002d\u002ddevelopers-columns has-2-columns"} -->
+<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->`;
+
+const transformsWithInnerBlocks = [ 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'unwraps content', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const { getByText } = screen;
+		fireEvent.press( getBlock( screen, block ) );
+
+		await openBlockActionsMenu( screen );
+		fireEvent.press( getByText( 'Transform block…' ) );
+		fireEvent.press( getByText( 'Unwrap' ) );
+
+		// The first block created is the content of the Paragraph block.
+		const paragraph = getBlock( screen, 'Paragraph', 0 );
+		expect( paragraph ).toBeVisible();
+		// The second block created is the content of the citation element.
+		const citation = getBlock( screen, 'Paragraph', 1 );
+		expect( citation ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block,
+			{ canUnwrap: true }
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

packages/block-library/src/group/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Group block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:group -->
+<div id="this-is-another-anchor" class="wp-block-group"><!-- wp:paragraph -->
+<p>One.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Three.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Group block transforms unwraps content 1`] = `
+"<!-- wp:paragraph -->
+<p>One.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Three.</p>
+<!-- /wp:paragraph -->"
+`;

packages/block-library/src/group/test/transforms.native.js

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlock,
+	openBlockActionsMenu,
+	fireEvent,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Group';
+const initialHtml = `
+<!-- wp:group -->
+<div id="this-is-another-anchor" class="wp-block-group"><!-- wp:paragraph -->
+<p>One.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Three.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->`;
+
+const transformsWithInnerBlocks = [ 'Columns' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'unwraps content', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const { getByText } = screen;
+		fireEvent.press( getBlock( screen, block ) );
+
+		await openBlockActionsMenu( screen );
+		fireEvent.press( getByText( 'Transform block…' ) );
+		fireEvent.press( getByText( 'Unwrap' ) );
+
+		// The first block created is the content of the Paragraph block.
+		const paragraph = getBlock( screen, 'Paragraph', 0 );
+		expect( paragraph ).toBeVisible();
+		// The second block created is the content of the citation element.
+		const citation = getBlock( screen, 'Paragraph', 1 );
+		expect( citation ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block,
+			{ canUnwrap: true }
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );