Tests: Mock Openverse in the image drag-and-drop e2e test

test/e2e/specs/editor/blocks/image.spec.js

@@ -312,6 +312,48 @@ test.describe( 'Image', () => {
 		page,
 		editor,
 	} ) => {
+		// Mock Openverse so the test doesn't depend on which images the live
+		// API returns, or on whether their hosts send CORS headers.
+		const mockImageUrl = 'https://openverse-mock.test/image.png';
+		const mockResult = {
+			title: 'Mock Openverse image',
+			foreign_landing_url: 'https://openverse-mock.test/landing',
+			creator: 'Test Creator',
+			creator_url: 'https://openverse-mock.test/creator',
+			license: 'cc0',
+			license_version: '1.0',
+			license_url: 'https://creativecommons.org/publicdomain/zero/1.0/',
+			url: mockImageUrl,
+			thumbnail: mockImageUrl,
+		};
+		await page.route( 'https://api.openverse.org/v1/images/**', ( route ) =>
+			route.fulfill( {
+				headers: { 'Access-Control-Allow-Origin': '*' },
+				json: {
+					results: [
+						{ ...mockResult, id: 'mock-openverse-image-1' },
+						{ ...mockResult, id: 'mock-openverse-image-2' },
+					],
+				},
+			} )
+		);
+		await page.route( mockImageUrl, async ( route ) =>
+			route.fulfill( {
+				headers: { 'Access-Control-Allow-Origin': '*' },
+				contentType: 'image/png',
+				body: await fs.readFile(
+					path.join(
+						__dirname,
+						'..',
+						'..',
+						'..',
+						'assets',
+						'10x10_e2e_test_image_z9T8jK.png'
+					)
+				),
+			} )
+		);
+
 		await editor.insertBlock( { name: 'core/image' } );
 		const imageBlock = editor.canvas.getByRole( 'document', {
 			name: 'Block: Image',