From 0f2548e95f56be911b19a44133a77a38cfac95da Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 15 Sep 2022 13:11:10 +0200 Subject: [PATCH] [Mobile] - Social links block - Adds tests (#44152) * Mobile - Social links - Adds testID to placeholder * Mobile - Social links block - Adds tests --- .../src/social-links/edit.native.js | 8 +- .../test/__snapshots__/edit.native.js.snap | 57 +++++ .../src/social-links/test/edit.native.js | 199 ++++++++++++++++++ 3 files changed, 263 insertions(+), 1 deletion(-) create mode 100644 packages/block-library/src/social-links/test/__snapshots__/edit.native.js.snap create mode 100644 packages/block-library/src/social-links/test/edit.native.js diff --git a/packages/block-library/src/social-links/edit.native.js b/packages/block-library/src/social-links/edit.native.js index 2288f252cb83b..9a3b1bdc8694b 100644 --- a/packages/block-library/src/social-links/edit.native.js +++ b/packages/block-library/src/social-links/edit.native.js @@ -69,7 +69,13 @@ function SocialLinksEdit( { function renderPlaceholder() { return [ ...new Array( innerBlocks.length || 1 ) ].map( - ( _, index ) => + ( _, index ) => ( + + ) ); } diff --git a/packages/block-library/src/social-links/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/social-links/test/__snapshots__/edit.native.js.snap new file mode 100644 index 0000000000000..e1b9854d5f3e1 --- /dev/null +++ b/packages/block-library/src/social-links/test/__snapshots__/edit.native.js.snap @@ -0,0 +1,57 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Social links block inserts block with the default icons and the WordPress link set as active 1`] = ` +" +
    + + + + + +
+" +`; + +exports[`Social links block shows active links correctly when not selected 1`] = ` +" +
    + + + + + +
+ + + +

+" +`; + +exports[`Social links block shows the ghost placeholder when no icon is active 1`] = ` +" +
    + + + +
+ + + +

+" +`; + +exports[`Social links block shows the social links bottom sheet when tapping on the inline appender 1`] = ` +" +
    + + + + + + + +
+" +`; diff --git a/packages/block-library/src/social-links/test/edit.native.js b/packages/block-library/src/social-links/test/edit.native.js new file mode 100644 index 0000000000000..61ca35ca7c607 --- /dev/null +++ b/packages/block-library/src/social-links/test/edit.native.js @@ -0,0 +1,199 @@ +/** + * External dependencies + */ +import { + addBlock, + fireEvent, + getEditorHtml, + initializeEditor, + within, + getBlock, + waitFor, +} from 'test/helpers'; + +/** + * WordPress dependencies + */ +import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks'; +import { registerCoreBlocks } from '@wordpress/block-library'; + +beforeAll( () => { + // Register all core blocks + registerCoreBlocks(); +} ); + +afterAll( () => { + // Clean up registered blocks + getBlockTypes().forEach( ( block ) => { + unregisterBlockType( block.name ); + } ); +} ); + +describe( 'Social links block', () => { + it( 'inserts block with the default icons and the WordPress link set as active', async () => { + const screen = await initializeEditor(); + + // Add block + await addBlock( screen, 'Social Icons' ); + + // Get block + const socialLinksBlock = await getBlock( screen, 'Social Icons' ); + + // Trigger inner blocks layout + const innerBlockListWrapper = await waitFor( () => + within( socialLinksBlock ).getByTestId( 'block-list-wrapper' ) + ); + fireEvent( innerBlockListWrapper, 'layout', { + nativeEvent: { + layout: { + width: 300, + }, + }, + } ); + + // Check the WordPress icon has a URL set (active) + const firstLinkBlock = await getBlock( screen, 'Social Icon' ); + fireEvent.press( firstLinkBlock ); + const firstLink = within( socialLinksBlock ).getByAccessibilityHint( + /WordPress has URL set/ + ); + expect( firstLink ).toBeVisible(); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'shows active links correctly when not selected', async () => { + const screen = await initializeEditor(); + + // Add Social Icons block + await addBlock( screen, 'Social Icons' ); + + // Get block + const socialLinksBlock = await getBlock( screen, 'Social Icons' ); + + // Trigger inner blocks layout + const innerBlockListWrapper = await waitFor( () => + within( socialLinksBlock ).getByTestId( 'block-list-wrapper' ) + ); + fireEvent( innerBlockListWrapper, 'layout', { + nativeEvent: { + layout: { + width: 300, + }, + }, + } ); + + // Add Paragraph block + await addBlock( screen, 'Paragraph' ); + + // Check there's only one active social link + const socialLinks = + within( socialLinksBlock ).getAllByA11yLabel( / social icon/ ); + expect( socialLinks.length ).toBe( 1 ); + + // Check the WordPress link is shown when unselected + const firstLinkBlock = await getBlock( screen, 'Social Icon' ); + fireEvent.press( firstLinkBlock ); + const firstLink = within( socialLinksBlock ).getByAccessibilityHint( + /WordPress has URL set/ + ); + expect( firstLink ).toBeVisible(); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'shows the social links bottom sheet when tapping on the inline appender', async () => { + const screen = await initializeEditor(); + const { getByTestId, getByText } = screen; + + // Add block + await addBlock( screen, 'Social Icons' ); + + // Get block + const socialLinksBlock = await getBlock( screen, 'Social Icons' ); + fireEvent.press( socialLinksBlock ); + + // Trigger inner blocks layout + const innerBlockListWrapper = await waitFor( () => + within( socialLinksBlock ).getByTestId( 'block-list-wrapper' ) + ); + fireEvent( innerBlockListWrapper, 'layout', { + nativeEvent: { + layout: { + width: 300, + }, + }, + } ); + + // Open the links bottom sheet + const appenderButton = + within( socialLinksBlock ).getByTestId( 'appender-button' ); + fireEvent.press( appenderButton ); + + // Find a social link in the inserter + const blockList = getByTestId( 'InserterUI-Blocks' ); + + // onScroll event used to force the FlatList to render all items + fireEvent.scroll( blockList, { + nativeEvent: { + contentOffset: { y: 0, x: 0 }, + contentSize: { width: 100, height: 100 }, + layoutMeasurement: { width: 100, height: 100 }, + }, + } ); + + // Add the Amazon link + const amazonBlock = await waitFor( () => getByText( 'Amazon' ) ); + expect( amazonBlock ).toBeVisible(); + + fireEvent.press( amazonBlock ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'shows the ghost placeholder when no icon is active', async () => { + const screen = await initializeEditor(); + const { getByA11yLabel } = screen; + + // Add block + await addBlock( screen, 'Social Icons' ); + + // Get block + const socialLinksBlock = await getBlock( screen, 'Social Icons' ); + + // Trigger inner blocks layout + const innerBlockListWrapper = await waitFor( () => + within( socialLinksBlock ).getByTestId( 'block-list-wrapper' ) + ); + fireEvent( innerBlockListWrapper, 'layout', { + nativeEvent: { + layout: { + width: 300, + }, + }, + } ); + + // Get the first social link + const firstLinkBlock = await getBlock( screen, 'Social Icon' ); + fireEvent.press( firstLinkBlock ); + + // Open block actions menu + const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ ); + fireEvent.press( blockActionsButton ); + + // Delete the social link + const deleteButton = getByA11yLabel( /Remove block/ ); + fireEvent.press( deleteButton ); + + // Add Paragraph block + await addBlock( screen, 'Paragraph' ); + + // Check the ghost placeholders are visible + const socialLinks = within( socialLinksBlock ).getAllByTestId( + 'social-links-placeholder' + ); + expect( socialLinks.length ).toBe( 3 ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); +} );