From c8964e50e4b6e129fb77f846d520fb5021542626 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 9 Mar 2023 13:48:09 +0100 Subject: [PATCH] [RNMobile] Add block transforms integration tests for Container blocks (#48883) * Add Columns block transform tests * Add Group block transform tests --- .../__snapshots__/transforms.native.js.snap | 61 +++++++++++++ .../src/columns/test/transforms.native.js | 91 +++++++++++++++++++ .../__snapshots__/transforms.native.js.snap | 35 +++++++ .../src/group/test/transforms.native.js | 75 +++++++++++++++ 4 files changed, 262 insertions(+) create mode 100644 packages/block-library/src/columns/test/__snapshots__/transforms.native.js.snap create mode 100644 packages/block-library/src/columns/test/transforms.native.js create mode 100644 packages/block-library/src/group/test/__snapshots__/transforms.native.js.snap create mode 100644 packages/block-library/src/group/test/transforms.native.js diff --git a/packages/block-library/src/columns/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/columns/test/__snapshots__/transforms.native.js.snap new file mode 100644 index 00000000000000..ee8eb3d1a2b164 --- /dev/null +++ b/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`] = ` +" +
+
+
+

Built with modern technology.

+ + + +

Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.

+ + + +

Learn more

+
+ + + +
+

Designed for compatibility.

+ + + +

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.

+ + + +

Learn more

+
+
+
+" +`; + +exports[`Columns block transforms unwraps content 1`] = ` +" +

Built with modern technology.

+ + + +

Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.

+ + + +

Learn more

+ + + +

Designed for compatibility.

+ + + +

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.

+ + + +

Learn more

+" +`; diff --git a/packages/block-library/src/columns/test/transforms.native.js b/packages/block-library/src/columns/test/transforms.native.js new file mode 100644 index 00000000000000..12ae9d9c0829f2 --- /dev/null +++ b/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 = ` + +
+
+

Built with modern technology.

+ + + +

Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.

+ + + +

Learn more

+
+ + + +
+

Designed for compatibility.

+ + + +

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.

+ + + +

Learn more

+
+
+`; + +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 ); + } ); +} ); diff --git a/packages/block-library/src/group/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/group/test/__snapshots__/transforms.native.js.snap new file mode 100644 index 00000000000000..174bb9b52c2e11 --- /dev/null +++ b/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`] = ` +" +
+
+
+

One.

+ + + +

Two

+ + + +

Three.

+
+
+
+" +`; + +exports[`Group block transforms unwraps content 1`] = ` +" +

One.

+ + + +

Two

+ + + +

Three.

+" +`; diff --git a/packages/block-library/src/group/test/transforms.native.js b/packages/block-library/src/group/test/transforms.native.js new file mode 100644 index 00000000000000..d9540dc5c51d5f --- /dev/null +++ b/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 = ` + +
+

One.

+ + + +

Two

+ + + +

Three.

+
+`; + +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 ); + } ); +} );