@wordpress/e2e-tests 7.20.0 → 7.21.1

package/specs/editor/various/embedding.test.js

@@ -1,303 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createEmbeddingMatcher,
-	createJSONResponse,
-	createNewPost,
-	createURLMatcher,
-	getEditedPostContent,
-	insertBlock,
-	publishPost,
-	setUpResponseMocking,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = {
-	url: 'https://wordpress.org/gutenberg/handbook/block-api/attributes/',
-	html: '<div class="wp-embedded-content" data-secret="shhhh it is a secret"></div>',
-	type: 'rich',
-	provider_name: 'WordPress',
-	provider_url: 'https://wordpress.org',
-	version: '1.0',
-};
-
-const MOCK_EMBED_RICH_SUCCESS_RESPONSE = {
-	url: 'https://twitter.com/notnownikki',
-	html: '<p>Mock success response.</p>',
-	type: 'rich',
-	provider_name: 'Twitter',
-	provider_url: 'https://twitter.com',
-	version: '1.0',
-};
-
-const MOCK_EMBED_PHOTO_SUCCESS_RESPONSE = {
-	url: 'https://cloudup.com/cQFlxqtY4ob',
-	html: '<p>Mock success response.</p>',
-	type: 'photo',
-	provider_name: 'Cloudup',
-	provider_url: 'https://cloudup.com',
-	version: '1.0',
-};
-
-const MOCK_EMBED_VIDEO_SUCCESS_RESPONSE = {
-	url: 'https://www.youtube.com/watch?v=lXMskKTw3Bc',
-	html: '<iframe width="16" height="9"></iframe>',
-	type: 'video',
-	provider_name: 'YouTube',
-	provider_url: 'https://youtube.com',
-	version: '1.0',
-};
-
-const MOCK_EMBED_AUDIO_SUCCESS_RESPONSE = {
-	url: 'https://soundcloud.com/a-boogie-wit-da-hoodie/swervin',
-	html: '<iframe width="16" height="9"></iframe>',
-	type: 'audio',
-	provider_name: 'SoundCloud',
-	provider_url: 'https://soundcloud.com',
-	version: '1.0',
-};
-
-const MOCK_EMBED_IMAGE_SUCCESS_RESPONSE = {
-	url: 'https://www.instagram.com/p/Bvl97o2AK6x/',
-	html: '<iframe width="16" height="9"></iframe>',
-	type: 'video',
-	provider_name: 'Instagram',
-	provider_url: 'https://www.instagram.com',
-	version: '1.0',
-};
-
-const MOCK_BAD_EMBED_PROVIDER_RESPONSE = {
-	url: 'https://twitter.com/thatbunty',
-	html: false,
-	provider_name: 'Embed Provider',
-	version: '1.0',
-};
-
-const MOCK_CANT_EMBED_RESPONSE = {
-	provider_name: 'Embed Handler',
-	html: '<a href="https://twitter.com/wooyaygutenberg123454312">https://twitter.com/wooyaygutenberg123454312</a>',
-};
-
-const MOCK_BAD_WORDPRESS_RESPONSE = {
-	code: 'oembed_invalid_url',
-	message: 'Not Found',
-	data: {
-		status: 404,
-	},
-	html: false,
-};
-
-const MOCK_RESPONSES = [
-	{
-		match: createEmbeddingMatcher(
-			'https://wordpress.org/gutenberg/handbook'
-		),
-		onRequestMatch: createJSONResponse( MOCK_BAD_WORDPRESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://wordpress.org/gutenberg/handbook/'
-		),
-		onRequestMatch: createJSONResponse( MOCK_BAD_WORDPRESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://wordpress.org/gutenberg/handbook/block-api/attributes/'
-		),
-		onRequestMatch: createJSONResponse(
-			MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE
-		),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://www.youtube.com/watch?v=lXMskKTw3Bc'
-		),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_VIDEO_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://soundcloud.com/a-boogie-wit-da-hoodie/swervin'
-		),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_AUDIO_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://www.instagram.com/p/Bvl97o2AK6x/'
-		),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_IMAGE_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher( 'https://cloudup.com/cQFlxqtY4ob' ),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_PHOTO_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher( 'https://twitter.com/notnownikki' ),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_RICH_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher( 'https://twitter.com/notnownikki/' ),
-		onRequestMatch: createJSONResponse( MOCK_CANT_EMBED_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher( 'https://twitter.com/thatbunty' ),
-		onRequestMatch: createJSONResponse( MOCK_BAD_EMBED_PROVIDER_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://twitter.com/wooyaygutenberg123454312'
-		),
-		onRequestMatch: createJSONResponse( MOCK_CANT_EMBED_RESPONSE ),
-	},
-	// Respond to the instagram URL with a non-image response, doesn't matter what it is,
-	// just make sure the image errors.
-	{
-		match: createURLMatcher( 'https://www.instagram.com/p/Bvl97o2AK6x/' ),
-		onRequestMatch: createJSONResponse( MOCK_CANT_EMBED_RESPONSE ),
-	},
-];
-
-async function insertEmbed( URL ) {
-	await clickBlockAppender();
-	await page.keyboard.type( '/embed' );
-	await page.waitForXPath(
-		`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Embed')]`
-	);
-	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type( URL );
-	await page.keyboard.press( 'Enter' );
-}
-
-describe( 'Embedding content', () => {
-	beforeEach( async () => {
-		await setUpResponseMocking( MOCK_RESPONSES );
-		await createNewPost();
-	} );
-
-	it( 'should render embeds in the correct state', async () => {
-		// Valid embed. Should render valid figure element.
-		await insertEmbed( 'https://twitter.com/notnownikki' );
-		await canvas().waitForSelector( 'figure.wp-block-embed' );
-
-		// Valid provider; invalid content. Should render failed, edit state.
-		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
-		await canvas().waitForSelector(
-			'input[value="https://twitter.com/wooyaygutenberg123454312"]'
-		);
-
-		// WordPress invalid content. Should render failed, edit state.
-		await insertEmbed( 'https://wordpress.org/gutenberg/handbook/' );
-		await canvas().waitForSelector(
-			'input[value="https://wordpress.org/gutenberg/handbook/"]'
-		);
-
-		// Provider whose oembed API has gone wrong. Should render failed, edit
-		// state.
-		await insertEmbed( 'https://twitter.com/thatbunty' );
-		await canvas().waitForSelector(
-			'input[value="https://twitter.com/thatbunty"]'
-		);
-
-		// WordPress content that can be embedded. Should render valid figure
-		// element.
-		await insertEmbed(
-			'https://wordpress.org/gutenberg/handbook/block-api/attributes/'
-		);
-		await canvas().waitForSelector( 'figure.wp-block-embed' );
-
-		// Video content. Should render valid figure element, and include the
-		// aspect ratio class.
-		await insertEmbed( 'https://www.youtube.com/watch?v=lXMskKTw3Bc' );
-		await canvas().waitForSelector(
-			'figure.wp-block-embed.is-type-video.wp-embed-aspect-16-9'
-		);
-
-		// Photo content. Should render valid figure element.
-		await insertEmbed( 'https://cloudup.com/cQFlxqtY4ob' );
-		await canvas().waitForSelector(
-			'iframe[title="Embedded content from cloudup"'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should allow the user to convert unembeddable URLs to a paragraph with a link in it', async () => {
-		// URL that can't be embedded.
-		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
-
-		// Wait for the request to fail and present an error. Since placeholder
-		// has styles applied which depend on resize observer, wait for the
-		// expected size class to settle before clicking, since otherwise a race
-		// condition could occur on the placeholder layout vs. click intent.
-		await canvas().waitForSelector(
-			'.components-placeholder.is-large .components-placeholder__error'
-		);
-
-		const button = await canvas().waitForXPath(
-			`//button[contains(text(), 'Convert to link')]`
-		);
-		await button.click();
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async () => {
-		await insertEmbed( 'https://twitter.com/notnownikki/' );
-		// The twitter block should appear correctly.
-		await canvas().waitForSelector( 'figure.wp-block-embed' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should allow the user to try embedding a failed URL again', async () => {
-		// URL that can't be embedded.
-		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
-
-		// Wait for the request to fail and present an error. Since placeholder
-		// has styles applied which depend on resize observer, wait for the
-		// expected size class to settle before clicking, since otherwise a race
-		// condition could occur on the placeholder layout vs. click intent.
-		await canvas().waitForSelector(
-			'.components-placeholder.is-large .components-placeholder__error'
-		);
-
-		// Set up a different mock to make sure that try again actually does make the request again.
-		await setUpResponseMocking( [
-			{
-				match: createEmbeddingMatcher(
-					'https://twitter.com/wooyaygutenberg123454312'
-				),
-				onRequestMatch: createJSONResponse(
-					MOCK_EMBED_RICH_SUCCESS_RESPONSE
-				),
-			},
-		] );
-		const button = await canvas().waitForXPath(
-			`//button[contains(text(), 'Try again')]`
-		);
-		await button.click();
-		await canvas().waitForSelector( 'figure.wp-block-embed' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should switch to the WordPress block correctly', async () => {
-		// This test is to make sure that WordPress embeds are detected correctly,
-		// because the HTML can vary, and the block is detected by looking for
-		// classes in the HTML, so we need to flag up if the HTML changes.
-
-		// Publish a post to embed.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Hello there!' );
-		await publishPost();
-		const postUrl = await page.$eval(
-			'.editor-post-publish-panel [id^=inspector-text-control-]',
-			( el ) => el.value
-		);
-
-		// Start a new post, embed the previous post.
-		await createNewPost();
-		await insertEmbed( postUrl );
-
-		// Check the block has become a WordPress block.
-		await canvas().waitForSelector( 'figure.wp-block-embed' );
-	} );
-} );

package/specs/editor/various/typewriter.test.js

@@ -1,260 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost } from '@wordpress/e2e-test-utils';
-
-describe( 'TypeWriter', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	const getCaretPosition = async () =>
-		await page.evaluate(
-			() =>
-				wp.dom.computeCaretRect(
-					document.activeElement?.contentWindow ?? window
-				).y
-		);
-
-	// Allow the scroll position to be 1px off.
-	const BUFFER = 1;
-
-	const getDiff = async ( caretPosition ) =>
-		Math.abs( ( await getCaretPosition() ) - caretPosition );
-
-	it( 'should maintain caret position', async () => {
-		// Create first block.
-		await page.keyboard.press( 'Enter' );
-
-		// Create second block.
-		await page.keyboard.press( 'Enter' );
-
-		const initialPosition = await getCaretPosition();
-
-		// The page shouldn't be scrolled when it's being filled.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getCaretPosition() ).toBeGreaterThan( initialPosition );
-
-		// Create blocks until the typewriter effect kicks in.
-		while (
-			await page.evaluate( () => {
-				const { activeElement } =
-					document.activeElement?.contentDocument ?? document;
-				return (
-					wp.dom.getScrollContainer( activeElement ).scrollTop === 0
-				);
-			} )
-		) {
-			await page.keyboard.press( 'Enter' );
-		}
-
-		const newPosition = await getCaretPosition();
-
-		// Now the scroll position should be maintained.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( newPosition ) ).toBeLessThanOrEqual( BUFFER );
-
-		// Type until the text wraps.
-		while (
-			await page.evaluate( () => {
-				const { activeElement } =
-					document.activeElement?.contentDocument ?? document;
-				return (
-					activeElement.clientHeight <=
-					parseInt( getComputedStyle( activeElement ).lineHeight, 10 )
-				);
-			} )
-		) {
-			await page.keyboard.type( 'a' );
-		}
-
-		expect( await getDiff( newPosition ) ).toBeLessThanOrEqual( BUFFER );
-
-		// Pressing backspace will reposition the caret to the previous line.
-		// Scroll position should be adjusted again.
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getDiff( newPosition ) ).toBeLessThanOrEqual( BUFFER );
-
-		// Should reset scroll position to maintain.
-		await page.keyboard.press( 'ArrowUp' );
-
-		const positionAfterArrowUp = await getCaretPosition();
-
-		expect( positionAfterArrowUp ).toBeLessThanOrEqual( newPosition );
-
-		// Should be scrolled to new position.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( positionAfterArrowUp ) ).toBeLessThanOrEqual(
-			BUFFER
-		);
-	} );
-
-	it( 'should maintain caret position after scroll', async () => {
-		// Create first block.
-		await page.keyboard.press( 'Enter' );
-
-		// Create zero or more blocks until there is a scrollable container.
-		// No blocks should be created if there's already a scrollbar.
-		while (
-			await page.evaluate( () => {
-				const { activeElement } =
-					document.activeElement?.contentDocument ?? document;
-				const scrollContainer =
-					wp.dom.getScrollContainer( activeElement );
-				return (
-					scrollContainer.scrollHeight ===
-					scrollContainer.clientHeight
-				);
-			} )
-		) {
-			await page.keyboard.press( 'Enter' );
-		}
-
-		const scrollPosition = await page.evaluate( () => {
-			const { activeElement } =
-				document.activeElement?.contentDocument ?? document;
-			return wp.dom.getScrollContainer( activeElement ).scrollTop;
-		} );
-		// Expect scrollbar to be at the top.
-		expect( scrollPosition ).toBe( 0 );
-
-		// Move the mouse to the scroll container, and scroll down
-		// a small amount to trigger the typewriter mode.
-		await page.evaluate( () => {
-			const { activeElement } =
-				document.activeElement?.contentDocument ?? document;
-			wp.dom.getScrollContainer( activeElement ).scrollTop += 2;
-		} );
-		// Wait for the caret rectangle to be recalculated.
-		await page.evaluate(
-			() => new Promise( window.requestAnimationFrame )
-		);
-
-		// After hitting Enter to create a new block, the caret screen
-		// coordinates should be the same.
-		const initialPosition = await getCaretPosition();
-		await page.keyboard.press( 'Enter' );
-		await page.waitForFunction( () => {
-			const { activeElement } =
-				document.activeElement?.contentDocument ?? document;
-			// Wait for the Typewriter to scroll down past the initial position.
-			return wp.dom.getScrollContainer( activeElement ).scrollTop > 2;
-		} );
-		expect( await getDiff( initialPosition ) ).toBe( 0 );
-	} );
-
-	it( 'should maintain caret position after leaving last editable', async () => {
-		// Create first block.
-		await page.keyboard.press( 'Enter' );
-		// Create second block.
-		await page.keyboard.press( 'Enter' );
-		// Create third block.
-		await page.keyboard.press( 'Enter' );
-		// Move to first block.
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
-
-		const initialPosition = await getCaretPosition();
-
-		// Should maintain scroll position.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( initialPosition ) ).toBeLessThanOrEqual(
-			BUFFER
-		);
-	} );
-
-	it( 'should scroll caret into view from the top', async () => {
-		// Create first block.
-		await page.keyboard.press( 'Enter' );
-
-		// Create blocks until there is a scrollable container.
-		while (
-			await page.evaluate( () => {
-				const { activeElement } =
-					document.activeElement?.contentDocument ?? document;
-				return ! wp.dom.getScrollContainer( activeElement );
-			} )
-		) {
-			await page.keyboard.press( 'Enter' );
-		}
-
-		let count = 0;
-
-		// Create blocks until the typewriter effect kicks in, create at
-		// least 10 blocks to properly test the .
-		while (
-			( await page.evaluate( () => {
-				const { activeElement } =
-					document.activeElement?.contentDocument ?? document;
-				return (
-					wp.dom.getScrollContainer( activeElement ).scrollTop === 0
-				);
-			} ) ) ||
-			count < 10
-		) {
-			await page.keyboard.press( 'Enter' );
-			count++;
-		}
-
-		// Scroll the active element to the very bottom of the scroll container,
-		// then scroll up, so the caret is partially hidden.
-		await page.evaluate( () => {
-			const { activeElement } =
-				document.activeElement?.contentDocument ?? document;
-			activeElement.scrollIntoView( false );
-			wp.dom.getScrollContainer( activeElement ).scrollTop -=
-				activeElement.offsetHeight + 10;
-		} );
-
-		const bottomPostition = await getCaretPosition();
-
-		// Should scroll the caret back into view (preserve browser behaviour).
-		await page.keyboard.type( 'a' );
-
-		const newBottomPosition = await getCaretPosition();
-
-		expect( newBottomPosition ).toBeLessThanOrEqual( bottomPostition );
-
-		// Should maintain new caret position.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( newBottomPosition ) ).toBeLessThanOrEqual(
-			BUFFER
-		);
-
-		await page.keyboard.press( 'Backspace' );
-
-		while ( count-- ) {
-			await page.keyboard.press( 'ArrowUp' );
-		}
-
-		// Scroll the active element to the very top of the scroll container,
-		// then scroll down, so the caret is partially hidden.
-		await page.evaluate( () => {
-			const { activeElement } =
-				document.activeElement?.contentDocument ?? document;
-			activeElement.scrollIntoView();
-			wp.dom.getScrollContainer( activeElement ).scrollTop +=
-				activeElement.offsetHeight + 10;
-		} );
-
-		const topPostition = await getCaretPosition();
-
-		// Should scroll the caret back into view (preserve browser behaviour).
-		await page.keyboard.type( 'a' );
-
-		const newTopPosition = await getCaretPosition();
-
-		expect( newTopPosition ).toBeGreaterThan( topPostition );
-
-		// Should maintain new caret position.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( newTopPosition ) ).toBeLessThanOrEqual( BUFFER );
-	} );
-} );