@wordpress/e2e-tests 2.5.16 → 2.5.19

package/mu-plugins/enable-templates-ui.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, Enable Templates UI
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-enable-templates-ui
+ */
+
+/**
+ * Enable Templates & Template Parts post type UI during e2e testing.
+ */
+add_filter(
+	'register_post_type_args',
+	static function( $args, $name ) {
+		if ( in_array( $name, array( 'wp_template', 'wp_template_part' ), true ) ) {
+			$args['show_ui'] = wp_is_block_theme();
+		}
+
+		return $args;
+	},
+	20,
+	2
+);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "2.5.16",
+	"version": "2.5.19",
 	"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": "^5.4.10",
+		"@wordpress/e2e-test-utils": "^5.4.11",
 		"@wordpress/jest-console": "^4.1.1",
 		"@wordpress/jest-puppeteer-axe": "^3.1.1",
 		"@wordpress/scripts": "^19.2.4",
-		"@wordpress/url": "^3.3.1",
+		"@wordpress/url": "^3.3.2",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"jest-message-util": "^27.0.6",
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8c2cd6a5fd8781266da858a2e7d1bdd9a3a279e4"
+	"gitHead": "3cf1fca7ff79c72899d55df13b4339a4d8099871"
 }

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

@@ -2,25 +2,25 @@
 
 exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = `
 "<!-- wp:heading {\\"level\\":4} -->
-<h4 id=\\"4\\">4</h4>
+<h4>4</h4>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading can be created by prefixing number sign and a space 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
-<h3 id=\\"3\\">3</h3>
+<h3>3</h3>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should correctly apply custom colors 1`] = `
-"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#7700ff\\"}}} -->
-<h3 class=\\"has-text-color\\" id=\\"heading\\" style=\\"color:#7700ff\\">Heading</h3>
+"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#0782f6\\"}}} -->
+<h3 class=\\"has-text-color\\" style=\\"color:#0782f6\\">Heading</h3>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should correctly apply named colors 1`] = `
 "<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\" id=\\"heading\\">Heading</h2>
+<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -30,13 +30,13 @@ exports[`Heading should create a paragraph block above when pressing enter at th
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 id=\\"a\\">a</h2>
+<h2>a</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"a\\">a</h2>
+<h2>a</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -46,12 +46,12 @@ exports[`Heading should create a paragraph block below when pressing enter at th
 
 exports[`Heading should not work with the list input rule 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"1-h\\">1. H</h2>
+<h2>1. H</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should work with the format input rules 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"code\\"><code>code</code></h2>
+<h2><code>code</code></h2>
 <!-- /wp:heading -->"
 `;

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

@@ -40,7 +40,7 @@ exports[`Quote can be converted to paragraphs and renders only one paragraph for
 
 exports[`Quote can be created by converting a heading 1`] = `
 "<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\" id=\\"test\\"><p>test</p></blockquote>
+<blockquote class=\\"wp-block-quote\\"><p>test</p></blockquote>
 <!-- /wp:quote -->"
 `;
 
@@ -144,7 +144,7 @@ exports[`Quote can be split in the middle and merged back 4`] = `
 
 exports[`Quote is transformed to a heading and a quote if the quote contains a citation 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -154,7 +154,7 @@ exports[`Quote is transformed to a heading and a quote if the quote contains a c
 
 exports[`Quote is transformed to a heading and a quote if the quote contains multiple paragraphs 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -164,7 +164,7 @@ exports[`Quote is transformed to a heading and a quote if the quote contains mul
 
 exports[`Quote is transformed to a heading if the quote just contains one paragraph 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -176,7 +176,7 @@ exports[`Quote is transformed to an empty heading if the quote is empty 1`] = `
 
 exports[`Quote the resuling quote after transforming to a heading can be transformed again 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -186,11 +186,11 @@ exports[`Quote the resuling quote after transforming to a heading can be transfo
 
 exports[`Quote the resuling quote after transforming to a heading can be transformed again 2`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2 id=\\"two\\">two</h2>
+<h2>two</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -200,14 +200,14 @@ exports[`Quote the resuling quote after transforming to a heading can be transfo
 
 exports[`Quote the resuling quote after transforming to a heading can be transformed again 3`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2 id=\\"two\\">two</h2>
+<h2>two</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2 id=\\"cite\\">cite</h2>
+<h2>cite</h2>
 <!-- /wp:heading -->"
 `;

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

@@ -7,7 +7,7 @@ exports[`Spacer can be created by typing "/spacer" 1`] = `
 `;
 
 exports[`Spacer can be resized using the drag handle and remains selected after being dragged 1`] = `
-"<!-- wp:spacer {\\"height\\":150} -->
+"<!-- wp:spacer {\\"height\\":\\"150px\\"} -->
 <div style=\\"height:150px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
 <!-- /wp:spacer -->"
 `;

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

@@ -68,7 +68,7 @@ describe( 'Heading', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'should correctly apply custom colors', async () => {
+	it.skip( 'should correctly apply custom colors', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '### Heading' );
 		const colorPanelToggle = await page.waitForXPath(
@@ -91,7 +91,7 @@ describe( 'Heading', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'should correctly apply named colors', async () => {
+	it.skip( 'should correctly apply named colors', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '## Heading' );
 		const [ colorPanelToggle ] = await page.$x(

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

@@ -3,7 +3,7 @@
 exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
 "<!-- wp:group -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2 id=\\"group-heading\\">Group Heading</h2>
+<h2>Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -51,7 +51,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = `
 "<!-- wp:group -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2 id=\\"group-heading\\">Group Heading</h2>
+<h2>Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -66,7 +66,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 2`] = `
 "<!-- wp:heading -->
-<h2 id=\\"group-heading\\">Group Heading</h2>
+<h2>Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -81,7 +81,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = `
 "<!-- wp:group {\\"align\\":\\"full\\"} -->
 <div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
-<h2 id=\\"group-heading\\">Group Heading</h2>
+<h2>Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image {\\"align\\":\\"full\\"} -->

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

@@ -71,7 +71,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 id=\\"heading\\">Heading</h2>
+<h2>Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -93,7 +93,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:cover -->
 
 <!-- wp:heading -->
-<h2 id=\\"heading\\">Heading</h2>
+<h2>Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

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

@@ -420,4 +420,25 @@ describe( 'undo', () => {
 		// Expect "1".
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should be able to undo and redo when transient changes have been made and we update/publish', async () => {
+		// Typing consecutive characters in a `Paragraph` block updates the same
+		// block attribute as in the previous action and results in transient edits
+		// and skipping `undo` history steps.
+		const text = 'tonis';
+		await clickBlockAppender();
+		await page.keyboard.type( text );
+		await publishPost();
+		await pressKeyWithModifier( 'primary', 'z' );
+		expect( await getEditedPostContent() ).toBe( '' );
+		await page.waitForSelector(
+			'.editor-history__redo[aria-disabled="false"]'
+		);
+		await page.click( '.editor-history__redo[aria-disabled="false"]' );
+		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>tonis</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );

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

@@ -250,6 +250,19 @@ describe( 'Multi-entity save flow', () => {
 		const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`;
 		const saveA11ySelector = '.edit-site-editor__toggle-save-panel-button';
 
+		const saveAllChanges = async () => {
+			// Clicking button should open panel with boxes checked.
+			await page.click( activeSaveSiteSelector );
+			await page.waitForSelector( savePanelSelector );
+			await assertAllBoxesChecked();
+
+			// Save a11y button should not be present with save panel open.
+			await assertExistance( saveA11ySelector, false );
+
+			// Saving should result in items being saved.
+			await page.click( entitiesSaveSelector );
+		};
+
 		it( 'Save flow should work as expected', async () => {
 			// Navigate to site editor.
 			await siteEditor.visit( {
@@ -279,20 +292,55 @@ describe( 'Multi-entity save flow', () => {
 			// Save a11y button should be present.
 			await assertExistance( saveA11ySelector, true );
 
-			// Clicking button should open panel with boxes checked.
-			await page.click( activeSaveSiteSelector );
-			await page.waitForSelector( savePanelSelector );
-			await assertAllBoxesChecked();
-
-			// Save a11y button should not be present with save panel open.
-			await assertExistance( saveA11ySelector, false );
+			// Save all changes.
+			await saveAllChanges();
 
-			// Saving should result in items being saved.
-			await page.click( entitiesSaveSelector );
 			const disabledButton = await page.waitForSelector(
 				disabledSaveSiteSelector
 			);
 			expect( disabledButton ).not.toBeNull();
 		} );
+
+		it( 'Save flow should allow re-saving after changing the same block attribute', async () => {
+			// Navigate to site editor.
+			await siteEditor.visit( {
+				postId: 'tt1-blocks//index',
+				postType: 'wp_template',
+			} );
+			await siteEditor.disableWelcomeGuide();
+
+			// Insert a paragraph at the bottom.
+			await insertBlock( 'Paragraph' );
+
+			// Open the block settings.
+			await page.click( 'button[aria-label="Settings"]' );
+
+			// Click on font size selector.
+			await page.click( 'button[aria-label="Font size"]' );
+
+			// Click on a different font size.
+			const extraSmallFontSize = await page.waitForXPath(
+				'//li[contains(text(), "Extra small")]'
+			);
+			await extraSmallFontSize.click();
+
+			// Save all changes.
+			await saveAllChanges();
+
+			// Click on font size selector again.
+			await page.click( 'button[aria-label="Font size"]' );
+
+			// Select another font size.
+			const normalFontSize = await page.waitForXPath(
+				'//li[contains(text(), "Normal")]'
+			);
+			await normalFontSize.click();
+
+			// Assert that the save button has been re-enabled.
+			const saveButton = await page.waitForSelector(
+				activeSaveSiteSelector
+			);
+			expect( saveButton ).not.toBeNull();
+		} );
 	} );
 } );

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

@@ -22,29 +22,31 @@ const {
 	disableWelcomeGuide,
 } = siteEditor;
 
-const assertSaveButtonIsDisabled = () =>
+const assertSaveButtonIsDisabled = async () =>
 	page.waitForSelector(
 		'.edit-site-save-button__button[aria-disabled="true"]'
 	);
 
-const assertSaveButtonIsEnabled = () =>
+const assertSaveButtonIsEnabled = async () =>
 	page.waitForSelector(
 		'.edit-site-save-button__button[aria-disabled="false"]'
 	);
 
-const waitForNotice = () => page.waitForSelector( '.components-snackbar' );
-
 const clickButtonInNotice = async () => {
 	const selector = '.components-snackbar button';
 	await page.waitForSelector( selector );
 	await page.click( selector );
 };
 
-const clickUndoInHeaderToolbar = () =>
+const clickUndoInHeaderToolbar = async () =>
 	page.click( '.edit-site-header__toolbar button[aria-label="Undo"]' );
 
-const clickRedoInHeaderToolbar = () =>
-	page.click( '.edit-site-header__toolbar button[aria-label="Redo"]' );
+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();
@@ -72,7 +74,9 @@ const save = async () => {
 const revertTemplate = async () => {
 	await page.click( '.edit-site-document-actions__get-info' );
 	await page.click( '.edit-site-template-details__revert-button' );
-	await waitForNotice();
+	await page.waitForXPath(
+		'//*[contains(@class, "components-snackbar") and contains(text(), "Template reverted")]'
+	);
 	await assertSaveButtonIsEnabled();
 };