Skip to content

[RNMobile] Add block transforms integration tests for Media blocks #48825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fluiddot merged 9 commits into from
Mar 9, 2023
Merged

[RNMobile] Add block transforms integration tests for Media blocks #48825

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
91824d9
Add Image block transform tests
fluiddot Mar 6, 2023
b86059e
Mock react-native-video component
fluiddot Mar 6, 2023
4c5800a
Add Video block transform tests
fluiddot Mar 6, 2023
b222346
Add Media & Text block transform tests
fluiddot Mar 6, 2023
ffe8fe8
Add Gallery block transform tests
fluiddot Mar 6, 2023
9502263
Add File block transform tests
fluiddot Mar 7, 2023
a5684b1
Add Audio block transform tests
fluiddot Mar 7, 2023
d3b4ec3
Include video block transform test case to Media & Text block
fluiddot Mar 8, 2023
6d1997c
Add Cover block transform tests
fluiddot Mar 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add Gallery block transform tests
  • Loading branch information
@fluiddot
fluiddot committed Mar 9, 2023
commit ffe8fe8b4cb595daac5a357032cf3b6dd88a1789
53 changes: 53 additions & 0 deletions packages/block-library/src/gallery/test/__snapshots__/transforms.native.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Gallery block transformations 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:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->"
`;

exports[`Gallery block transformations to Group block 1`] = `
"<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery --></div>
<!-- /wp:group -->"
`;

exports[`Gallery block transformations to Image block 1`] = `
"<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
<!-- /wp:image -->"
`;
52 changes: 52 additions & 0 deletions packages/block-library/src/gallery/test/transforms.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* External dependencies
*/
import {
getEditorHtml,
initializeEditor,
setupCoreBlocks,
transformBlock,
getBlockTransformOptions,
} from 'test/helpers';

const block = 'Gallery';
const initialHtml = `
<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->`;

const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
const blockTransforms = [ 'Image', ...tranformsWithInnerBlocks ];

setupCoreBlocks();

describe( `${ block } block transformations`, () => {
test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
const screen = await initializeEditor( { initialHtml } );
const newBlock = await transformBlock( screen, block, blockTransform, {
isMediaBlock: true,
hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
} );
expect( newBlock ).toBeVisible();
expect( getEditorHtml() ).toMatchSnapshot();
} );

it( 'matches expected transformation options', async () => {
const screen = await initializeEditor( { initialHtml } );
const transformOptions = await getBlockTransformOptions(
screen,
block
);
expect( transformOptions ).toHaveLength( blockTransforms.length );
} );
} );