Embed block integration tests part 2

packages/block-library/src/embed/test/index.native.js

@@ -13,7 +13,11 @@ import { Clipboard, Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import {
+	getBlockTypes,
+	setDefaultBlockName,
+	unregisterBlockType,
+} from '@wordpress/blocks';
 import fetchRequest from '@wordpress/api-fetch';
 import { store as coreStore } from '@wordpress/core-data';
 import { dispatch } from '@wordpress/data';
@@ -68,6 +72,7 @@ const MOCK_BAD_WORDPRESS_RESPONSE = {
 	},
 	html: false,
 };
+const EMBED_NULL_RESPONSE = null;
 
 // Embed block HTML examples
 const EMPTY_EMBED_HTML = '<!-- wp:embed /-->';
@@ -76,11 +81,31 @@ const RICH_TEXT_EMBED_HTML = `<!-- wp:embed {"url":"https://twitter.com/notnowni
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->`;
+const RICH_TEXT_ERROR_EMBED_HTML = `<!-- wp:embed {"url":"https://twitter.com/testing","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/testing
+</div></figure>
+<!-- /wp:embed -->`;
 const PHOTO_EMBED_HTML = `<!-- wp:embed {"url":"https://cloudup.com/cQFlxqtY4ob","type":"photo","providerNameSlug":"cloudup","responsive":true} -->
 <figure class="wp-block-embed is-type-photo is-provider-cloudup wp-block-embed-cloudup"><div class="wp-block-embed__wrapper">
 https://cloudup.com/cQFlxqtY4ob
 </div></figure>
 <!-- /wp:embed -->`;
+const RICH_TEXT_EMBED_HTML_WITH_CAPTION = `<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div><figcaption>Caption</figcaption></figure>
+<!-- /wp:embed -->`;
+const RICH_TEXT_EMBED_HTML_WITH_ALLOW_RESPONSIVE_SET_TO_FALSE = `<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","allowResponsive":false,"responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed -->`;
+const EMPTY_RICH_TEXT_EMBED_HTML =
+	'<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->';
+
+const EMPTY_PARAGRAPH_HTML =
+	'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->';
 
 const MOST_USED_PROVIDERS = embed.settings.variations.filter( ( { name } ) =>
 	[ 'youtube', 'twitter', 'wordpress', 'vimeo' ].includes( name )
@@ -89,6 +114,12 @@ const MOST_USED_PROVIDERS = embed.settings.variations.filter( ( { name } ) =>
 // Return specified mocked responses for the oembed endpoint.
 const mockEmbedResponses = ( mockedResponses ) => {
 	fetchRequest.mockImplementation( ( { path } ) => {
+		if ( path === '/wp/v2/themes?status=active' ) {
+			return Promise.resolve( [
+				{ theme_supports: { 'responsive-embeds': true } },
+			] );
+		}
+
 		const matchedEmbedResponse = mockedResponses.find(
 			( mockedResponse ) =>
 				path ===
@@ -143,6 +174,7 @@ beforeAll( () => {
 	// block is added to empty posts.
 	registerBlock( paragraph );
 	registerBlock( embed );
+	setDefaultBlockName( paragraph.name );
 } );
 
 beforeEach( () => {
@@ -619,8 +651,7 @@ describe( 'Embed block', () => {
 				getByTestId,
 				getByText,
 			} = await initializeEditor( {
-				initialHtml:
-					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->',
+				initialHtml: EMPTY_PARAGRAPH_HTML,
 			} );
 
 			// Paste URL in paragraph block
@@ -663,8 +694,7 @@ describe( 'Embed block', () => {
 				getByTestId,
 				getByText,
 			} = await initializeEditor( {
-				initialHtml:
-					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->',
+				initialHtml: EMPTY_PARAGRAPH_HTML,
 			} );
 
 			// Paste URL in paragraph block
@@ -700,4 +730,187 @@ describe( 'Embed block', () => {
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 	} );
+
+	describe( 'insert via slash inserter', () => {
+		it( 'insert generic embed block', async () => {
+			const expectedHtml = EMPTY_EMBED_HTML;
+			const embedBlockSlashInserter = '/Embed';
+			const {
+				getByPlaceholderText,
+				getByA11yLabel,
+				getByText,
+			} = await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
+
+			const paragraphText = getByPlaceholderText( 'Start writing…' );
+			fireEvent( paragraphText, 'focus' );
+			// Trigger onSelectionChange to update both the current text and text selection.
+			// This event is required by the autocompleter, as it only displays the slash inserter
+			// if the text selection is located at the end of the text, for this reason,
+			// the start and end arguments match the text length.
+			fireEvent(
+				paragraphText,
+				'onSelectionChange',
+				embedBlockSlashInserter.length,
+				embedBlockSlashInserter.length,
+				embedBlockSlashInserter,
+				{
+					nativeEvent: {
+						eventCount: 1,
+						target: undefined,
+						text: embedBlockSlashInserter,
+					},
+				}
+			);
+
+			fireEvent.press( await waitFor( () => getByText( 'Embed' ) ) );
+
+			const block = await waitFor( () =>
+				getByA11yLabel( /Embed Block\. Row 1/ )
+			);
+
+			const blockName = within( block ).getByText( 'Embed' );
+
+			expect( blockName ).toBeDefined();
+			expect( getEditorHtml() ).toBe( expectedHtml );
+		} );
+
+		it( 'insert Twitter embed block', async () => {
+			const expectedHtml = EMPTY_RICH_TEXT_EMBED_HTML;
+			const embedBlockSlashInserter = '/Twitter';
+			const {
+				getByPlaceholderText,
+				getByA11yLabel,
+				getByText,
+			} = await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
+
+			const paragraphText = getByPlaceholderText( 'Start writing…' );
+			fireEvent( paragraphText, 'focus' );
+			// Trigger onSelectionChange to update both the current text and text selection.
+			// This event is required by the autocompleter, as it only displays the slash inserter
+			// if the text selection is located at the end of the text, for this reason,
+			// the start and end arguments match the text length.
+			fireEvent(
+				paragraphText,
+				'onSelectionChange',
+				embedBlockSlashInserter.length,
+				embedBlockSlashInserter.length,
+				embedBlockSlashInserter,
+				{
+					nativeEvent: {
+						eventCount: 1,
+						target: undefined,
+						text: embedBlockSlashInserter,
+					},
+				}
+			);
+
+			fireEvent.press( await waitFor( () => getByText( 'Twitter' ) ) );
+
+			const block = await waitFor( () =>
+				getByA11yLabel( /Embed Block\. Row 1/ )
+			);
+
+			const blockName = within( block ).getByText( 'Twitter' );
+
+			expect( blockName ).toBeDefined();
+			expect( getEditorHtml() ).toBe( expectedHtml );
+		} );
+	} );
+
+	it( 'sets an Embed block caption', async () => {
+		const initialHtml = RICH_TEXT_EMBED_HTML;
+		const expectedHtml = RICH_TEXT_EMBED_HTML_WITH_CAPTION;
+		const expectedCaption = 'Caption';
+
+		const waitForElement = ( { getByA11yLabel } ) =>
+			getByA11yLabel( /Embed Block\. Row 1/ );
+		const {
+			element,
+			getByPlaceholderText,
+			getByDisplayValue,
+		} = await initializeEditor(
+			{
+				initialHtml,
+			},
+			{ waitForElement }
+		);
+
+		// Select block
+		fireEvent.press( element );
+
+		// Set a caption
+		const captionField = getByPlaceholderText( 'Add caption' );
+		fireEvent( captionField, 'focus' );
+		fireEvent( captionField, 'onChange', {
+			nativeEvent: {
+				eventCount: 1,
+				target: undefined,
+				text: expectedCaption,
+			},
+		} );
+
+		// Get current caption
+		const caption = await waitFor( () =>
+			getByDisplayValue( `<p>${ expectedCaption }</p>` )
+		);
+
+		expect( caption ).toBeDefined();
+		expect( getEditorHtml() ).toBe( expectedHtml );
+	} );
+
+	it( 'Toggle resize for smaller devices media settings', async () => {
+		const initialHtml = RICH_TEXT_EMBED_HTML;
+		const expectedHtml = RICH_TEXT_EMBED_HTML_WITH_ALLOW_RESPONSIVE_SET_TO_FALSE;
+
+		const waitForElement = ( { getByA11yLabel } ) =>
+			getByA11yLabel( /Embed Block\. Row 1/ );
+		const { element, getByA11yLabel } = await initializeEditor(
+			{
+				initialHtml,
+			},
+			{ waitForElement }
+		);
+
+		// Select block
+		fireEvent.press( element );
+
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		const resizeToggleControl = await waitFor( () =>
+			getByA11yLabel( /Resize for smaller devices/ )
+		);
+
+		fireEvent.press( resizeToggleControl );
+
+		expect( getEditorHtml() ).toBe( expectedHtml );
+	} );
+
+	it( 'Cannot embed should be shown on the placeholder if EmbedPreview data is null', async () => {
+		// Return null response for requests to oembed endpoint.
+		fetchRequest.mockImplementation( ( { path } ) => {
+			const isEmbedRequest = path.startsWith( '/oembed/1.0/proxy' );
+			return Promise.resolve( isEmbedRequest ? EMBED_NULL_RESPONSE : {} );
+		} );
+
+		const initialHtml = RICH_TEXT_ERROR_EMBED_HTML;
+
+		const waitForElement = ( { getByA11yLabel } ) =>
+			getByA11yLabel( /Embed Block\. Row 1/ );
+		const { element, getByText } = await initializeEditor(
+			{
+				initialHtml,
+			},
+			{ waitForElement }
+		);
+
+		// Select block
+		fireEvent.press( element );
+
+		const cannotEmbedText = getByText( 'Unable to embed media' );
+
+		expect( cannotEmbedText ).toBeDefined();
+	} );
 } );

test/native/__mocks__/styleMock.js

@@ -150,4 +150,7 @@ module.exports = {
 	'embed__icon--error': {
 		fill: 'red',
 	},
+	'components-autocomplete': {
+		height: 100,
+	},
 };