Use setup api fetch helper in Image block test cases

WordPress · May 5, 2023 · 8379426 · 8379426
1 parent 0c5e0bf
commit 8379426
Showing 1 changed file with 38 additions and 16 deletions.
diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js
@@ -8,6 +8,7 @@ import {
 	getEditorHtml,
 	render,
 	waitFor,
+	setupApiFetch,
 } from 'test/helpers';
 import { Image } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -22,9 +23,10 @@ import {
 	sendMediaUpload,
 	subscribeMediaUpload,
 } from '@wordpress/react-native-bridge';
-import { select } from '@wordpress/data';
+import { select, dispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import apiFetch from '@wordpress/api-fetch';
 import '@wordpress/jest-console';
 
 /**
@@ -45,7 +47,15 @@ function mockGetMedia( media ) {
 	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
 }
 
-const apiFetchPromise = Promise.resolve( {} );
+const FETCH_MEDIA = {
+	request: {
+		path: `/wp/v2/media/1?context=edit`,
+	},
+	response: {
+		source_url: 'https://cldup.com/cXyG__fTLN.jpg',
+		id: 1,
+	},
+};
 
 const clipboardPromise = Promise.resolve( '' );
 Clipboard.getString.mockImplementation( () => clipboardPromise );
@@ -58,6 +68,18 @@ beforeAll( () => {
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 } );
 
+beforeEach( () => {
+	// Mock media fetch requests
+	setupApiFetch( [ FETCH_MEDIA ] );
+
+	// Invalidate `getMedia` resolutions to allow requesting to the API the same media id
+	dispatch( coreStore ).invalidateResolutionForStoreSelector( 'getMedia' );
+} );
+
+afterEach( () => {
+	apiFetch.mockReset();
+} );
+
 afterAll( () => {
 	getBlockTypes().forEach( ( { name } ) => {
 		unregisterBlockType( name );
@@ -78,8 +100,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -105,8 +127,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -132,8 +154,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -169,8 +191,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -211,8 +233,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is not fetched via `getMedia` due to the presence of query parameters in the URL.
+		expect( apiFetch ).not.toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -236,8 +258,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -267,8 +289,8 @@ describe( 'Image Block', () => {
 		</figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );