@wordpress/e2e-tests 4.0.3 → 4.2.0

package/config/setup-test-framework.js

@@ -13,6 +13,7 @@ import {
 	clearLocalStorage,
 	enablePageDialogAccept,
 	isOfflineMode,
+	resetPreferences,
 	setBrowserViewport,
 	trashAllPosts,
 } from '@wordpress/e2e-test-utils';
@@ -242,6 +243,7 @@ beforeAll( async () => {
 	enablePageDialogAccept();
 	observeConsoleLogging();
 	await simulateAdverseConditions();
+	await resetPreferences();
 	await activateTheme( 'twentytwentyone' );
 	await trashAllPosts();
 	await trashAllPosts( 'wp_block' );
@@ -253,6 +255,7 @@ beforeAll( async () => {
 } );
 
 afterEach( async () => {
+	await resetPreferences();
 	await setupBrowser();
 } );
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "4.0.3",
+	"version": "4.2.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.2.1",
-		"@wordpress/jest-console": "^5.0.3",
-		"@wordpress/jest-puppeteer-axe": "^4.0.3",
-		"@wordpress/scripts": "^22.4.2",
-		"@wordpress/url": "^3.7.1",
+		"@wordpress/e2e-test-utils": "^7.4.0",
+		"@wordpress/jest-console": "^5.0.2",
+		"@wordpress/jest-puppeteer-axe": "^4.0.2",
+		"@wordpress/scripts": "^23.0.0",
+		"@wordpress/url": "^3.9.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "37e930b93fbba88fa024a91eb527a90f855c97f3"
+	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
 }

package/specs/{experiments/blocks/comments-query.test.js → editor/blocks/comments.test.js}

@@ -11,7 +11,7 @@ import {
 	trashAllComments,
 } from '@wordpress/e2e-test-utils';
 
-describe( 'Comment Query Loop', () => {
+describe( 'Comments', () => {
 	let previousPageComments,
 		previousCommentsPerPage,
 		previousDefaultCommentsPage;
@@ -27,19 +27,12 @@ describe( 'Comment Query Loop', () => {
 	it( 'We show no results message if there are no comments', async () => {
 		await trashAllComments();
 		await createNewPost();
-		await insertBlock( 'Comments Query Loop' );
-		await page.waitForSelector( '[data-testid="noresults"]' );
-		expect(
-			await page.evaluate(
-				( el ) => el.innerText,
-				await page.$( '[data-testid="noresults"]' )
-			)
-		).toEqual( 'No results found.' );
+		await insertBlock( 'Comments' );
+		await page.waitForXPath( '//p[contains(text(), "No results found.")]' );
 	} );
 	it( 'Pagination links are working as expected', async () => {
 		await createNewPost();
-		await insertBlock( 'Comments Query Loop' );
-		await insertBlock( 'Post Comments Form' );
+		await insertBlock( 'Comments' );
 		await publishPost();
 		// Visit the post that was just published.
 		await page.click(
@@ -99,8 +92,7 @@ describe( 'Comment Query Loop', () => {
 	it( 'Pagination links are not appearing if break comments is not enabled', async () => {
 		await setOption( 'page_comments', '0' );
 		await createNewPost();
-		await insertBlock( 'Comments Query Loop' );
-		await insertBlock( 'Post Comments Form' );
+		await insertBlock( 'Comments' );
 		await publishPost();
 		// Visit the post that was just published.
 		await page.click(

package/specs/editor/plugins/nonce.test.js

@@ -9,19 +9,18 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Nonce', () => {
-	beforeAll( async () => {
+	// While using beforeEach/afterEach is suboptimal for multiple tests, they
+	// are used here to ensure that the nonce plugin doesn't interfere with API
+	// calls made in global before/after calls, which may perform API requests.
+	beforeEach( async () => {
 		await activatePlugin( 'gutenberg-test-plugin-nonce' );
 	} );
-
-	afterAll( async () => {
+	afterEach( async () => {
 		await deactivatePlugin( 'gutenberg-test-plugin-nonce' );
 	} );
 
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
 	it( 'should refresh when expired', async () => {
+		await createNewPost();
 		await page.keyboard.press( 'Enter' );
 		// eslint-disable-next-line no-restricted-syntax
 		await page.waitForTimeout( 5000 );

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

@@ -10,7 +10,6 @@ import {
 	pressKeyTimes,
 	searchForBlock,
 	setBrowserViewport,
-	showBlockToolbar,
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
@@ -170,68 +169,6 @@ describe( 'Inserting blocks', () => {
 		).not.toBeNull();
 	} );
 
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/9583
-	it( 'should not allow transfer of focus outside of the block-insertion menu once open', async () => {
-		// Enter the default block and click the inserter toggle button to the left of it.
-		await page.keyboard.press( 'Enter' );
-		await showBlockToolbar();
-		await page.click(
-			'.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle'
-		);
-
-		// Expect the inserter search input to be the active element.
-		let activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'components-search-control__input'
-		);
-
-		// Try using the up arrow key (vertical navigation triggers the issue described in #9583).
-		await page.keyboard.press( 'ArrowUp' );
-
-		// Expect the inserter search input to still be the active element.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'components-search-control__input'
-		);
-
-		// Tab to the block list.
-		await page.keyboard.press( 'Tab' );
-
-		// Expect the block list to be the active element.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-block-types-list__item'
-		);
-
-		// Try using the up arrow key.
-		await page.keyboard.press( 'ArrowUp' );
-
-		// Expect the block list to still be the active element.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-block-types-list__item'
-		);
-
-		// Press escape to close the block inserter.
-		await page.keyboard.press( 'Escape' );
-
-		// Expect focus to have transferred back to the inserter toggle button.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-inserter__toggle'
-		);
-	} );
-
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/23263
 	it( 'inserts blocks at root level when using the root appender while selection is in an inner block', async () => {
 		await insertBlock( 'Buttons' );
@@ -310,12 +247,11 @@ describe( 'Inserting blocks', () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'First paragraph' );
 		await insertBlock( 'Image' );
-		await showBlockToolbar();
 		const paragraphBlock = await page.$(
 			'p[aria-label="Paragraph block"]'
 		);
 		paragraphBlock.click();
-		await showBlockToolbar();
+		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
 
 		// Open the global inserter and search for the Heading block.
 		await searchForBlock( 'Heading' );
@@ -323,7 +259,6 @@ describe( 'Inserting blocks', () => {
 		const headingButton = (
 			await page.$x( `//button//span[contains(text(), 'Heading')]` )
 		 )[ 0 ];
-
 		// Hover over the block should show the blue line indicator.
 		await headingButton.hover();
 

package/specs/editor/various/multi-block-selection.test.js

@@ -10,6 +10,7 @@ import {
 	clickBlockToolbarButton,
 	clickButton,
 	clickMenuItem,
+	insertBlock,
 	openListView,
 	saveDraft,
 	transformBlockTo,
@@ -975,4 +976,51 @@ describe( 'Multi-block selection', () => {
 		// Expect two blocks with "&" in between.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+	describe( 'shift+click multi-selection', () => {
+		it( 'should multi-select block with text selection and a block without text selection', async () => {
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'hi' );
+			await page.keyboard.press( 'Enter' );
+			await insertBlock( 'Spacer' );
+			await page.keyboard.press( 'ArrowUp' );
+
+			const spacerBlock = await page.waitForSelector(
+				'.wp-block.wp-block-spacer'
+			);
+			const boundingBox = await spacerBlock.boundingBox();
+			const mousePosition = {
+				x: boundingBox.x + boundingBox.width / 2,
+				y: boundingBox.y + boundingBox.height / 2,
+			};
+			await page.keyboard.down( 'Shift' );
+			await page.mouse.click( mousePosition.x, mousePosition.y );
+			await page.keyboard.up( 'Shift' );
+
+			const selectedBlocks = await page.$$(
+				'.wp-block.is-multi-selected'
+			);
+			expect( selectedBlocks.length ).toBe( 2 );
+		} );
+		it( 'should multi-select blocks without text selection', async () => {
+			await insertBlock( 'Spacer' );
+			// Get the first spacer block element.
+			const spacerBlock = await page.waitForSelector(
+				'.wp-block.wp-block-spacer'
+			);
+			const boundingBox = await spacerBlock.boundingBox();
+			await page.keyboard.press( 'Enter' );
+			await insertBlock( 'Spacer' );
+			const mousePosition = {
+				x: boundingBox.x + boundingBox.width / 2,
+				y: boundingBox.y + boundingBox.height / 2,
+			};
+			await page.keyboard.down( 'Shift' );
+			await page.mouse.click( mousePosition.x, mousePosition.y );
+			await page.keyboard.up( 'Shift' );
+			const selectedBlocks = await page.$$(
+				'.wp-block.is-multi-selected'
+			);
+			expect( selectedBlocks.length ).toBe( 2 );
+		} );
+	} );
 } );

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

@@ -116,6 +116,24 @@ describe( 'New User Experience (NUX)', () => {
 		expect( welcomeGuide ).toBeNull();
 	} );
 
+	it( 'should focus post title field after welcome guide is dismissed and post is empty', async () => {
+		// Create a new post as a first-time user.
+		await createNewPost( { showWelcomeGuide: true } );
+
+		// Guide should be open.
+		const welcomeGuide = await page.$( '.edit-post-welcome-guide' );
+		expect( welcomeGuide ).not.toBeNull();
+
+		// Close the guide.
+		await page.click( 'button[aria-label="Close dialog"]' );
+
+		// Focus should be in post title field.
+		const postTitle = await page.waitForSelector(
+			'h1[aria-label="Add title"'
+		);
+		await expect( postTitle ).toHaveFocus();
+	} );
+
 	it( 'should show the welcome guide if it is manually opened', async () => {
 		let welcomeGuide;
 

package/specs/editor/various/rich-text.test.js

@@ -485,28 +485,6 @@ describe( 'RichText', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'should show/hide toolbar when entering/exiting format', async () => {
-		const blockToolbarSelector = '.block-editor-block-toolbar';
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		expect( await page.$( blockToolbarSelector ) ).toBe( null );
-		await pressKeyWithModifier( 'primary', 'b' );
-		expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
-		await page.keyboard.type( '2' );
-		expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
-		await pressKeyWithModifier( 'primary', 'b' );
-		expect( await page.$( blockToolbarSelector ) ).toBe( null );
-		await page.keyboard.type( '3' );
-		await page.keyboard.press( 'ArrowLeft' );
-		expect( await page.$( blockToolbarSelector ) ).toBe( null );
-		await page.keyboard.press( 'ArrowLeft' );
-		expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
-		await page.keyboard.press( 'ArrowLeft' );
-		expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
-		await page.keyboard.press( 'ArrowLeft' );
-		expect( await page.$( blockToolbarSelector ) ).toBe( null );
-	} );
-
 	it( 'should run input rules after composition end', async () => {
 		await clickBlockAppender();
 		// Puppeteer doesn't support composition, so emulate it by inserting

package/specs/editor/various/toolbar-roving-tabindex.test.js

@@ -4,7 +4,6 @@
 import {
 	createNewPost,
 	pressKeyWithModifier,
-	clickBlockToolbarButton,
 	insertBlock,
 } from '@wordpress/e2e-test-utils';
 
@@ -42,9 +41,7 @@ async function testBlockToolbarKeyboardNavigation(
 
 async function wrapCurrentBlockWithGroup( currentBlockTitle ) {
 	await page.click( `[aria-label="${ currentBlockTitle }"]` );
-	await page.evaluate( () => {
-		document.querySelector( '.editor-block-list-item-group' ).click();
-	} );
+	await page.click( '.editor-block-list-item-group' );
 }
 
 async function testGroupKeyboardNavigation(
@@ -128,10 +125,11 @@ describe( 'Toolbar roving tabindex', () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Paragraph' );
 		await focusBlockToolbar();
-		await clickBlockToolbarButton( 'Bold' );
-		await page.keyboard.type( 'a' );
+		await page.keyboard.press( 'ArrowRight' );
+		await expectLabelToHaveFocus( 'Move up' );
+		await page.keyboard.press( 'Tab' );
 		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expectLabelToHaveFocus( 'Bold' );
+		await expectLabelToHaveFocus( 'Move up' );
 	} );
 
 	it( 'can reach toolbar items with arrow keys after pressing alt+F10', async () => {

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

@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, insertBlock } from '@wordpress/e2e-test-utils';
-
-describe( 'Paragraph', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should output unwrapped editable paragraph', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( '1' );
-
-		const firstBlockTagName = await page.evaluate( () => {
-			return document.querySelector(
-				'.block-editor-block-list__layout .wp-block'
-			).tagName;
-		} );
-
-		// The outer element should be a paragraph. Blocks should never have any
-		// additional div wrappers so the markup remains simple and easy to
-		// style.
-		expect( firstBlockTagName ).toBe( 'P' );
-	} );
-} );

package/specs/editor/plugins/block-api.test.js

@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Using Block API', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-api' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-block-api' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	test( 'Inserts the filtered hello world block even when filter added after block registration', async () => {
-		await insertBlock( 'Filtered Hello World' );
-
-		const blockContent = await page.$eval(
-			'div[data-type="e2e-tests/hello-world"]',
-			( element ) => element.textContent
-		);
-		expect( blockContent ).toEqual( 'Hello Editor!' );
-	} );
-} );

package/specs/editor/plugins/image-size.test.js

@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import path from 'path';
-import fs from 'fs';
-import os from 'os';
-import { v4 as uuid } from 'uuid';
-
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'changing image size', () => {
-	beforeEach( async () => {
-		await activatePlugin( 'gutenberg-test-image-size' );
-		await createNewPost();
-	} );
-
-	afterEach( async () => {
-		await deactivatePlugin( 'gutenberg-test-image-size' );
-	} );
-
-	it( 'should insert and change my image size', async () => {
-		await insertBlock( 'Image' );
-		const inputElement = await page.waitForSelector(
-			'figure[aria-label="Block: Image"] input[type=file]'
-		);
-		const testImagePath = path.join(
-			__dirname,
-			'..',
-			'..',
-			'..',
-			'assets',
-			'1024x768_e2e_test_image_size.jpg'
-		);
-		const filename = uuid();
-		const tmpFileName = path.join( os.tmpdir(), filename + '.jpg' );
-		fs.copyFileSync( testImagePath, tmpFileName );
-		await inputElement.uploadFile( tmpFileName );
-
-		// Wait for upload to finish.
-		await page.waitForXPath( `//img[contains(@src, "${ filename }")]` );
-
-		// Select the new size updated with the plugin.
-		await openDocumentSettingsSidebar();
-		const imageSizeLabel = await page.waitForXPath(
-			'//label[text()="Image size"]'
-		);
-		await imageSizeLabel.click();
-		const imageSizeSelect = await page.evaluateHandle(
-			() => document.activeElement
-		);
-		await imageSizeSelect.select( 'custom-size-one' );
-
-		// Verify that the custom size was applied to the image.
-		await page.waitForSelector( '.wp-block-image.size-custom-size-one' );
-		await page.waitForFunction(
-			() =>
-				document.querySelector(
-					'.block-editor-image-size-control__width input'
-				).value === '499'
-		);
-	} );
-} );

package/specs/editor/various/style-variation.test.js

@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickBlockToolbarButton,
-	insertBlock,
-	getEditedPostContent,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'adding blocks', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should switch to the plain style of the quote block', async () => {
-		// Inserting a quote block.
-		await insertBlock( 'Quote' );
-		await page.keyboard.type( 'Quote content' );
-
-		await clickBlockToolbarButton( 'Quote' );
-
-		const plainStyleButton = await page.waitForXPath(
-			'//*[@role="menuitem"][contains(., "Plain")]'
-		);
-		await plainStyleButton.click();
-
-		// Check the content.
-		const content = await getEditedPostContent();
-		expect( content ).toMatchInlineSnapshot( `
-		"<!-- wp:quote {\\"className\\":\\"is-style-plain\\"} -->
-		<blockquote class=\\"wp-block-quote is-style-plain\\"><p>Quote content</p></blockquote>
-		<!-- /wp:quote -->"
-	` );
-	} );
-} );