@wordpress/e2e-tests 4.1.0 → 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.1.0",
+	"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.3.0",
+		"@wordpress/e2e-test-utils": "^7.4.0",
 		"@wordpress/jest-console": "^5.0.2",
 		"@wordpress/jest-puppeteer-axe": "^4.0.2",
-		"@wordpress/scripts": "^22.5.0",
-		"@wordpress/url": "^3.8.0",
+		"@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": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
+	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
 }

package/specs/editor/blocks/{comments-query.test.js → 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/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/writing-flow.test.js

@@ -9,6 +9,7 @@ import {
 	pressKeyWithModifier,
 	insertBlock,
 	clickBlockToolbarButton,
+	openDocumentSettingsSidebar,
 } from '@wordpress/e2e-test-utils';
 
 const getActiveBlockName = async () =>
@@ -701,7 +702,7 @@ describe( 'Writing Flow', () => {
 		).toBe( 'Table' );
 	} );
 
-	it( 'Should unselect all blocks when hitting double escape', async () => {
+	it( 'should unselect all blocks when hitting double escape', async () => {
 		// Add demo content.
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'Random Paragraph' );
@@ -720,4 +721,33 @@ describe( 'Writing Flow', () => {
 		activeBlockName = await getActiveBlockName();
 		expect( activeBlockName ).toBe( undefined );
 	} );
+
+	// Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091.
+	it( 'does not deselect the block when selecting text outside the editor canvas', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Random Paragraph' );
+		await openDocumentSettingsSidebar();
+		const blockDescription = await page.waitForSelector(
+			'.block-editor-block-card__description'
+		);
+		const boundingBox = await blockDescription.boundingBox();
+		const startPosition = {
+			x: boundingBox.x + 10,
+			y: boundingBox.y + 8,
+		};
+		const endPosition = {
+			x: startPosition.x + 50,
+			y: startPosition.y,
+		};
+
+		await page.mouse.move( startPosition.x, startPosition.y );
+		await page.mouse.down();
+		await page.mouse.move( endPosition.x, endPosition.y );
+		await page.mouse.up();
+
+		const selectedParagraph = await page.waitForSelector(
+			'.wp-block-paragraph.is-selected'
+		);
+		expect( selectedParagraph ).toBeDefined();
+	} );
 } );

package/specs/experiments/blocks/post-comments-form.test.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	insertBlock,
+	activateTheme,
+	setOption,
+	visitSiteEditor,
+	openSiteEditorNavigationPanel,
+	navigateSiteEditorBackToRoot,
+	deleteAllTemplates,
+	canvas,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Post Comments Form', () => {
+	beforeAll( async () => {
+		await activateTheme( 'emptytheme' );
+		await deleteAllTemplates( 'wp_template' );
+	} );
+
+	describe( 'placeholder', () => {
+		it( 'displays in site editor even when comments are closed by default', async () => {
+			await setOption( 'default_comment_status', 'closed' );
+
+			// Navigate to "Singular" post template
+			await visitSiteEditor();
+			await openSiteEditorNavigationPanel();
+			await navigateSiteEditorBackToRoot();
+			await expect( page ).toClick(
+				'.components-navigation__item-title',
+				{ text: /templates/i }
+			);
+			await expect( page ).toClick( '.components-heading > a', {
+				text: /singular/i,
+			} );
+
+			// Insert post comments form
+			await insertBlock( 'Post Comments Form' );
+
+			// Ensure the placeholder is there
+			await expect( canvas() ).toMatchElement(
+				'.wp-block-post-comments-form .comment-form'
+			);
+		} );
+	} );
+} );

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/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'
-		);
-	} );
-} );