@wordpress/e2e-tests 2.5.8 → 2.5.12

package/jest.config.js

@@ -5,6 +5,7 @@ const baseConfig = require( '@wordpress/scripts/config/jest-e2e.config' );
 
 module.exports = {
 	...baseConfig,
+	testMatch: [ '<rootDir>/specs/**/*.test.js' ],
 	setupFiles: [ '<rootDir>/config/gutenberg-phase.js' ],
 	setupFilesAfterEnv: [
 		'<rootDir>/config/setup-test-framework.js',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "2.5.8",
+	"version": "2.5.12",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,7 +23,7 @@
 		"node": ">=12"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^5.4.8",
+		"@wordpress/e2e-test-utils": "^5.4.10",
 		"@wordpress/jest-console": "^4.1.1",
 		"@wordpress/jest-puppeteer-axe": "^3.1.1",
 		"@wordpress/scripts": "^19.2.2",
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6d3bd917064b4b194677233ee426f5988fa441b9"
+	"gitHead": "3665e3e1b121046300d8b2fa35074d748f16dbc2"
 }

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

@@ -197,6 +197,9 @@ describe( 'Cover', () => {
 		await insertBlock( 'Image' );
 		// Upload image and transform to the Cover block
 		await upload( '.wp-block-image' );
+		// Click the block wrapper before trying to convert to make sure figcaption toolbar is not obscuring
+		// the block toolbar.
+		await page.click( '.wp-block-image' );
 		await transformBlockTo( 'Cover' );
 
 		// Get the block's background dim color and its opacity

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

@@ -74,7 +74,7 @@ describe( 'Image', () => {
 		expect( await getEditedPostContent() ).toMatch( regex );
 	} );
 
-	it.skip( 'should replace, reset size, and keep selection', async () => {
+	it( 'should replace, reset size, and keep selection', async () => {
 		await insertBlock( 'Image' );
 		const filename1 = await upload( '.wp-block-image input[type="file"]' );
 		await waitForImage( filename1 );
@@ -103,8 +103,9 @@ describe( 'Image', () => {
 			`<!-- wp:image {"id":\\d+,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename2 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
 		);
 		expect( await getEditedPostContent() ).toMatch( regex3 );
-
-		await page.click( '.wp-block-image img' );
+		// For some reason just clicking the block wrapper causes figcaption to get focus
+		// in puppeteer but not in live browser, so clicking on the image wrapper div here instead.
+		await page.click( '.wp-block-image > div' );
 		await page.keyboard.press( 'Backspace' );
 
 		expect( await getEditedPostContent() ).toBe( '' );
@@ -314,9 +315,13 @@ describe( 'Image', () => {
 
 		// Upload an initial image.
 		const filename = await upload( '.wp-block-image input[type="file"]' );
-
+		await waitForImage( filename );
 		// Resize the Uploaded Image.
 		await openDocumentSettingsSidebar();
+		await page.waitForSelector(
+			'[aria-label="Image size presets"] button:first-child',
+			{ visible: true }
+		);
 		await page.click(
 			'[aria-label="Image size presets"] button:first-child'
 		);
@@ -337,15 +342,15 @@ describe( 'Image', () => {
 		await editButton.click();
 
 		await page.waitForSelector( '.block-editor-url-input__input' );
-		await page.evaluate(
-			() =>
-				( document.querySelector(
-					'.block-editor-url-input__input'
-				).value = '' )
-		);
 
+		// Clear the input field. Delay added to account for typing delays.
+		const inputField = await page.$( '.block-editor-url-input__input' );
+		await inputField.click( { clickCount: 3, delay: 100 } );
+		await page.keyboard.press( 'Backspace', { delay: 100 } );
+
+		// Replace the url. Delay added to account for typing delays.
 		await page.focus( '.block-editor-url-input__input' );
-		await page.keyboard.type( imageUrl );
+		await page.keyboard.type( imageUrl, { delay: 100 } );
 		await page.click( '.block-editor-link-control__search-submit' );
 
 		const regexAfter = new RegExp(

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

@@ -110,6 +110,52 @@ describe( 'Block Grouping', () => {
 			);
 			expect( ungroupButtons ).toHaveLength( 0 );
 		} );
+		it( 'should group and ungroup a controlled block properly', async () => {
+			const getParagraphText = async () => {
+				const paragraphInReusableSelector =
+					'.block-editor-block-list__block[data-type="core/block"] p';
+				await page.waitForSelector( paragraphInReusableSelector );
+				return page.$eval(
+					paragraphInReusableSelector,
+					( element ) => element.innerText
+				);
+			};
+
+			const paragraphText = 'hi';
+			const reusableBlockNameInputSelector =
+				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( paragraphText );
+
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Add to Reusable blocks' );
+			const nameInput = await page.waitForSelector(
+				reusableBlockNameInputSelector
+			);
+			await nameInput.click();
+			await page.keyboard.type( 'Block' );
+			await page.keyboard.press( 'Enter' );
+
+			// Wait for creation to finish
+			await page.waitForXPath(
+				'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
+			);
+			// Group
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Group' );
+
+			let group = await page.$$( '[data-type="core/group"]' );
+			expect( group ).toHaveLength( 1 );
+			// Make sure the paragraph in reusable block exists.
+			expect( await getParagraphText() ).toMatch( paragraphText );
+
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Ungroup' );
+			group = await page.$$( '[data-type="core/group"]' );
+			expect( group ).toHaveLength( 0 );
+			// Make sure the paragraph in reusable block exists.
+			expect( await getParagraphText() ).toEqual( paragraphText );
+		} );
 	} );
 
 	describe( 'Grouping Block availability', () => {

package/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RichText should remove highlighting element 1`] = `
+"<!-- wp:paragraph -->
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`RichText should remove highlighting element 2`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->"
+`;

package/specs/editor/various/format-library/text-color.test.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	getEditedPostContent,
+	clickBlockAppender,
+	pressKeyWithModifier,
+	clickBlockToolbarButton,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'RichText', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'should remove highlighting element', async () => {
+		await clickBlockAppender();
+
+		// Add text and select to color.
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await clickBlockToolbarButton( 'More' );
+
+		const button = await page.waitForXPath(
+			`//button[text()='Highlight']`
+		);
+		// Clicks may fail if the button is out of view. Assure it is before click.
+		await button.evaluate( ( element ) => element.scrollIntoView() );
+		await button.click();
+
+		// Use a color name with multiple words to ensure that it becomes
+		// active. Previously we had a broken regular expression.
+		const option = await page.waitForSelector(
+			'[aria-label="Color: Cyan bluish gray"]'
+		);
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );

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

@@ -13,7 +13,7 @@ import {
 
 const getActiveBlockName = async () =>
 	page.evaluate(
-		() => wp.data.select( 'core/block-editor' ).getSelectedBlock().name
+		() => wp.data.select( 'core/block-editor' ).getSelectedBlock()?.name
 	);
 
 const addParagraphsAndColumnsDemo = async () => {
@@ -626,4 +626,24 @@ describe( 'Writing Flow', () => {
 			)
 		).toBe( 'Table' );
 	} );
+
+	it( 'Should unselect all blocks when hitting double escape', async () => {
+		// Add demo content.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Random Paragraph' );
+
+		// Select a block.
+		let activeBlockName = await getActiveBlockName();
+		expect( activeBlockName ).toBe( 'core/paragraph' );
+
+		// First escape enters navigaiton mode.
+		await page.keyboard.press( 'Escape' );
+		activeBlockName = await getActiveBlockName();
+		expect( activeBlockName ).toBe( 'core/paragraph' );
+
+		// Second escape unselects the blocks.
+		await page.keyboard.press( 'Escape' );
+		activeBlockName = await getActiveBlockName();
+		expect( activeBlockName ).toBe( undefined );
+	} );
 } );

package/specs/experiments/experimental-features.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { visitAdminPage } from '@wordpress/e2e-test-utils';
+
+async function setExperimentalFeaturesState( features, enable ) {
+	const query = addQueryArgs( '', {
+		page: 'gutenberg-experiments',
+	} );
+	await visitAdminPage( '/admin.php', query );
+
+	await Promise.all(
+		features.map( async ( feature ) => {
+			await page.waitForSelector( feature );
+			const checkedSelector = `${ feature }[checked=checked]`;
+			const isChecked = !! ( await page.$( checkedSelector ) );
+			if ( ( ! isChecked && enable ) || ( isChecked && ! enable ) ) {
+				await page.click( feature );
+			}
+		} )
+	);
+	await Promise.all( [
+		page.waitForNavigation( { waitUntil: 'networkidle0' } ),
+		page.click( '#submit' ),
+	] );
+}
+
+/**
+ * Establishes test lifecycle to enable experimental feature for the duration of
+ * the grouped test block.
+ *
+ * @param {Array} features Array of {string} selectors of settings to enable.
+ *                         Assumes they can be enabled with one click.
+ */
+export function useExperimentalFeatures( features ) {
+	beforeAll( () => setExperimentalFeaturesState( features, true ) );
+	afterAll( () => setExperimentalFeaturesState( features, false ) );
+}

package/specs/experiments/navigation-editor.test.js

@@ -22,7 +22,7 @@ import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { useExperimentalFeatures } from '../../experimental-features';
+import { useExperimentalFeatures } from './experimental-features';
 import menuItemsFixture from './fixtures/menu-items-request-fixture.json';
 
 const TYPE_NAMES = {

package/specs/performance/site-editor.test.js

@@ -19,7 +19,7 @@ import {
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../../experimental-features';
+import { siteEditor } from '../site-editor/utils';
 import {
 	readFile,
 	deleteFile,

package/specs/{experiments → site-editor}/document-settings.test.js

@@ -6,14 +6,14 @@ import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../../experimental-features';
+import { siteEditor } from './utils';
 
 async function getDocumentSettingsTitle() {
 	const titleElement = await page.waitForSelector(
 		'.edit-site-document-actions__title'
 	);
 
-	return titleElement.evaluate( ( el ) => el.innerText );
+	return titleElement.evaluate( ( el ) => el.textContent );
 }
 
 async function getDocumentSettingsSecondaryTitle() {
@@ -21,7 +21,7 @@ async function getDocumentSettingsSecondaryTitle() {
 		'.edit-site-document-actions__secondary-item'
 	);
 
-	return secondaryTitleElement.evaluate( ( el ) => el.innerText );
+	return secondaryTitleElement.evaluate( ( el ) => el.textContent );
 }
 
 describe( 'Document Settings', () => {
@@ -50,7 +50,7 @@ describe( 'Document Settings', () => {
 			// Evaluate the document settings title
 			const actual = await getDocumentSettingsTitle();
 
-			expect( actual ).toEqual( 'Index' );
+			expect( actual ).toEqual( 'Editing template: Index' );
 		} );
 
 		describe( 'and a template part is clicked in the template', () => {
@@ -70,7 +70,7 @@ describe( 'Document Settings', () => {
 				// Evaluate the document settings secondary title
 				const actual = await getDocumentSettingsSecondaryTitle();
 
-				expect( actual ).toEqual( 'Header' );
+				expect( actual ).toEqual( 'Editing template part: header' );
 			} );
 		} );
 	} );
@@ -86,7 +86,7 @@ describe( 'Document Settings', () => {
 			// Evaluate the document settings title
 			const actual = await getDocumentSettingsTitle();
 
-			expect( actual ).toEqual( 'header' );
+			expect( actual ).toEqual( 'Editing template part: header' );
 		} );
 	} );
 } );

package/specs/{experiments → site-editor}/multi-entity-editing.test.js

@@ -16,7 +16,7 @@ import {
 /**
  * Internal dependencies
  */
-import { navigationPanel, siteEditor } from '../../experimental-features';
+import { navigationPanel, siteEditor } from './utils';
 
 const clickTemplateItem = async ( menus, itemName ) => {
 	await navigationPanel.open();

package/specs/{experiments → site-editor}/multi-entity-saving.test.js

@@ -14,7 +14,7 @@ import {
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../../experimental-features';
+import { siteEditor } from './utils';
 
 describe( 'Multi-entity save flow', () => {
 	// Selectors - usable between Post/Site editors.

package/specs/{experiments → site-editor}/settings-sidebar.test.js

@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../../experimental-features';
+import { siteEditor } from './utils';
 
 async function toggleSidebar() {
 	await page.click(
@@ -77,12 +77,11 @@ describe( 'Settings sidebar', () => {
 
 			expect( templateCardBeforeNavigation ).toMatchObject( {
 				title: 'Index',
-				description:
-					'The default template used when no other template is available. This is a required template in WordPress.',
+				description: 'Displays posts.',
 			} );
 			expect( templateCardAfterNavigation ).toMatchObject( {
 				title: '404',
-				description: 'Template shown when no content is found.',
+				description: 'Displays when no content is found.',
 			} );
 		} );
 	} );

package/specs/{experiments → site-editor}/site-editor-export.test.js

@@ -13,7 +13,7 @@ import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../../experimental-features';
+import { siteEditor } from './utils';
 
 async function waitForFileExists( filePath, timeout = 10000 ) {
 	const start = Date.now();

package/specs/{experiments → site-editor}/site-editor-inserter.test.js

@@ -6,7 +6,7 @@ import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../../experimental-features';
+import { siteEditor } from './utils';
 
 describe( 'Site Editor Inserter', () => {
 	beforeAll( async () => {

package/specs/{experiments → site-editor}/template-part.test.js

@@ -16,7 +16,7 @@ import {
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../../experimental-features';
+import { siteEditor } from './utils';
 
 const templatePartNameInput =
 	'.edit-site-create-template-part-modal .components-text-control__input';

package/specs/{experiments → site-editor}/template-revert.test.js

@@ -14,7 +14,7 @@ import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../../experimental-features';
+import { siteEditor } from './utils';
 
 const {
 	visit: visitSiteEditor,

package/{experimental-features.js → specs/site-editor/utils.js}

@@ -4,40 +4,6 @@
 import { addQueryArgs } from '@wordpress/url';
 import { visitAdminPage } from '@wordpress/e2e-test-utils';
 
-async function setExperimentalFeaturesState( features, enable ) {
-	const query = addQueryArgs( '', {
-		page: 'gutenberg-experiments',
-	} );
-	await visitAdminPage( '/admin.php', query );
-
-	await Promise.all(
-		features.map( async ( feature ) => {
-			await page.waitForSelector( feature );
-			const checkedSelector = `${ feature }[checked=checked]`;
-			const isChecked = !! ( await page.$( checkedSelector ) );
-			if ( ( ! isChecked && enable ) || ( isChecked && ! enable ) ) {
-				await page.click( feature );
-			}
-		} )
-	);
-	await Promise.all( [
-		page.waitForNavigation( { waitUntil: 'networkidle0' } ),
-		page.click( '#submit' ),
-	] );
-}
-
-/**
- * Establishes test lifecycle to enable experimental feature for the duration of
- * the grouped test block.
- *
- * @param {Array} features Array of {string} selectors of settings to enable.
- *                         Assumes they can be enabled with one click.
- */
-export function useExperimentalFeatures( features ) {
-	beforeAll( () => setExperimentalFeaturesState( features, true ) );
-	afterAll( () => setExperimentalFeaturesState( features, false ) );
-}
-
 export const navigationPanel = {
 	async open() {
 		const isOpen = !! ( await page.$(