@wordpress/e2e-tests 3.0.7 → 3.0.10-next.a55ed9455a.0

package/config/setup-performance-test.js

@@ -16,7 +16,7 @@ import {
  */
 const PUPPETEER_TIMEOUT = process.env.PUPPETEER_TIMEOUT;
 
-// The Jest timeout is increased because these tests are a bit slow
+// The Jest timeout is increased because these tests are a bit slow.
 jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
 
 async function setupBrowser() {

package/config/setup-test-framework.js

@@ -65,7 +65,7 @@ const OBSERVED_CONSOLE_MESSAGE_TYPES = {
  */
 const pageEvents = [];
 
-// The Jest timeout is increased because these tests are a bit slow
+// The Jest timeout is increased because these tests are a bit slow.
 jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
 
 // Retry failed tests at most 2 times in CI.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "3.0.7",
+	"version": "3.0.10-next.a55ed9455a.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": "^6.0.1",
-		"@wordpress/jest-console": "^5.0.1",
-		"@wordpress/jest-puppeteer-axe": "^4.0.1",
-		"@wordpress/scripts": "^22.0.0",
-		"@wordpress/url": "^3.4.1",
+		"@wordpress/e2e-test-utils": "^7.0.1-next.a55ed9455a.0",
+		"@wordpress/jest-console": "^5.0.2-next.a55ed9455a.0",
+		"@wordpress/jest-puppeteer-axe": "^4.0.2-next.a55ed9455a.0",
+		"@wordpress/scripts": "^22.1.1-next.a55ed9455a.0",
+		"@wordpress/url": "^3.4.2-next.a55ed9455a.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -44,5 +44,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f73c50580cc209814ec1a2ab8c85b69bd4220d3f"
+	"gitHead": "c5108185851b824d531bce55991a3589947e8551"
 }

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\\":\\"#0782f6\\"}}} -->
-<h3 class=\\"has-text-color\\" id=\\"heading\\" style=\\"color:#0782f6\\">Heading</h3>
+<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__/navigation.test.js.snap

@@ -1,20 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation allows an empty navigation block to be created and manually populated using a mixture of internal and external links 1`] = `
-"<!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Contact\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"https://this/is/a/test/search/get-in-touch\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"
-`;
-
-exports[`Navigation allows pages to be created from the navigation block and their links added to menu 1`] = `"<!-- wp:navigation-link {\\"label\\":\\"A really long page name that will not exist\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"`;
-
-exports[`Navigation encodes URL when create block if needed 1`] = `
-"<!-- wp:navigation-link {\\"label\\":\\"wordpress.org/шеллы\\",\\"url\\":\\"https://wordpress.org/%D1%88%D0%B5%D0%BB%D0%BB%D1%8B\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- 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 placeholder allows a navigation block to be created from existing menus 1`] = `
+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\\"} /-->
 
 <!-- wp:navigation-submenu {\\"label\\":\\"About\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} -->
@@ -42,6 +28,20 @@ exports[`Navigation placeholder allows a navigation block to be created from exi
 <!-- /wp:navigation-submenu -->"
 `;
 
-exports[`Navigation placeholder creates an empty navigation block when the selected existing menu is also empty 1`] = `""`;
+exports[`Navigation Placeholder placeholder actions creates an empty navigation block when the selected existing menu is also empty 1`] = `""`;
+
+exports[`Navigation allows an empty navigation block to be created and manually populated using a mixture of internal and external links 1`] = `
+"<!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
+
+<!-- wp:navigation-link {\\"label\\":\\"Contact\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"https://this/is/a/test/search/get-in-touch\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"
+`;
+
+exports[`Navigation allows pages to be created from the navigation block and their links added to menu 1`] = `"<!-- wp:navigation-link {\\"label\\":\\"A really long page name that will not exist\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"`;
+
+exports[`Navigation encodes URL when create block if needed 1`] = `
+"<!-- wp:navigation-link {\\"label\\":\\"wordpress.org/шеллы\\",\\"url\\":\\"https://wordpress.org/%D1%88%D0%B5%D0%BB%D0%BB%D1%8B\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
+
+<!-- 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__/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/classic.test.js

@@ -106,7 +106,7 @@ describe( 'Classic', () => {
 	} );
 
 	it( 'Should not fail after save/reload', async () => {
-		// Might move to utils if this becomes useful enough for other tests
+		// Might move to utils if this becomes useful enough for other tests.
 		const runWithoutCache = async ( cb ) => {
 			try {
 				await page.setCacheEnabled( false );
@@ -128,7 +128,7 @@ describe( 'Classic', () => {
 		// Move focus away.
 		await pressKeyWithModifier( 'shift', 'Tab' );
 
-		// Save
+		// Save.
 		await saveDraft();
 
 		// Reload

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

@@ -43,21 +43,21 @@ describe( 'Cover', () => {
 
 	it( 'can set overlay color using color picker on block placeholder', async () => {
 		await insertBlock( 'Cover' );
-		// Get the first color option from the block placeholder's color picker
+		// Get the first color option from the block placeholder's color picker.
 		const colorPickerButton = await page.waitForSelector(
 			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
 		);
-		// Get the RGB value of the picked color
+		// Get the RGB value of the picked color.
 		const pickedColor = await colorPickerButton.evaluate(
 			( node ) => node.style.backgroundColor
 		);
-		// Create the block by clicking selected color button
+		// Create the block by clicking selected color button.
 		await colorPickerButton.click();
-		// Get the block's background dim element
+		// Get the block's background dim element.
 		const backgroundDim = await page.waitForSelector(
 			'.wp-block-cover .has-background-dim'
 		);
-		// Get the RGB value of the background dim
+		// Get the RGB value of the background dim.
 		const dimColor = await backgroundDim.evaluate(
 			( node ) => node.style.backgroundColor
 		);
@@ -67,9 +67,9 @@ describe( 'Cover', () => {
 
 	it( 'can set background image using image upload on block placeholder', async () => {
 		await insertBlock( 'Cover' );
-		// Create the block using uploaded image
+		// Create the block using uploaded image.
 		const sourceImageFilename = await upload( '.wp-block-cover' );
-		// Get the block's background image URL
+		// Get the block's background image URL.
 		const blockImage = await page.waitForSelector( '.wp-block-cover img' );
 		const blockImageUrl = await blockImage.evaluate( ( el ) => el.src );
 
@@ -78,9 +78,9 @@ describe( 'Cover', () => {
 
 	it( 'dims background image down by 50% by default', async () => {
 		await insertBlock( 'Cover' );
-		// Create the block using uploaded image
+		// Create the block using uploaded image.
 		await upload( '.wp-block-cover' );
-		// Get the block's background dim color and its opacity
+		// Get the block's background dim color and its opacity.
 		const backgroundDim = await page.waitForSelector(
 			'.wp-block-cover .has-background-dim'
 		);
@@ -98,17 +98,17 @@ describe( 'Cover', () => {
 
 	it( 'can have the title edited', async () => {
 		await insertBlock( 'Cover' );
-		// Click first color option from the block placeholder's color picker
+		// Click first color option from the block placeholder's color picker.
 		const colorPickerButton = await page.waitForSelector(
 			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
 		);
 		await colorPickerButton.click();
-		// Click the title placeholder to put the cursor inside
+		// Click the title placeholder to put the cursor inside.
 		const coverTitle = await page.waitForSelector(
 			'.wp-block-cover .wp-block-paragraph'
 		);
 		await coverTitle.click();
-		// Type the title
+		// Type the title.
 		await page.keyboard.type( 'foo' );
 		const coverTitleText = await coverTitle.evaluate(
 			( el ) => el.innerText
@@ -119,9 +119,9 @@ describe( 'Cover', () => {
 
 	it( 'can be resized using drag & drop', async () => {
 		await insertBlock( 'Cover' );
-		// Close the inserter
+		// Close the inserter.
 		await page.click( '.edit-post-header-toolbar__inserter-toggle' );
-		// Open the sidebar
+		// Open the sidebar.
 		await openDocumentSettingsSidebar();
 		// Choose the first solid color as the background of the cover.
 		await page.click(
@@ -140,7 +140,7 @@ describe( 'Cover', () => {
 			)
 		 )[ 0 ];
 
-		// Verify the height of the cover is not defined
+		// Verify the height of the cover is not defined.
 		expect(
 			await page.evaluate( ( { value } ) => value, heightInput )
 		).toBeFalsy();
@@ -195,7 +195,7 @@ describe( 'Cover', () => {
 
 	it( 'dims the background image down by 50% when transformed from the Image block', async () => {
 		await insertBlock( 'Image' );
-		// Upload image and transform to the Cover block
+		// Upload image and transform to the Cover block.
 		const filename = await upload( '.wp-block-image' );
 		await page.waitForSelector(
 			`.wp-block-image img[src$="${ filename }.png"]`
@@ -206,7 +206,7 @@ describe( 'Cover', () => {
 		await page.focus( '.wp-block-image' );
 		await transformBlockTo( 'Cover' );
 
-		// Get the block's background dim color and its opacity
+		// Get the block's background dim color and its opacity.
 		const backgroundDim = await page.waitForSelector(
 			'.wp-block-cover .has-background-dim'
 		);

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

@@ -103,9 +103,10 @@ 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 );
-		// 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' );
+		// Focus outside the block to avoid the image caption being selected
+		// It can happen on CI specially.
+		await page.click( '.wp-block-post-title' );
+		await page.click( '.wp-block-image img' );
 		await page.keyboard.press( 'Backspace' );
 
 		expect( await getEditedPostContent() ).toBe( '' );

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

@@ -118,7 +118,7 @@ describe( 'List', () => {
 		await page.keyboard.press( 'ArrowDown' );
 		await page.keyboard.press( 'Backspace' );
 
-		// Expect list to be deleted
+		// Expect list to be deleted.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );