@wordpress/e2e-tests 4.7.0 → 4.9.1

package/specs/editor/plugins/__snapshots__/templates.test.js.snap

@@ -10,7 +10,9 @@ exports[`templates Using a CPT with a predefined template Should add a custom po
 <!-- /wp:paragraph -->
 
 <!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
+<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></blockquote>
 <!-- /wp:quote -->
 
 <!-- wp:columns -->
@@ -36,7 +38,9 @@ exports[`templates Using a CPT with a predefined template Should respect user ed
 <!-- /wp:paragraph -->
 
 <!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
+<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></blockquote>
 <!-- /wp:quote -->
 
 <!-- wp:columns -->

package/specs/editor/plugins/block-variations.test.js

@@ -148,6 +148,8 @@ describe( 'Block variations', () => {
 
 		it( 'should show block information when no matching variation is found', async () => {
 			await insertBlock( 'Large Quote' );
+			// Select the quote block.
+			await page.keyboard.press( 'ArrowDown' );
 			const breadcrumb = await getActiveBreadcrumb();
 			expect( breadcrumb ).toEqual( 'Quote' );
 			const navigationItem = await getFirstNavigationItem();

package/specs/editor/plugins/cpt-locking.test.js

@@ -49,12 +49,12 @@ describe( 'cpt locking', () => {
 
 	const shouldAllowBlocksToBeMoved = async () => {
 		await page.click(
-			'.block-editor-rich-text__editable[data-type="core/paragraph"]'
+			'div > .block-editor-rich-text__editable[data-type="core/paragraph"]'
 		);
 		expect( await page.$( 'button[aria-label="Move up"]' ) ).not.toBeNull();
 		await page.click( 'button[aria-label="Move up"]' );
 		await page.type(
-			'.block-editor-rich-text__editable[data-type="core/paragraph"]',
+			'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
 			'p1'
 		);
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -193,7 +193,7 @@ describe( 'cpt locking', () => {
 
 		it( 'should allow blocks to be removed', async () => {
 			await page.type(
-				'.block-editor-rich-text__editable[data-type="core/paragraph"]',
+				'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
 				'p1'
 			);
 			await clickBlockToolbarButton( 'Options' );

package/specs/editor/plugins/inner-blocks-render-appender.test.js

@@ -98,6 +98,9 @@ describe( 'RenderAppender prop of InnerBlocks', () => {
 		// Insert a quote block.
 		await quoteButton.click();
 
+		// Select the quote block.
+		await page.keyboard.press( 'ArrowDown' );
+
 		// Verify if the custom block appender text changed as expected.
 		await page.waitForXPath(
 			`//*[contains(@class, "${ DYNAMIC_APPENDER_SELECTOR }")]/span[contains(@class, "single-blocks-appender")][contains(text(), "Single Blocks Appender")]`

package/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap

@@ -146,22 +146,6 @@ exports[`Multi-block selection should handle Enter across blocks 2`] = `
 <!-- /wp:heading -->"
 `;
 
-exports[`Multi-block selection should merge into quote with correct selection 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p>1[</p></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:paragraph -->
-<p>]2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should merge into quote with correct selection 2`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p>1</p><p>&amp;2</p></blockquote>
-<!-- /wp:quote -->"
-`;
-
 exports[`Multi-block selection should multi-select from within the list block 1`] = `
 "<!-- wp:paragraph -->
 <p>1</p>

package/specs/editor/various/__snapshots__/rich-text.test.js.snap

@@ -178,6 +178,18 @@ exports[`RichText should transform backtick to code 2`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should transform when typing backtick over selection 1`] = `
+"<!-- wp:paragraph -->
+<p>A <code>selection</code> test.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`RichText should transform when typing backtick over selection 2`] = `
+"<!-- wp:paragraph -->
+<p>A \`selection\` test.</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`RichText should undo backtick transform with backspace 1`] = `
 "<!-- wp:paragraph -->
 <p>\`a\`</p>

package/specs/editor/various/__snapshots__/writing-flow.test.js.snap

@@ -207,9 +207,9 @@ exports[`Writing Flow should navigate empty paragraphs 1`] = `
 `;
 
 exports[`Writing Flow should not create extra line breaks in multiline value 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
-<!-- /wp:quote -->"
+"<!-- wp:list -->
+<ul><li></li></ul>
+<!-- /wp:list -->"
 `;
 
 exports[`Writing Flow should not delete surrounding space when deleting a selected word 1`] = `

package/specs/editor/various/block-editor-keyboard-shortcuts.test.js

@@ -87,7 +87,7 @@ describe( 'block editor keyboard shortcuts', () => {
 		} );
 		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Add to Reusable blocks' );
+			await clickMenuItem( 'Create Reusable block' );
 			const reusableBlockNameInputSelector =
 				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 			const nameInput = await page.waitForSelector(

package/specs/editor/various/block-switcher.test.js

@@ -28,9 +28,8 @@ describe( 'Block Switcher', () => {
 			expect.arrayContaining( [
 				'Group',
 				'Paragraph',
-				'Quote',
 				'Heading',
-				'Pullquote',
+				'Quote',
 				'Columns',
 				'Table of Contents',
 			] )
@@ -56,7 +55,6 @@ describe( 'Block Switcher', () => {
 			expect.arrayContaining( [
 				'Group',
 				'Paragraph',
-				'Pullquote',
 				'Heading',
 				'Table of Contents',
 			] )

package/specs/editor/various/multi-block-selection.test.js

@@ -718,9 +718,8 @@ describe( 'Multi-block selection', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
 		// Clear the selected block.
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
+		await page.keyboard.press( 'Escape' );
+		await page.keyboard.press( 'Escape' );
 
 		await pressKeyWithModifier( 'primary', 'a' );
 
@@ -906,30 +905,6 @@ describe( 'Multi-block selection', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'should merge into quote with correct selection', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '> 1[' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( ']2' );
-		await page.keyboard.press( 'ArrowLeft' );
-		// Select everything between [].
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-
-		// Test setup.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await page.keyboard.press( 'Backspace' );
-
-		// Ensure selection is in the correct place.
-		await page.keyboard.type( '&' );
-
-		// Expect two blocks with "&" in between.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
 	it( 'should select separator (single element block)', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '/hr' );

package/specs/editor/various/reusable-blocks.test.js

@@ -192,7 +192,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert block to a reusable block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Add to Reusable blocks' );
+		await clickMenuItem( 'Create Reusable block' );
 
 		// Set title.
 		const nameInput = await page.waitForSelector(
@@ -364,6 +364,8 @@ describe( 'Reusable blocks', () => {
 			'.block-editor-block-list__block[aria-label="Block: Quote"]'
 		);
 		await quoteBlock.click();
+		// Select the quote block.
+		await page.keyboard.press( 'ArrowDown' );
 		await openDocumentSettingsSidebar();
 		await page.waitForXPath(
 			'//*[@role="region"][@aria-label="Editor settings"]//button[.="Styles"]'
@@ -371,7 +373,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert to reusable.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Add to Reusable blocks' );
+		await clickMenuItem( 'Create Reusable block' );
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);

package/specs/editor/various/rich-text.test.js

@@ -148,6 +148,23 @@ describe( 'RichText', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'should transform when typing backtick over selection', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'A selection test.' );
+		await page.keyboard.press( 'Home' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await pressKeyWithModifier( 'shiftAlt', 'ArrowRight' );
+		await page.keyboard.type( '`' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		// Should undo the transform.
+		await pressKeyWithModifier( 'primary', 'z' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'should only mutate text data on input', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '1' );

package/specs/editor/various/writing-flow.test.js

@@ -282,7 +282,7 @@ describe( 'Writing Flow', () => {
 	} );
 
 	it( 'should not create extra line breaks in multiline value', async () => {
-		await insertBlock( 'Quote' );
+		await insertBlock( 'List' );
 		await page.keyboard.type( 'a' );
 		await page.keyboard.press( 'Backspace' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -753,4 +753,77 @@ describe( 'Writing Flow', () => {
 		);
 		expect( paragraphs ).toEqual( [ 'first', 'second' ] );
 	} );
+
+	it( 'should move to the start of the first line on ArrowUp', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'a' );
+
+		async function getHeight() {
+			return await page.evaluate(
+				() => document.activeElement.offsetHeight
+			);
+		}
+
+		const height = await getHeight();
+
+		// Keep typing until the height of the element increases. We need two
+		// lines.
+		while ( height === ( await getHeight() ) ) {
+			await page.keyboard.type( 'a' );
+		}
+
+		// Move to the start of the second line.
+		await page.keyboard.press( 'ArrowLeft' );
+		// Move to the start of the first line.
+		await page.keyboard.press( 'ArrowUp' );
+		// Insert a "." for testing.
+		await page.keyboard.type( '.' );
+
+		// Expect the "." to be added at the start of the paragraph.
+		expect(
+			await page.evaluate( () =>
+				document.activeElement.getAttribute( 'data-type' )
+			)
+		).toBe( 'core/paragraph' );
+		expect(
+			await page.evaluate( () => document.activeElement.textContent )
+		).toMatch( /^\.a+$/ );
+	} );
+
+	it( 'should vertically move the caret from corner to corner', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'a' );
+
+		async function getHeight() {
+			return await page.evaluate(
+				() => document.activeElement.offsetHeight
+			);
+		}
+
+		const height = await getHeight();
+
+		// Keep typing until the height of the element increases. We need two
+		// lines.
+		while ( height === ( await getHeight() ) ) {
+			await page.keyboard.type( 'a' );
+		}
+
+		// Create a new paragraph.
+		await page.keyboard.press( 'Enter' );
+		// Move to the start of the first line.
+		await page.keyboard.press( 'ArrowUp' );
+		// Insert a "." for testing.
+		await page.keyboard.type( '.' );
+
+		// Expect the "." to be added at the start of the second line.
+		// It should not be added to the first line!
+		expect(
+			await page.evaluate( () =>
+				document.activeElement.getAttribute( 'data-type' )
+			)
+		).toBe( 'core/paragraph' );
+		expect(
+			await page.evaluate( () => document.activeElement.textContent )
+		).toMatch( /^a+\.a$/ );
+	} );
 } );

package/specs/site-editor/multi-entity-saving.test.js

@@ -207,15 +207,15 @@ describe( 'Multi-entity save flow', () => {
 			await page.keyboard.type( '...' );
 
 			await insertBlock( 'Site Tagline' );
-			// Ensure tagline is retrieved before typing.
+			// Wait for the placeholder.
 			await page.waitForXPath(
-				'//p[contains(text(), "Just another WordPress site")]'
+				'//span[@data-rich-text-placeholder="Write site tagline…"]'
 			);
 			const editableSiteTagLineSelector =
 				'.wp-block-site-tagline[contenteditable="true"]';
 			await page.waitForSelector( editableSiteTagLineSelector );
 			await page.focus( editableSiteTagLineSelector );
-			await page.keyboard.type( '...' );
+			await page.keyboard.type( 'Just another WordPress site' );
 
 			await clickButton( 'Publish' );
 			await page.waitForSelector( savePanelSelector );

package/specs/editor/blocks/__snapshots__/group.test.js.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Group can be created using the block inserter 1`] = `
-"<!-- wp:group -->
-<div class=\\"wp-block-group\\"></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Group can be created using the slash inserter 1`] = `
-"<!-- wp:group -->
-<div class=\\"wp-block-group\\"></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Group can have other blocks appended to it using the button appender 1`] = `
-"<!-- wp:group -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>Group Block with a Paragraph</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;

package/specs/editor/blocks/group.test.js

@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	searchForBlock,
-	getEditedPostContent,
-	createNewPost,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Group', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created using the block inserter', async () => {
-		await searchForBlock( 'Group' );
-		await page.click( '.editor-block-list-item-group' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created using the slash inserter', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '/group' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can have other blocks appended to it using the button appender', async () => {
-		await searchForBlock( 'Group' );
-		await page.click( '.editor-block-list-item-group' );
-		await page.click( '.block-editor-button-block-appender' );
-		await page.click( '.editor-block-list-item-paragraph' );
-		await page.keyboard.type( 'Group Block with a Paragraph' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );

package/specs/editor/blocks/missing.test.js

@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, setPostContent } from '@wordpress/e2e-test-utils';
-
-describe( 'missing block', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should strip potentially malicious on* attributes', async () => {
-		let hasAlert = false;
-
-		page.on( 'dialog', () => {
-			hasAlert = true;
-		} );
-
-		await setPostContent(
-			`<!-- wp:non-existing-block-here --><img src onerror=alert(1)>`
-		);
-
-		// Give the browser time to show the alert.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		expect( hasAlert ).toBe( false );
-	} );
-
-	it( 'hould strip potentially malicious script tags', async () => {
-		let hasAlert = false;
-
-		page.on( 'dialog', () => {
-			hasAlert = true;
-		} );
-
-		await setPostContent(
-			`<!-- wp:non-existing-block-here --><script>alert("EVIL");</script>`
-		);
-
-		// Give the browser time to show the alert.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		expect( hasAlert ).toBe( false );
-	} );
-} );

package/specs/editor/plugins/__snapshots__/deprecated-node-matcher.test.js.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Deprecated Node Matcher should insert block with children source 1`] = `
-"<!-- wp:deprecated-children-matcher -->
-<p class=\\"wp-block-deprecated-children-matcher\\">test<br/><strong>a</strong></p>
-<!-- /wp:deprecated-children-matcher -->"
-`;
-
-exports[`Deprecated Node Matcher should insert block with node source 1`] = `
-"<!-- wp:deprecated-node-matcher -->
-<blockquote class=\\"wp-block-deprecated-node-matcher\\"><p>test</p><p></p></blockquote>
-<!-- /wp:deprecated-node-matcher -->"
-`;

package/specs/editor/plugins/__snapshots__/hooks-api.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Using Hooks API Pressing reset block button resets the block 1`] = `""`;

package/specs/editor/plugins/deprecated-node-matcher.test.js

@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	getEditedPostContent,
-	insertBlock,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Deprecated Node Matcher', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-deprecated-node-matcher' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-deprecated-node-matcher' );
-	} );
-
-	it( 'should insert block with node source', async () => {
-		await insertBlock( 'Deprecated Node Matcher' );
-		await page.keyboard.type( 'test' );
-		await page.keyboard.press( 'Enter' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should insert block with children source', async () => {
-		await insertBlock( 'Deprecated Children Matcher' );
-		await page.keyboard.type( 'test' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'a' );
-		await page.keyboard.down( 'Shift' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.up( 'Shift' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );

package/specs/editor/plugins/hooks-api.test.js

@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	clickBlockAppender,
-	createNewPost,
-	deactivatePlugin,
-	getEditedPostContent,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Using Hooks API', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-hooks-api' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-hooks-api' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should contain a reset block button on the sidebar', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'First paragraph' );
-		expect(
-			await page.$( '.edit-post-sidebar .e2e-reset-block-button' )
-		).not.toBeNull();
-	} );
-
-	it( 'Pressing reset block button resets the block', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'First paragraph' );
-		const paragraphContent = await page.$eval(
-			'p[data-type="core/paragraph"]',
-			( element ) => element.textContent
-		);
-		expect( paragraphContent ).toEqual( 'First paragraph' );
-		await page.click( '.edit-post-sidebar .e2e-reset-block-button' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );

package/specs/editor/various/__snapshots__/convert-block-type.test.js.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Code block should convert to a preformatted block 1`] = `
-"<!-- wp:code -->
-<pre class=\\"wp-block-code\\"><code>print \\"Hello Dolly!\\"</code></pre>
-<!-- /wp:code -->"
-`;
-
-exports[`Code block should convert to a preformatted block 2`] = `
-"<!-- wp:preformatted -->
-<pre class=\\"wp-block-preformatted\\">print \\"Hello Dolly!\\"</pre>
-<!-- /wp:preformatted -->"
-`;

package/specs/editor/various/convert-block-type.test.js

@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	getEditedPostContent,
-	createNewPost,
-	insertBlock,
-	transformBlockTo,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Code block', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should convert to a preformatted block', async () => {
-		const code = 'print "Hello Dolly!"';
-
-		await insertBlock( 'Code' );
-		await page.keyboard.type( code );
-
-		// Verify the content starts out as a Code block.
-		const originalPostContent = await getEditedPostContent();
-		expect( originalPostContent ).toMatchSnapshot();
-
-		await transformBlockTo( 'Preformatted' );
-
-		// The content should now be a Preformatted block with no data loss.
-		const convertedPostContent = await getEditedPostContent();
-		expect( convertedPostContent ).toMatchSnapshot();
-	} );
-} );