diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index ac60ec868eedff..555a7c142afc09 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/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',