@wordpress/e2e-tests 4.3.0 → 4.4.0

package/config/flaky-tests-reporter.js

@@ -56,6 +56,7 @@ class FlakyTestsReporter {
 					await fs.writeFile(
 						`flaky-tests/${ filenamify( testTitle ) }.json`,
 						JSON.stringify( {
+							version: 1,
 							runner: 'jest-circus',
 							title: testTitle,
 							path: testPath,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "4.3.0",
+	"version": "4.4.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=12"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^7.5.0",
-		"@wordpress/jest-console": "^5.1.0",
+		"@wordpress/e2e-test-utils": "^7.6.0",
+		"@wordpress/jest-console": "^5.2.0",
 		"@wordpress/jest-puppeteer-axe": "^4.0.2",
-		"@wordpress/scripts": "^23.1.0",
-		"@wordpress/url": "^3.10.0",
+		"@wordpress/scripts": "^23.2.0",
+		"@wordpress/url": "^3.11.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
+	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
 }

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

@@ -3,7 +3,7 @@
 exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"https://www.wordpress.org/\\">WordPress</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"https://www.wordpress.org/\\">WordPress</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
@@ -11,7 +11,7 @@ exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = `
 exports[`Buttons dismisses link editor when escape is pressed 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">WordPress</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">WordPress</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
@@ -19,7 +19,7 @@ exports[`Buttons dismisses link editor when escape is pressed 1`] = `
 exports[`Buttons has focus on button content (slash inserter) 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Content</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Content</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
@@ -27,7 +27,7 @@ exports[`Buttons has focus on button content (slash inserter) 1`] = `
 exports[`Buttons has focus on button content 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Content</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Content</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;

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

@@ -12,8 +12,6 @@ describe( 'Heading', () => {
 	const COLOR_ITEM_SELECTOR =
 		'.block-editor-panel-color-gradient-settings__dropdown';
 	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `.components-color-palette__custom-color`;
-	const CUSTOM_COLOR_DETAILS_BUTTON_SELECTOR =
-		'.components-color-picker button[aria-label="Show detailed inputs"]';
 	const COLOR_INPUT_FIELD_SELECTOR =
 		'.components-color-picker .components-input-control__input';
 
@@ -82,13 +80,11 @@ describe( 'Heading', () => {
 		);
 
 		await customTextColorButton.click();
-		await page.click( CUSTOM_COLOR_DETAILS_BUTTON_SELECTOR );
 		await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
 		await page.click( COLOR_INPUT_FIELD_SELECTOR );
 		await pressKeyWithModifier( 'primary', 'A' );
 		await page.keyboard.type( '4b7f4d' );
-		await page.waitForXPath( '//button//span[contains(text(), "4b7f4d")]' );
-		await page.click( '.wp-block-post-title' );
+		await page.keyboard.press( 'Enter' );
 		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
 		"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#4b7f4d\\"}}} -->
 		<h3 class=\\"has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>

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

@@ -807,6 +807,58 @@ describe( 'Navigation', () => {
 		);
 	} );
 
+	it( 'correctly decodes special characters in the created Page title for display', async () => {
+		await createNewPost();
+		await insertBlock( 'Navigation' );
+		const startEmptyButton = await page.waitForXPath( START_EMPTY_XPATH );
+		await startEmptyButton.click();
+		const appender = await page.waitForSelector(
+			'.wp-block-navigation .block-list-appender'
+		);
+		await appender.click();
+
+		// Wait for URL input to be focused
+		// Insert name for the new page.
+		const pageTitle = 'This & That & Some < other > chars';
+		const input = await page.waitForSelector(
+			'input.block-editor-url-input__input:focus'
+		);
+		await input.type( pageTitle );
+
+		// When creating a page, the URLControl makes a request to the
+		// url-details endpoint to fetch information about the page.
+		// Because the draft is inaccessible publicly, this request
+		// returns a 404 response. Wait for the response and expect
+		// the error to have occurred.
+		const createPageButton = await page.waitForSelector(
+			'.block-editor-link-control__search-create'
+		);
+		const responsePromise = page.waitForResponse(
+			( response ) =>
+				response.url().includes( 'url-details' ) &&
+				response.status() === 404
+		);
+		const createPagePromise = createPageButton.click();
+		await Promise.all( [ responsePromise, createPagePromise ] );
+
+		await waitForBlock( 'Navigation' );
+
+		const innerLinkBlock = await waitForBlock( 'Custom Link' );
+
+		const linkText = await innerLinkBlock.$eval(
+			'[aria-label="Navigation link text"]',
+			( element ) => {
+				return element.innerText;
+			}
+		);
+
+		expect( linkText ).toContain( pageTitle );
+
+		expect( console ).toHaveErroredWith(
+			'Failed to load resource: the server responded with a status of 404 (Not Found)'
+		);
+	} );
+
 	it( 'renders buttons for the submenu opener elements when the block is set to open on click instead of hover', async () => {
 		await createClassicMenu( { name: 'Test Menu 2' }, menuItemsFixture );
 		await createNewPost();
@@ -1294,11 +1346,9 @@ describe( 'Navigation', () => {
 				`//*[contains(@class, 'components-snackbar__content')][ text()="You do not have permission to edit this Menu. Any changes made will not be saved." ]`
 			);
 
-			// Expect a console 403 for request to Navigation Areas for lower permission users.
-			// This is because reading requires the `edit_theme_options` capability
-			// which the Contributor level user does not have.
-			// See: https://github.com/WordPress/gutenberg/blob/4cedaf0c4abb0aeac4bfd4289d63e9889efe9733/lib/class-wp-rest-block-navigation-areas-controller.php#L81-L91.
-			// Todo: removed once Nav Areas are removed from the Gutenberg Plugin.
+			// Expect a console 403 for requests to:
+			// * /wp/v2/settings?_locale=user
+			// * /wp/v2/templates?context=edit&post_type=post&per_page=100&_locale=user
 			expect( console ).toHaveErrored();
 		} );
 
@@ -1317,11 +1367,9 @@ describe( 'Navigation', () => {
 				`//*[contains(@class, 'components-snackbar__content')][ text()="${ noticeText }" ]`
 			);
 
-			// Expect a console 403 for request to Navigation Areas for lower permission users.
-			// This is because reading requires the `edit_theme_options` capability
-			// which the Contributor level user does not have.
-			// See: https://github.com/WordPress/gutenberg/blob/4cedaf0c4abb0aeac4bfd4289d63e9889efe9733/lib/class-wp-rest-block-navigation-areas-controller.php#L81-L91.
-			// Todo: removed once Nav Areas are removed from the Gutenberg Plugin.
+			// Expect a console 403 for requests to:
+			// * /wp/v2/settings?_locale=user
+			// * /wp/v2/templates?context=edit&post_type=post&per_page=100&_locale=user
 			expect( console ).toHaveErrored();
 		} );
 	} );

package/specs/editor/plugins/iframed-inline-styles.test.js

@@ -32,6 +32,7 @@ describe( 'iframed inline styles', () => {
 		await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
 	} );
 
+	// Skip flaky test. See https://github.com/WordPress/gutenberg/issues/35172
 	it.skip( 'should load inline styles in iframe', async () => {
 		await insertBlock( 'Iframed Inline Styles' );
 

package/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap

@@ -108,7 +108,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 exports[`Inserting blocks inserts blocks at root level when using the root appender while selection is in an inner block 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">1.1</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">1.1</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->
 

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

@@ -15,12 +15,24 @@ async function getSelectedOptionLabel( selector ) {
 }
 
 async function getDatePickerValues() {
-	const year = await getInputValue( '[aria-label="Year"]' );
-	const month = await getInputValue( '[aria-label="Month"]' );
-	const monthLabel = await getSelectedOptionLabel( '[aria-label="Month"]' );
-	const day = await getInputValue( '[aria-label="Day"]' );
-	const hours = await getInputValue( '[aria-label="Hours"]' );
-	const minutes = await getInputValue( '[aria-label="Minutes"]' );
+	const year = await getInputValue(
+		'.components-datetime__time-field-year input'
+	);
+	const month = await getInputValue(
+		'.components-datetime__time-field-month select'
+	);
+	const monthLabel = await getSelectedOptionLabel(
+		'.components-datetime__time-field-month select'
+	);
+	const day = await getInputValue(
+		'.components-datetime__time-field-day input'
+	);
+	const hours = await getInputValue(
+		'.components-datetime__time-field-hours-input input'
+	);
+	const minutes = await getInputValue(
+		'.components-datetime__time-field-minutes-input input'
+	);
 	const amOrPm = await page.$eval(
 		'.components-datetime__time-field-am-pm .is-primary',
 		( element ) => element.innerText.toLowerCase()
@@ -126,7 +138,7 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 			await page.click( '.edit-post-post-schedule__toggle' );
 
 			// Clear the date.
-			await page.click( '.components-datetime__date-reset-button' );
+			await page.click( '.block-editor-publish-date-time-picker__reset' );
 
 			const publishingDate = await getPublishingDate();
 

package/specs/editor/various/post-visibility.test.js

@@ -92,7 +92,7 @@ describe( 'Post visibility', () => {
 		// Set a publish date for the next month.
 		await page.click( '.edit-post-post-schedule__toggle' );
 		await page.click(
-			'div[aria-label="Move forward to switch to the next month."]'
+			'*[aria-label="Move forward to switch to the next month."]'
 		);
 		await (
 			await page.$x(

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

@@ -58,11 +58,11 @@ describe( 'Scheduling', () => {
 
 		await page.click( '.edit-post-post-schedule__toggle' );
 		await page.click(
-			'div[aria-label="Move backward to switch to the previous month."]'
+			'*[aria-label="Move backward to switch to the previous month."]'
 		);
 		expect( await isDateTimeComponentFocused() ).toBe( true );
 		await page.click(
-			'div[aria-label="Move forward to switch to the next month."]'
+			'*[aria-label="Move forward to switch to the next month."]'
 		);
 		expect( await isDateTimeComponentFocused() ).toBe( true );
 	} );

package/specs/editor/various/switch-to-draft.test.js

@@ -63,7 +63,7 @@ async function scheduleTestPost( postType, viewport ) {
 	// Set a publish date for the next month.
 	await page.click( '.edit-post-post-schedule__toggle' );
 	await page.click(
-		'div[aria-label="Move forward to switch to the next month."]'
+		'*[aria-label="Move forward to switch to the next month."]'
 	);
 
 	await (

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

@@ -734,4 +734,23 @@ describe( 'Writing Flow', () => {
 		);
 		expect( selectedParagraph ).toBeDefined();
 	} );
+	it( 'should prevent browser default formatting on multi selection', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'first' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'second' );
+
+		// Multi select both paragraphs.
+		await pressKeyTimes( 'ArrowLeft', 2 );
+		await page.keyboard.down( 'Shift' );
+		await pressKeyTimes( 'ArrowLeft', 2 );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.up( 'Shift' );
+		await pressKeyWithModifier( 'primary', 'b' );
+		const paragraphs = await page.$$eval(
+			'[data-type="core/paragraph"]',
+			( nodes ) => Array.from( nodes ).map( ( node ) => node.innerHTML )
+		);
+		expect( paragraphs ).toEqual( [ 'first', 'second' ] );
+	} );
 } );

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

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Code can be created by three backticks and enter 1`] = `
-"<!-- wp:code -->
-<pre class=\\"wp-block-code\\"><code>&lt;?php</code></pre>
-<!-- /wp:code -->"
-`;
-
-exports[`Code should paste plain text 1`] = `
-"<!-- wp:code -->
-<pre class=\\"wp-block-code\\"><code>&lt;img />
-	&lt;br></code></pre>
-<!-- /wp:code -->"
-`;

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

@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HTML block can be created by typing "/html" 1`] = `
-"<!-- wp:html -->
-<p>Pythagorean theorem: 
-<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup> </p>
-<!-- /wp:html -->"
-`;

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

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Preformatted should preserve character newlines 1`] = `
-"<!-- wp:html -->
-<pre>1
-2</pre>
-<!-- /wp:html -->"
-`;
-
-exports[`Preformatted should preserve character newlines 2`] = `
-"<!-- wp:preformatted -->
-<pre class=\\"wp-block-preformatted\\">0
-1
-2</pre>
-<!-- /wp:preformatted -->"
-`;
-
-exports[`Preformatted should preserve white space when merging 1`] = `
-"<!-- wp:preformatted -->
-<pre class=\\"wp-block-preformatted\\">1
-2
-3</pre>
-<!-- /wp:preformatted -->"
-`;

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

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Separator can be created by three dashes and enter 1`] = `
-"<!-- wp:separator -->
-<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
-<!-- /wp:separator -->"
-`;

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

@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	setClipboardData,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Code', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by three backticks and enter', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '```' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '<?php' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should delete block when backspace in an empty code', async () => {
-		await insertBlock( 'Code' );
-		await page.keyboard.type( 'a' );
-
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.press( 'Backspace' );
-
-		// Expect code block to be deleted.
-		expect( await getEditedPostContent() ).toBe( '' );
-	} );
-
-	it( 'should paste plain text', async () => {
-		await insertBlock( 'Code' );
-
-		// Test to see if HTML and white space is kept.
-		await setClipboardData( { plainText: '<img />\n\t<br>' } );
-
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );

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

@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'HTML block', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by typing "/html"', async () => {
-		// Create a Custom HTML block with the slash shortcut.
-		await clickBlockAppender();
-		await page.keyboard.type( '/html' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Custom HTML')]`
-		);
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '<p>Pythagorean theorem: ' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type(
-			'<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup> </p>'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );

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

@@ -1,62 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockToolbarButton,
-	clickMenuItem,
-	getEditedPostContent,
-	createNewPost,
-	insertBlock,
-	clickBlockAppender,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Preformatted', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should preserve character newlines', async () => {
-		await insertBlock( 'Custom HTML' );
-		await page.keyboard.type( '<pre>1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2</pre>' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Convert to Blocks' );
-		// Once it's edited, it should be saved as BR tags.
-		await page.keyboard.type( '0' );
-		await page.keyboard.press( 'Enter' );
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as HTML' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should preserve white space when merging', async () => {
-		await insertBlock( 'Preformatted' );
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'Enter' );
-		await clickBlockAppender();
-		await page.keyboard.type( '3' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should delete block when backspace in an empty preformatted', async () => {
-		await insertBlock( 'Preformatted' );
-
-		await page.keyboard.type( 'a' );
-
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.press( 'Backspace' );
-
-		// Expect preformatted block to be deleted.
-		expect( await getEditedPostContent() ).toBe( '' );
-	} );
-} );

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

@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Separator', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by three dashes and enter', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '---' );
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );

package/specs/site-editor/template-part.test.js

@@ -1,346 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	deleteAllTemplates,
-	activateTheme,
-	getAllBlocks,
-	selectBlockByClientId,
-	clickBlockToolbarButton,
-	canvas,
-	visitSiteEditor,
-} from '@wordpress/e2e-test-utils';
-
-const templatePartNameInput =
-	'.edit-site-create-template-part-modal .components-text-control__input';
-
-describe( 'Template Part', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-	afterEach( async () => {
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	describe( 'Template part block', () => {
-		beforeEach( async () => {
-			await visitSiteEditor();
-		} );
-
-		async function navigateToHeader() {
-			// Switch to editing the header template part.
-			await visitSiteEditor( {
-				postId: 'emptytheme//header',
-				postType: 'wp_template_part',
-			} );
-		}
-
-		async function updateHeader( content ) {
-			await navigateToHeader();
-
-			// Edit it.
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( content );
-
-			// Save it.
-			await page.click( '.edit-site-save-button__button' );
-			await page.click( '.editor-entities-saved-states__save-button' );
-			await page.waitForSelector(
-				'.edit-site-save-button__button:not(.is-busy)'
-			);
-
-			// Switch back to the Index template.
-			await visitSiteEditor( {
-				postId: 'emptytheme//index',
-				postType: 'wp_template',
-			} );
-		}
-
-		async function triggerEllipsisMenuItem( textPrompt ) {
-			await clickBlockToolbarButton( 'Options' );
-			const button = await page.waitForXPath(
-				`//span[contains(text(), "${ textPrompt }")]`
-			);
-			await button.click();
-		}
-
-		async function createParagraphAndGetClientId( content ) {
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( content );
-			const allBlocks = await getAllBlocks();
-			const paragraphBlock = allBlocks.find(
-				( block ) =>
-					block.name === 'core/paragraph' &&
-					block.attributes.content === content
-			);
-			return paragraphBlock.clientId;
-		}
-
-		async function assertParagraphInTemplatePart( content ) {
-			const paragraphInTemplatePart = await canvas().waitForXPath(
-				`//*[@data-type="core/template-part"][//p[text()="${ content }"]]`
-			);
-			expect( paragraphInTemplatePart ).not.toBeNull();
-		}
-
-		async function awaitHeaderLoad() {
-			await canvas().waitForSelector(
-				'header.wp-block-template-part.block-editor-block-list__layout'
-			);
-		}
-
-		it( 'Should load customizations when in a template even if only the slug and theme attributes are set.', async () => {
-			await updateHeader( 'Header Template Part 123' );
-
-			// Verify that the header template part is updated.
-			await assertParagraphInTemplatePart( 'Header Template Part 123' );
-		} );
-
-		it( 'Should detach blocks from template part', async () => {
-			await updateHeader( 'Header Template Part 456' );
-
-			const initialTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
-			);
-
-			// Select the header template part block.
-			const allBlocks = await getAllBlocks();
-			const headerBlock = allBlocks.find(
-				( block ) => block.name === 'core/template-part'
-			);
-			await selectBlockByClientId( headerBlock.clientId );
-
-			// Detach blocks from template part using ellipsis menu.
-			await triggerEllipsisMenuItem( 'Detach blocks from template part' );
-
-			// Verify there is one less template part on the page.
-			const finalTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
-			);
-			expect(
-				initialTemplateParts.length - finalTemplateParts.length
-			).toBe( 1 );
-
-			// Verify content of the template part is still present.
-			const [ expectedContent ] = await canvas().$x(
-				'//p[contains(text(), "Header Template Part 456")]'
-			);
-			expect( expectedContent ).not.toBeUndefined();
-		} );
-
-		it( 'Should load navigate-to-links properly', async () => {
-			await navigateToHeader();
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( 'Header Template Part 789' );
-
-			// Select the paragraph block.
-			const text = await canvas().waitForXPath(
-				'//p[contains(text(), "Header Template Part 789")]'
-			);
-
-			// Highlight all the text in the paragraph block.
-			await text.click( { clickCount: 3 } );
-
-			// Click the convert to link toolbar button.
-			await page.waitForSelector( 'button[aria-label="Link"]' );
-			await page.click( 'button[aria-label="Link"]' );
-
-			// Enter url for link.
-			await page.keyboard.type( 'https://google.com' );
-			await page.keyboard.press( 'Enter' );
-
-			// Verify that there is no error.
-			await canvas().click( 'p[data-type="core/paragraph"] a' );
-			const expectedContent = await canvas().$x(
-				'//p[contains(text(), "Header Template Part 789")]'
-			);
-
-			expect( expectedContent ).not.toBeUndefined();
-		} );
-
-		it( 'Should convert selected block to template part', async () => {
-			await awaitHeaderLoad();
-			const initialTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
-			);
-
-			// Add some block and select it.
-			const clientId = await createParagraphAndGetClientId(
-				'Some block...'
-			);
-			await selectBlockByClientId( clientId );
-
-			// Convert block to a template part.
-			await triggerEllipsisMenuItem( 'Make template part' );
-			const nameInput = await page.waitForSelector(
-				templatePartNameInput
-			);
-			await nameInput.click();
-			await page.keyboard.type( 'My template part' );
-			await page.keyboard.press( 'Enter' );
-
-			// Wait for creation to finish.
-			await page.waitForXPath(
-				'//*[contains(@class, "components-snackbar")]/*[text()="Template part created."]'
-			);
-
-			// Verify new template part is created with expected content.
-			await assertParagraphInTemplatePart( 'Some block...' );
-
-			// Verify there is 1 more template part on the page than previously.
-			const finalTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
-			);
-			expect(
-				finalTemplateParts.length - initialTemplateParts.length
-			).toBe( 1 );
-		} );
-
-		it( 'Should convert multiple selected blocks to template part', async () => {
-			await awaitHeaderLoad();
-			const initialTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
-			);
-
-			// Add two blocks and select them.
-			const block1Id = await createParagraphAndGetClientId(
-				'Some block #1'
-			);
-			const block2Id = await createParagraphAndGetClientId(
-				'Some block #2'
-			);
-			await page.evaluate(
-				( id1, id2 ) => {
-					wp.data
-						.dispatch( 'core/block-editor' )
-						.multiSelect( id1, id2 );
-				},
-				block1Id,
-				block2Id
-			);
-
-			// Convert block to a template part.
-			await triggerEllipsisMenuItem( 'Make template part' );
-			const nameInput = await page.waitForSelector(
-				templatePartNameInput
-			);
-			await nameInput.click();
-			await page.keyboard.type( 'My multi  template part' );
-			await page.keyboard.press( 'Enter' );
-
-			// Wait for creation to finish.
-			await page.waitForXPath(
-				'//*[contains(@class, "components-snackbar")]/*[text()="Template part created."]'
-			);
-
-			// Verify new template part is created with expected content.
-			await assertParagraphInTemplatePart( 'Some block #1' );
-			await assertParagraphInTemplatePart( 'Some block #2' );
-
-			// Verify there is 1 more template part on the page than previously.
-			const finalTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
-			);
-			expect(
-				finalTemplateParts.length - initialTemplateParts.length
-			).toBe( 1 );
-		} );
-
-		describe( 'Template part placeholder', () => {
-			// Test constants for template part.
-			const testContent = 'some words...';
-
-			// Selectors.
-			const entitiesSaveSelector =
-				'.editor-entities-saved-states__save-button';
-			const savePostSelector = '.edit-site-save-button__button';
-			const templatePartSelector = '*[data-type="core/template-part"]';
-			const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
-			const startBlockButtonSelector =
-				'//button[contains(text(), "Start blank")]';
-			const chooseExistingButtonSelector =
-				'//button[contains(text(), "Choose")]';
-			const confirmTitleButtonSelector =
-				'.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
-
-			it( 'Should insert new template part on creation', async () => {
-				let siteEditorCanvas = canvas();
-				await awaitHeaderLoad();
-
-				// Create new template part.
-				await insertBlock( 'Template Part' );
-				const startBlankButton = await siteEditorCanvas.waitForXPath(
-					startBlockButtonSelector
-				);
-				await startBlankButton.click();
-				const confirmTitleButton = await page.waitForSelector(
-					confirmTitleButtonSelector
-				);
-				await page.keyboard.press( 'Tab' );
-				await page.keyboard.press( 'Tab' );
-				await page.keyboard.type( 'Create New' );
-				await confirmTitleButton.click();
-
-				const newTemplatePart = await siteEditorCanvas.waitForSelector(
-					activatedTemplatePartSelector
-				);
-				expect( newTemplatePart ).toBeTruthy();
-
-				// Finish creating template part, insert some text, and save.
-				await siteEditorCanvas.waitForSelector(
-					'.block-editor-button-block-appender'
-				);
-				await siteEditorCanvas.click(
-					'.block-editor-button-block-appender'
-				);
-				await page.waitForSelector(
-					'.editor-block-list-item-paragraph'
-				);
-				await page.click( '.editor-block-list-item-paragraph' );
-				await page.keyboard.type( testContent );
-				await page.click( savePostSelector );
-				await page.click( entitiesSaveSelector );
-
-				// Reload the page so as the new template part is available in the existing template parts.
-				await visitSiteEditor();
-				siteEditorCanvas = canvas();
-				await awaitHeaderLoad();
-				// Try to insert the template part we created.
-				await insertBlock( 'Template Part' );
-				const chooseExistingButton = await siteEditorCanvas.waitForXPath(
-					chooseExistingButtonSelector
-				);
-				await chooseExistingButton.click();
-				const preview = await page.waitForSelector(
-					'.block-editor-block-patterns-list__item'
-				);
-				await preview.click();
-
-				// Wait for the template parts to load properly.
-				await siteEditorCanvas.waitForSelector(
-					'[data-type="core/template-part"] > p:first-child'
-				);
-
-				// We now have the same template part two times in the page, so check accordingly.
-				const paragraphs = await siteEditorCanvas.$$eval(
-					'[data-type="core/template-part"] > p:first-child',
-					( options ) =>
-						options.map( ( option ) => option.textContent )
-				);
-				expect( paragraphs ).toHaveLength( 2 );
-				expect(
-					paragraphs.every(
-						( paragraph ) => paragraph === testContent
-					)
-				).toBeTruthy();
-			} );
-		} );
-	} );
-} );

package/specs/site-editor/template-revert.test.js

@@ -1,209 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	activateTheme,
-	deleteAllTemplates,
-	visitSiteEditor,
-	getCurrentSiteEditorContent,
-} from '@wordpress/e2e-test-utils';
-
-const assertSaveButtonIsDisabled = async () =>
-	page.waitForSelector(
-		'.edit-site-save-button__button[aria-disabled="true"]'
-	);
-
-const assertSaveButtonIsEnabled = async () =>
-	page.waitForSelector(
-		'.edit-site-save-button__button[aria-disabled="false"]'
-	);
-
-const clickButtonInNotice = async () => {
-	const selector = '.components-snackbar button';
-	await page.waitForSelector( selector );
-	await page.click( selector );
-};
-
-const clickUndoInHeaderToolbar = async () =>
-	page.click( '.edit-site-header__toolbar button[aria-label="Undo"]' );
-
-const clickRedoInHeaderToolbar = async () => {
-	await page.waitForSelector(
-		'.edit-site-header__toolbar button[aria-label="Redo"][aria-disabled="false"]'
-	);
-	return page.click( '.edit-site-header__toolbar button[aria-label="Redo"]' );
-};
-
-const undoRevertInHeaderToolbar = async () => {
-	await clickUndoInHeaderToolbar();
-	await assertSaveButtonIsEnabled();
-};
-
-const undoRevertInNotice = async () => {
-	await clickButtonInNotice();
-	await assertSaveButtonIsEnabled();
-};
-
-const addDummyText = async () => {
-	await insertBlock( 'Paragraph' );
-	await page.keyboard.type( 'Test' );
-};
-
-const save = async () => {
-	await page.click( '.edit-site-save-button__button' );
-	await page.click( '.editor-entities-saved-states__save-button' );
-	await page.waitForSelector(
-		'.edit-site-save-button__button:not(.is-busy)'
-	);
-};
-
-const revertTemplate = async () => {
-	await page.click( '.edit-site-document-actions__get-info' );
-	await page.click( '.edit-site-template-details__revert-button' );
-	await page.waitForXPath(
-		'//*[contains(@class, "components-snackbar") and contains(text(), "Template reverted")]'
-	);
-	await assertSaveButtonIsEnabled();
-};
-
-describe( 'Template Revert', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-	afterAll( async () => {
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-		await activateTheme( 'twentytwentyone' );
-	} );
-	beforeEach( async () => {
-		await deleteAllTemplates( 'wp_template' );
-		await visitSiteEditor();
-	} );
-
-	it( 'should delete the template after saving the reverted template', async () => {
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-
-		await page.click( '.edit-site-document-actions__get-info' );
-
-		// The revert button isn't visible anymore.
-		expect(
-			await page.$( '.edit-site-template-details__revert-button' )
-		).toBeNull();
-	} );
-
-	it( 'should show the original content after revert', async () => {
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the original content after revert and page reload', async () => {
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-		await visitSiteEditor();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the edited content after revert and clicking undo in the header toolbar', async () => {
-		await addDummyText();
-		await save();
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await revertTemplate();
-		await save();
-		await undoRevertInHeaderToolbar();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the edited content after revert and clicking undo in the notice', async () => {
-		await addDummyText();
-		await save();
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await revertTemplate();
-		await save();
-		await undoRevertInNotice();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the original content after revert, clicking undo then redo in the header toolbar', async () => {
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-		await undoRevertInHeaderToolbar();
-		await clickRedoInHeaderToolbar();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the original content after revert, clicking undo in the notice then undo in the header toolbar', async () => {
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-		await undoRevertInNotice();
-		await undoRevertInHeaderToolbar();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the edited content after revert, clicking undo in the header toolbar, save and reload', async () => {
-		await addDummyText();
-		await save();
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await revertTemplate();
-		await save();
-		await clickUndoInHeaderToolbar();
-		await save();
-		await assertSaveButtonIsDisabled();
-		await visitSiteEditor();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the edited content after revert, clicking undo in the notice and reload', async () => {
-		await addDummyText();
-		await save();
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await revertTemplate();
-		await save();
-		await undoRevertInNotice();
-		await save();
-		await visitSiteEditor();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-} );