Add paste URL to create embed test cases

WordPress · Oct 15, 2021 · 6263857 · 6263857
1 parent d219db2
commit 6263857
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/rich-text/embed-handler-picker.native.js b/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
 		/>

diff --git a/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap
@@ -40,6 +40,20 @@ https://twitter.com/notnownikki
 <!-- /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 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\\">

diff --git a/packages/block-library/src/embed/test/index.native.js b/packages/block-library/src/embed/test/index.native.js
@@ -613,4 +613,96 @@ describe( 'Embed block', () => {
 			expect( requestPreview ).not.toHaveBeenCalled();
 		} );
 	} );
+
+	describe( 'create by pasting URL', () => {
+		it( 'creates embed block when pasting URL in paragraph block', async () => {
+			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
+
+			const {
+				getByA11yLabel,
+				getByPlaceholderText,
+				getByTestId,
+				getByText,
+			} = await initializeEditor( {
+				initialHtml:
+					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->',
+			} );
+
+			// Paste URL in paragraph block
+			const paragraphText = getByPlaceholderText( 'Start writing…' );
+			fireEvent( paragraphText, 'focus' );
+			fireEvent( paragraphText, 'paste', {
+				preventDefault: jest.fn(),
+				nativeEvent: {
+					eventCount: 1,
+					target: undefined,
+					files: [],
+					pastedHtml: expectedURL,
+					pastedText: expectedURL,
+				},
+			} );
+
+			// Wait for embed handler picker to be visible
+			await waitFor(
+				() => getByTestId( 'embed-handler-picker' ).props.isVisible
+			);
+
+			// Select create embed option
+			fireEvent.press( getByText( 'Create embed' ) );
+
+			// Get the created embed block
+			const embedBlock = await waitFor( () =>
+				getByA11yLabel( /Embed Block\. Row 1/ )
+			);
+
+			expect( embedBlock ).toBeDefined();
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'creates link when pasting URL in paragraph block', async () => {
+			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
+
+			const {
+				getByDisplayValue,
+				getByPlaceholderText,
+				getByTestId,
+				getByText,
+			} = await initializeEditor( {
+				initialHtml:
+					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->',
+			} );
+
+			// Paste URL in paragraph block
+			const paragraphText = getByPlaceholderText( 'Start writing…' );
+			fireEvent( paragraphText, 'focus' );
+			fireEvent( paragraphText, 'paste', {
+				preventDefault: jest.fn(),
+				nativeEvent: {
+					eventCount: 1,
+					target: undefined,
+					files: [],
+					pastedHtml: expectedURL,
+					pastedText: expectedURL,
+				},
+			} );
+
+			// Wait for embed handler picker to be visible
+			await waitFor(
+				() => getByTestId( 'embed-handler-picker' ).props.isVisible
+			);
+
+			// Select create link option
+			fireEvent.press( getByText( 'Create link' ) );
+
+			// Get the link text
+			const linkText = await waitFor( () =>
+				getByDisplayValue(
+					`<p><a href="${ expectedURL }">${ expectedURL }</a></p>`
+				)
+			);
+
+			expect( linkText ).toBeDefined();
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );