From d69eca92579f73014573cca8c8357aa47e93b12c Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 11:49:24 +0100 Subject: [PATCH 01/33] Add test case: display media picker when selected --- .../src/gallery/test/index.native.js | 58 ++++++++++++++----- 1 file changed, 45 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index f91ef40aafa1ba..b7dcca66102f25 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -14,18 +14,7 @@ import { */ 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 ); - } ); -} ); +import { Platform } from '@wordpress/element'; const GALLERY_WITH_ONE_IMAGE = `
@@ -54,6 +43,18 @@ const addGalleryBlock = async () => { return screen; }; +beforeAll( () => { + // Register all core blocks + registerCoreBlocks(); +} ); + +afterAll( () => { + // Clean up registered blocks + getBlockTypes().forEach( ( block ) => { + unregisterBlockType( block.name ); + } ); +} ); + describe( 'Gallery block', () => { it( 'inserts block', async () => { const { getByA11yLabel } = await addGalleryBlock(); @@ -88,7 +89,7 @@ describe( 'Gallery block', () => { } ); const galleryItem = await waitFor( () => - getByA11yLabel( /Image Block\. Row 1/ ) + within( galleryBlock ).getByA11yLabel( /Image Block\. Row 1/ ) ); fireEvent.press( galleryItem ); @@ -125,4 +126,35 @@ describe( 'Gallery block', () => { expect( getByText( 'Take a Photo' ) ).toBeDefined(); expect( getByText( 'WordPress Media Library' ) ).toBeDefined(); } ); + + // This case is disabled until the issue (https://github.com/WordPress/gutenberg/issues/38444) + // is addressed. + it.skip( 'displays media options picker when selecting the block', () => { + // Initialize with an empty gallery + const { getByA11yLabel, getByText, getByTestId } = initializeEditor( { + initialHtml: ` +
+ `, + } ); + + // Tap on Gallery block + fireEvent.press( getByText( 'ADD MEDIA' ) ); + + // Observe that media options picker is displayed + expect( getByText( 'Choose images' ) ).toBeDefined(); + expect( getByText( 'WordPress Media Library' ) ).toBeDefined(); + + // Dimiss the picker + if ( Platform.isIOS ) { + fireEvent.press( getByText( 'Cancel' ) ); + } else { + const mediaPicker = getByTestId( 'media-options-picker' ); + fireEvent( mediaPicker, 'backdropPress' ); + } + + // Observe that the block is selected, this is done by checking if the block settings + // button is visible + const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ ); + expect( blockActionsButton ).toBeVisible(); + } ); } ); From 6517cf976bb39c27c035ab640f7b85bb02db2b6c Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 11:54:33 +0100 Subject: [PATCH 02/33] Add initializeWithGalleryBlock helper --- .../src/gallery/test/index.native.js | 64 ++++++++----------- 1 file changed, 28 insertions(+), 36 deletions(-) diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index b7dcca66102f25..8a0f70d7817b89 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -43,6 +43,26 @@ const addGalleryBlock = async () => { return screen; }; +const initializeWithGalleryBlock = async ( initialHtml ) => { + const screen = initializeEditor( { initialHtml } ); + const { getByA11yLabel } = screen; + + const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ ); + + const innerBlockListWrapper = await waitFor( () => + within( galleryBlock ).getByTestId( 'block-list-wrapper' ) + ); + fireEvent( innerBlockListWrapper, 'layout', { + nativeEvent: { + layout: { + width: 100, + }, + }, + } ); + + return { ...screen, galleryBlock }; +}; + beforeAll( () => { // Register all core blocks registerCoreBlocks(); @@ -63,59 +83,31 @@ describe( 'Gallery block', () => { getByA11yLabel( /Gallery Block\. Row 1/ ) ); - expect( galleryBlock ).toHaveProperty( 'type', 'View' ); + expect( galleryBlock ).toBeVisible(); expect( getEditorHtml() ).toMatchSnapshot(); } ); it( 'selects a gallery item', async () => { - const { getByA11yLabel } = initializeEditor( { - initialHtml: GALLERY_WITH_ONE_IMAGE, - } ); - - const galleryBlock = await waitFor( () => - getByA11yLabel( /Gallery Block\. Row 1/ ) + const { galleryBlock } = await initializeWithGalleryBlock( + GALLERY_WITH_ONE_IMAGE ); - fireEvent.press( galleryBlock ); - const innerBlockListWrapper = await waitFor( () => - within( galleryBlock ).getByTestId( 'block-list-wrapper' ) - ); - fireEvent( innerBlockListWrapper, 'layout', { - nativeEvent: { - layout: { - width: 100, - }, - }, - } ); + fireEvent.press( galleryBlock ); const galleryItem = await waitFor( () => within( galleryBlock ).getByA11yLabel( /Image Block\. Row 1/ ) ); fireEvent.press( galleryItem ); - expect( galleryItem ).toHaveProperty( 'type', 'View' ); + expect( galleryItem ).toBeVisible(); } ); it( 'shows appender button when gallery has images', async () => { - const { getByA11yLabel, getByText } = initializeEditor( { - initialHtml: GALLERY_WITH_ONE_IMAGE, - } ); - - const galleryBlock = await waitFor( () => - getByA11yLabel( /Gallery Block\. Row 1/ ) + const { galleryBlock, getByText } = await initializeWithGalleryBlock( + GALLERY_WITH_ONE_IMAGE ); - fireEvent.press( galleryBlock ); - const innerBlockListWrapper = await waitFor( () => - within( galleryBlock ).getByTestId( 'block-list-wrapper' ) - ); - fireEvent( innerBlockListWrapper, 'layout', { - nativeEvent: { - layout: { - width: 100, - }, - }, - } ); + fireEvent.press( galleryBlock ); const appenderButton = await waitFor( () => within( galleryBlock ).getByA11yLabel( /Gallery block\. Empty/ ) From 2892cb66e9daadce1ea2fa346653599a05866ce4 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 12:01:34 +0100 Subject: [PATCH 03/33] Add test case for partially covering TC001 manual test --- .../src/components/index.native.js | 8 +- .../components/media-upload/index.native.js | 1 + .../test/__snapshots__/index.native.js.snap | 12 +++ .../src/gallery/test/index.native.js | 87 +++++++++++++++++++ 4 files changed, 107 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 92324fd010f6d2..4cf85db829050d 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -44,7 +44,13 @@ export { MEDIA_TYPE_AUDIO, MEDIA_TYPE_ANY, } from './media-upload'; -export { default as MediaUploadProgress } from './media-upload-progress'; +export { + default as MediaUploadProgress, + MEDIA_UPLOAD_STATE_UPLOADING, + MEDIA_UPLOAD_STATE_SUCCEEDED, + MEDIA_UPLOAD_STATE_FAILED, + MEDIA_UPLOAD_STATE_RESET, +} from './media-upload-progress'; export { default as BlockMediaUpdateProgress } from './block-media-update-progress'; export { default as URLInput } from './url-input'; export { default as BlockInvalidWarning } from './block-list/block-invalid-warning'; diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index 543fa79283e9d3..0ac6da1c38185f 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -294,6 +294,7 @@ export class MediaUpload extends Component { ref={ ( instance ) => ( this.picker = instance ) } options={ this.getMediaOptionsItems() } onChange={ this.onPickerSelect } + testID="media-options-picker" /> ); diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index eadf547a190f01..d384aa29cfe170 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -1,5 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Gallery block finishes pending uploads upon opening editor (TC001 - Close/Re-open post with an ongoing image upload) 1`] = ` +" +
+
\\"\\"
+ + + +
\\"\\"
+
+" +`; + exports[`Gallery block inserts block 1`] = ` "
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 8a0f70d7817b89..bacac6f51220fa 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -2,6 +2,7 @@ * External dependencies */ import { + act, getEditorHtml, initializeEditor, fireEvent, @@ -15,6 +16,11 @@ import { import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks'; import { registerCoreBlocks } from '@wordpress/block-library'; import { Platform } from '@wordpress/element'; +import { + MEDIA_UPLOAD_STATE_UPLOADING, + MEDIA_UPLOAD_STATE_SUCCEEDED, +} from '@wordpress/block-editor'; +import { subscribeMediaUpload } from '@wordpress/react-native-bridge'; const GALLERY_WITH_ONE_IMAGE = `
@@ -149,4 +155,85 @@ describe( 'Gallery block', () => { const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ ); expect( blockActionsButton ).toBeVisible(); } ); + + it( 'finishes pending uploads upon opening the editor (TC001 - Close/Re-open post with an ongoing image upload)', async () => { + const MEDIA = [ + { + localId: 1, + localUrl: 'file:///local-image-1.jpeg', + serverId: 2000, + serverUrl: + 'https://test-site.files.wordpress.com/local-image-1.jpeg', + }, + { + localId: 2, + localUrl: 'file:///local-image-2.jpeg', + serverId: 2001, + serverUrl: + 'https://test-site.files.wordpress.com/local-image-2.jpeg', + }, + ]; + + const mediaUploadListeners = []; + subscribeMediaUpload.mockImplementation( ( callback ) => { + mediaUploadListeners.push( callback ); + } ); + const triggerMediaUpload = ( payload ) => + mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); + + // Initialize with a gallery that contains two items that are being uploaded + const { + galleryBlock, + } = await initializeWithGalleryBlock( ` +
+
+ + + +
+
+ ` ); + + // Notify that the media items are uploading + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 0 ].localId, + progress: 0.5, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 1 ].localId, + progress: 0.25, + } ); + } ); + + // Check that images are showing a loading state + const galleryItem1 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 1/ + ); + const galleryItem2 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 2/ + ); + expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); + expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); + + // Notify that the media items upload succeeded + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: MEDIA[ 0 ].localId, + mediaUrl: MEDIA[ 0 ].serverUrl, + mediaServerId: MEDIA[ 0 ].serverId, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: MEDIA[ 1 ].localId, + mediaUrl: MEDIA[ 1 ].serverUrl, + mediaServerId: MEDIA[ 1 ].serverId, + } ); + } ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From feb9315d06b59f1960635e361dd17e23272c8069 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 12:42:37 +0100 Subject: [PATCH 04/33] Add caption test cases --- .../test/__snapshots__/index.native.js.snap | 18 +++++- .../src/gallery/test/index.native.js | 64 +++++++++++++++++++ 2 files changed, 81 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index d384aa29cfe170..78475e796762cc 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Gallery block finishes pending uploads upon opening editor (TC001 - Close/Re-open post with an ongoing image upload) 1`] = ` +exports[`Gallery block finishes pending uploads upon opening the editor (TC001 - Close/Re-open post with an ongoing image upload) 1`] = ` "
\\"\\"
@@ -17,3 +17,19 @@ exports[`Gallery block inserts block 1`] = `
" `; + +exports[`Gallery block sets caption to gallery (TC003 - Add caption to gallery) 1`] = ` +" +
+
\\"\\"
+
Bold italic strikethrough gallery caption
+" +`; + +exports[`Gallery block sets caption to gallery items (TC004 - Add caption to gallery images) 1`] = ` +" +
+
\\"\\"
Bold italic strikethrough image caption
+
+" +`; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index bacac6f51220fa..0b6ba95411a084 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -236,4 +236,68 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'sets caption to gallery (TC003 - Add caption to gallery)', async () => { + // Initialize with a gallery that contains one item + const { + galleryBlock, + getByA11yLabel, + } = await initializeWithGalleryBlock( GALLERY_WITH_ONE_IMAGE ); + + // Select block + fireEvent.press( galleryBlock ); + + // Check gallery item caption is not visible + const galleryItemCaption = getByA11yLabel( /Image caption. Empty/ ); + expect( galleryItemCaption ).not.toBeVisible(); + + // Set gallery caption + const galleryCaption = getByA11yLabel( /Gallery caption. Empty/ ); + const captionField = within( galleryCaption ).getByPlaceholderText( + 'Add caption' + ); + fireEvent( captionField, 'focus' ); + fireEvent( captionField, 'onChange', { + nativeEvent: { + eventCount: 1, + target: undefined, + text: + 'Bold italic strikethrough gallery caption', + }, + } ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + + it( 'sets caption to gallery items (TC004 - Add caption to gallery images)', async () => { + // Initialize with a gallery that contains one item + const { galleryBlock } = await initializeWithGalleryBlock( + GALLERY_WITH_ONE_IMAGE + ); + + // Select block + fireEvent.press( galleryBlock ); + + // Select gallery item + const galleryItem = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 1/ + ); + fireEvent.press( galleryItem ); + + // Set gallery item caption + const captionField = within( galleryItem ).getByPlaceholderText( + 'Add caption' + ); + fireEvent( captionField, 'focus' ); + fireEvent( captionField, 'onChange', { + nativeEvent: { + eventCount: 1, + target: undefined, + text: + 'Bold italic strikethrough image caption', + }, + } ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From 90a53e65efa7f1e1304de30b5384052aee788f47 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 13:32:25 +0100 Subject: [PATCH 05/33] Make initializeWithGalleryBlock synchronous --- .../src/gallery/test/index.native.js | 88 ++++++++++--------- 1 file changed, 47 insertions(+), 41 deletions(-) diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 0b6ba95411a084..7245dfdc22be77 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -22,12 +22,31 @@ import { } from '@wordpress/block-editor'; import { subscribeMediaUpload } from '@wordpress/react-native-bridge'; +const GALLERY_EMPTY = ` +
+`; + const GALLERY_WITH_ONE_IMAGE = `
`; +const MEDIA = [ + { + localId: 1, + localUrl: 'file:///local-image-1.jpeg', + serverId: 2000, + serverUrl: 'https://test-site.files.wordpress.com/local-image-1.jpeg', + }, + { + localId: 2, + localUrl: 'file:///local-image-2.jpeg', + serverId: 2001, + serverUrl: 'https://test-site.files.wordpress.com/local-image-2.jpeg', + }, +]; + const addGalleryBlock = async () => { const screen = initializeEditor(); const { getByA11yLabel, getByTestId, getByText } = screen; @@ -49,22 +68,28 @@ const addGalleryBlock = async () => { return screen; }; -const initializeWithGalleryBlock = async ( initialHtml ) => { +const initializeWithGalleryBlock = ( + initialHtml, + { hasItems = true } = {} +) => { const screen = initializeEditor( { initialHtml } ); const { getByA11yLabel } = screen; const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ ); - const innerBlockListWrapper = await waitFor( () => - within( galleryBlock ).getByTestId( 'block-list-wrapper' ) - ); - fireEvent( innerBlockListWrapper, 'layout', { - nativeEvent: { - layout: { - width: 100, - }, - }, - } ); + if ( hasItems ) { + fireEvent( + within( galleryBlock ).getByTestId( 'block-list-wrapper' ), + 'layout', + { + nativeEvent: { + layout: { + width: 100, + }, + }, + } + ); + } return { ...screen, galleryBlock }; }; @@ -94,7 +119,7 @@ describe( 'Gallery block', () => { } ); it( 'selects a gallery item', async () => { - const { galleryBlock } = await initializeWithGalleryBlock( + const { galleryBlock } = initializeWithGalleryBlock( GALLERY_WITH_ONE_IMAGE ); @@ -109,7 +134,7 @@ describe( 'Gallery block', () => { } ); it( 'shows appender button when gallery has images', async () => { - const { galleryBlock, getByText } = await initializeWithGalleryBlock( + const { galleryBlock, getByText } = initializeWithGalleryBlock( GALLERY_WITH_ONE_IMAGE ); @@ -130,9 +155,7 @@ describe( 'Gallery block', () => { it.skip( 'displays media options picker when selecting the block', () => { // Initialize with an empty gallery const { getByA11yLabel, getByText, getByTestId } = initializeEditor( { - initialHtml: ` -
- `, + initialHtml: GALLERY_EMPTY, } ); // Tap on Gallery block @@ -157,26 +180,10 @@ describe( 'Gallery block', () => { } ); it( 'finishes pending uploads upon opening the editor (TC001 - Close/Re-open post with an ongoing image upload)', async () => { - const MEDIA = [ - { - localId: 1, - localUrl: 'file:///local-image-1.jpeg', - serverId: 2000, - serverUrl: - 'https://test-site.files.wordpress.com/local-image-1.jpeg', - }, - { - localId: 2, - localUrl: 'file:///local-image-2.jpeg', - serverId: 2001, - serverUrl: - 'https://test-site.files.wordpress.com/local-image-2.jpeg', - }, - ]; - const mediaUploadListeners = []; subscribeMediaUpload.mockImplementation( ( callback ) => { mediaUploadListeners.push( callback ); + return { remove: jest.fn() }; } ); const triggerMediaUpload = ( payload ) => mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); @@ -184,7 +191,7 @@ describe( 'Gallery block', () => { // Initialize with a gallery that contains two items that are being uploaded const { galleryBlock, - } = await initializeWithGalleryBlock( ` + } = initializeWithGalleryBlock( `
@@ -237,12 +244,11 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'sets caption to gallery (TC003 - Add caption to gallery)', async () => { + it( 'sets caption to gallery (TC003 - Add caption to gallery)', () => { // Initialize with a gallery that contains one item - const { - galleryBlock, - getByA11yLabel, - } = await initializeWithGalleryBlock( GALLERY_WITH_ONE_IMAGE ); + const { galleryBlock, getByA11yLabel } = initializeWithGalleryBlock( + GALLERY_WITH_ONE_IMAGE + ); // Select block fireEvent.press( galleryBlock ); @@ -269,9 +275,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'sets caption to gallery items (TC004 - Add caption to gallery images)', async () => { + it( 'sets caption to gallery items (TC004 - Add caption to gallery images)', () => { // Initialize with a gallery that contains one item - const { galleryBlock } = await initializeWithGalleryBlock( + const { galleryBlock } = initializeWithGalleryBlock( GALLERY_WITH_ONE_IMAGE ); From 71fd147453f00bc4928570bcb3c345937977e40e Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 13:34:16 +0100 Subject: [PATCH 06/33] Add test case: successfully uploads items --- .../test/__snapshots__/index.native.js.snap | 12 ++ .../src/gallery/test/index.native.js | 111 +++++++++++++++++- 2 files changed, 122 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 78475e796762cc..0cb7771da96f26 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -33,3 +33,15 @@ exports[`Gallery block sets caption to gallery items (TC004 - Add caption to gal
" `; + +exports[`Gallery block successfully upload items (TC005 - Choose from device (stay in editor) - Successful upload) 1`] = ` +" +
+
\\"\\"
+ + + +
\\"\\"
+
+" +`; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 7245dfdc22be77..bda121bf7693f8 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -20,7 +20,10 @@ import { MEDIA_UPLOAD_STATE_UPLOADING, MEDIA_UPLOAD_STATE_SUCCEEDED, } from '@wordpress/block-editor'; -import { subscribeMediaUpload } from '@wordpress/react-native-bridge'; +import { + requestMediaPicker, + subscribeMediaUpload, +} from '@wordpress/react-native-bridge'; const GALLERY_EMPTY = `
@@ -306,4 +309,110 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'successfully uploads items (TC005 - Choose from device (stay in editor) - Successful upload)', async () => { + const mediaUploadListeners = []; + subscribeMediaUpload.mockImplementation( ( callback ) => { + mediaUploadListeners.push( callback ); + return { remove: jest.fn() }; + } ); + const triggerMediaUpload = ( payload ) => + mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); + + let mediaPickerCallback; + requestMediaPicker.mockImplementation( + ( source, filter, multiple, callback ) => { + mediaPickerCallback = callback; + } + ); + + // Initialize with an empty gallery + const { galleryBlock, getByText } = initializeWithGalleryBlock( + GALLERY_EMPTY, + { + hasItems: false, + } + ); + + // Upload images from device + fireEvent.press( getByText( 'ADD MEDIA' ) ); + fireEvent.press( getByText( 'Choose from device' ) ); + expect( requestMediaPicker ).toHaveBeenCalledWith( + 'DEVICE_MEDIA_LIBRARY', + [ 'image' ], + true, + mediaPickerCallback + ); + + // Return media items picked + await act( async () => + mediaPickerCallback( [ + { + type: 'image', + url: MEDIA[ 0 ].localUrl, + id: MEDIA[ 0 ].localId, + }, + { + type: 'image', + url: MEDIA[ 1 ].localUrl, + id: MEDIA[ 1 ].localId, + }, + ] ) + ); + + // Check that gallery items are visible + fireEvent( + within( galleryBlock ).getByTestId( 'block-list-wrapper' ), + 'layout', + { + nativeEvent: { + layout: { + width: 100, + }, + }, + } + ); + const galleryItem1 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 1/ + ); + const galleryItem2 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 2/ + ); + expect( galleryItem1 ).toBeVisible(); + expect( galleryItem2 ).toBeVisible(); + + // Check that images are showing a loading state + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 0 ].localId, + progress: 0.5, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 1 ].localId, + progress: 0.25, + } ); + } ); + expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); + expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); + + // Notify that the media items upload succeeded + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: MEDIA[ 0 ].localId, + mediaUrl: MEDIA[ 0 ].serverUrl, + mediaServerId: MEDIA[ 0 ].serverId, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: MEDIA[ 1 ].localId, + mediaUrl: MEDIA[ 1 ].serverUrl, + mediaServerId: MEDIA[ 1 ].serverId, + } ); + } ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From 98ef4082da7c4148fbad065bcc21632ce0935d41 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 13:44:12 +0100 Subject: [PATCH 07/33] Add test case: takes a photo --- .../test/__snapshots__/index.native.js.snap | 10 ++- .../src/gallery/test/index.native.js | 85 +++++++++++++++++++ 2 files changed, 94 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 0cb7771da96f26..82b75eec0b1784 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -34,7 +34,7 @@ exports[`Gallery block sets caption to gallery items (TC004 - Add caption to gal " `; -exports[`Gallery block successfully upload items (TC005 - Choose from device (stay in editor) - Successful upload) 1`] = ` +exports[`Gallery block successfully uploads items (TC005 - Choose from device (stay in editor) - Successful upload) 1`] = ` "
\\"\\"
@@ -45,3 +45,11 @@ exports[`Gallery block successfully upload items (TC005 - Choose from device (st
" `; + +exports[`Gallery block takes a photo (TC007 - Take a photo) 1`] = ` +" +
+
\\"\\"
+
+" +`; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index bda121bf7693f8..8b294e9607f893 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -415,4 +415,89 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'takes a photo (TC007 - Take a photo)', async () => { + const mediaUploadListeners = []; + subscribeMediaUpload.mockImplementation( ( callback ) => { + mediaUploadListeners.push( callback ); + return { remove: jest.fn() }; + } ); + const triggerMediaUpload = ( payload ) => + mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); + + let mediaPickerCallback; + requestMediaPicker.mockImplementation( + ( source, filter, multiple, callback ) => { + mediaPickerCallback = callback; + } + ); + + // Initialize with an empty gallery + const { galleryBlock, getByText } = initializeWithGalleryBlock( + GALLERY_EMPTY, + { + hasItems: false, + } + ); + + // Take a photo + fireEvent.press( getByText( 'ADD MEDIA' ) ); + fireEvent.press( getByText( 'Take a Photo' ) ); + expect( requestMediaPicker ).toHaveBeenCalledWith( + 'DEVICE_CAMERA', + [ 'image' ], + true, + mediaPickerCallback + ); + + // Return media item from photo taken + await act( async () => + mediaPickerCallback( [ + { + type: 'image', + url: MEDIA[ 0 ].localUrl, + id: MEDIA[ 0 ].localId, + }, + ] ) + ); + + // Check gallery item is visible + fireEvent( + within( galleryBlock ).getByTestId( 'block-list-wrapper' ), + 'layout', + { + nativeEvent: { + layout: { + width: 100, + }, + }, + } + ); + const galleryItem = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 1/ + ); + expect( galleryItem ).toBeVisible(); + + // Check image is showing a loading state + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 0 ].localId, + progress: 0.5, + } ); + } ); + expect( within( galleryItem ).getByTestId( 'spinner' ) ).toBeVisible(); + + // Notify that the media item upload succeeded + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: MEDIA[ 0 ].localId, + mediaUrl: MEDIA[ 0 ].serverUrl, + mediaServerId: MEDIA[ 0 ].serverId, + } ); + } ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From 70739186e08a78427cec9f03ce495e92233113b6 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 13:57:23 +0100 Subject: [PATCH 08/33] Add test case: handles failed uploads --- .../test/__snapshots__/index.native.js.snap | 12 ++ .../src/gallery/test/index.native.js | 111 ++++++++++++++++++ 2 files changed, 123 insertions(+) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 82b75eec0b1784..56748e893cf64c 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -12,6 +12,18 @@ exports[`Gallery block finishes pending uploads upon opening the editor (TC001 - " `; +exports[`Gallery block handles failed uploads items (TC006 - Choose from device (stay in editor) - Failed upload) 1`] = ` +" +
+
\\"\\"
+ + + +
\\"\\"
+
+" +`; + exports[`Gallery block inserts block 1`] = ` "
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 8b294e9607f893..13e36004a6998c 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -19,6 +19,7 @@ import { Platform } from '@wordpress/element'; import { MEDIA_UPLOAD_STATE_UPLOADING, MEDIA_UPLOAD_STATE_SUCCEEDED, + MEDIA_UPLOAD_STATE_FAILED, } from '@wordpress/block-editor'; import { requestMediaPicker, @@ -416,6 +417,116 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + it( 'handles failed uploads (TC006 - Choose from device (stay in editor) - Failed upload)', async () => { + const mediaUploadListeners = []; + subscribeMediaUpload.mockImplementation( ( callback ) => { + mediaUploadListeners.push( callback ); + return { remove: jest.fn() }; + } ); + const triggerMediaUpload = ( payload ) => + mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); + + let mediaPickerCallback; + requestMediaPicker.mockImplementation( + ( source, filter, multiple, callback ) => { + mediaPickerCallback = callback; + } + ); + + // Initialize with an empty gallery + const { galleryBlock, getByText } = initializeWithGalleryBlock( + GALLERY_EMPTY, + { + hasItems: false, + } + ); + + // Upload images from device + fireEvent.press( getByText( 'ADD MEDIA' ) ); + fireEvent.press( getByText( 'Choose from device' ) ); + expect( requestMediaPicker ).toHaveBeenCalledWith( + 'DEVICE_MEDIA_LIBRARY', + [ 'image' ], + true, + mediaPickerCallback + ); + + // Return media items picked + await act( async () => + mediaPickerCallback( [ + { + type: 'image', + url: MEDIA[ 0 ].localUrl, + id: MEDIA[ 0 ].localId, + }, + { + type: 'image', + url: MEDIA[ 1 ].localUrl, + id: MEDIA[ 1 ].localId, + }, + ] ) + ); + + // Check that gallery items are visible + fireEvent( + within( galleryBlock ).getByTestId( 'block-list-wrapper' ), + 'layout', + { + nativeEvent: { + layout: { + width: 100, + }, + }, + } + ); + const galleryItem1 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 1/ + ); + const galleryItem2 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 2/ + ); + expect( galleryItem1 ).toBeVisible(); + expect( galleryItem2 ).toBeVisible(); + + // Check that images are showing a loading state + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 0 ].localId, + progress: 0.5, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 1 ].localId, + progress: 0.25, + } ); + } ); + expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); + expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); + + // Notify that the media items uploads failed + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_FAILED, + mediaId: MEDIA[ 0 ].localId, + progress: 0.5, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_FAILED, + mediaId: MEDIA[ 1 ].localId, + progress: 0.25, + } ); + } ); + + expect( + within( galleryItem1 ).getByText( /Failed to insert media/ ) + ).toBeVisible(); + expect( + within( galleryItem2 ).getByText( /Failed to insert media/ ) + ).toBeVisible(); + expect( getEditorHtml() ).toMatchSnapshot(); + } ); + it( 'takes a photo (TC007 - Take a photo)', async () => { const mediaUploadListeners = []; subscribeMediaUpload.mockImplementation( ( callback ) => { From 04c26b723561c1437530cca195b685cd33a0e2e9 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 16:33:14 +0100 Subject: [PATCH 09/33] Check failed images provide retry option --- .../test/__snapshots__/index.native.js.snap | 2 +- .../src/gallery/test/index.native.js | 20 +++++++++++++++---- test/native/setup.js | 1 + 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 56748e893cf64c..4e6cfa109bdbe2 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -12,7 +12,7 @@ exports[`Gallery block finishes pending uploads upon opening the editor (TC001 - " `; -exports[`Gallery block handles failed uploads items (TC006 - Choose from device (stay in editor) - Failed upload) 1`] = ` +exports[`Gallery block handles failed uploads (TC006 - Choose from device (stay in editor) - Failed upload) 1`] = ` "
\\"\\"
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 13e36004a6998c..a2d3776528add0 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -23,6 +23,7 @@ import { } from '@wordpress/block-editor'; import { requestMediaPicker, + requestImageFailedRetryDialog, subscribeMediaUpload, } from '@wordpress/react-native-bridge'; @@ -440,6 +441,7 @@ describe( 'Gallery block', () => { hasItems: false, } ); + fireEvent.press( galleryBlock ); // Upload images from device fireEvent.press( getByText( 'ADD MEDIA' ) ); @@ -518,12 +520,22 @@ describe( 'Gallery block', () => { } ); } ); - expect( + // Check that failed images provide the option to retry the upload + fireEvent.press( galleryItem1 ); + fireEvent.press( within( galleryItem1 ).getByText( /Failed to insert media/ ) - ).toBeVisible(); - expect( + ); + expect( requestImageFailedRetryDialog ).toHaveBeenCalledWith( + MEDIA[ 0 ].localId + ); + fireEvent.press( galleryItem2 ); + fireEvent.press( within( galleryItem2 ).getByText( /Failed to insert media/ ) - ).toBeVisible(); + ); + expect( requestImageFailedRetryDialog ).toHaveBeenCalledWith( + MEDIA[ 1 ].localId + ); + expect( getEditorHtml() ).toMatchSnapshot(); } ); diff --git a/test/native/setup.js b/test/native/setup.js index 7cfe77287523ed..779e6cb52a6f9c 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -80,6 +80,7 @@ jest.mock( '@wordpress/react-native-bridge', () => { subscribeMediaSave: jest.fn(), getOtherMediaOptions: jest.fn(), provideToNative_Html: jest.fn(), + requestImageFailedRetryDialog: jest.fn(), requestMediaEditor: jest.fn(), requestMediaPicker: jest.fn(), requestUnsupportedBlockFallback: jest.fn(), From 75c08538bcc0f69db5c265a48362324ee09a6224 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 17:05:05 +0100 Subject: [PATCH 10/33] Add test case: uploads from free photo library --- .../test/__snapshots__/index.native.js.snap | 12 ++ .../src/gallery/test/index.native.js | 126 ++++++++++++++++++ 2 files changed, 138 insertions(+) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 4e6cfa109bdbe2..2d47518f65c359 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -65,3 +65,15 @@ exports[`Gallery block takes a photo (TC007 - Take a photo) 1`] = `
" `; + +exports[`Gallery block uploads from free photo library (TC008 - Choose from the free photo library) 1`] = ` +" +
+
\\"\\"
+ + + +
\\"\\"
+
+" +`; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index a2d3776528add0..80fa5c79c318a6 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -22,6 +22,7 @@ import { MEDIA_UPLOAD_STATE_FAILED, } from '@wordpress/block-editor'; import { + getOtherMediaOptions, requestMediaPicker, requestImageFailedRetryDialog, subscribeMediaUpload, @@ -623,4 +624,129 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'uploads from free photo library (TC008 - Choose from the free photo library)', async () => { + const mediaUploadListeners = []; + subscribeMediaUpload.mockImplementation( ( callback ) => { + mediaUploadListeners.push( callback ); + return { remove: jest.fn() }; + } ); + const triggerMediaUpload = ( payload ) => + mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); + + let mediaPickerCallback; + requestMediaPicker.mockImplementation( + ( source, filter, multiple, callback ) => { + mediaPickerCallback = callback; + } + ); + + let otherMediaOptionsCallback; + getOtherMediaOptions.mockImplementation( ( filter, callback ) => { + otherMediaOptionsCallback = callback; + } ); + + // Initialize with an empty gallery + const { galleryBlock, getByText } = initializeWithGalleryBlock( + GALLERY_EMPTY, + { + hasItems: false, + } + ); + + // Notify other media options + act( () => + otherMediaOptionsCallback( [ + { + label: 'Free Photo Library', + value: 'wpios-stock-photo-library', + }, + { label: 'Free GIF Library', value: 'wpios-tenor' }, + { label: 'Other Apps', value: 'wpios-other-files' }, + ] ) + ); + + // Upload images from free photo library + fireEvent.press( getByText( 'ADD MEDIA' ) ); + fireEvent.press( getByText( 'Free Photo Library' ) ); + expect( requestMediaPicker ).toHaveBeenCalledWith( + 'wpios-stock-photo-library', + [ 'image' ], + true, + mediaPickerCallback + ); + + // Return media items picked + await act( async () => + mediaPickerCallback( [ + { + type: 'image', + url: + 'https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg', + id: MEDIA[ 0 ].localId, + }, + { + type: 'image', + url: + 'https://images.pexels.com/photos/2150/sky-space-dark-galaxy.jpg', + id: MEDIA[ 1 ].localId, + }, + ] ) + ); + + // Check that gallery items are visible + fireEvent( + within( galleryBlock ).getByTestId( 'block-list-wrapper' ), + 'layout', + { + nativeEvent: { + layout: { + width: 100, + }, + }, + } + ); + const galleryItem1 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 1/ + ); + const galleryItem2 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 2/ + ); + expect( galleryItem1 ).toBeVisible(); + expect( galleryItem2 ).toBeVisible(); + + // Check that images are showing a loading state + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 0 ].localId, + progress: 0.5, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 1 ].localId, + progress: 0.25, + } ); + } ); + expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); + expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); + + // Notify that the media items upload succeeded + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: MEDIA[ 0 ].localId, + mediaUrl: MEDIA[ 0 ].serverUrl, + mediaServerId: MEDIA[ 0 ].serverId, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: MEDIA[ 1 ].localId, + mediaUrl: MEDIA[ 1 ].serverUrl, + mediaServerId: MEDIA[ 1 ].serverId, + } ); + } ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From bd5bee574067fbeb437fa3bfe5e0cf57e5e771ee Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 17:06:36 +0100 Subject: [PATCH 11/33] Add test case: cancel uploads --- .../test/__snapshots__/index.native.js.snap | 12 ++ .../src/gallery/test/index.native.js | 120 ++++++++++++++++++ test/native/setup.js | 1 + 3 files changed, 133 insertions(+) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 2d47518f65c359..2e3e520666f5b7 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -1,5 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Gallery block cancels uploads (TC009 - Choose from device (stay in editor) - Cancel upload) 1`] = ` +" +
+
\\"\\"/
+ + + +
\\"\\"/
+
+" +`; + exports[`Gallery block finishes pending uploads upon opening the editor (TC001 - Close/Re-open post with an ongoing image upload) 1`] = ` "
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 80fa5c79c318a6..36bb8eab33c536 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -20,11 +20,13 @@ import { MEDIA_UPLOAD_STATE_UPLOADING, MEDIA_UPLOAD_STATE_SUCCEEDED, MEDIA_UPLOAD_STATE_FAILED, + MEDIA_UPLOAD_STATE_RESET, } from '@wordpress/block-editor'; import { getOtherMediaOptions, requestMediaPicker, requestImageFailedRetryDialog, + requestImageUploadCancelDialog, subscribeMediaUpload, } from '@wordpress/react-native-bridge'; @@ -749,4 +751,122 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'cancels uploads (TC009 - Choose from device (stay in editor) - Cancel upload)', async () => { + const mediaUploadListeners = []; + subscribeMediaUpload.mockImplementation( ( callback ) => { + mediaUploadListeners.push( callback ); + return { remove: jest.fn() }; + } ); + const triggerMediaUpload = ( payload ) => + mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); + + let mediaPickerCallback; + requestMediaPicker.mockImplementation( + ( source, filter, multiple, callback ) => { + mediaPickerCallback = callback; + } + ); + + // Initialize with an empty gallery + const { galleryBlock, getByText } = initializeWithGalleryBlock( + GALLERY_EMPTY, + { + hasItems: false, + } + ); + fireEvent.press( galleryBlock ); + + // Upload images from device + fireEvent.press( getByText( 'ADD MEDIA' ) ); + fireEvent.press( getByText( 'Choose from device' ) ); + expect( requestMediaPicker ).toHaveBeenCalledWith( + 'DEVICE_MEDIA_LIBRARY', + [ 'image' ], + true, + mediaPickerCallback + ); + + // Return media items picked + await act( async () => + mediaPickerCallback( [ + { + type: 'image', + url: MEDIA[ 0 ].localUrl, + id: MEDIA[ 0 ].localId, + }, + { + type: 'image', + url: MEDIA[ 1 ].localUrl, + id: MEDIA[ 1 ].localId, + }, + ] ) + ); + + // Check that gallery items are visible + fireEvent( + within( galleryBlock ).getByTestId( 'block-list-wrapper' ), + 'layout', + { + nativeEvent: { + layout: { + width: 100, + }, + }, + } + ); + const galleryItem1 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 1/ + ); + const galleryItem2 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 2/ + ); + expect( galleryItem1 ).toBeVisible(); + expect( galleryItem2 ).toBeVisible(); + + // Check that images are showing a loading state + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 0 ].localId, + progress: 0.5, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 1 ].localId, + progress: 0.25, + } ); + } ); + expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); + expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); + + // Cancel uploads + fireEvent.press( galleryItem1 ); + fireEvent.press( within( galleryItem1 ).getByTestId( 'spinner' ) ); + expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith( + MEDIA[ 0 ].localId + ); + await act( async () => + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_RESET, + mediaId: MEDIA[ 0 ].localId, + progress: 0, + } ) + ); + + fireEvent.press( galleryItem2 ); + fireEvent.press( within( galleryItem2 ).getByTestId( 'spinner' ) ); + expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith( + MEDIA[ 1 ].localId + ); + await act( async () => + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_RESET, + mediaId: MEDIA[ 1 ].localId, + progress: 0, + } ) + ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); diff --git a/test/native/setup.js b/test/native/setup.js index 779e6cb52a6f9c..2ab8b6b945a0b0 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -81,6 +81,7 @@ jest.mock( '@wordpress/react-native-bridge', () => { getOtherMediaOptions: jest.fn(), provideToNative_Html: jest.fn(), requestImageFailedRetryDialog: jest.fn(), + requestImageUploadCancelDialog: jest.fn(), requestMediaEditor: jest.fn(), requestMediaPicker: jest.fn(), requestUnsupportedBlockFallback: jest.fn(), From 04a823c229bfe47d7e9593095b423bc5d4f379a0 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 2 Feb 2022 18:11:39 +0100 Subject: [PATCH 12/33] Add test case: rearrange gallery items --- .../test/__snapshots__/index.native.js.snap | 16 +++++++ .../src/gallery/test/index.native.js | 45 ++++++++++++++++++- 2 files changed, 59 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 2e3e520666f5b7..e63e2578efa669 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -42,6 +42,22 @@ exports[`Gallery block inserts block 1`] = ` " `; +exports[`Gallery block rearranges gallery items (TC010 - Rearrange images in Gallery) 1`] = ` +" +
+
\\"\\"
Image 3
+ + + +
\\"\\"
Image 1
+ + + +
\\"\\"
Image 2
+
+" +`; + exports[`Gallery block sets caption to gallery (TC003 - Add caption to gallery) 1`] = ` "
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 36bb8eab33c536..c56ece11d72b63 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -78,7 +78,7 @@ const addGalleryBlock = async () => { const initializeWithGalleryBlock = ( initialHtml, - { hasItems = true } = {} + { hasItems = true, deviceWidth = 320 } = {} ) => { const screen = initializeEditor( { initialHtml } ); const { getByA11yLabel } = screen; @@ -92,7 +92,7 @@ const initializeWithGalleryBlock = ( { nativeEvent: { layout: { - width: 100, + width: deviceWidth, }, }, } @@ -869,4 +869,45 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'rearranges gallery items (TC010 - Rearrange images in Gallery)', () => { + // Initialize with a gallery that contains various items + const { + galleryBlock, + getByA11yLabel, + } = initializeWithGalleryBlock( ` +
+
Image 1
+ + + +
Image 2
+ + + +
Image 3
+
+ ` ); + fireEvent.press( galleryBlock ); + + // Rearrange items (final disposition will be: Image 3 - Image 1 - Image 2) + const galleryItem1 = getByA11yLabel( /Image Block\. Row 1/ ); + const galleryItem3 = getByA11yLabel( /Image Block\. Row 3/ ); + + fireEvent.press( galleryItem3 ); + fireEvent.press( + within( galleryItem3 ).getByA11yLabel( + /Move block left from position 3 to position 2/ + ) + ); + + fireEvent.press( galleryItem1 ); + fireEvent.press( + within( galleryItem1 ).getByA11yLabel( + /Move block right from position 1 to position 2/ + ) + ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From 44119f2d5ed5148d4f0a1d39f323328cd75f57b6 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 4 Feb 2022 14:58:25 +0100 Subject: [PATCH 13/33] Add test case: upload from other apps --- .../test/__snapshots__/index.native.js.snap | 12 ++ .../src/gallery/test/index.native.js | 125 ++++++++++++++++++ 2 files changed, 137 insertions(+) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index e63e2578efa669..9b65ffdbcdaf67 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -105,3 +105,15 @@ exports[`Gallery block uploads from free photo library (TC008 - Choose from the
" `; + +exports[`Gallery block uploads from other apps (TC011 - Choose from Other Apps (iOS Files App) 1`] = ` +" +
+
\\"\\"
+ + + +
\\"\\"
+
+" +`; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index c56ece11d72b63..a526dd56d21bef 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -910,4 +910,129 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'uploads from other apps (TC011 - Choose from Other Apps (iOS Files App)', async () => { + const mediaUploadListeners = []; + subscribeMediaUpload.mockImplementation( ( callback ) => { + mediaUploadListeners.push( callback ); + return { remove: jest.fn() }; + } ); + const triggerMediaUpload = ( payload ) => + mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); + + let mediaPickerCallback; + requestMediaPicker.mockImplementation( + ( source, filter, multiple, callback ) => { + mediaPickerCallback = callback; + } + ); + + let otherMediaOptionsCallback; + getOtherMediaOptions.mockImplementation( ( filter, callback ) => { + otherMediaOptionsCallback = callback; + } ); + + // Initialize with an empty gallery + const { galleryBlock, getByText } = initializeWithGalleryBlock( + GALLERY_EMPTY, + { + hasItems: false, + } + ); + + // Notify other media options + act( () => + otherMediaOptionsCallback( [ + { + label: 'Free Photo Library', + value: 'wpios-stock-photo-library', + }, + { label: 'Free GIF Library', value: 'wpios-tenor' }, + { label: 'Other Apps', value: 'wpios-other-files' }, + ] ) + ); + + // Upload images from other apps + fireEvent.press( getByText( 'ADD MEDIA' ) ); + fireEvent.press( getByText( 'Other Apps' ) ); + expect( requestMediaPicker ).toHaveBeenCalledWith( + 'wpios-other-files', + [ 'image' ], + true, + mediaPickerCallback + ); + + // Return media items picked + await act( async () => + mediaPickerCallback( [ + { + type: 'image', + title: 'IMG_0001.JPG', + url: 'file:///IMG_0001.JPG', + id: MEDIA[ 0 ].localId, + }, + { + type: 'image', + title: 'IMG_0002.JPG', + url: 'file:///IMG_0002.JPG', + id: MEDIA[ 1 ].localId, + }, + ] ) + ); + + // Check that gallery items are visible + fireEvent( + within( galleryBlock ).getByTestId( 'block-list-wrapper' ), + 'layout', + { + nativeEvent: { + layout: { + width: 100, + }, + }, + } + ); + const galleryItem1 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 1/ + ); + const galleryItem2 = within( galleryBlock ).getByA11yLabel( + /Image Block\. Row 2/ + ); + expect( galleryItem1 ).toBeVisible(); + expect( galleryItem2 ).toBeVisible(); + + // Check that images are showing a loading state + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 0 ].localId, + progress: 0.5, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: MEDIA[ 1 ].localId, + progress: 0.25, + } ); + } ); + expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); + expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); + + // Notify that the media items upload succeeded + await act( async () => { + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: MEDIA[ 0 ].localId, + mediaUrl: MEDIA[ 0 ].serverUrl, + mediaServerId: MEDIA[ 0 ].serverId, + } ); + triggerMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: MEDIA[ 1 ].localId, + mediaUrl: MEDIA[ 1 ].serverUrl, + mediaServerId: MEDIA[ 1 ].serverId, + } ); + } ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From 37beb38eeab7ea23c95d1ffb830a1fe095a24550 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 4 Feb 2022 15:13:45 +0100 Subject: [PATCH 14/33] Add test case: override Link to setting --- .../test/__snapshots__/index.native.js.snap | 12 ++++++++ .../src/gallery/test/index.native.js | 29 +++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 9b65ffdbcdaf67..2f52bb7a49fb42 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -42,6 +42,18 @@ exports[`Gallery block inserts block 1`] = ` " `; +exports[`Gallery block overrides Link to settings of gallery items (TC012 - Settings - Link to 1`] = ` +" +
+
\\"\\"
+ + + +
\\"\\"
+
+" +`; + exports[`Gallery block rearranges gallery items (TC010 - Rearrange images in Gallery) 1`] = ` "
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index a526dd56d21bef..ca9d266aa4eb0c 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -1035,4 +1035,33 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'overrides "Link to" setting of gallery items (TC012 - Settings - Link to', async () => { + // Initialize with a gallery that contains two items, the latter includes "linkDestination" attribute + const { + galleryBlock, + getByA11yLabel, + getByTestId, + getByText, + } = initializeWithGalleryBlock( ` +
+
+ + + +
+
+ ` ); + fireEvent.press( galleryBlock ); + + // Set "Link to" setting via Gallery block settings + fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + await waitFor( + () => getByTestId( 'block-settings-modal' ).props.isVisible + ); + fireEvent.press( getByText( 'Link to' ) ); + fireEvent.press( getByText( 'Media File' ) ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From 8e599a76ee042946ca7e95e88a47770688fc3510 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 4 Feb 2022 17:11:16 +0100 Subject: [PATCH 15/33] Add test case: change columns setting --- .../test/__snapshots__/index.native.js.snap | 34 +++++++++++- .../src/gallery/test/index.native.js | 55 +++++++++++++++++++ 2 files changed, 88 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 2f52bb7a49fb42..32957b6d8cc79b 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -12,6 +12,38 @@ exports[`Gallery block cancels uploads (TC009 - Choose from device (stay in edit " `; +exports[`Gallery block changes columns setting (TC013 - Settings - Columns 1`] = ` +" +
+
\\"\\"
+ + + +
\\"\\"
+ + + +
\\"\\"
+
+" +`; + +exports[`Gallery block changes columns setting (TC013 - Settings - Columns 2`] = ` +" +
+
\\"\\"
+ + + +
\\"\\"
+ + + +
\\"\\"
+
+" +`; + exports[`Gallery block finishes pending uploads upon opening the editor (TC001 - Close/Re-open post with an ongoing image upload) 1`] = ` "
@@ -42,7 +74,7 @@ exports[`Gallery block inserts block 1`] = ` " `; -exports[`Gallery block overrides Link to settings of gallery items (TC012 - Settings - Link to 1`] = ` +exports[`Gallery block overrides "Link to" setting of gallery items (TC012 - Settings - Link to 1`] = ` "
\\"\\"
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index ca9d266aa4eb0c..60e240b8247db4 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -53,6 +53,12 @@ const MEDIA = [ serverId: 2001, serverUrl: 'https://test-site.files.wordpress.com/local-image-2.jpeg', }, + { + localId: 3, + localUrl: 'file:///local-image-3.jpeg', + serverId: 2002, + serverUrl: 'https://test-site.files.wordpress.com/local-image-3.jpeg', + }, ]; const addGalleryBlock = async () => { @@ -1064,4 +1070,53 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'changes columns setting (TC013 - Settings - Columns', async () => { + // Initialize with a gallery that contains three items + const { + galleryBlock, + getByA11yLabel, + getByTestId, + } = initializeWithGalleryBlock( ` +
+
+ + + +
+ + + +
+
+ ` ); + fireEvent.press( galleryBlock ); + + // Open block settings + fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + await waitFor( + () => getByTestId( 'block-settings-modal' ).props.isVisible + ); + + // Can't increment due to maximum value + // NOTE: Default columns value is 3 + fireEvent( + getByA11yLabel( /Columns\. Value is 3/ ), + 'accessibilityAction', + { + nativeEvent: { actionName: 'increment' }, + } + ); + expect( getEditorHtml() ).toMatchSnapshot(); + + // Decrement columns + fireEvent( + getByA11yLabel( /Columns\. Value is 3/ ), + 'accessibilityAction', + { + nativeEvent: { actionName: 'decrement' }, + } + ); + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From 7635cd658d07ee088681a08103923109b1f5ed40 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 4 Feb 2022 17:14:42 +0100 Subject: [PATCH 16/33] Add test case: disables crop images setting --- .../test/__snapshots__/index.native.js.snap | 8 +++++++ .../src/gallery/test/index.native.js | 21 +++++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 32957b6d8cc79b..81b23ac06bd972 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -44,6 +44,14 @@ exports[`Gallery block changes columns setting (TC013 - Settings - Columns 2`] = " `; +exports[`Gallery block disables crop images setting (TC014 - Settings - Crop images 1`] = ` +" +
+
\\"\\"
+
+" +`; + exports[`Gallery block finishes pending uploads upon opening the editor (TC001 - Close/Re-open post with an ongoing image upload) 1`] = ` "
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 60e240b8247db4..bd92f9cb20611f 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -1119,4 +1119,25 @@ describe( 'Gallery block', () => { ); expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'disables crop images setting (TC014 - Settings - Crop images', async () => { + // Initialize with a gallery that contains one item + const { + galleryBlock, + getByA11yLabel, + getByTestId, + getByText, + } = initializeWithGalleryBlock( GALLERY_WITH_ONE_IMAGE ); + fireEvent.press( galleryBlock ); + + // Open block settings + fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + await waitFor( + () => getByTestId( 'block-settings-modal' ).props.isVisible + ); + + // Disable crop images setting + fireEvent.press( getByText( 'Crop images' ) ); + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); From 96bd3d3586ea5a807c83a4474a58efc38ad34d38 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 4 Feb 2022 17:24:05 +0100 Subject: [PATCH 17/33] Fix act warning in rearranges gallery items case --- .../src/gallery/test/index.native.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index bd92f9cb20611f..850d0395ecbb9d 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -876,7 +876,7 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'rearranges gallery items (TC010 - Rearrange images in Gallery)', () => { + it( 'rearranges gallery items (TC010 - Rearrange images in Gallery)', async () => { // Initialize with a gallery that contains various items const { galleryBlock, @@ -901,16 +901,20 @@ describe( 'Gallery block', () => { const galleryItem3 = getByA11yLabel( /Image Block\. Row 3/ ); fireEvent.press( galleryItem3 ); - fireEvent.press( - within( galleryItem3 ).getByA11yLabel( - /Move block left from position 3 to position 2/ + await act( () => + fireEvent.press( + within( galleryItem3 ).getByA11yLabel( + /Move block left from position 3 to position 2/ + ) ) ); fireEvent.press( galleryItem1 ); - fireEvent.press( - within( galleryItem1 ).getByA11yLabel( - /Move block right from position 1 to position 2/ + await act( () => + fireEvent.press( + within( galleryItem1 ).getByA11yLabel( + /Move block right from position 1 to position 2/ + ) ) ); From 4370aedac6936f1cf5edcb13425f2a4012eef4d4 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 4 Feb 2022 19:54:37 +0100 Subject: [PATCH 18/33] Add executeStoreResolvers helper --- test/native/helpers.js | 83 +++++++++++++++++++++++++----------------- 1 file changed, 50 insertions(+), 33 deletions(-) diff --git a/test/native/helpers.js b/test/native/helpers.js index e5ef48b8f1f21a..db1c7d282322c9 100644 --- a/test/native/helpers.js +++ b/test/native/helpers.js @@ -35,48 +35,30 @@ provideToNativeHtml.mockImplementation( ( html ) => { } ); /** - * Initialize an editor for test assertions. + * Executes a function that triggers store resolvers. * - * @param {Object} props Properties passed to the editor component. - * @param {string} props.initialHtml String of block editor HTML to parse and render. - * @param {Object} [options] Configuration options for the editor. - * @param {import('react').ReactNode} [options.component] A specific editor component to render. - * @return {import('@testing-library/react-native').RenderAPI} A Testing Library screen. + * Asynchronous store resolvers rely upon `setTimeout` to run at the end of the + * current JavaScript block execution In order to prevent "act" warnings triggered + * by updates to the React tree, we leverage fake timers to manually tick and + * await the resolution of the current block execution before proceeding. + * + * @param {Function} fn Function that triggers store resolvers. + * @return {*} The result of the function call. */ -export function initializeEditor( props, { component = Editor } = {} ) { +export function executeStoreResolvers( fn ) { // Portions of the React Native Animation API rely upon these APIs. However, // Jest's 'legacy' fake timer mutate these globals, which breaks the Animated // API. We preserve the original implementations to restore them later. const originalRAF = global.requestAnimationFrame; const originalCAF = global.cancelAnimationFrame; - // During editor initialization, asynchronous store resolvers rely upon - // `setTimeout` to run at the end of the current JavaScript block execution. - // In order to prevent "act" warnings triggered by updates to the React tree, - // we leverage fake timers to manually tick and await the resolution of the - // current block execution before proceeding. + // Asynchronous store resolvers rely upon `setTimeout` to run at the end of + // the current JavaScript block execution In order to prevent "act" warnings + // triggered by updates to the React tree, we leverage fake timers to manually + // tick and await the resolution of the current block execution before proceeding. jest.useFakeTimers( 'legacy' ); - // Arrange - const EditorComponent = component; - const screen = render( - - ); - - // Layout event must be explicitly dispatched in BlockList component, - // otherwise the inner blocks are not rendered. - fireEvent( screen.getByTestId( 'block-list-wrapper' ), 'layout', { - nativeEvent: { - layout: { - width: 100, - }, - }, - } ); + const result = fn(); // Advance all timers allowing store resolvers to resolve. act( () => jest.runAllTimers() ); @@ -90,7 +72,42 @@ export function initializeEditor( props, { component = Editor } = {} ) { global.requestAnimationFrame = originalRAF; global.cancelAnimationFrame = originalCAF; - return screen; + return result; +} + +/** + * Initialize an editor for test assertions. + * + * @param {Object} props Properties passed to the editor component. + * @param {string} props.initialHtml String of block editor HTML to parse and render. + * @param {Object} [options] Configuration options for the editor. + * @param {import('react').ReactNode} [options.component] A specific editor component to render. + * @return {import('@testing-library/react-native').RenderAPI} A Testing Library screen. + */ +export function initializeEditor( props, { component = Editor } = {} ) { + return executeStoreResolvers( () => { + const EditorComponent = component; + const screen = render( + + ); + + // Layout event must be explicitly dispatched in BlockList component, + // otherwise the inner blocks are not rendered. + fireEvent( screen.getByTestId( 'block-list-wrapper' ), 'layout', { + nativeEvent: { + layout: { + width: 100, + }, + }, + } ); + + return screen; + } ); } export * from '@testing-library/react-native'; From a9fe9e1e950ae2ede3b55902abd56aa975b83430 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 4 Feb 2022 20:22:22 +0100 Subject: [PATCH 19/33] Fix toBeVisible custom matcher --- test/native/matchers/to-be-visible.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/native/matchers/to-be-visible.js b/test/native/matchers/to-be-visible.js index 709e2a0aa707dd..b2b19d239a8561 100644 --- a/test/native/matchers/to-be-visible.js +++ b/test/native/matchers/to-be-visible.js @@ -17,7 +17,7 @@ function isStyleVisible( element ) { } function isAttributeVisible( element ) { - return element.type !== 'Modal' || ! element.props.visible === false; + return element.type !== 'Modal' || element.props.visible !== false; } function isElementVisible( element ) { From 49f70d2facb12148241208bb4633a1e84949657a Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 4 Feb 2022 21:13:49 +0100 Subject: [PATCH 20/33] Extract helpers from gallery test cases --- .../test/__snapshots__/index.native.js.snap | 20 +- .../src/gallery/test/helpers.native.js | 199 +++++ .../src/gallery/test/index.native.js | 793 ++++-------------- test/native/jest.config.js | 2 +- 4 files changed, 370 insertions(+), 644 deletions(-) create mode 100644 packages/block-library/src/gallery/test/helpers.native.js diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 81b23ac06bd972..abce9e7995f49f 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -96,32 +96,32 @@ exports[`Gallery block overrides "Link to" setting of gallery items (TC012 - Set exports[`Gallery block rearranges gallery items (TC010 - Rearrange images in Gallery) 1`] = ` " -
-
\\"\\"
Image 3
+
+
\\"\\"
- -
\\"\\"
Image 1
+ +
\\"\\"
- -
\\"\\"
Image 2
+ +
\\"\\"
" `; exports[`Gallery block sets caption to gallery (TC003 - Add caption to gallery) 1`] = ` " -
-
\\"\\"
+
+
\\"\\"
Bold italic strikethrough gallery caption
" `; exports[`Gallery block sets caption to gallery items (TC004 - Add caption to gallery images) 1`] = ` " -
-
\\"\\"
Bold italic strikethrough image caption
+
+
\\"\\"
Bold italic strikethrough image caption
" `; diff --git a/packages/block-library/src/gallery/test/helpers.native.js b/packages/block-library/src/gallery/test/helpers.native.js new file mode 100644 index 00000000000000..e0a7a609a1ebd5 --- /dev/null +++ b/packages/block-library/src/gallery/test/helpers.native.js @@ -0,0 +1,199 @@ +/** + * External dependencies + */ +import { + act, + initializeEditor, + fireEvent, + waitFor, + within, + executeStoreResolvers, +} from 'test/helpers'; + +/** + * WordPress dependencies + */ +import { + requestMediaPicker, + subscribeMediaUpload, +} from '@wordpress/react-native-bridge'; +import { + MEDIA_UPLOAD_STATE_UPLOADING, + MEDIA_UPLOAD_STATE_SUCCEEDED, + MEDIA_UPLOAD_STATE_FAILED, + MEDIA_UPLOAD_STATE_RESET, +} from '@wordpress/block-editor'; + +export const addGalleryBlock = async () => { + const screen = initializeEditor(); + const { getByA11yLabel, getByTestId, getByText } = screen; + + fireEvent.press( getByA11yLabel( 'Add block' ) ); + + 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 }, + }, + } ); + + fireEvent.press( await waitFor( () => getByText( 'Gallery' ) ) ); + + return screen; +}; + +export const triggerGalleryLayout = ( + galleryBlock, + { deviceWidth = 320 } = {} +) => + fireEvent( + within( galleryBlock ).getByTestId( 'block-list-wrapper' ), + 'layout', + { + nativeEvent: { + layout: { + width: deviceWidth, + }, + }, + } + ); + +export const initializeWithGalleryBlock = ( + initialHtml, + { hasItems = true, deviceWidth = 320, selected = true } = {} +) => { + const screen = initializeEditor( { initialHtml } ); + const { getByA11yLabel } = screen; + + const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ ); + + if ( hasItems ) { + executeStoreResolvers( () => + triggerGalleryLayout( galleryBlock, { deviceWidth } ) + ); + } + + if ( selected ) { + fireEvent.press( galleryBlock ); + } + + return { ...screen, galleryBlock }; +}; + +export const getGalleryItem = ( galleryBlock, rowPosition ) => { + return within( galleryBlock ).getByA11yLabel( + new RegExp( `Image Block\\. Row ${ rowPosition }` ) + ); +}; + +export const setupMediaUpload = () => { + const mediaUploadListeners = []; + subscribeMediaUpload.mockImplementation( ( callback ) => { + mediaUploadListeners.push( callback ); + return { remove: jest.fn() }; + } ); + const notifyMediaUpload = ( payload ) => + mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); + + return { + notifyUploadingState: async ( mediaItem ) => + act( async () => { + notifyMediaUpload( { + state: MEDIA_UPLOAD_STATE_UPLOADING, + mediaId: mediaItem.localId, + progress: 0.25, + } ); + } ), + notifySucceedState: async ( mediaItem ) => + act( async () => { + notifyMediaUpload( { + state: MEDIA_UPLOAD_STATE_SUCCEEDED, + mediaId: mediaItem.localId, + mediaUrl: mediaItem.serverUrl, + mediaServerId: mediaItem.serverId, + } ); + } ), + notifyFailedState: async ( mediaItem ) => + act( async () => { + notifyMediaUpload( { + state: MEDIA_UPLOAD_STATE_FAILED, + mediaId: mediaItem.localId, + progress: 0.5, + } ); + } ), + notifyResetState: async ( mediaItem ) => + act( async () => { + notifyMediaUpload( { + state: MEDIA_UPLOAD_STATE_RESET, + mediaId: mediaItem.localId, + progress: 0, + } ); + } ), + }; +}; + +export const setupMediaPicker = () => { + let mediaPickerCallback; + requestMediaPicker.mockImplementation( + ( source, filter, multiple, callback ) => { + mediaPickerCallback = callback; + } + ); + return { + expectMediaPickerCall: ( source, filter, multiple ) => + expect( requestMediaPicker ).toHaveBeenCalledWith( + source, + filter, + multiple, + mediaPickerCallback + ), + mediaPickerCallback: async ( ...mediaItems ) => + act( async () => + mediaPickerCallback( + mediaItems.map( ( { localId, localUrl } ) => ( { + type: 'image', + url: localUrl, + id: localId, + } ) ) + ) + ), + }; +}; + +export const generateGalleryBlock = ( + numberOfItems, + media, + { useLocalUrl = false } = {} +) => { + const galleryItems = [ ...Array( numberOfItems ) ] + .map( ( _, index ) => { + const id = useLocalUrl + ? media[ index ].localId + : media[ index ].serverId; + const url = useLocalUrl + ? media[ index ].localUrl + : media[ index ].serverUrl; + return ` +
+ `; + } ) + .join( '\n\n' ); + + return ` +
${ galleryItems }
+ `; +}; + +export const setCaption = ( element, text ) => { + fireEvent( element, 'focus' ); + fireEvent( element, 'onChange', { + nativeEvent: { + eventCount: 1, + target: undefined, + text, + }, + } ); +}; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 850d0395ecbb9d..a8b621af14fda9 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -16,20 +16,26 @@ import { import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks'; import { registerCoreBlocks } from '@wordpress/block-library'; import { Platform } from '@wordpress/element'; -import { - MEDIA_UPLOAD_STATE_UPLOADING, - MEDIA_UPLOAD_STATE_SUCCEEDED, - MEDIA_UPLOAD_STATE_FAILED, - MEDIA_UPLOAD_STATE_RESET, -} from '@wordpress/block-editor'; import { getOtherMediaOptions, - requestMediaPicker, requestImageFailedRetryDialog, requestImageUploadCancelDialog, - subscribeMediaUpload, } from '@wordpress/react-native-bridge'; +/** + * Internal dependencies + */ +import { + addGalleryBlock, + initializeWithGalleryBlock, + getGalleryItem, + setupMediaUpload, + generateGalleryBlock, + setCaption, + setupMediaPicker, + triggerGalleryLayout, +} from './helpers'; + const GALLERY_EMPTY = `
`; @@ -61,53 +67,6 @@ const MEDIA = [ }, ]; -const addGalleryBlock = async () => { - const screen = initializeEditor(); - const { getByA11yLabel, getByTestId, getByText } = screen; - - fireEvent.press( getByA11yLabel( 'Add block' ) ); - - 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 }, - }, - } ); - - fireEvent.press( await waitFor( () => getByText( 'Gallery' ) ) ); - - return screen; -}; - -const initializeWithGalleryBlock = ( - initialHtml, - { hasItems = true, deviceWidth = 320 } = {} -) => { - const screen = initializeEditor( { initialHtml } ); - const { getByA11yLabel } = screen; - - const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ ); - - if ( hasItems ) { - fireEvent( - within( galleryBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: deviceWidth, - }, - }, - } - ); - } - - return { ...screen, galleryBlock }; -}; - beforeAll( () => { // Register all core blocks registerCoreBlocks(); @@ -124,44 +83,37 @@ describe( 'Gallery block', () => { it( 'inserts block', async () => { const { getByA11yLabel } = await addGalleryBlock(); - const galleryBlock = await waitFor( () => - getByA11yLabel( /Gallery Block\. Row 1/ ) - ); - - expect( galleryBlock ).toBeVisible(); + expect( getByA11yLabel( /Gallery Block\. Row 1/ ) ).toBeVisible(); expect( getEditorHtml() ).toMatchSnapshot(); } ); it( 'selects a gallery item', async () => { const { galleryBlock } = initializeWithGalleryBlock( - GALLERY_WITH_ONE_IMAGE + generateGalleryBlock( 1, MEDIA ), + { + selected: false, + } ); - fireEvent.press( galleryBlock ); - - const galleryItem = await waitFor( () => - within( galleryBlock ).getByA11yLabel( /Image Block\. Row 1/ ) - ); + const galleryItem = getGalleryItem( galleryBlock, 1 ); fireEvent.press( galleryItem ); expect( galleryItem ).toBeVisible(); } ); - it( 'shows appender button when gallery has images', async () => { + it( 'shows appender button when gallery has images', () => { const { galleryBlock, getByText } = initializeWithGalleryBlock( - GALLERY_WITH_ONE_IMAGE + generateGalleryBlock( 1, MEDIA ) ); - fireEvent.press( galleryBlock ); - - const appenderButton = await waitFor( () => - within( galleryBlock ).getByA11yLabel( /Gallery block\. Empty/ ) + const appenderButton = within( galleryBlock ).getByA11yLabel( + /Gallery block\. Empty/ ); fireEvent.press( appenderButton ); - expect( getByText( 'Choose from device' ) ).toBeDefined(); - expect( getByText( 'Take a Photo' ) ).toBeDefined(); - expect( getByText( 'WordPress Media Library' ) ).toBeDefined(); + expect( getByText( 'Choose from device' ) ).toBeVisible(); + expect( getByText( 'Take a Photo' ) ).toBeVisible(); + expect( getByText( 'WordPress Media Library' ) ).toBeVisible(); } ); // This case is disabled until the issue (https://github.com/WordPress/gutenberg/issues/38444) @@ -169,22 +121,21 @@ describe( 'Gallery block', () => { it.skip( 'displays media options picker when selecting the block', () => { // Initialize with an empty gallery const { getByA11yLabel, getByText, getByTestId } = initializeEditor( { - initialHtml: GALLERY_EMPTY, + initialHtml: generateGalleryBlock( 0 ), } ); // Tap on Gallery block fireEvent.press( getByText( 'ADD MEDIA' ) ); // Observe that media options picker is displayed - expect( getByText( 'Choose images' ) ).toBeDefined(); - expect( getByText( 'WordPress Media Library' ) ).toBeDefined(); + expect( getByText( 'Choose images' ) ).toBeVisible(); + expect( getByText( 'WordPress Media Library' ) ).toBeVisible(); // Dimiss the picker if ( Platform.isIOS ) { fireEvent.press( getByText( 'Cancel' ) ); } else { - const mediaPicker = getByTestId( 'media-options-picker' ); - fireEvent( mediaPicker, 'backdropPress' ); + fireEvent( getByTestId( 'media-options-picker' ), 'backdropPress' ); } // Observe that the block is selected, this is done by checking if the block settings @@ -194,97 +145,50 @@ describe( 'Gallery block', () => { } ); it( 'finishes pending uploads upon opening the editor (TC001 - Close/Re-open post with an ongoing image upload)', async () => { - const mediaUploadListeners = []; - subscribeMediaUpload.mockImplementation( ( callback ) => { - mediaUploadListeners.push( callback ); - return { remove: jest.fn() }; - } ); - const triggerMediaUpload = ( payload ) => - mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); + const { notifyUploadingState, notifySucceedState } = setupMediaUpload(); // Initialize with a gallery that contains two items that are being uploaded - const { - galleryBlock, - } = initializeWithGalleryBlock( ` -
-
- - - -
-
- ` ); + const { galleryBlock } = initializeWithGalleryBlock( + generateGalleryBlock( 2, MEDIA, { useLocalUrl: true } ) + ); // Notify that the media items are uploading - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 0 ].localId, - progress: 0.5, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 1 ].localId, - progress: 0.25, - } ); - } ); + await notifyUploadingState( MEDIA[ 0 ] ); + await notifyUploadingState( MEDIA[ 1 ] ); // Check that images are showing a loading state - const galleryItem1 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 1/ - ); - const galleryItem2 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 2/ - ); - expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); - expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); + expect( + within( getGalleryItem( galleryBlock, 1 ) ).getByTestId( 'spinner' ) + ).toBeVisible(); + expect( + within( getGalleryItem( galleryBlock, 2 ) ).getByTestId( 'spinner' ) + ).toBeVisible(); // Notify that the media items upload succeeded - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_SUCCEEDED, - mediaId: MEDIA[ 0 ].localId, - mediaUrl: MEDIA[ 0 ].serverUrl, - mediaServerId: MEDIA[ 0 ].serverId, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_SUCCEEDED, - mediaId: MEDIA[ 1 ].localId, - mediaUrl: MEDIA[ 1 ].serverUrl, - mediaServerId: MEDIA[ 1 ].serverId, - } ); - } ); + await notifySucceedState( MEDIA[ 0 ] ); + await notifySucceedState( MEDIA[ 1 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); it( 'sets caption to gallery (TC003 - Add caption to gallery)', () => { // Initialize with a gallery that contains one item - const { galleryBlock, getByA11yLabel } = initializeWithGalleryBlock( - GALLERY_WITH_ONE_IMAGE + const { getByA11yLabel } = initializeWithGalleryBlock( + generateGalleryBlock( 1, MEDIA ) ); - // Select block - fireEvent.press( galleryBlock ); - // Check gallery item caption is not visible const galleryItemCaption = getByA11yLabel( /Image caption. Empty/ ); expect( galleryItemCaption ).not.toBeVisible(); // Set gallery caption - const galleryCaption = getByA11yLabel( /Gallery caption. Empty/ ); - const captionField = within( galleryCaption ).getByPlaceholderText( - 'Add caption' + const captionField = within( + getByA11yLabel( /Gallery caption. Empty/ ) + ).getByPlaceholderText( 'Add caption' ); + setCaption( + captionField, + 'Bold italic strikethrough gallery caption' ); - fireEvent( captionField, 'focus' ); - fireEvent( captionField, 'onChange', { - nativeEvent: { - eventCount: 1, - target: undefined, - text: - 'Bold italic strikethrough gallery caption', - }, - } ); expect( getEditorHtml() ).toMatchSnapshot(); } ); @@ -292,54 +196,35 @@ describe( 'Gallery block', () => { it( 'sets caption to gallery items (TC004 - Add caption to gallery images)', () => { // Initialize with a gallery that contains one item const { galleryBlock } = initializeWithGalleryBlock( - GALLERY_WITH_ONE_IMAGE + generateGalleryBlock( 1, MEDIA ) ); - // Select block - fireEvent.press( galleryBlock ); - // Select gallery item - const galleryItem = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 1/ - ); + const galleryItem = getGalleryItem( galleryBlock, 1 ); fireEvent.press( galleryItem ); // Set gallery item caption const captionField = within( galleryItem ).getByPlaceholderText( 'Add caption' ); - fireEvent( captionField, 'focus' ); - fireEvent( captionField, 'onChange', { - nativeEvent: { - eventCount: 1, - target: undefined, - text: - 'Bold italic strikethrough image caption', - }, - } ); + setCaption( + captionField, + 'Bold italic strikethrough image caption' + ); expect( getEditorHtml() ).toMatchSnapshot(); } ); it( 'successfully uploads items (TC005 - Choose from device (stay in editor) - Successful upload)', async () => { - const mediaUploadListeners = []; - subscribeMediaUpload.mockImplementation( ( callback ) => { - mediaUploadListeners.push( callback ); - return { remove: jest.fn() }; - } ); - const triggerMediaUpload = ( payload ) => - mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); - - let mediaPickerCallback; - requestMediaPicker.mockImplementation( - ( source, filter, multiple, callback ) => { - mediaPickerCallback = callback; - } - ); + const { notifyUploadingState, notifySucceedState } = setupMediaUpload(); + const { + expectMediaPickerCall, + mediaPickerCallback, + } = setupMediaPicker(); // Initialize with an empty gallery const { galleryBlock, getByText } = initializeWithGalleryBlock( - GALLERY_EMPTY, + generateGalleryBlock( 0 ), { hasItems: false, } @@ -348,104 +233,41 @@ describe( 'Gallery block', () => { // Upload images from device fireEvent.press( getByText( 'ADD MEDIA' ) ); fireEvent.press( getByText( 'Choose from device' ) ); - expect( requestMediaPicker ).toHaveBeenCalledWith( - 'DEVICE_MEDIA_LIBRARY', - [ 'image' ], - true, - mediaPickerCallback - ); + expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true ); // Return media items picked - await act( async () => - mediaPickerCallback( [ - { - type: 'image', - url: MEDIA[ 0 ].localUrl, - id: MEDIA[ 0 ].localId, - }, - { - type: 'image', - url: MEDIA[ 1 ].localUrl, - id: MEDIA[ 1 ].localId, - }, - ] ) - ); + await mediaPickerCallback( MEDIA[ 0 ], MEDIA[ 1 ] ); // Check that gallery items are visible - fireEvent( - within( galleryBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - }, - }, - } - ); - const galleryItem1 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 1/ - ); - const galleryItem2 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 2/ - ); + triggerGalleryLayout( galleryBlock ); + const galleryItem1 = getGalleryItem( galleryBlock, 1 ); + const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); expect( galleryItem2 ).toBeVisible(); // Check that images are showing a loading state - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 0 ].localId, - progress: 0.5, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 1 ].localId, - progress: 0.25, - } ); - } ); + await notifyUploadingState( MEDIA[ 0 ] ); + await notifyUploadingState( MEDIA[ 1 ] ); expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); // Notify that the media items upload succeeded - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_SUCCEEDED, - mediaId: MEDIA[ 0 ].localId, - mediaUrl: MEDIA[ 0 ].serverUrl, - mediaServerId: MEDIA[ 0 ].serverId, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_SUCCEEDED, - mediaId: MEDIA[ 1 ].localId, - mediaUrl: MEDIA[ 1 ].serverUrl, - mediaServerId: MEDIA[ 1 ].serverId, - } ); - } ); + await notifySucceedState( MEDIA[ 0 ] ); + await notifySucceedState( MEDIA[ 1 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); it( 'handles failed uploads (TC006 - Choose from device (stay in editor) - Failed upload)', async () => { - const mediaUploadListeners = []; - subscribeMediaUpload.mockImplementation( ( callback ) => { - mediaUploadListeners.push( callback ); - return { remove: jest.fn() }; - } ); - const triggerMediaUpload = ( payload ) => - mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); - - let mediaPickerCallback; - requestMediaPicker.mockImplementation( - ( source, filter, multiple, callback ) => { - mediaPickerCallback = callback; - } - ); + const { notifyUploadingState, notifyFailedState } = setupMediaUpload(); + const { + expectMediaPickerCall, + mediaPickerCallback, + } = setupMediaPicker(); // Initialize with an empty gallery const { galleryBlock, getByText } = initializeWithGalleryBlock( - GALLERY_EMPTY, + generateGalleryBlock( 0 ), { hasItems: false, } @@ -455,79 +277,27 @@ describe( 'Gallery block', () => { // Upload images from device fireEvent.press( getByText( 'ADD MEDIA' ) ); fireEvent.press( getByText( 'Choose from device' ) ); - expect( requestMediaPicker ).toHaveBeenCalledWith( - 'DEVICE_MEDIA_LIBRARY', - [ 'image' ], - true, - mediaPickerCallback - ); + expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true ); // Return media items picked - await act( async () => - mediaPickerCallback( [ - { - type: 'image', - url: MEDIA[ 0 ].localUrl, - id: MEDIA[ 0 ].localId, - }, - { - type: 'image', - url: MEDIA[ 1 ].localUrl, - id: MEDIA[ 1 ].localId, - }, - ] ) - ); + await mediaPickerCallback( MEDIA[ 0 ], MEDIA[ 1 ] ); // Check that gallery items are visible - fireEvent( - within( galleryBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - }, - }, - } - ); - const galleryItem1 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 1/ - ); - const galleryItem2 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 2/ - ); + triggerGalleryLayout( galleryBlock ); + const galleryItem1 = getGalleryItem( galleryBlock, 1 ); + const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); expect( galleryItem2 ).toBeVisible(); // Check that images are showing a loading state - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 0 ].localId, - progress: 0.5, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 1 ].localId, - progress: 0.25, - } ); - } ); + await notifyUploadingState( MEDIA[ 0 ] ); + await notifyUploadingState( MEDIA[ 1 ] ); expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); // Notify that the media items uploads failed - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_FAILED, - mediaId: MEDIA[ 0 ].localId, - progress: 0.5, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_FAILED, - mediaId: MEDIA[ 1 ].localId, - progress: 0.25, - } ); - } ); + await notifyFailedState( MEDIA[ 0 ] ); + await notifyFailedState( MEDIA[ 1 ] ); // Check that failed images provide the option to retry the upload fireEvent.press( galleryItem1 ); @@ -549,24 +319,15 @@ describe( 'Gallery block', () => { } ); it( 'takes a photo (TC007 - Take a photo)', async () => { - const mediaUploadListeners = []; - subscribeMediaUpload.mockImplementation( ( callback ) => { - mediaUploadListeners.push( callback ); - return { remove: jest.fn() }; - } ); - const triggerMediaUpload = ( payload ) => - mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); - - let mediaPickerCallback; - requestMediaPicker.mockImplementation( - ( source, filter, multiple, callback ) => { - mediaPickerCallback = callback; - } - ); + const { notifyUploadingState, notifySucceedState } = setupMediaUpload(); + const { + expectMediaPickerCall, + mediaPickerCallback, + } = setupMediaPicker(); // Initialize with an empty gallery const { galleryBlock, getByText } = initializeWithGalleryBlock( - GALLERY_EMPTY, + generateGalleryBlock( 0 ), { hasItems: false, } @@ -575,79 +336,38 @@ describe( 'Gallery block', () => { // Take a photo fireEvent.press( getByText( 'ADD MEDIA' ) ); fireEvent.press( getByText( 'Take a Photo' ) ); - expect( requestMediaPicker ).toHaveBeenCalledWith( - 'DEVICE_CAMERA', - [ 'image' ], - true, - mediaPickerCallback - ); + expectMediaPickerCall( 'DEVICE_CAMERA', [ 'image' ], true ); // Return media item from photo taken - await act( async () => - mediaPickerCallback( [ - { - type: 'image', - url: MEDIA[ 0 ].localUrl, - id: MEDIA[ 0 ].localId, - }, - ] ) - ); + await mediaPickerCallback( MEDIA[ 0 ] ); // Check gallery item is visible - fireEvent( - within( galleryBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - }, - }, - } - ); - const galleryItem = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 1/ - ); + triggerGalleryLayout( galleryBlock ); + const galleryItem = getGalleryItem( galleryBlock, 1 ); expect( galleryItem ).toBeVisible(); // Check image is showing a loading state - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 0 ].localId, - progress: 0.5, - } ); - } ); + await notifyUploadingState( MEDIA[ 0 ] ); expect( within( galleryItem ).getByTestId( 'spinner' ) ).toBeVisible(); // Notify that the media item upload succeeded - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_SUCCEEDED, - mediaId: MEDIA[ 0 ].localId, - mediaUrl: MEDIA[ 0 ].serverUrl, - mediaServerId: MEDIA[ 0 ].serverId, - } ); - } ); + await notifySucceedState( MEDIA[ 0 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); it( 'uploads from free photo library (TC008 - Choose from the free photo library)', async () => { - const mediaUploadListeners = []; - subscribeMediaUpload.mockImplementation( ( callback ) => { - mediaUploadListeners.push( callback ); - return { remove: jest.fn() }; - } ); - const triggerMediaUpload = ( payload ) => - mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); - - let mediaPickerCallback; - requestMediaPicker.mockImplementation( - ( source, filter, multiple, callback ) => { - mediaPickerCallback = callback; - } - ); + const freePhotoMedia = [ ...MEDIA ].map( ( item, index ) => ( { + ...item, + localUrl: `https://images.pexels.com/photos/110854/pexels-photo-${ + index + 1 + }.jpeg`, + } ) ); + const { notifyUploadingState, notifySucceedState } = setupMediaUpload(); + const { + expectMediaPickerCall, + mediaPickerCallback, + } = setupMediaPicker(); let otherMediaOptionsCallback; getOtherMediaOptions.mockImplementation( ( filter, callback ) => { @@ -656,7 +376,7 @@ describe( 'Gallery block', () => { // Initialize with an empty gallery const { galleryBlock, getByText } = initializeWithGalleryBlock( - GALLERY_EMPTY, + generateGalleryBlock( 0 ), { hasItems: false, } @@ -677,172 +397,66 @@ describe( 'Gallery block', () => { // Upload images from free photo library fireEvent.press( getByText( 'ADD MEDIA' ) ); fireEvent.press( getByText( 'Free Photo Library' ) ); - expect( requestMediaPicker ).toHaveBeenCalledWith( - 'wpios-stock-photo-library', - [ 'image' ], - true, - mediaPickerCallback - ); + expectMediaPickerCall( 'wpios-stock-photo-library', [ 'image' ], true ); // Return media items picked await act( async () => - mediaPickerCallback( [ - { - type: 'image', - url: - 'https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg', - id: MEDIA[ 0 ].localId, - }, - { - type: 'image', - url: - 'https://images.pexels.com/photos/2150/sky-space-dark-galaxy.jpg', - id: MEDIA[ 1 ].localId, - }, - ] ) + mediaPickerCallback( freePhotoMedia[ 0 ], freePhotoMedia[ 1 ] ) ); // Check that gallery items are visible - fireEvent( - within( galleryBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - }, - }, - } - ); - const galleryItem1 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 1/ - ); - const galleryItem2 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 2/ - ); + triggerGalleryLayout( galleryBlock ); + const galleryItem1 = getGalleryItem( galleryBlock, 1 ); + const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); expect( galleryItem2 ).toBeVisible(); // Check that images are showing a loading state - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 0 ].localId, - progress: 0.5, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 1 ].localId, - progress: 0.25, - } ); - } ); + await notifyUploadingState( freePhotoMedia[ 0 ] ); + await notifyUploadingState( freePhotoMedia[ 1 ] ); expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); // Notify that the media items upload succeeded - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_SUCCEEDED, - mediaId: MEDIA[ 0 ].localId, - mediaUrl: MEDIA[ 0 ].serverUrl, - mediaServerId: MEDIA[ 0 ].serverId, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_SUCCEEDED, - mediaId: MEDIA[ 1 ].localId, - mediaUrl: MEDIA[ 1 ].serverUrl, - mediaServerId: MEDIA[ 1 ].serverId, - } ); - } ); + await notifySucceedState( freePhotoMedia[ 0 ] ); + await notifySucceedState( freePhotoMedia[ 1 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); it( 'cancels uploads (TC009 - Choose from device (stay in editor) - Cancel upload)', async () => { - const mediaUploadListeners = []; - subscribeMediaUpload.mockImplementation( ( callback ) => { - mediaUploadListeners.push( callback ); - return { remove: jest.fn() }; - } ); - const triggerMediaUpload = ( payload ) => - mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); - - let mediaPickerCallback; - requestMediaPicker.mockImplementation( - ( source, filter, multiple, callback ) => { - mediaPickerCallback = callback; - } - ); + const { notifyUploadingState, notifyResetState } = setupMediaUpload(); + const { + expectMediaPickerCall, + mediaPickerCallback, + } = setupMediaPicker(); // Initialize with an empty gallery const { galleryBlock, getByText } = initializeWithGalleryBlock( - GALLERY_EMPTY, + generateGalleryBlock( 0 ), { hasItems: false, } ); - fireEvent.press( galleryBlock ); // Upload images from device fireEvent.press( getByText( 'ADD MEDIA' ) ); fireEvent.press( getByText( 'Choose from device' ) ); - expect( requestMediaPicker ).toHaveBeenCalledWith( - 'DEVICE_MEDIA_LIBRARY', - [ 'image' ], - true, - mediaPickerCallback - ); + expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true ); // Return media items picked - await act( async () => - mediaPickerCallback( [ - { - type: 'image', - url: MEDIA[ 0 ].localUrl, - id: MEDIA[ 0 ].localId, - }, - { - type: 'image', - url: MEDIA[ 1 ].localUrl, - id: MEDIA[ 1 ].localId, - }, - ] ) - ); + await mediaPickerCallback( MEDIA[ 0 ], MEDIA[ 1 ] ); // Check that gallery items are visible - fireEvent( - within( galleryBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - }, - }, - } - ); - const galleryItem1 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 1/ - ); - const galleryItem2 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 2/ - ); + triggerGalleryLayout( galleryBlock ); + const galleryItem1 = getGalleryItem( galleryBlock, 1 ); + const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); expect( galleryItem2 ).toBeVisible(); // Check that images are showing a loading state - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 0 ].localId, - progress: 0.5, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 1 ].localId, - progress: 0.25, - } ); - } ); + await notifyUploadingState( MEDIA[ 0 ] ); + await notifyUploadingState( MEDIA[ 1 ] ); expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); @@ -852,53 +466,27 @@ describe( 'Gallery block', () => { expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith( MEDIA[ 0 ].localId ); - await act( async () => - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_RESET, - mediaId: MEDIA[ 0 ].localId, - progress: 0, - } ) - ); + await notifyResetState( MEDIA[ 0 ] ); fireEvent.press( galleryItem2 ); fireEvent.press( within( galleryItem2 ).getByTestId( 'spinner' ) ); expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith( MEDIA[ 1 ].localId ); - await act( async () => - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_RESET, - mediaId: MEDIA[ 1 ].localId, - progress: 0, - } ) - ); + await notifyResetState( MEDIA[ 1 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); it( 'rearranges gallery items (TC010 - Rearrange images in Gallery)', async () => { // Initialize with a gallery that contains various items - const { - galleryBlock, - getByA11yLabel, - } = initializeWithGalleryBlock( ` -
-
Image 1
- - - -
Image 2
- - - -
Image 3
-
- ` ); - fireEvent.press( galleryBlock ); + const { galleryBlock } = initializeWithGalleryBlock( + generateGalleryBlock( 3, MEDIA ) + ); // Rearrange items (final disposition will be: Image 3 - Image 1 - Image 2) - const galleryItem1 = getByA11yLabel( /Image Block\. Row 1/ ); - const galleryItem3 = getByA11yLabel( /Image Block\. Row 3/ ); + const galleryItem1 = getGalleryItem( galleryBlock, 1 ); + const galleryItem3 = getGalleryItem( galleryBlock, 3 ); fireEvent.press( galleryItem3 ); await act( () => @@ -922,20 +510,15 @@ describe( 'Gallery block', () => { } ); it( 'uploads from other apps (TC011 - Choose from Other Apps (iOS Files App)', async () => { - const mediaUploadListeners = []; - subscribeMediaUpload.mockImplementation( ( callback ) => { - mediaUploadListeners.push( callback ); - return { remove: jest.fn() }; - } ); - const triggerMediaUpload = ( payload ) => - mediaUploadListeners.forEach( ( listener ) => listener( payload ) ); - - let mediaPickerCallback; - requestMediaPicker.mockImplementation( - ( source, filter, multiple, callback ) => { - mediaPickerCallback = callback; - } - ); + const otherAppsMedia = [ ...MEDIA ].map( ( item, index ) => ( { + ...item, + localUrl: `file:///IMG_${ index + 1 }.JPG`, + } ) ); + const { notifyUploadingState, notifySucceedState } = setupMediaUpload(); + const { + expectMediaPickerCall, + mediaPickerCallback, + } = setupMediaPicker(); let otherMediaOptionsCallback; getOtherMediaOptions.mockImplementation( ( filter, callback ) => { @@ -965,83 +548,27 @@ describe( 'Gallery block', () => { // Upload images from other apps fireEvent.press( getByText( 'ADD MEDIA' ) ); fireEvent.press( getByText( 'Other Apps' ) ); - expect( requestMediaPicker ).toHaveBeenCalledWith( - 'wpios-other-files', - [ 'image' ], - true, - mediaPickerCallback - ); + expectMediaPickerCall( 'wpios-other-files', [ 'image' ], true ); // Return media items picked - await act( async () => - mediaPickerCallback( [ - { - type: 'image', - title: 'IMG_0001.JPG', - url: 'file:///IMG_0001.JPG', - id: MEDIA[ 0 ].localId, - }, - { - type: 'image', - title: 'IMG_0002.JPG', - url: 'file:///IMG_0002.JPG', - id: MEDIA[ 1 ].localId, - }, - ] ) - ); + await mediaPickerCallback( otherAppsMedia[ 0 ], otherAppsMedia[ 1 ] ); // Check that gallery items are visible - fireEvent( - within( galleryBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - }, - }, - } - ); - const galleryItem1 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 1/ - ); - const galleryItem2 = within( galleryBlock ).getByA11yLabel( - /Image Block\. Row 2/ - ); + triggerGalleryLayout( galleryBlock ); + const galleryItem1 = getGalleryItem( galleryBlock, 1 ); + const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); expect( galleryItem2 ).toBeVisible(); // Check that images are showing a loading state - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 0 ].localId, - progress: 0.5, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_UPLOADING, - mediaId: MEDIA[ 1 ].localId, - progress: 0.25, - } ); - } ); + await notifyUploadingState( otherAppsMedia[ 0 ] ); + await notifyUploadingState( otherAppsMedia[ 1 ] ); expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); // Notify that the media items upload succeeded - await act( async () => { - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_SUCCEEDED, - mediaId: MEDIA[ 0 ].localId, - mediaUrl: MEDIA[ 0 ].serverUrl, - mediaServerId: MEDIA[ 0 ].serverId, - } ); - triggerMediaUpload( { - state: MEDIA_UPLOAD_STATE_SUCCEEDED, - mediaId: MEDIA[ 1 ].localId, - mediaUrl: MEDIA[ 1 ].serverUrl, - mediaServerId: MEDIA[ 1 ].serverId, - } ); - } ); + await notifySucceedState( otherAppsMedia[ 0 ] ); + await notifySucceedState( otherAppsMedia[ 1 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); diff --git a/test/native/jest.config.js b/test/native/jest.config.js index 8630d9a01a1ccd..44260181fb536f 100644 --- a/test/native/jest.config.js +++ b/test/native/jest.config.js @@ -28,7 +28,7 @@ module.exports = { setupFiles: [ '/' + configPath + '/setup.js' ], setupFilesAfterEnv: [ '/' + configPath + '/setup-after-env.js' ], testMatch: [ - '**/test/*.native.[jt]s?(x)', + '**/test/!(helper)*.native.[jt]s?(x)', '/packages/react-native-*/**/?(*.)+(spec|test).[jt]s?(x)', ], testPathIgnorePatterns: [ From fe45cdec5b5f7898e2b0d341dd2105862ad00f4c Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 10:27:28 +0100 Subject: [PATCH 21/33] Remove gallery test fixtures --- .../test/__snapshots__/index.native.js.snap | 4 ++-- .../block-library/src/gallery/test/index.native.js | 14 ++------------ 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index abce9e7995f49f..a345c2d47f4278 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -46,8 +46,8 @@ exports[`Gallery block changes columns setting (TC013 - Settings - Columns 2`] = exports[`Gallery block disables crop images setting (TC014 - Settings - Crop images 1`] = ` " -
-
\\"\\"
+
+
\\"\\"
" `; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index a8b621af14fda9..8d1eee6ac6ee2a 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -36,16 +36,6 @@ import { triggerGalleryLayout, } from './helpers'; -const GALLERY_EMPTY = ` -
-`; - -const GALLERY_WITH_ONE_IMAGE = ` -
-
-
-`; - const MEDIA = [ { localId: 1, @@ -527,7 +517,7 @@ describe( 'Gallery block', () => { // Initialize with an empty gallery const { galleryBlock, getByText } = initializeWithGalleryBlock( - GALLERY_EMPTY, + generateGalleryBlock( 0 ), { hasItems: false, } @@ -658,7 +648,7 @@ describe( 'Gallery block', () => { getByA11yLabel, getByTestId, getByText, - } = initializeWithGalleryBlock( GALLERY_WITH_ONE_IMAGE ); + } = initializeWithGalleryBlock( generateGalleryBlock( 1, MEDIA ) ); fireEvent.press( galleryBlock ); // Open block settings From d9c2b10c1ee42e41b5761ad43fa447c46ce6d1f0 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 11:03:54 +0100 Subject: [PATCH 22/33] Update triggerGalleryLayout helper --- .../src/gallery/test/helpers.native.js | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/gallery/test/helpers.native.js b/packages/block-library/src/gallery/test/helpers.native.js index e0a7a609a1ebd5..b3a854e166c9d8 100644 --- a/packages/block-library/src/gallery/test/helpers.native.js +++ b/packages/block-library/src/gallery/test/helpers.native.js @@ -45,20 +45,30 @@ export const addGalleryBlock = async () => { return screen; }; -export const triggerGalleryLayout = ( - galleryBlock, - { deviceWidth = 320 } = {} -) => - fireEvent( - within( galleryBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: deviceWidth, +/** + * The gallery items are rendered via the FlatList of the inner block list. + * In order to render the items of a FlatList, it's required to trigger the + * "onLayout" event. Additionally, the call is wrapped over "executeStoreResolvers" + * because the gallery items request the media data associated with the image to + * be rendered via the "getMedia" selector. + * + * @param {import('react-test-renderer').ReactTestInstance} galleryBlock Gallery block instance to trigger layout event. + * @param {Object} [options] Configuration options for the event. + * @param {number} [options.width] Width value to be passed to the event. + */ +export const triggerGalleryLayout = ( galleryBlock, { width = 320 } = {} ) => + executeStoreResolvers( () => + fireEvent( + within( galleryBlock ).getByTestId( 'block-list-wrapper' ), + 'layout', + { + nativeEvent: { + layout: { + width, + }, }, - }, - } + } + ) ); export const initializeWithGalleryBlock = ( @@ -71,9 +81,7 @@ export const initializeWithGalleryBlock = ( const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ ); if ( hasItems ) { - executeStoreResolvers( () => - triggerGalleryLayout( galleryBlock, { deviceWidth } ) - ); + triggerGalleryLayout( galleryBlock, { deviceWidth } ); } if ( selected ) { From ed72c38d858741466b35a32fa95178128bd694a9 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 11:04:25 +0100 Subject: [PATCH 23/33] Update test case descriptions --- .../test/__snapshots__/index.native.js.snap | 28 +++++----- .../src/gallery/test/index.native.js | 54 ++++++++++++++----- 2 files changed, 54 insertions(+), 28 deletions(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index a345c2d47f4278..11b977d037abc0 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Gallery block cancels uploads (TC009 - Choose from device (stay in editor) - Cancel upload) 1`] = ` +exports[`Gallery block cancels uploads 1`] = ` "
\\"\\"/
@@ -12,7 +12,7 @@ exports[`Gallery block cancels uploads (TC009 - Choose from device (stay in edit " `; -exports[`Gallery block changes columns setting (TC013 - Settings - Columns 1`] = ` +exports[`Gallery block changes columns setting 1`] = ` "
\\"\\"
@@ -28,7 +28,7 @@ exports[`Gallery block changes columns setting (TC013 - Settings - Columns 1`] = " `; -exports[`Gallery block changes columns setting (TC013 - Settings - Columns 2`] = ` +exports[`Gallery block changes columns setting 2`] = ` "
\\"\\"
@@ -44,7 +44,7 @@ exports[`Gallery block changes columns setting (TC013 - Settings - Columns 2`] = " `; -exports[`Gallery block disables crop images setting (TC014 - Settings - Crop images 1`] = ` +exports[`Gallery block disables crop images setting 1`] = ` "
\\"\\"
@@ -52,7 +52,7 @@ exports[`Gallery block disables crop images setting (TC014 - Settings - Crop ima " `; -exports[`Gallery block finishes pending uploads upon opening the editor (TC001 - Close/Re-open post with an ongoing image upload) 1`] = ` +exports[`Gallery block finishes pending uploads upon opening the editor 1`] = ` "
\\"\\"
@@ -64,7 +64,7 @@ exports[`Gallery block finishes pending uploads upon opening the editor (TC001 - " `; -exports[`Gallery block handles failed uploads (TC006 - Choose from device (stay in editor) - Failed upload) 1`] = ` +exports[`Gallery block handles failed uploads 1`] = ` "
\\"\\"
@@ -82,7 +82,7 @@ exports[`Gallery block inserts block 1`] = ` " `; -exports[`Gallery block overrides "Link to" setting of gallery items (TC012 - Settings - Link to 1`] = ` +exports[`Gallery block overrides "Link to" setting of gallery items 1`] = ` "
\\"\\"
@@ -94,7 +94,7 @@ exports[`Gallery block overrides "Link to" setting of gallery items (TC012 - Set " `; -exports[`Gallery block rearranges gallery items (TC010 - Rearrange images in Gallery) 1`] = ` +exports[`Gallery block rearranges gallery items 1`] = ` "
\\"\\"
@@ -110,7 +110,7 @@ exports[`Gallery block rearranges gallery items (TC010 - Rearrange images in Gal " `; -exports[`Gallery block sets caption to gallery (TC003 - Add caption to gallery) 1`] = ` +exports[`Gallery block sets caption to gallery 1`] = ` "
\\"\\"
@@ -118,7 +118,7 @@ exports[`Gallery block sets caption to gallery (TC003 - Add caption to gallery) " `; -exports[`Gallery block sets caption to gallery items (TC004 - Add caption to gallery images) 1`] = ` +exports[`Gallery block sets caption to gallery items 1`] = ` "
\\"\\"
Bold italic strikethrough image caption
@@ -126,7 +126,7 @@ exports[`Gallery block sets caption to gallery items (TC004 - Add caption to gal " `; -exports[`Gallery block successfully uploads items (TC005 - Choose from device (stay in editor) - Successful upload) 1`] = ` +exports[`Gallery block successfully uploads items 1`] = ` "
\\"\\"
@@ -138,7 +138,7 @@ exports[`Gallery block successfully uploads items (TC005 - Choose from device (s " `; -exports[`Gallery block takes a photo (TC007 - Take a photo) 1`] = ` +exports[`Gallery block takes a photo 1`] = ` "
\\"\\"
@@ -146,7 +146,7 @@ exports[`Gallery block takes a photo (TC007 - Take a photo) 1`] = ` " `; -exports[`Gallery block uploads from free photo library (TC008 - Choose from the free photo library) 1`] = ` +exports[`Gallery block uploads from free photo library 1`] = ` "
\\"\\"
@@ -158,7 +158,7 @@ exports[`Gallery block uploads from free photo library (TC008 - Choose from the " `; -exports[`Gallery block uploads from other apps (TC011 - Choose from Other Apps (iOS Files App) 1`] = ` +exports[`Gallery block uploads from other apps 1`] = ` "
\\"\\"
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 8d1eee6ac6ee2a..37edbcce74f64c 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -134,7 +134,9 @@ describe( 'Gallery block', () => { expect( blockActionsButton ).toBeVisible(); } ); - it( 'finishes pending uploads upon opening the editor (TC001 - Close/Re-open post with an ongoing image upload)', async () => { + // Test case related to TC001 - Close/Re-open post with an ongoing image upload + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc001 + it( 'finishes pending uploads upon opening the editor', async () => { const { notifyUploadingState, notifySucceedState } = setupMediaUpload(); // Initialize with a gallery that contains two items that are being uploaded @@ -161,7 +163,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'sets caption to gallery (TC003 - Add caption to gallery)', () => { + // Test case related to TC003 - Add caption to gallery + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc003 + it( 'sets caption to gallery', () => { // Initialize with a gallery that contains one item const { getByA11yLabel } = initializeWithGalleryBlock( generateGalleryBlock( 1, MEDIA ) @@ -183,7 +187,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'sets caption to gallery items (TC004 - Add caption to gallery images)', () => { + // Test case related to TC004 - Add caption to gallery images + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc004 + it( 'sets caption to gallery items', () => { // Initialize with a gallery that contains one item const { galleryBlock } = initializeWithGalleryBlock( generateGalleryBlock( 1, MEDIA ) @@ -205,7 +211,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'successfully uploads items (TC005 - Choose from device (stay in editor) - Successful upload)', async () => { + // Test case related to TC005 - Choose from device (stay in editor) - Successful upload + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc005 + it( 'successfully uploads items', async () => { const { notifyUploadingState, notifySucceedState } = setupMediaUpload(); const { expectMediaPickerCall, @@ -248,7 +256,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'handles failed uploads (TC006 - Choose from device (stay in editor) - Failed upload)', async () => { + // Test case related to TC006 - Choose from device (stay in editor) - Failed upload + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc006 + it( 'handles failed uploads', async () => { const { notifyUploadingState, notifyFailedState } = setupMediaUpload(); const { expectMediaPickerCall, @@ -308,7 +318,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'takes a photo (TC007 - Take a photo)', async () => { + // Test case related to TC007 - Take a photo + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc007 + it( 'takes a photo', async () => { const { notifyUploadingState, notifySucceedState } = setupMediaUpload(); const { expectMediaPickerCall, @@ -346,7 +358,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'uploads from free photo library (TC008 - Choose from the free photo library)', async () => { + // Test case related to TC008 - Choose from the free photo library + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc008 + it( 'uploads from free photo library', async () => { const freePhotoMedia = [ ...MEDIA ].map( ( item, index ) => ( { ...item, localUrl: `https://images.pexels.com/photos/110854/pexels-photo-${ @@ -414,7 +428,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'cancels uploads (TC009 - Choose from device (stay in editor) - Cancel upload)', async () => { + // Test case related to TC009 - Choose from device (stay in editor) - Cancel upload + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc009 + it( 'cancels uploads', async () => { const { notifyUploadingState, notifyResetState } = setupMediaUpload(); const { expectMediaPickerCall, @@ -468,8 +484,10 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'rearranges gallery items (TC010 - Rearrange images in Gallery)', async () => { - // Initialize with a gallery that contains various items + // Test case related to TC010 - Rearrange images in Gallery + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc010 + it( 'rearranges gallery items', async () => { + // Initialize with a gallery that contains three items const { galleryBlock } = initializeWithGalleryBlock( generateGalleryBlock( 3, MEDIA ) ); @@ -499,7 +517,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'uploads from other apps (TC011 - Choose from Other Apps (iOS Files App)', async () => { + // Test case related to TC011 - Choose from Other Apps (iOS Files App + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc011 + it( 'uploads from other apps', async () => { const otherAppsMedia = [ ...MEDIA ].map( ( item, index ) => ( { ...item, localUrl: `file:///IMG_${ index + 1 }.JPG`, @@ -563,7 +583,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'overrides "Link to" setting of gallery items (TC012 - Settings - Link to', async () => { + // Test case related to TC012 - Settings - Link to + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc012 + it( 'overrides "Link to" setting of gallery items', async () => { // Initialize with a gallery that contains two items, the latter includes "linkDestination" attribute const { galleryBlock, @@ -592,7 +614,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'changes columns setting (TC013 - Settings - Columns', async () => { + // Test case related to TC013 - Settings - Columns + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc013 + it( 'changes columns setting', async () => { // Initialize with a gallery that contains three items const { galleryBlock, @@ -641,7 +665,9 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - it( 'disables crop images setting (TC014 - Settings - Crop images', async () => { + // Test case related to TC014 - Settings - Crop images + // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc014 + it( 'disables crop images setting', async () => { // Initialize with a gallery that contains one item const { galleryBlock, From a8f8f667bed331bf4503de102ddaec54695f46c0 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 11:44:33 +0100 Subject: [PATCH 24/33] Update executeStoreResolvers description --- test/native/helpers.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/test/native/helpers.js b/test/native/helpers.js index 05fc1c1c0c0918..de2127fad05645 100644 --- a/test/native/helpers.js +++ b/test/native/helpers.js @@ -37,9 +37,9 @@ provideToNativeHtml.mockImplementation( ( html ) => { /** * Executes a function that triggers store resolvers. * - * Asynchronous store resolvers rely upon `setTimeout` to run at the end of the - * current JavaScript block execution In order to prevent "act" warnings triggered - * by updates to the React tree, we leverage fake timers to manually tick and + * Asynchronous store resolvers leverage `setTimeout` to run at the end of + * the current JavaScript block execution. In order to prevent "act" warnings + * triggered by updates to the React tree, we manually tick fake timers and * await the resolution of the current block execution before proceeding. * * @param {Function} fn Function that triggers store resolvers. @@ -52,10 +52,6 @@ export function executeStoreResolvers( fn ) { const originalRAF = global.requestAnimationFrame; const originalCAF = global.cancelAnimationFrame; - // Asynchronous store resolvers leverage `setTimeout` to run at the end of - // the current JavaScript block execution. In order to prevent "act" warnings - // triggered by updates to the React tree, we manually tick fake timers and - // await the resolution of the current block execution before proceeding. jest.useFakeTimers( 'legacy' ); const result = fn(); From 9aa4ff6b5ae1ef2140841c565457ee2e9d0467b5 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 12:22:28 +0100 Subject: [PATCH 25/33] Add openBlockSettings helper --- .../test/__snapshots__/index.native.js.snap | 24 ++++---- .../src/gallery/test/helpers.native.js | 8 +++ .../src/gallery/test/index.native.js | 56 ++++--------------- 3 files changed, 32 insertions(+), 56 deletions(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index 11b977d037abc0..e15272f6ee1f5b 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -14,32 +14,32 @@ exports[`Gallery block cancels uploads 1`] = ` exports[`Gallery block changes columns setting 1`] = ` " -
-
\\"\\"
+
+
\\"\\"
- -
\\"\\"
+ +
\\"\\"
- -
\\"\\"
+ +
\\"\\"
" `; exports[`Gallery block changes columns setting 2`] = ` " -
-
\\"\\"
+
+
\\"\\"
- -
\\"\\"
+ +
\\"\\"
- -
\\"\\"
+ +
\\"\\"
" `; diff --git a/packages/block-library/src/gallery/test/helpers.native.js b/packages/block-library/src/gallery/test/helpers.native.js index f3c761ffe2274a..dcc005661df078 100644 --- a/packages/block-library/src/gallery/test/helpers.native.js +++ b/packages/block-library/src/gallery/test/helpers.native.js @@ -205,3 +205,11 @@ export const setCaption = ( element, text ) => { }, } ); }; + +export const openBlockSettings = async ( screen ) => { + const { getByA11yLabel, getByTestId } = screen; + fireEvent.press( getByA11yLabel( 'Open Settings' ) ); + await waitFor( + () => getByTestId( 'block-settings-modal' ).props.isVisible + ); +}; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 3e95ee90145dd5..14c67507345d6c 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -6,7 +6,6 @@ import { getEditorHtml, initializeEditor, fireEvent, - waitFor, within, } from 'test/helpers'; @@ -34,6 +33,7 @@ import { setCaption, setupMediaPicker, triggerGalleryLayout, + openBlockSettings, } from './helpers'; const MEDIA = [ @@ -591,12 +591,7 @@ describe( 'Gallery block', () => { // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc012 it( 'overrides "Link to" setting of gallery items', async () => { // Initialize with a gallery that contains two items, the latter includes "linkDestination" attribute - const { - galleryBlock, - getByA11yLabel, - getByTestId, - getByText, - } = await initializeWithGalleryBlock( ` + const screen = await initializeWithGalleryBlock( `
@@ -605,13 +600,11 @@ describe( 'Gallery block', () => {
` ); + const { galleryBlock, getByText } = screen; fireEvent.press( galleryBlock ); // Set "Link to" setting via Gallery block settings - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); - await waitFor( - () => getByTestId( 'block-settings-modal' ).props.isVisible - ); + await openBlockSettings( screen ); fireEvent.press( getByText( 'Link to' ) ); fireEvent.press( getByText( 'Media File' ) ); @@ -622,30 +615,13 @@ describe( 'Gallery block', () => { // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc013 it( 'changes columns setting', async () => { // Initialize with a gallery that contains three items - const { - galleryBlock, - getByA11yLabel, - getByTestId, - } = await initializeWithGalleryBlock( ` -
-
- - - -
- - - -
-
- ` ); + const screen = await initializeWithGalleryBlock( + generateGalleryBlock( 3, MEDIA ) + ); + const { galleryBlock, getByA11yLabel } = screen; fireEvent.press( galleryBlock ); - // Open block settings - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); - await waitFor( - () => getByTestId( 'block-settings-modal' ).props.isVisible - ); + await openBlockSettings( screen ); // Can't increment due to maximum value // NOTE: Default columns value is 3 @@ -673,21 +649,13 @@ describe( 'Gallery block', () => { // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc014 it( 'disables crop images setting', async () => { // Initialize with a gallery that contains one item - const { - galleryBlock, - getByA11yLabel, - getByTestId, - getByText, - } = await initializeWithGalleryBlock( + const screen = await initializeWithGalleryBlock( generateGalleryBlock( 1, MEDIA ) ); + const { galleryBlock, getByText } = screen; fireEvent.press( galleryBlock ); - // Open block settings - fireEvent.press( getByA11yLabel( 'Open Settings' ) ); - await waitFor( - () => getByTestId( 'block-settings-modal' ).props.isVisible - ); + await openBlockSettings( screen ); // Disable crop images setting fireEvent.press( getByText( 'Crop images' ) ); From b6ced5bccf26ea24ffe6478d8e64a1c9ebd7a1e9 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 12:29:34 +0100 Subject: [PATCH 26/33] Fix act warnings in executeStoreResolvers --- .../src/gallery/test/helpers.native.js | 7 ++++-- .../src/gallery/test/index.native.js | 12 ++++----- test/native/helpers.js | 25 +++++++++---------- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/gallery/test/helpers.native.js b/packages/block-library/src/gallery/test/helpers.native.js index dcc005661df078..10e7258d83b5df 100644 --- a/packages/block-library/src/gallery/test/helpers.native.js +++ b/packages/block-library/src/gallery/test/helpers.native.js @@ -56,7 +56,10 @@ export const addGalleryBlock = async () => { * @param {Object} [options] Configuration options for the event. * @param {number} [options.width] Width value to be passed to the event. */ -export const triggerGalleryLayout = ( galleryBlock, { width = 320 } = {} ) => +export const triggerGalleryLayout = async ( + galleryBlock, + { width = 320 } = {} +) => executeStoreResolvers( () => fireEvent( within( galleryBlock ).getByTestId( 'block-list-wrapper' ), @@ -81,7 +84,7 @@ export const initializeWithGalleryBlock = async ( const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ ); if ( hasItems ) { - triggerGalleryLayout( galleryBlock, { deviceWidth } ); + await triggerGalleryLayout( galleryBlock, { deviceWidth } ); } if ( selected ) { diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 14c67507345d6c..2346abb3012578 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -241,7 +241,7 @@ describe( 'Gallery block', () => { await mediaPickerCallback( MEDIA[ 0 ], MEDIA[ 1 ] ); // Check that gallery items are visible - triggerGalleryLayout( galleryBlock ); + await triggerGalleryLayout( galleryBlock ); const galleryItem1 = getGalleryItem( galleryBlock, 1 ); const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); @@ -287,7 +287,7 @@ describe( 'Gallery block', () => { await mediaPickerCallback( MEDIA[ 0 ], MEDIA[ 1 ] ); // Check that gallery items are visible - triggerGalleryLayout( galleryBlock ); + await triggerGalleryLayout( galleryBlock ); const galleryItem1 = getGalleryItem( galleryBlock, 1 ); const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); @@ -348,7 +348,7 @@ describe( 'Gallery block', () => { await mediaPickerCallback( MEDIA[ 0 ] ); // Check gallery item is visible - triggerGalleryLayout( galleryBlock ); + await triggerGalleryLayout( galleryBlock ); const galleryItem = getGalleryItem( galleryBlock, 1 ); expect( galleryItem ).toBeVisible(); @@ -413,7 +413,7 @@ describe( 'Gallery block', () => { ); // Check that gallery items are visible - triggerGalleryLayout( galleryBlock ); + await triggerGalleryLayout( galleryBlock ); const galleryItem1 = getGalleryItem( galleryBlock, 1 ); const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); @@ -458,7 +458,7 @@ describe( 'Gallery block', () => { await mediaPickerCallback( MEDIA[ 0 ], MEDIA[ 1 ] ); // Check that gallery items are visible - triggerGalleryLayout( galleryBlock ); + await triggerGalleryLayout( galleryBlock ); const galleryItem1 = getGalleryItem( galleryBlock, 1 ); const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); @@ -568,7 +568,7 @@ describe( 'Gallery block', () => { await mediaPickerCallback( otherAppsMedia[ 0 ], otherAppsMedia[ 1 ] ); // Check that gallery items are visible - triggerGalleryLayout( galleryBlock ); + await triggerGalleryLayout( galleryBlock ); const galleryItem1 = getGalleryItem( galleryBlock, 1 ); const galleryItem2 = getGalleryItem( galleryBlock, 2 ); expect( galleryItem1 ).toBeVisible(); diff --git a/test/native/helpers.js b/test/native/helpers.js index de2127fad05645..dfc220cb2c1367 100644 --- a/test/native/helpers.js +++ b/test/native/helpers.js @@ -45,7 +45,7 @@ provideToNativeHtml.mockImplementation( ( html ) => { * @param {Function} fn Function that triggers store resolvers. * @return {*} The result of the function call. */ -export function executeStoreResolvers( fn ) { +export async function executeStoreResolvers( fn ) { // Portions of the React Native Animation API rely upon these APIs. However, // Jest's 'legacy' fake timers mutate these globals, which breaks the Animated // API. We preserve the original implementations to restore them later. @@ -59,6 +59,13 @@ export function executeStoreResolvers( fn ) { // Advance all timers allowing store resolvers to resolve. act( () => jest.runAllTimers() ); + // The store resolvers might perform API fetch requests. The most + // straightforward approach to ensure all of them resolve before we consider + // the function finished is to flush micro tasks, similar to the approach found + // in `@testing-library/react-native`. + // https://github.com/callstack/react-native-testing-library/blob/a010ffdbca906615279ecc3abee423525e528101/src/flushMicroTasks.js#L15-L23 + await act( async () => {} ); + // Restore the default timer APIs for remainder of test arrangement, act, and // assertion. jest.useRealTimers(); @@ -81,10 +88,9 @@ export function executeStoreResolvers( fn ) { * @return {import('@testing-library/react-native').RenderAPI} A Testing Library screen. */ export async function initializeEditor( props, { component = Editor } = {} ) { - let screen; - executeStoreResolvers( () => { + return executeStoreResolvers( () => { const EditorComponent = component; - screen = render( + const screen = render( {} ); - - return screen; + return screen; + } ); } export * from '@testing-library/react-native'; From 487983537837864988b912d1bddad33965d97f0a Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 12:33:52 +0100 Subject: [PATCH 27/33] Split columns setting test cases --- .../test/__snapshots__/index.native.js.snap | 34 ++++----- .../src/gallery/test/index.native.js | 69 +++++++++++-------- 2 files changed, 58 insertions(+), 45 deletions(-) diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap index e15272f6ee1f5b..1fd4dc765870d0 100644 --- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap @@ -1,18 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Gallery block cancels uploads 1`] = ` -" -
-
\\"\\"/
+exports[`Gallery block Columns setting decrements columns 1`] = ` +" +
+
\\"\\"
- -
\\"\\"/
+ +
\\"\\"
+ + + +
\\"\\"
" `; -exports[`Gallery block changes columns setting 1`] = ` +exports[`Gallery block Columns setting does not increment due to maximum value 1`] = ` "
\\"\\"
@@ -28,18 +32,14 @@ exports[`Gallery block changes columns setting 1`] = ` " `; -exports[`Gallery block changes columns setting 2`] = ` -" -
-
\\"\\"
- - - -
\\"\\"
+exports[`Gallery block cancels uploads 1`] = ` +" +
+
\\"\\"/
- -
\\"\\"
+ +
\\"\\"/
" `; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 2346abb3012578..7e731c206ef8ca 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -611,38 +611,51 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - // Test case related to TC013 - Settings - Columns + // Test cases related to TC013 - Settings - Columns // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc013 - it( 'changes columns setting', async () => { - // Initialize with a gallery that contains three items - const screen = await initializeWithGalleryBlock( - generateGalleryBlock( 3, MEDIA ) - ); - const { galleryBlock, getByA11yLabel } = screen; - fireEvent.press( galleryBlock ); + describe( 'Columns setting', () => { + it( 'does not increment due to maximum value', async () => { + // Initialize with a gallery that contains three items + const screen = await initializeWithGalleryBlock( + generateGalleryBlock( 3, MEDIA ) + ); + const { galleryBlock, getByA11yLabel } = screen; + fireEvent.press( galleryBlock ); + + await openBlockSettings( screen ); + + // Can't increment due to maximum value + // NOTE: Default columns value is 3 + fireEvent( + getByA11yLabel( /Columns\. Value is 3/ ), + 'accessibilityAction', + { + nativeEvent: { actionName: 'increment' }, + } + ); + expect( getEditorHtml() ).toMatchSnapshot(); + } ); - await openBlockSettings( screen ); + it( 'decrements columns', async () => { + // Initialize with a gallery that contains three items + const screen = await initializeWithGalleryBlock( + generateGalleryBlock( 3, MEDIA ) + ); + const { galleryBlock, getByA11yLabel } = screen; + fireEvent.press( galleryBlock ); - // Can't increment due to maximum value - // NOTE: Default columns value is 3 - fireEvent( - getByA11yLabel( /Columns\. Value is 3/ ), - 'accessibilityAction', - { - nativeEvent: { actionName: 'increment' }, - } - ); - expect( getEditorHtml() ).toMatchSnapshot(); + await openBlockSettings( screen ); - // Decrement columns - fireEvent( - getByA11yLabel( /Columns\. Value is 3/ ), - 'accessibilityAction', - { - nativeEvent: { actionName: 'decrement' }, - } - ); - expect( getEditorHtml() ).toMatchSnapshot(); + // Decrement columns + fireEvent( + getByA11yLabel( /Columns\. Value is 3/ ), + 'accessibilityAction', + { + nativeEvent: { actionName: 'decrement' }, + } + ); + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); // Test case related to TC014 - Settings - Crop images From 6b34d579de80b2ff7994e3a780cb855bcd02724f Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 13:01:06 +0100 Subject: [PATCH 28/33] Add documentation to helpers --- .../src/gallery/test/helpers.native.js | 66 ++++++++++++++++++- 1 file changed, 64 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/test/helpers.native.js b/packages/block-library/src/gallery/test/helpers.native.js index 10e7258d83b5df..681e7a6f9050a2 100644 --- a/packages/block-library/src/gallery/test/helpers.native.js +++ b/packages/block-library/src/gallery/test/helpers.native.js @@ -24,6 +24,11 @@ import { MEDIA_UPLOAD_STATE_RESET, } from '@wordpress/block-editor'; +/** + * Adds a Gallery block via the block picker. + * + * @return {import('@testing-library/react-native').RenderAPI} A Testing Library screen. + */ export const addGalleryBlock = async () => { const screen = await initializeEditor(); const { getByA11yLabel, getByTestId, getByText } = screen; @@ -74,9 +79,18 @@ export const triggerGalleryLayout = async ( ) ); +/** + * + * @param {string} initialHtml String of block editor HTML to parse and render. + * @param {Object} [options] Configuration options for the initialization. + * @param {boolean} [options.hasItems] Specifies if the Gallery block included in the initial HTML has items. This is used to assure that gallery items are rendered. + * @param {number} [options.width] Width to be passed when triggering the "onLayout" event on the Gallery block. + * @param {boolean} [options.selected] Specifies if the Gallery block included in the initial HTML should be automatically selected. + * @return {import('@testing-library/react-native').RenderAPI} The Testing Library screen plus the Gallery block React Test instance. + */ export const initializeWithGalleryBlock = async ( initialHtml, - { hasItems = true, deviceWidth = 320, selected = true } = {} + { hasItems = true, width = 320, selected = true } = {} ) => { const screen = await initializeEditor( { initialHtml } ); const { getByA11yLabel } = screen; @@ -84,7 +98,7 @@ export const initializeWithGalleryBlock = async ( const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ ); if ( hasItems ) { - await triggerGalleryLayout( galleryBlock, { deviceWidth } ); + await triggerGalleryLayout( galleryBlock, { width } ); } if ( selected ) { @@ -94,12 +108,30 @@ export const initializeWithGalleryBlock = async ( return { ...screen, galleryBlock }; }; +/** + * Gets a gallery item within a Gallery block. + * + * @param {import('react-test-renderer').ReactTestInstance} galleryBlock Gallery block instance. + * @param {number} rowPosition Row position within the Gallery block. + * @return {import('react-test-renderer').ReactTestInstance} Gallery item. + */ export const getGalleryItem = ( galleryBlock, rowPosition ) => { return within( galleryBlock ).getByA11yLabel( new RegExp( `Image Block\\. Row ${ rowPosition }` ) ); }; +/** + * Sets up the media upload mock functions for testing. + * + * @typedef {Object} MediaUploadMockFunctions + * @property {Function} notifyUploadingState Notify uploading state for a media item. + * @property {Function} notifySucceedState Notify succeed state for a media item. + * @property {Function} notifyFailedState Notify failed state for a media item. + * @property {Function} notifyResetState Notify reset state for a media item. + * + * @return {MediaUploadMockFunctions} Notify state functions. + */ export const setupMediaUpload = () => { const mediaUploadListeners = []; subscribeMediaUpload.mockImplementation( ( callback ) => { @@ -146,6 +178,16 @@ export const setupMediaUpload = () => { }; }; +/** + * + * Sets up Media Picker mock functions. + * + * @typedef {Object} MediaPickerMockFunctions + * @property {Function} expectMediaPickerCall Checks if the request media picker function has been called with specific arguments. + * @property {Function} mediaPickerCallback Callback function to notify the media items picked from the media picker. + * + * @return {MediaPickerMockFunctions} Media picker mock functions. + */ export const setupMediaPicker = () => { let mediaPickerCallback; requestMediaPicker.mockImplementation( @@ -174,6 +216,15 @@ export const setupMediaPicker = () => { }; }; +/** + * Generates the HTML of a Gallery block. + * + * @param {number} numberOfItems Number of gallery items to generate. + * @param {Object} media Contains media data to be used in the generation. + * @param {Object} [options] Configuration options for the generation. + * @param {boolean} [options.useLocalUrl] Specifies if the items should use the local URL instead of the server URL. + * @return {string} Gallery block HTML. + */ export const generateGalleryBlock = ( numberOfItems, media, @@ -198,6 +249,12 @@ export const generateGalleryBlock = ( `; }; +/** + * Sets the text of a caption. + * + * @param {import('react-test-renderer').ReactTestInstance} element Caption test instance. + * @param {string} text Text to be set. + */ export const setCaption = ( element, text ) => { fireEvent( element, 'focus' ); fireEvent( element, 'onChange', { @@ -209,6 +266,11 @@ export const setCaption = ( element, text ) => { } ); }; +/** + * Opens the block settings of the current selected block. + * + * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen. + */ export const openBlockSettings = async ( screen ) => { const { getByA11yLabel, getByTestId } = screen; fireEvent.press( getByA11yLabel( 'Open Settings' ) ); From 10b2858f48cd8ea3a6d530e7803ee9f28ad7d633 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 13:41:28 +0100 Subject: [PATCH 29/33] Remove wpios string from media options --- .../src/gallery/test/index.native.js | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 7e731c206ef8ca..498fcedfd7b657 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -395,17 +395,15 @@ describe( 'Gallery block', () => { otherMediaOptionsCallback( [ { label: 'Free Photo Library', - value: 'wpios-stock-photo-library', + value: 'stock-photo-library', }, - { label: 'Free GIF Library', value: 'wpios-tenor' }, - { label: 'Other Apps', value: 'wpios-other-files' }, ] ) ); // Upload images from free photo library fireEvent.press( getByText( 'ADD MEDIA' ) ); fireEvent.press( getByText( 'Free Photo Library' ) ); - expectMediaPickerCall( 'wpios-stock-photo-library', [ 'image' ], true ); + expectMediaPickerCall( 'stock-photo-library', [ 'image' ], true ); // Return media items picked await act( async () => @@ -550,19 +548,14 @@ describe( 'Gallery block', () => { // Notify other media options act( () => otherMediaOptionsCallback( [ - { - label: 'Free Photo Library', - value: 'wpios-stock-photo-library', - }, - { label: 'Free GIF Library', value: 'wpios-tenor' }, - { label: 'Other Apps', value: 'wpios-other-files' }, + { label: 'Other Apps', value: 'other-files' }, ] ) ); // Upload images from other apps fireEvent.press( getByText( 'ADD MEDIA' ) ); fireEvent.press( getByText( 'Other Apps' ) ); - expectMediaPickerCall( 'wpios-other-files', [ 'image' ], true ); + expectMediaPickerCall( 'other-files', [ 'image' ], true ); // Return media items picked await mediaPickerCallback( otherAppsMedia[ 0 ], otherAppsMedia[ 1 ] ); From f805081113105ebfc2ac9f1e8a233552d200b9be Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 13:55:18 +0100 Subject: [PATCH 30/33] Generate gallery block html upon editor initialization --- .../src/gallery/test/helpers.native.js | 33 +++- .../src/gallery/test/index.native.js | 183 ++++++++---------- 2 files changed, 105 insertions(+), 111 deletions(-) diff --git a/packages/block-library/src/gallery/test/helpers.native.js b/packages/block-library/src/gallery/test/helpers.native.js index 681e7a6f9050a2..4ffbc05837877e 100644 --- a/packages/block-library/src/gallery/test/helpers.native.js +++ b/packages/block-library/src/gallery/test/helpers.native.js @@ -80,24 +80,37 @@ export const triggerGalleryLayout = async ( ); /** + * Initialize the editor with HTML generated of Gallery block. + * + * @param {Object} [options] Configuration options for the initialization. + * @param {string} [options.html] String of block editor HTML to parse and render. + * @param {number} [options.numberOfItems] Number of gallery items to generate or already included in the provided block editor HTML. + * @param {Object} [options.media] Contains media data to be used in the generation. + * @param {number} [options.width] Width to be passed when triggering the "onLayout" event on the Gallery block. + * @param {boolean} [options.selected] Specifies if the Gallery block included in the initial HTML should be automatically selected. + * @param {boolean} [options.useLocalUrl] Specifies if the items should use the local URL instead of the server URL. * - * @param {string} initialHtml String of block editor HTML to parse and render. - * @param {Object} [options] Configuration options for the initialization. - * @param {boolean} [options.hasItems] Specifies if the Gallery block included in the initial HTML has items. This is used to assure that gallery items are rendered. - * @param {number} [options.width] Width to be passed when triggering the "onLayout" event on the Gallery block. - * @param {boolean} [options.selected] Specifies if the Gallery block included in the initial HTML should be automatically selected. * @return {import('@testing-library/react-native').RenderAPI} The Testing Library screen plus the Gallery block React Test instance. */ -export const initializeWithGalleryBlock = async ( - initialHtml, - { hasItems = true, width = 320, selected = true } = {} -) => { +export const initializeWithGalleryBlock = async ( { + html, + numberOfItems = 0, + media = [], + width = 320, + selected = true, + useLocalUrl = false, +} = {} ) => { + const initialHtml = + html || + generateGalleryBlock( numberOfItems, media, { + useLocalUrl, + } ); const screen = await initializeEditor( { initialHtml } ); const { getByA11yLabel } = screen; const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ ); - if ( hasItems ) { + if ( numberOfItems > 0 ) { await triggerGalleryLayout( galleryBlock, { width } ); } diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 498fcedfd7b657..58aeb9be69f8de 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -36,7 +36,7 @@ import { openBlockSettings, } from './helpers'; -const MEDIA = [ +const media = [ { localId: 1, localUrl: 'file:///local-image-1.jpeg', @@ -78,12 +78,11 @@ describe( 'Gallery block', () => { } ); it( 'selects a gallery item', async () => { - const { galleryBlock } = await initializeWithGalleryBlock( - generateGalleryBlock( 1, MEDIA ), - { - selected: false, - } - ); + const { galleryBlock } = await initializeWithGalleryBlock( { + numberOfItems: 1, + media, + selected: false, + } ); const galleryItem = getGalleryItem( galleryBlock, 1 ); fireEvent.press( galleryItem ); @@ -92,9 +91,10 @@ describe( 'Gallery block', () => { } ); it( 'shows appender button when gallery has images', async () => { - const { galleryBlock, getByText } = await initializeWithGalleryBlock( - generateGalleryBlock( 1, MEDIA ) - ); + const { galleryBlock, getByText } = await initializeWithGalleryBlock( { + numberOfItems: 1, + media, + } ); const appenderButton = within( galleryBlock ).getByA11yLabel( /Gallery block\. Empty/ @@ -144,13 +144,15 @@ describe( 'Gallery block', () => { const { notifyUploadingState, notifySucceedState } = setupMediaUpload(); // Initialize with a gallery that contains two items that are being uploaded - const { galleryBlock } = await initializeWithGalleryBlock( - generateGalleryBlock( 2, MEDIA, { useLocalUrl: true } ) - ); + const { galleryBlock } = await initializeWithGalleryBlock( { + numberOfItems: 2, + media, + useLocalUrl: true, + } ); // Notify that the media items are uploading - await notifyUploadingState( MEDIA[ 0 ] ); - await notifyUploadingState( MEDIA[ 1 ] ); + await notifyUploadingState( media[ 0 ] ); + await notifyUploadingState( media[ 1 ] ); // Check that images are showing a loading state expect( @@ -161,8 +163,8 @@ describe( 'Gallery block', () => { ).toBeVisible(); // Notify that the media items upload succeeded - await notifySucceedState( MEDIA[ 0 ] ); - await notifySucceedState( MEDIA[ 1 ] ); + await notifySucceedState( media[ 0 ] ); + await notifySucceedState( media[ 1 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); @@ -171,9 +173,10 @@ describe( 'Gallery block', () => { // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc003 it( 'sets caption to gallery', async () => { // Initialize with a gallery that contains one item - const { getByA11yLabel } = await initializeWithGalleryBlock( - generateGalleryBlock( 1, MEDIA ) - ); + const { getByA11yLabel } = await initializeWithGalleryBlock( { + numberOfItems: 1, + media, + } ); // Check gallery item caption is not visible const galleryItemCaption = getByA11yLabel( /Image caption. Empty/ ); @@ -195,9 +198,10 @@ describe( 'Gallery block', () => { // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc004 it( 'sets caption to gallery items', async () => { // Initialize with a gallery that contains one item - const { galleryBlock } = await initializeWithGalleryBlock( - generateGalleryBlock( 1, MEDIA ) - ); + const { galleryBlock } = await initializeWithGalleryBlock( { + numberOfItems: 1, + media, + } ); // Select gallery item const galleryItem = getGalleryItem( galleryBlock, 1 ); @@ -225,12 +229,7 @@ describe( 'Gallery block', () => { } = setupMediaPicker(); // Initialize with an empty gallery - const { galleryBlock, getByText } = await initializeWithGalleryBlock( - generateGalleryBlock( 0 ), - { - hasItems: false, - } - ); + const { galleryBlock, getByText } = await initializeWithGalleryBlock(); // Upload images from device fireEvent.press( getByText( 'ADD MEDIA' ) ); @@ -238,7 +237,7 @@ describe( 'Gallery block', () => { expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true ); // Return media items picked - await mediaPickerCallback( MEDIA[ 0 ], MEDIA[ 1 ] ); + await mediaPickerCallback( media[ 0 ], media[ 1 ] ); // Check that gallery items are visible await triggerGalleryLayout( galleryBlock ); @@ -248,14 +247,14 @@ describe( 'Gallery block', () => { expect( galleryItem2 ).toBeVisible(); // Check that images are showing a loading state - await notifyUploadingState( MEDIA[ 0 ] ); - await notifyUploadingState( MEDIA[ 1 ] ); + await notifyUploadingState( media[ 0 ] ); + await notifyUploadingState( media[ 1 ] ); expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); // Notify that the media items upload succeeded - await notifySucceedState( MEDIA[ 0 ] ); - await notifySucceedState( MEDIA[ 1 ] ); + await notifySucceedState( media[ 0 ] ); + await notifySucceedState( media[ 1 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); @@ -270,12 +269,7 @@ describe( 'Gallery block', () => { } = setupMediaPicker(); // Initialize with an empty gallery - const { galleryBlock, getByText } = await initializeWithGalleryBlock( - generateGalleryBlock( 0 ), - { - hasItems: false, - } - ); + const { galleryBlock, getByText } = await initializeWithGalleryBlock(); fireEvent.press( galleryBlock ); // Upload images from device @@ -284,7 +278,7 @@ describe( 'Gallery block', () => { expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true ); // Return media items picked - await mediaPickerCallback( MEDIA[ 0 ], MEDIA[ 1 ] ); + await mediaPickerCallback( media[ 0 ], media[ 1 ] ); // Check that gallery items are visible await triggerGalleryLayout( galleryBlock ); @@ -294,14 +288,14 @@ describe( 'Gallery block', () => { expect( galleryItem2 ).toBeVisible(); // Check that images are showing a loading state - await notifyUploadingState( MEDIA[ 0 ] ); - await notifyUploadingState( MEDIA[ 1 ] ); + await notifyUploadingState( media[ 0 ] ); + await notifyUploadingState( media[ 1 ] ); expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); // Notify that the media items uploads failed - await notifyFailedState( MEDIA[ 0 ] ); - await notifyFailedState( MEDIA[ 1 ] ); + await notifyFailedState( media[ 0 ] ); + await notifyFailedState( media[ 1 ] ); // Check that failed images provide the option to retry the upload fireEvent.press( galleryItem1 ); @@ -309,14 +303,14 @@ describe( 'Gallery block', () => { within( galleryItem1 ).getByText( /Failed to insert media/ ) ); expect( requestImageFailedRetryDialog ).toHaveBeenCalledWith( - MEDIA[ 0 ].localId + media[ 0 ].localId ); fireEvent.press( galleryItem2 ); fireEvent.press( within( galleryItem2 ).getByText( /Failed to insert media/ ) ); expect( requestImageFailedRetryDialog ).toHaveBeenCalledWith( - MEDIA[ 1 ].localId + media[ 1 ].localId ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -332,12 +326,7 @@ describe( 'Gallery block', () => { } = setupMediaPicker(); // Initialize with an empty gallery - const { galleryBlock, getByText } = await initializeWithGalleryBlock( - generateGalleryBlock( 0 ), - { - hasItems: false, - } - ); + const { galleryBlock, getByText } = await initializeWithGalleryBlock(); // Take a photo fireEvent.press( getByText( 'ADD MEDIA' ) ); @@ -345,7 +334,7 @@ describe( 'Gallery block', () => { expectMediaPickerCall( 'DEVICE_CAMERA', [ 'image' ], true ); // Return media item from photo taken - await mediaPickerCallback( MEDIA[ 0 ] ); + await mediaPickerCallback( media[ 0 ] ); // Check gallery item is visible await triggerGalleryLayout( galleryBlock ); @@ -353,11 +342,11 @@ describe( 'Gallery block', () => { expect( galleryItem ).toBeVisible(); // Check image is showing a loading state - await notifyUploadingState( MEDIA[ 0 ] ); + await notifyUploadingState( media[ 0 ] ); expect( within( galleryItem ).getByTestId( 'spinner' ) ).toBeVisible(); // Notify that the media item upload succeeded - await notifySucceedState( MEDIA[ 0 ] ); + await notifySucceedState( media[ 0 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); @@ -365,7 +354,7 @@ describe( 'Gallery block', () => { // Test case related to TC008 - Choose from the free photo library // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc008 it( 'uploads from free photo library', async () => { - const freePhotoMedia = [ ...MEDIA ].map( ( item, index ) => ( { + const freePhotoMedia = [ ...media ].map( ( item, index ) => ( { ...item, localUrl: `https://images.pexels.com/photos/110854/pexels-photo-${ index + 1 @@ -383,12 +372,7 @@ describe( 'Gallery block', () => { } ); // Initialize with an empty gallery - const { galleryBlock, getByText } = await initializeWithGalleryBlock( - generateGalleryBlock( 0 ), - { - hasItems: false, - } - ); + const { galleryBlock, getByText } = await initializeWithGalleryBlock(); // Notify other media options act( () => @@ -440,12 +424,7 @@ describe( 'Gallery block', () => { } = setupMediaPicker(); // Initialize with an empty gallery - const { galleryBlock, getByText } = await initializeWithGalleryBlock( - generateGalleryBlock( 0 ), - { - hasItems: false, - } - ); + const { galleryBlock, getByText } = await initializeWithGalleryBlock(); // Upload images from device fireEvent.press( getByText( 'ADD MEDIA' ) ); @@ -453,7 +432,7 @@ describe( 'Gallery block', () => { expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true ); // Return media items picked - await mediaPickerCallback( MEDIA[ 0 ], MEDIA[ 1 ] ); + await mediaPickerCallback( media[ 0 ], media[ 1 ] ); // Check that gallery items are visible await triggerGalleryLayout( galleryBlock ); @@ -463,8 +442,8 @@ describe( 'Gallery block', () => { expect( galleryItem2 ).toBeVisible(); // Check that images are showing a loading state - await notifyUploadingState( MEDIA[ 0 ] ); - await notifyUploadingState( MEDIA[ 1 ] ); + await notifyUploadingState( media[ 0 ] ); + await notifyUploadingState( media[ 1 ] ); expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible(); expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible(); @@ -472,16 +451,16 @@ describe( 'Gallery block', () => { fireEvent.press( galleryItem1 ); fireEvent.press( within( galleryItem1 ).getByTestId( 'spinner' ) ); expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith( - MEDIA[ 0 ].localId + media[ 0 ].localId ); - await notifyResetState( MEDIA[ 0 ] ); + await notifyResetState( media[ 0 ] ); fireEvent.press( galleryItem2 ); fireEvent.press( within( galleryItem2 ).getByTestId( 'spinner' ) ); expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith( - MEDIA[ 1 ].localId + media[ 1 ].localId ); - await notifyResetState( MEDIA[ 1 ] ); + await notifyResetState( media[ 1 ] ); expect( getEditorHtml() ).toMatchSnapshot(); } ); @@ -490,9 +469,10 @@ describe( 'Gallery block', () => { // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc010 it( 'rearranges gallery items', async () => { // Initialize with a gallery that contains three items - const { galleryBlock } = await initializeWithGalleryBlock( - generateGalleryBlock( 3, MEDIA ) - ); + const { galleryBlock } = await initializeWithGalleryBlock( { + numberOfItems: 3, + media, + } ); // Rearrange items (final disposition will be: Image 3 - Image 1 - Image 2) const galleryItem1 = getGalleryItem( galleryBlock, 1 ); @@ -522,7 +502,7 @@ describe( 'Gallery block', () => { // Test case related to TC011 - Choose from Other Apps (iOS Files App // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc011 it( 'uploads from other apps', async () => { - const otherAppsMedia = [ ...MEDIA ].map( ( item, index ) => ( { + const otherAppsMedia = [ ...media ].map( ( item, index ) => ( { ...item, localUrl: `file:///IMG_${ index + 1 }.JPG`, } ) ); @@ -538,12 +518,7 @@ describe( 'Gallery block', () => { } ); // Initialize with an empty gallery - const { galleryBlock, getByText } = await initializeWithGalleryBlock( - generateGalleryBlock( 0 ), - { - hasItems: false, - } - ); + const { galleryBlock, getByText } = await initializeWithGalleryBlock(); // Notify other media options act( () => @@ -584,15 +559,18 @@ describe( 'Gallery block', () => { // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc012 it( 'overrides "Link to" setting of gallery items', async () => { // Initialize with a gallery that contains two items, the latter includes "linkDestination" attribute - const screen = await initializeWithGalleryBlock( ` -
-
+ const screen = await initializeWithGalleryBlock( { + html: ` +
+
- -
+ +
- ` ); + `, + numberOfItems: 2, + } ); const { galleryBlock, getByText } = screen; fireEvent.press( galleryBlock ); @@ -609,9 +587,10 @@ describe( 'Gallery block', () => { describe( 'Columns setting', () => { it( 'does not increment due to maximum value', async () => { // Initialize with a gallery that contains three items - const screen = await initializeWithGalleryBlock( - generateGalleryBlock( 3, MEDIA ) - ); + const screen = await initializeWithGalleryBlock( { + numberOfItems: 3, + media, + } ); const { galleryBlock, getByA11yLabel } = screen; fireEvent.press( galleryBlock ); @@ -631,9 +610,10 @@ describe( 'Gallery block', () => { it( 'decrements columns', async () => { // Initialize with a gallery that contains three items - const screen = await initializeWithGalleryBlock( - generateGalleryBlock( 3, MEDIA ) - ); + const screen = await initializeWithGalleryBlock( { + numberOfItems: 3, + media, + } ); const { galleryBlock, getByA11yLabel } = screen; fireEvent.press( galleryBlock ); @@ -655,9 +635,10 @@ describe( 'Gallery block', () => { // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc014 it( 'disables crop images setting', async () => { // Initialize with a gallery that contains one item - const screen = await initializeWithGalleryBlock( - generateGalleryBlock( 1, MEDIA ) - ); + const screen = await initializeWithGalleryBlock( { + numberOfItems: 1, + media, + } ); const { galleryBlock, getByText } = screen; fireEvent.press( galleryBlock ); From 7f10cf9ea3a7e8d76825c72b9beabc677eaf00ef Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 7 Feb 2022 14:02:53 +0100 Subject: [PATCH 31/33] Remove not needed calls to fireEvent --- .../src/gallery/test/index.native.js | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index 58aeb9be69f8de..fe8141502b05c1 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -270,7 +270,6 @@ describe( 'Gallery block', () => { // Initialize with an empty gallery const { galleryBlock, getByText } = await initializeWithGalleryBlock(); - fireEvent.press( galleryBlock ); // Upload images from device fireEvent.press( getByText( 'ADD MEDIA' ) ); @@ -499,7 +498,7 @@ describe( 'Gallery block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); - // Test case related to TC011 - Choose from Other Apps (iOS Files App + // Test case related to TC011 - Choose from Other Apps (iOS Files App) // Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc011 it( 'uploads from other apps', async () => { const otherAppsMedia = [ ...media ].map( ( item, index ) => ( { @@ -571,8 +570,7 @@ describe( 'Gallery block', () => { `, numberOfItems: 2, } ); - const { galleryBlock, getByText } = screen; - fireEvent.press( galleryBlock ); + const { getByText } = screen; // Set "Link to" setting via Gallery block settings await openBlockSettings( screen ); @@ -591,8 +589,7 @@ describe( 'Gallery block', () => { numberOfItems: 3, media, } ); - const { galleryBlock, getByA11yLabel } = screen; - fireEvent.press( galleryBlock ); + const { getByA11yLabel } = screen; await openBlockSettings( screen ); @@ -614,8 +611,7 @@ describe( 'Gallery block', () => { numberOfItems: 3, media, } ); - const { galleryBlock, getByA11yLabel } = screen; - fireEvent.press( galleryBlock ); + const { getByA11yLabel } = screen; await openBlockSettings( screen ); @@ -639,8 +635,7 @@ describe( 'Gallery block', () => { numberOfItems: 1, media, } ); - const { galleryBlock, getByText } = screen; - fireEvent.press( galleryBlock ); + const { getByText } = screen; await openBlockSettings( screen ); From c1e37ad1a6387a8a3e4c39f134fc63c4988e08c4 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 18 Feb 2022 10:36:50 +0100 Subject: [PATCH 32/33] Add test id for media placeholder appender icon --- .../components/media-placeholder/index.native.js | 14 ++++++++------ .../block-library/src/gallery/test/index.native.js | 4 ++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index ed9b43e5ada567..d4ce81b90549fe 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -130,12 +130,14 @@ function MediaPlaceholder( props ) { ); } else if ( isAppender && ! disableMediaButtons ) { return ( - + + + ); } }; diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index fe8141502b05c1..295859fb039903 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -96,8 +96,8 @@ describe( 'Gallery block', () => { media, } ); - const appenderButton = within( galleryBlock ).getByA11yLabel( - /Gallery block\. Empty/ + const appenderButton = within( galleryBlock ).getByTestId( + 'media-placeholder-appender-icon' ); fireEvent.press( appenderButton ); From c9f575607118293c9a07e2c4d6277279120fab44 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 1 Mar 2022 17:24:04 +0100 Subject: [PATCH 33/33] Rename executeStoreResolvers helper --- packages/block-library/src/gallery/test/helpers.native.js | 6 +++--- test/native/helpers.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/gallery/test/helpers.native.js b/packages/block-library/src/gallery/test/helpers.native.js index 4ffbc05837877e..da99a166384480 100644 --- a/packages/block-library/src/gallery/test/helpers.native.js +++ b/packages/block-library/src/gallery/test/helpers.native.js @@ -7,7 +7,7 @@ import { fireEvent, waitFor, within, - executeStoreResolvers, + waitForStoreResolvers, } from 'test/helpers'; /** @@ -53,7 +53,7 @@ export const addGalleryBlock = async () => { /** * The gallery items are rendered via the FlatList of the inner block list. * In order to render the items of a FlatList, it's required to trigger the - * "onLayout" event. Additionally, the call is wrapped over "executeStoreResolvers" + * "onLayout" event. Additionally, the call is wrapped over "waitForStoreResolvers" * because the gallery items request the media data associated with the image to * be rendered via the "getMedia" selector. * @@ -65,7 +65,7 @@ export const triggerGalleryLayout = async ( galleryBlock, { width = 320 } = {} ) => - executeStoreResolvers( () => + waitForStoreResolvers( () => fireEvent( within( galleryBlock ).getByTestId( 'block-list-wrapper' ), 'layout', diff --git a/test/native/helpers.js b/test/native/helpers.js index c27ab83ea6f4de..a2918aa6354f1d 100644 --- a/test/native/helpers.js +++ b/test/native/helpers.js @@ -35,7 +35,7 @@ provideToNativeHtml.mockImplementation( ( html ) => { } ); /** - * Executes a function that triggers store resolvers. + * Executes a function that triggers store resolvers and waits for them to be finished. * * Asynchronous store resolvers leverage `setTimeout` to run at the end of * the current JavaScript block execution. In order to prevent "act" warnings @@ -45,7 +45,7 @@ provideToNativeHtml.mockImplementation( ( html ) => { * @param {Function} fn Function that triggers store resolvers. * @return {*} The result of the function call. */ -export async function executeStoreResolvers( fn ) { +export async function waitForStoreResolvers( fn ) { // Portions of the React Native Animation API rely upon these APIs. However, // Jest's 'legacy' fake timers mutate these globals, which breaks the Animated // API. We preserve the original implementations to restore them later. @@ -88,7 +88,7 @@ export async function executeStoreResolvers( fn ) { * @return {import('@testing-library/react-native').RenderAPI} A Testing Library screen. */ export async function initializeEditor( props, { component = Editor } = {} ) { - return executeStoreResolvers( () => { + return waitForStoreResolvers( () => { const EditorComponent = component; const screen = render(