@wordpress/e2e-tests 3.1.1 → 4.0.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 4.0.0 (2022-04-08)
+
+### Breaking Changes
+
+-  There's currently an ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate E2E tests to Playwright instead. This package is deprecated and will only accept bug fixes until fully migrated.
+
 ## 3.0.0 (2022-01-27)
 
 ### Breaking Changes

package/README.md

@@ -2,6 +2,8 @@
 
 End-To-End (E2E) tests for WordPress.
 
+**Note that there's currently an ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate E2E tests to Playwright instead. This package is deprecated and will only accept bug fixes until fully migrated.**
+
 ## Installation
 
 Install the module

package/config/flaky-tests-reporter.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "3.1.1",
+	"version": "4.0.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.0.1",
+		"@wordpress/e2e-test-utils": "^7.2.0",
 		"@wordpress/jest-console": "^5.0.2",
 		"@wordpress/jest-puppeteer-axe": "^4.0.2",
-		"@wordpress/scripts": "^22.2.1",
-		"@wordpress/url": "^3.5.1",
+		"@wordpress/scripts": "^22.4.0",
+		"@wordpress/url": "^3.7.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -39,10 +39,12 @@
 	},
 	"peerDependencies": {
 		"jest": ">=27",
-		"puppeteer-core": ">=11"
+		"puppeteer-core": ">=11",
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3494eafea7cb345728166c902b3d1223c4a8db6f"
+	"gitHead": "11eb1241e63c9240018323551c6753f8a5fa96f9"
 }

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

@@ -16,6 +16,14 @@ exports[`Buttons dismisses link editor when escape is pressed 1`] = `
 <!-- /wp:buttons -->"
 `;
 
+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>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons has focus on button content 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->

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

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Navigation Creating and restarting converts uncontrolled inner blocks to an entity when modifications are made to the blocks 1`] = `"<!-- wp:navigation-link {\\"label\\":\\"A Test Page\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->"`;
+
 exports[`Navigation Placeholder placeholder actions allows a navigation block to be created from existing menus 1`] = `
 "<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"http://localhost:8889/\\",\\"kind\\":\\"custom\\"} /-->
 
@@ -43,5 +45,3 @@ exports[`Navigation encodes URL when create block if needed 1`] = `
 
 <!-- wp:navigation-link {\\"label\\":\\"お問い合わせ\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"https://this/is/a/test/search/%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"
 `;
-
-exports[`Navigation supports navigation blocks that have inner blocks within their markup and converts them to wp_navigation posts 1`] = `"<!-- wp:page-list /-->"`;

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

@@ -2,6 +2,6 @@
 
 exports[`Separator can be created by three dashes and enter 1`] = `
 "<!-- wp:separator -->
-<hr class=\\"wp-block-separator\\"/>
+<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
 <!-- /wp:separator -->"
 `;

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

@@ -6,6 +6,7 @@ import {
 	getEditedPostContent,
 	createNewPost,
 	pressKeyWithModifier,
+	clickBlockAppender,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Buttons', () => {
@@ -20,6 +21,15 @@ describe( 'Buttons', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'has focus on button content (slash inserter)', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '/buttons' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Content' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'dismisses link editor when escape is pressed', async () => {
 		// Regression: https://github.com/WordPress/gutenberg/pull/19885
 		await insertBlock( 'Buttons' );

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

@@ -7,6 +7,7 @@ import {
 	insertBlock,
 	openGlobalBlockInserter,
 	closeGlobalBlockInserter,
+	getListViewBlocks,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Columns', () => {
@@ -19,10 +20,9 @@ describe( 'Columns', () => {
 		await closeGlobalBlockInserter();
 		await page.click( '[aria-label="Two columns; equal split"]' );
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
+
 		const columnBlockMenuItem = (
-			await page.$x(
-				'//a[contains(concat(" ", @class, " "), " block-editor-list-view-block-select-button ")][text()="Column"]'
-			)
+			await getListViewBlocks( 'Column' )
 		 )[ 0 ];
 		await columnBlockMenuItem.click();
 		await openGlobalBlockInserter();

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

@@ -14,6 +14,8 @@ import {
 	getEditedPostContent,
 	createNewPost,
 	clickButton,
+	openListView,
+	getListViewBlocks,
 } from '@wordpress/e2e-test-utils';
 
 async function upload( selector ) {
@@ -47,7 +49,7 @@ describe( 'Gallery', () => {
 		const filename = await upload( '.wp-block-gallery input[type="file"]' );
 
 		const regex = new RegExp(
-			`<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":\\d+,\\"sizeSlug\\":\\"full\\",\\"linkDestination\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-image size-full\\"><img src=\\"[^"]+\/${ filename }\.png\\" alt=\\"\\" class=\\"wp-image-\\d+\\"\/><\/figure>\\s*<!-- \/wp:image --><\/figure>\\s*<!-- \/wp:gallery -->`
+			`<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":\\d+,\\"sizeSlug\\":\\"(?:full|large)\\",\\"linkDestination\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-image (?:size-full|size-large)\\"><img src=\\"[^"]+\/${ filename }\.png\\" alt=\\"\\" class=\\"wp-image-\\d+\\"\/><\/figure>\\s*<!-- \/wp:image --><\/figure>\\s*<!-- \/wp:gallery -->`
 		);
 		expect( await getEditedPostContent() ).toMatch( regex );
 	} );
@@ -59,11 +61,15 @@ describe( 'Gallery', () => {
 		await upload( '.wp-block-gallery input[type="file"]' );
 		await page.waitForSelector( '.wp-block-gallery .wp-block-image' );
 
-		// The newly added image gets the focus, so refocus parent Gallery
-		// block before trying to edit caption.
-		await clickButton( 'Gallery' );
+		// The Gallery needs to be selected from the List view panel due to the
+		// way that Image uploads take and lose focus.
+		await openListView();
+
+		const galleryListLink = ( await getListViewBlocks( 'Gallery' ) )[ 0 ];
+		await galleryListLink.click();
 
 		await page.click( '.wp-block-gallery .blocks-gallery-caption' );
+
 		await page.keyboard.type( galleryCaption );
 
 		expect( await getEditedPostContent() ).toMatch(
@@ -79,15 +85,39 @@ describe( 'Gallery', () => {
 			'.wp-block-gallery .wp-block-image'
 		);
 
-		await figureElement.click();
+		// Check that the Image is unselected, in which case the figcaption won't be
+		// in the DOM - due the way that the Gallery block handles the upload the latest
+		// image gets selected in order to scroll to the position of it, as in large
+		// galleries the new upload may be off-canvas. After upload the image is unselected
+		// so if we don't check for that it may get unselected again by this flow after we
+		// have re-selected it to edit it.
+		await page.waitForFunction(
+			() => ! document.querySelector( '.wp-block-image figcaption' )
+		);
+
+		// The Image needs to be selected from the List view panel due to the
+		// way that Image uploads take and lose focus.
+		await openListView();
+
+		// Due to collapsed state of ListView nodes Gallery must be expanded to reveal the child blocks.
+		// This xpath selects the anchor node for the block which has a child span which contains the text
+		// label of the block and then selects the expander span for that node.
+		const galleryExpander = await page.waitForXPath(
+			`//a[span[text()='Gallery']]/span[contains(@class, 'block-editor-list-view__expander')]`
+		);
+
+		await galleryExpander.click();
+
+		const imageListLink = ( await getListViewBlocks( 'Image' ) )[ 0 ];
+		await imageListLink.click();
 
 		const captionElement = await figureElement.$(
 			'.block-editor-rich-text__editable'
 		);
 
+		await captionElement.click();
 		const caption = 'Tested caption';
 
-		await captionElement.click();
 		await page.keyboard.type( caption );
 
 		expect( await getEditedPostContent() ).toMatch(

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

@@ -88,7 +88,7 @@ describe( 'Heading', () => {
 		await pressKeyWithModifier( 'primary', 'A' );
 		await page.keyboard.type( '0782f6' );
 		await page.click( 'h3[data-type="core/heading"]' );
-		await page.waitForXPath( '//button[text()="#0782f6"]' );
+		await page.waitForXPath( '//button//span[contains(text(), "0782f6")]' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );