[RNMobile][Embed block] Integration tests (#35476)

* Add testID to embed bottom sheet

* Export registerBlock from block library

* [WIP] Add embed block integration tests

* Fix set valid URL embed integration test

* Add waitForElement to initialize editor helper

* Add embed preview mocked styles

* Add most used embed providers insertion tests

* Add test cases for setting URL by tapping on block

* Add mock embed responses helper

* Add edit URL test cases

* Add invalid URL test case

* Refactor embed block integration tests

* Mock RN clipboard library

* Add auto-paste URL from clipboard test cases

* Use snapshots and simplify integration tests

* Add update test snapshots command

* Add change alignment test case

* Add retry test case

* Add preview coming soon test cases

* Mocked RCTAztecView to utilize an underlying TextInput.

* Add testID to Android version of picker

* Omit style prop in Aztec mock

* Add paste URL to create embed test cases

* Update snapshots due to mocking Aztec

* Revert "Update snapshots due to mocking Aztec"

This reverts commit 2114925.

* Unmock react-native-aztec for some block tests

* Remove commented code

* Embed block integration tests part 2 (#35533)

* added test for Embed block caption.

* WIP

* fixed unneeded diff change.

* WIP block settings

* Mocked RCTAztecView to utilize an underlying TextInput.

* Fixed Embed block caption test issues.

* Created test -  toggle resize for smaller devices media settings

* Added cannot embed test.

* Removed unneeded test id.

* WIP insert embed from slash inserter.

* Mock fetch request in cannot embed test case

* Trigger onSelectionChange event instead of onChange

* Query slash inserter item by text

* Add expected HTML to slash inserter test case

* Mock autocomplete component styles

* Set paragraph as default block

* Add empty paragraph HTML constant

* Add test suite for insert via slash inserter case

* Update toggle responsive test case

* Fix request mock for theme endpoint

* Add slash inserter cases for most used providers

* Expect for block settings button instead edit URL button

* Use snapshot testing instead of checking HTML

* Add block settings test suite

* Add embed test snapshots

* Use snapshot in insert generic embed block test

Co-authored-by: Carlos Garcia <fluiddot@gmail.com>

* Use promise in initializeEditor to prevent act warnings

* Simplify tests using initializeWithEmbedBlock

* Add test case to cover an already fixed bug

* Add test case to cover an already fixed bug (#35013)

Co-authored-by: Joel Dean <jdeanjj1000@gmail.com>

packages/block-editor/src/components/rich-text/embed-handler-picker.native.js

@@ -58,6 +58,7 @@ const EmbedHandlerPicker = forwardRef( ( {}, ref ) => {
 			ref={ pickerRef }
 			options={ pickerOptions }
 			onChange={ onPickerSelect }
+			testID="embed-handler-picker"
 			hideCancelButton
 			leftAlign
 		/>

packages/block-library/src/audio/test/edit.native.js

@@ -14,6 +14,10 @@ import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
  */
 import { metadata, settings, name } from '../index';
 
+// react-native-aztec shouldn't be mocked because these tests are based on
+// snapshot testing where we want to keep the original component.
+jest.unmock( '@wordpress/react-native-aztec' );
+
 const AudioEdit = ( { clientId, ...props } ) => (
 	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
 );

packages/block-library/src/embed/embed-bottom-sheet.native.js

@@ -68,6 +68,7 @@ const EmbedBottomSheet = ( { value, label, isVisible, onClose, onSubmit } ) => {
 			onDismiss={ onDismiss }
 			setAttributes={ setAttributes }
 			options={ linkSettingsOptions }
+			testID="embed-edit-url-modal"
 			withBottomSheet
 			showIcon
 		/>

packages/block-library/src/embed/embed-no-preview.native.js

@@ -163,6 +163,7 @@ const EmbedNoPreview = ( {
 				hideHeader
 				onDismiss={ onDismissSheet }
 				onClose={ onCloseSheet }
+				testID="embed-no-preview-modal"
 			>
 				<View style={ styles[ 'embed-no-preview__container' ] }>
 					<View style={ sheetIconStyle }>

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

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Embed block alignment options sets Align center option 1`] = `
+"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"center\\"} -->
+<figure class=\\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block alignment options sets Align left option 1`] = `
+"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"left\\"} -->
+<figure class=\\"wp-block-embed alignleft is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block alignment options sets Align right option 1`] = `
+"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"right\\"} -->
+<figure class=\\"wp-block-embed alignright is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block alignment options sets Full width option 1`] = `
+"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"full\\"} -->
+<figure class=\\"wp-block-embed alignfull is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block alignment options sets Wide width option 1`] = `
+"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"wide\\"} -->
+<figure class=\\"wp-block-embed alignwide is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block block settings toggles resize for smaller devices media settings 1`] = `
+"<!-- 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 -->"
+`;
+
+exports[`Embed block create by pasting URL creates embed block when pasting URL in paragraph block 1`] = `
+"<!-- wp:embed {\\"url\\":\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\",\\"type\\":\\"video\\",\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true,\\"className\\":\\"wp-embed-aspect-16-9 wp-has-aspect-ratio\\"} -->
+<figure class=\\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\\"><div class=\\"wp-block-embed__wrapper\\">
+https://www.youtube.com/watch?v=lXMskKTw3Bc
+</div></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block create by pasting URL creates link when pasting URL in paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p><a href=\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\">https://www.youtube.com/watch?v=lXMskKTw3Bc</a></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Embed block displays cannot embed on the placeholder if preview data is null 1`] = `
+"<!-- 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 -->"
+`;
+
+exports[`Embed block edit URL edits URL when edited after setting a bad URL of a provider 1`] = `
+"<!-- 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></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block edit URL keeps the previous URL if an invalid URL is set 1`] = `
+"<!-- 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></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block edit URL keeps the previous URL if no URL is set 1`] = `
+"<!-- 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></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block edit URL replaces URL 1`] = `
+"<!-- wp:embed {\\"url\\":\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\",\\"type\\":\\"video\\",\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true,\\"className\\":\\"wp-embed-aspect-16-9 wp-has-aspect-ratio\\"} -->
+<figure class=\\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\\"><div class=\\"wp-block-embed__wrapper\\">
+https://www.youtube.com/watch?v=lXMskKTw3Bc
+</div></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block insert via slash inserter insert generic embed block 1`] = `"<!-- wp:embed /-->"`;
+
+exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+
+exports[`Embed block insert via slash inserter inserts Vimeo embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"vimeo\\",\\"responsive\\":true} /-->"`;
+
+exports[`Embed block insert via slash inserter inserts WordPress embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"wordpress\\"} /-->"`;
+
+exports[`Embed block insert via slash inserter inserts YouTube embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true} /-->"`;
+
+exports[`Embed block insertion inserts Twitter embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+
+exports[`Embed block insertion inserts Vimeo embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"vimeo\\",\\"responsive\\":true} /-->"`;
+
+exports[`Embed block insertion inserts WordPress embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"wordpress\\"} /-->"`;
+
+exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true} /-->"`;
+
+exports[`Embed block insertion inserts generic embed block 1`] = `"<!-- wp:embed /-->"`;
+
+exports[`Embed block retry converts to link if preview request failed 1`] = `
+"<!-- wp:paragraph -->
+<p><a href=\\"https://twitter.com/notnownikki\\">https://twitter.com/notnownikki</a></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Embed block retry retries loading the preview if initial request failed 1`] = `
+"<!-- 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></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block set URL upon block insertion auto-pastes the URL from clipboard 1`] = `
+"<!-- 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></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block set URL upon block insertion sets a valid URL when dismissing edit URL modal 1`] = `
+"<!-- 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></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block set URL upon block insertion sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {\\"url\\":\\"\\"} /-->"`;
+
+exports[`Embed block set URL when empty block auto-pastes the URL from clipboard 1`] = `
+"<!-- 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></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block set URL when empty block sets a valid URL when dismissing edit URL modal 1`] = `
+"<!-- 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></figure>
+<!-- /wp:embed -->"
+`;
+
+exports[`Embed block set URL when empty block sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {\\"url\\":\\"\\"} /-->"`;
+
+exports[`Embed block sets block caption 1`] = `
+"<!-- 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 -->"
+`;