@wordpress/e2e-tests 7.10.0 → 7.11.1

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.11.0 (2023-08-16)
+
 ## 7.10.0 (2023-08-10)
 
 ## 7.9.0 (2023-07-20)

package/jest.config.js

@@ -14,10 +14,7 @@ module.exports = {
 		'expect-puppeteer',
 		'puppeteer-testing-library/extend-expect',
 	],
-	testPathIgnorePatterns: [
-		'/node_modules/',
-		'e2e-tests/specs/performance/',
-	],
+	testPathIgnorePatterns: [ '/node_modules/' ],
 	snapshotFormat: {
 		escapeString: false,
 		printBasicPrototype: false,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.10.0",
+	"version": "7.11.1",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,16 +23,16 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.10.0",
-		"@wordpress/jest-console": "^7.10.0",
-		"@wordpress/jest-puppeteer-axe": "^6.10.0",
-		"@wordpress/scripts": "^26.10.0",
-		"@wordpress/url": "^3.40.0",
+		"@wordpress/e2e-test-utils": "^10.11.1",
+		"@wordpress/jest-console": "^7.11.1",
+		"@wordpress/jest-puppeteer-axe": "^6.11.1",
+		"@wordpress/scripts": "^26.11.1",
+		"@wordpress/url": "^3.41.1",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
-		"jest-message-util": "^29.5.0",
-		"jest-snapshot": "^29.5.0",
+		"jest-message-util": "^29.6.2",
+		"jest-snapshot": "^29.6.2",
 		"puppeteer-testing-library": "^0.5.0",
 		"uuid": "^8.3.0"
 	},
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
+	"gitHead": "bb1fbf87bb0f451744530fc6a85de2dff1263bed"
 }

package/plugins/interactive-blocks/directive-body/block.json

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-body",
+	"title": "E2E Interactivity tests - directive body",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-body-view",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/directive-body/render.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-body`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div
+	data-wp-interactive
+	data-wp-context='{"text":"text-1"}'
+>
+	<div data-testid="container">
+		<aside data-wp-body data-testid="element with data-wp-body">
+			<p data-wp-text="context.text" data-testid="text">initial</p>
+		</aside>
+	</div>
+	<button
+		data-wp-on--click="actions.toggleText"
+		data-testid="toggle text"
+	>toggle text</button>
+</div>

package/plugins/interactive-blocks/directive-body/view.js

@@ -0,0 +1,11 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		actions: {
+			toggleText: ( { context } ) => {
+				context.text = context.text === 'text-1' ? 'text-2' : 'text-1';
+			},
+		},
+	} );
+} )( window );

package/plugins/interactive-blocks/directive-class/render.php

@@ -72,4 +72,15 @@
 			Toggle context falseValue
 		</button>
 	</div>
+
+	<div
+		data-wp-class--block__element--modifier="state.trueValue"
+		data-testid="can use BEM notation classes"
+	></div>
+
+	<div
+		data-wp-class--main-bg----color="state.trueValue"
+		data-testid="can use classes with several dashes"
+	></div>
+
 </div>

package/plugins/interactive-blocks/directive-effect/render.php

@@ -21,7 +21,19 @@
 
 	<div data-wp-effect="effects.changeFocus"></div>
 
+	<div
+		data-testid="short-circuit infinite loops"
+		data-wp-effect="effects.infiniteLoop"
+		data-wp-text="state.counter"
+	>
+		0
+	</div>
+
 	<button data-testid="toggle" data-wp-on--click="actions.toggle">
 		Update
 	</button>
+
+	<button data-testid="increment" data-wp-on--click="actions.increment">
+		Increment
+	</button>
 </div>

package/plugins/interactive-blocks/directive-effect/view.js

@@ -21,6 +21,7 @@
 		state: {
 			isOpen: true,
 			isElementInTheDOM: false,
+			counter: 0,
 		},
 		selectors: {
 			elementInTheDOM: ( { state } ) =>
@@ -32,6 +33,9 @@
 			toggle( { state } ) {
 				state.isOpen = ! state.isOpen;
 			},
+			increment( { state } ) {
+				state.counter = state.counter + 1;
+			},
 		},
 		effects: {
 			elementAddedToTheDOM: ( { state } ) => {
@@ -46,6 +50,9 @@
 					document.querySelector( "[data-testid='input']" ).focus();
 				}
 			},
+			infiniteLoop: ({ state }) => {
+				state.counter = state.counter + 1;
+			}
 		},
 	} );
 

package/plugins/interactive-blocks/directive-init/block.json

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-init",
+	"title": "E2E Interactivity tests - directive init",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-init-view",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/directive-init/render.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-init`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<div
+		data-testid="single init"
+		data-wp-context='{"isReady":[false],"calls":[0]}'
+		data-wp-init="actions.initOne"
+	>
+		<p data-wp-text="selector.isReady" data-testid="isReady">false</p>
+		<p data-wp-text="selector.calls" data-testid="calls">0</p>
+		<button data-wp-on--click="actions.reset">reset</button>
+	</div>
+	<div
+		data-testid="multiple inits"
+		data-wp-context='{"isReady":[false,false],"calls":[0,0]}'
+		data-wp-init--one="actions.initOne"
+		data-wp-init--two="actions.initTwo"
+	>
+		<p data-wp-text="selector.isReady" data-testid="isReady">false,false</p>
+		<p data-wp-text="selector.calls" data-testid="calls">0,0</p>
+	</div>
+	<div
+		data-testid="init show"
+		data-wp-context='{"isVisible":true,"isMounted":false}'
+	>
+		<div data-wp-show-mock="context.isVisible" data-testid="show">
+			<span data-wp-init="actions.initMount">Initially visible</span>
+		</div>
+		<button data-wp-on--click="actions.toggle" data-testid="toggle">
+			toggle
+		</button>
+		<p data-wp-text="selector.isMounted" data-testid="isMounted">
+			true
+		</p>
+	</div>
+</div>

package/plugins/interactive-blocks/directive-init/view.js

@@ -0,0 +1,64 @@
+( ( { wp } ) => {
+	const { store, directive, useContext } = wp.interactivity;
+
+	// Mock `data-wp-show` directive to test when things are removed from the
+	// DOM.  Replace with `data-wp-show` when it's ready.
+	directive(
+		'show-mock',
+		( {
+			directives: {
+				'show-mock': { default: showMock },
+			},
+			element,
+			evaluate,
+			context,
+		} ) => {
+			const contextValue = useContext( context );
+			if ( ! evaluate( showMock, { context: contextValue } ) ) {
+				return null;
+			}
+			return element;
+		}
+	);
+
+
+	store( {
+		selector: {
+			isReady: ({ context: { isReady } }) => {
+				return isReady
+				.map(v => v ? 'true': 'false')
+				.join(',');
+			},
+			calls: ({ context: { calls } }) => {
+				return calls.join(',');
+			},
+			isMounted: ({ context }) => {
+				return context.isMounted ? 'true' : 'false';
+			},
+		},
+		actions: {
+			initOne: ( { context: { isReady, calls } } ) => {
+				isReady[0] = true;
+				// Subscribe to changes in that prop.
+				isReady[0] = isReady[0];
+				calls[0]++;
+			},
+			initTwo: ( { context: { isReady, calls } } ) => {
+				isReady[1] = true;
+				calls[1]++;
+			},
+			initMount: ( { context } ) => {
+				context.isMounted = true;
+				return () => {
+					context.isMounted = false;
+				}
+			},
+			reset: ( { context: { isReady } } ) => {
+				isReady.fill(false);
+			},
+			toggle: ( { context } ) => {
+				context.isVisible = ! context.isVisible;
+			},
+		},
+	} );
+} )( window );

package/plugins/interactive-blocks/directive-on/block.json

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-on",
+	"title": "E2E Interactivity tests - directive on",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-on-view",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/directive-on/render.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<div>
+		<p data-wp-text="state.counter" data-testid="counter">0</p>
+		<button
+			data-testid="button"
+			data-wp-on--click="actions.clickHandler"
+		>Click me!</button>
+	</div>
+	<div>
+		<p data-wp-text="state.text" data-testid="text">initial</p>
+		<input
+			type="text"
+			value="initial"
+			data-testid="input"
+			data-wp-on--input="actions.inputHandler"
+		>
+	</div>
+	<div data-wp-context='{"option":"undefined"}'>
+		<p data-wp-text="context.option" data-testid="option">0</p>
+		<select
+			name="pets"
+			value="undefined"
+			data-testid="select"
+			data-wp-on--change="actions.selectHandler"
+		>
+			<option value="undefined">Choose an option...</option>
+			<option value="dog">Dog</option>
+			<option value="cat">Cat</option>
+		</select>
+	</div>
+	<div
+		data-wp-on--customevent="actions.customEventHandler"
+		data-wp-context='{"customEvents":0}'
+	>
+		<p
+			data-wp-text="context.customEvents"
+			data-testid="custom events counter"
+		>0</p>
+		<button
+			data-testid="custom events button"
+			data-wp-on--click="actions.clickHandler"
+		>Click me!</button>
+	</div>
+</div>

package/plugins/interactive-blocks/directive-on/view.js

@@ -0,0 +1,27 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			counter: 0,
+			text: ''
+		},
+		actions: {
+			clickHandler: ( { state, event } ) => {
+				state.counter += 1;
+				event.target.dispatchEvent(
+					new CustomEvent( 'customevent', { bubbles: true } )
+				);
+			},
+			inputHandler: ( { state, event } ) => {
+				state.text = event.target.value;
+			},
+			selectHandler: ( { context, event } ) => {
+				context.option = event.target.value;
+			},
+			customEventHandler: ({ context }) => {
+				context.customEvents += 1;
+			},
+		},
+	} );
+} )( window );

package/plugins/interactive-blocks/store-afterload/block.json

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/store-afterload",
+	"title": "E2E Interactivity tests - store afterload",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "store-afterload-view",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/store-afterload/render.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * HTML for testing `afterLoad` callbacks added to the store.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<h3>Store statuses</h3>
+	<p data-store-status data-wp-text="state.status1">waiting</p>
+	<p data-store-status data-wp-text="state.status2">waiting</p>
+	<p data-store-status data-wp-text="state.status3">waiting</p>
+	<p data-store-status data-wp-text="state.status4">waiting</p>
+
+	<h3><code>afterLoad</code> executions</h3>
+	<p>All stores ready:&#20;
+		<span
+			data-testid="all-stores-ready"
+			data-wp-text="state.allStoresReady">
+		>waiting</span>
+	</p>
+	<p>vDOM ready:&#20;
+		<span
+			data-testid="vdom-ready"
+			data-wp-text="state.vdomReady">
+		>waiting</span>
+	</p>
+	<p><code>afterLoad</code> exec times:&#20;
+		<span
+			data-testid="after-load-exec-times"
+			data-wp-text="state.execTimes.afterLoad">
+		>0</span>
+	</p>
+	<p><code>sharedAfterLoad</code> exec times:&#20;
+		<span
+			data-testid="shared-after-load-exec-times"
+			data-wp-text="state.execTimes.sharedAfterLoad">
+		>0</span>
+	</p>
+</div>

package/plugins/interactive-blocks/store-afterload/view.js

@@ -0,0 +1,60 @@
+( ( { wp } ) => {
+	/**
+	 * WordPress dependencies
+	 */
+	const { store } = wp.interactivity;
+
+	const afterLoad = ({ state }) => {
+		// Check the state is correctly initialized.
+		const { status1, status2, status3, status4 } = state;
+		state.allStoresReady =
+			[ status1, status2, status3, status4 ]
+				.every( ( t ) => t === 'ready' )
+				.toString();
+
+		// Check the HTML has been processed as well.
+		const selector = '[data-store-status]';
+		state.vdomReady =
+			document.querySelector( selector ) &&
+				Array.from(
+					document.querySelectorAll( selector )
+				).every( ( el ) => el.textContent === 'ready' ).toString();
+
+		// Increment exec times everytime this function runs.
+		state.execTimes.afterLoad += 1;
+	}
+
+	const sharedAfterLoad = ({ state }) => {
+		// Increment exec times everytime this function runs.
+		state.execTimes.sharedAfterLoad += 1;
+	}
+
+	// Case 1: without afterload callback
+	store( {
+		state: { status1: 'ready' },
+	} );
+
+	// Case 2: non-shared afterload callback
+	store( {
+		state: {
+			status2: 'ready',
+			allStoresReady: false,
+			vdomReady: false,
+			execTimes: { afterLoad: 0 },
+		},
+	}, { afterLoad } );
+
+	// Case 3: shared afterload callback
+	store( {
+		state: {
+			status3: 'ready',
+			execTimes: { sharedAfterLoad: 0 },
+		},
+	}, { afterLoad: sharedAfterLoad }  );
+	store( {
+		state: {
+			status4: 'ready',
+			execTimes: { sharedAfterLoad: 0 },
+		},
+	}, { afterLoad: sharedAfterLoad }  );
+} )( window );

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

@@ -88,8 +88,8 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:cover {"isDark":false,"layout":{"type":"constrained"}} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
+<!-- wp:cover {"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
 <!-- /wp:cover -->
 
 <!-- wp:heading -->

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

@@ -24,6 +24,16 @@ exports[`RichText should apply multiple formats when selection is collapsed 1`]
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should copy/paste heading 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">Heading</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Heading</h2>
+<!-- /wp:heading -->"
+`;
+
 exports[`RichText should handle Home and End keys 1`] = `
 "<!-- wp:paragraph -->
 <p>-<strong>12</strong>+</p>
@@ -129,7 +139,11 @@ exports[`RichText should paste paragraph contents into list 1`] = `
 
 <!-- wp:list -->
 <ul><!-- wp:list-item -->
-<li>1<br>2</li>
+<li>1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>2</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
 `;

package/specs/editor/various/block-editor-keyboard-shortcuts.test.js

@@ -90,9 +90,9 @@ describe( 'block editor keyboard shortcuts', () => {
 		} );
 		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Create pattern/reusable block' );
+			await clickMenuItem( 'Create pattern' );
 			const reusableBlockNameInputSelector =
-				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+				'.patterns-menu-items__convert-modal .components-text-control__input';
 			const nameInput = await page.waitForSelector(
 				reusableBlockNameInputSelector
 			);
@@ -102,7 +102,7 @@ describe( 'block editor keyboard shortcuts', () => {
 			await page.keyboard.press( 'ArrowLeft' );
 			await page.keyboard.press( 'Delete' );
 			await clickOnCloseModalButton(
-				'.reusable-blocks-menu-items__convert-modal'
+				'.patterns-menu-items__convert-modal'
 			);
 			expect( await getEditedPostContent() ).toMatchSnapshot();
 		} );

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

@@ -20,11 +20,11 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
-	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+	'.patterns-menu-items__convert-modal .components-text-control__input';
 const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
 const syncToggleSelectorChecked =
-	'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
+	'.patterns-menu-items__convert-modal .components-form-toggle.is-checked';
 
 const saveAll = async () => {
 	const publishButtonSelector =
@@ -196,7 +196,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert block to a reusable block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern/reusable block' );
+		await clickMenuItem( 'Create pattern' );
 
 		// Set title.
 		const nameInput = await page.waitForSelector(
@@ -382,7 +382,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert to reusable.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern/reusable block' );
+		await clickMenuItem( 'Create pattern' );
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);

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

@@ -556,4 +556,15 @@ describe( 'RichText', () => {
 		// Expect: <strong>1</strong>-<em>2</em>
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	test( 'should copy/paste heading', async () => {
+		await insertBlock( 'Heading' );
+		await page.keyboard.type( 'Heading' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await pressKeyWithModifier( 'primary', 'c' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Enter' );
+		await pressKeyWithModifier( 'primary', 'v' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

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

@@ -11,7 +11,7 @@ import {
 	canvas,
 } from '@wordpress/e2e-test-utils';
 
-describe( 'Post Comments Form', () => {
+describe( 'Comments Form', () => {
 	let previousCommentStatus;
 
 	beforeAll( async () => {
@@ -42,7 +42,7 @@ describe( 'Post Comments Form', () => {
 			await enterEditMode();
 
 			// Insert post comments form
-			await insertBlock( 'Post Comments Form' );
+			await insertBlock( 'Comments Form' );
 
 			// Ensure the placeholder is there
 			await expect( canvas() ).toMatchElement(