@wordpress/e2e-tests 7.5.0 → 7.6.1

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.6.0 (2023-06-07)
+
 ## 7.5.0 (2023-05-24)
 
 ## 7.4.0 (2023-05-10)

package/config/setup-test-framework.js

@@ -158,6 +158,15 @@ function observeConsoleLogging() {
 			return;
 		}
 
+		// Ignore framer-motion warnings about reduced motion.
+		if (
+			text.includes(
+				'You have Reduced Motion enabled on your device. Animations may not appear as expected.'
+			)
+		) {
+			return;
+		}
+
 		const logFunction = OBSERVED_CONSOLE_MESSAGE_TYPES[ type ];
 
 		// As of Puppeteer 1.6.1, `message.text()` wrongly returns an object of

package/mu-plugins/nocache-headers.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, No-cache Headers
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-nocache-headers
+ */
+
+// Remove 'no-store' from the Cache-Control header set by WordPress when running
+// E2E tests. This is a workaround for an issue where E2E tests time out waiting
+// for 'networkidle'.
+add_filter(
+	'nocache_headers',
+	static function( $headers ) {
+		$cache_control_parts      = explode( ', ', $headers['Cache-Control'] );
+		$cache_control_parts      = array_diff( $cache_control_parts, array( 'no-store' ) );
+		$headers['Cache-Control'] = implode( ', ', $cache_control_parts );
+		return $headers;
+	}
+);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.5.0",
+	"version": "7.6.1",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.5.0",
-		"@wordpress/jest-console": "^7.5.0",
-		"@wordpress/jest-puppeteer-axe": "^6.5.0",
-		"@wordpress/scripts": "^26.5.0",
-		"@wordpress/url": "^3.35.0",
+		"@wordpress/e2e-test-utils": "^10.6.1",
+		"@wordpress/jest-console": "^7.6.1",
+		"@wordpress/jest-puppeteer-axe": "^6.6.1",
+		"@wordpress/scripts": "^26.6.1",
+		"@wordpress/url": "^3.36.1",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
+	"gitHead": "ce5639111c30763dbdf07f40eeb136ea6030ecf1"
 }

package/plugins/block-context.php

@@ -52,7 +52,7 @@ function gutenberg_test_register_context_blocks() {
 				'postId',
 				'postType',
 			),
-			'render_callback' => function( $attributes, $content, $block ) {
+			'render_callback' => static function( $attributes, $content, $block ) {
 				$ordered_context = array(
 					$block->context['gutenberg/recordId'],
 					$block->context['postId'],

package/plugins/iframed-block/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "test/iframed-block",
 	"title": "Iframed Block",
 	"category": "text",

package/plugins/iframed-block.php

@@ -9,14 +9,14 @@
 
 add_action(
 	'setup_theme',
-	function() {
+	static function() {
 		add_theme_support( 'block-templates' );
 	}
 );
 
 add_action(
 	'init',
-	function() {
+	static function() {
 		wp_register_script(
 			'iframed-block-jquery-test',
 			plugin_dir_url( __FILE__ ) . 'iframed-block/jquery.test.js',

package/plugins/iframed-enqueue-block-assets.php

@@ -9,7 +9,7 @@
 
 add_action(
 	'enqueue_block_assets',
-	function() {
+	static function() {
 		wp_enqueue_style(
 			'iframed-enqueue-block-assets',
 			plugin_dir_url( __FILE__ ) . 'iframed-enqueue-block-assets/style.css',

package/plugins/iframed-inline-styles/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "test/iframed-inline-styles",
 	"title": "Iframed Inline Styles",
 	"category": "text",

package/plugins/iframed-inline-styles/editor.js

@@ -4,7 +4,7 @@
 	const { useBlockProps } = blockEditor;
 
 	registerBlockType( 'test/iframed-inline-styles', {
-		apiVersion: 2,
+		apiVersion: 3,
 		edit: function Edit() {
 			return el( 'div', useBlockProps(), 'Edit' );
 		},

package/plugins/iframed-inline-styles.php

@@ -9,14 +9,14 @@
 
 add_action(
 	'setup_theme',
-	function() {
+	static function() {
 		add_theme_support( 'block-templates' );
 	}
 );
 
 add_action(
 	'init',
-	function() {
+	static function() {
 		wp_register_script(
 			'iframed-inline-styles-editor-script',
 			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/editor.js',
@@ -40,7 +40,7 @@ add_action(
 
 add_action(
 	'enqueue_block_editor_assets',
-	function() {
+	static function() {
 		wp_enqueue_style(
 			'iframed-inline-styles-compat-style',
 			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/compat-style.css',

package/plugins/iframed-masonry-block/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "test/iframed-masonry-block",
 	"title": "Iframed Masonry Block",
 	"category": "text",

package/plugins/iframed-masonry-block/editor.js

@@ -31,7 +31,7 @@
 	];
 
 	registerBlockType( 'test/iframed-masonry-block', {
-		apiVersion: 2,
+		apiVersion: 3,
 		edit: function Edit() {
 			const ref = useRefEffect( ( node ) => {
 				const { ownerDocument } = node;

package/plugins/iframed-masonry-block.php

@@ -9,14 +9,14 @@
 
 add_action(
 	'setup_theme',
-	function() {
+	static function() {
 		add_theme_support( 'block-templates' );
 	}
 );
 
 add_action(
 	'init',
-	function() {
+	static function() {
 		wp_register_script(
 			'iframed-masonry-block-editor',
 			plugin_dir_url( __FILE__ ) . 'iframed-masonry-block/editor.js',

package/plugins/iframed-multiple-stylesheets/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "test/iframed-multiple-stylesheets",
 	"title": "Iframed Multiple Stylesheets",
 	"category": "text",

package/plugins/iframed-multiple-stylesheets/editor.js

@@ -4,7 +4,7 @@
 	const { useBlockProps } = blockEditor;
 
 	registerBlockType( 'test/iframed-multiple-stylesheets', {
-		apiVersion: 2,
+		apiVersion: 3,
 		edit: function Edit() {
 			return el( 'div', useBlockProps(), 'Edit' );
 		},

package/plugins/iframed-multiple-stylesheets.php

@@ -9,14 +9,14 @@
 
 add_action(
 	'setup_theme',
-	function() {
+	static function() {
 		add_theme_support( 'block-templates' );
 	}
 );
 
 add_action(
 	'init',
-	function() {
+	static function() {
 		wp_register_script(
 			'iframed-multiple-stylesheets-editor-script',
 			plugin_dir_url( __FILE__ ) . 'iframed-multiple-stylesheets/editor.js',

package/plugins/inner-blocks-allowed-blocks/index.js

@@ -1,87 +1,46 @@
 ( function () {
-	const { withSelect } = wp.data;
+	const { useSelect } = wp.data;
 	const { registerBlockType } = wp.blocks;
 	const { createElement: el } = wp.element;
 	const { InnerBlocks } = wp.blockEditor;
-	const __ = wp.i18n.__;
 	const divProps = {
 		className: 'product',
 		style: { outline: '1px solid gray', padding: 5 },
 	};
-	const template = [
-		[ 'core/image' ],
-		[ 'core/paragraph', { placeholder: __( 'Add a description' ) } ],
-		[ 'core/quote' ],
-	];
+
 	const allowedBlocksWhenSingleEmptyChild = [ 'core/image', 'core/list' ];
 	const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ];
 
-	const save = function () {
-		return el( 'div', divProps, el( InnerBlocks.Content ) );
-	};
-	registerBlockType( 'test/allowed-blocks-unset', {
-		title: 'Allowed Blocks Unset',
-		icon: 'carrot',
-		category: 'text',
-
-		edit() {
-			return el( 'div', divProps, el( InnerBlocks, { template } ) );
-		},
-
-		save,
-	} );
-
-	registerBlockType( 'test/allowed-blocks-set', {
-		title: 'Allowed Blocks Set',
-		icon: 'carrot',
-		category: 'text',
-
-		edit() {
-			return el(
-				'div',
-				divProps,
-				el( InnerBlocks, {
-					template,
-					allowedBlocks: [
-						'core/button',
-						'core/gallery',
-						'core/list',
-						'core/media-text',
-						'core/quote',
-					],
-				} )
-			);
-		},
-
-		save,
-	} );
-
 	registerBlockType( 'test/allowed-blocks-dynamic', {
 		title: 'Allowed Blocks Dynamic',
 		icon: 'carrot',
 		category: 'text',
 
-		edit: withSelect( function ( select, ownProps ) {
-			const getBlockOrder = select( 'core/block-editor' ).getBlockOrder;
-			return {
-				numberOfChildren: getBlockOrder( ownProps.clientId ).length,
-			};
-		} )( function ( props ) {
+		edit: function Edit( props ) {
+			const numberOfChildren = useSelect(
+				( select ) => {
+					const { getBlockCount } = select( 'core/block-editor' );
+					return getBlockCount( props.clientId );
+				},
+				[ props.clientId ]
+			);
+
 			return el(
 				'div',
 				{
 					...divProps,
-					'data-number-of-children': props.numberOfChildren,
+					'data-number-of-children': numberOfChildren,
 				},
 				el( InnerBlocks, {
 					allowedBlocks:
-						props.numberOfChildren < 2
+						numberOfChildren < 2
 							? allowedBlocksWhenSingleEmptyChild
 							: allowedBlocksWhenMultipleChildren,
 				} )
 			);
-		} ),
-
-		save,
+		},
+		save() {
+			return el( 'div', divProps, el( InnerBlocks.Content ) );
+		}
 	} );
 } )();

package/plugins/inner-blocks-allowed-blocks.php

@@ -12,7 +12,7 @@
  */
 function enqueue_inner_blocks_allowed_blocks_script() {
 	wp_enqueue_script(
-		'gutenberg-test-block-icons',
+		'gutenberg-test-inner-blocks-allowed-blocks',
 		plugins_url( 'inner-blocks-allowed-blocks/index.js', __FILE__ ),
 		array(
 			'wp-blocks',
@@ -24,5 +24,4 @@ function enqueue_inner_blocks_allowed_blocks_script() {
 		true
 	);
 }
-
-add_action( 'init', 'enqueue_inner_blocks_allowed_blocks_script' );
+add_action( 'enqueue_block_assets', 'enqueue_inner_blocks_allowed_blocks_script' );

package/plugins/marquee-function-widget.php

@@ -14,7 +14,7 @@ function marquee_greeting_init() {
 	wp_register_sidebar_widget(
 		'marquee_greeting',
 		'Marquee Greeting',
-		function() {
+		static function() {
 			$greeting = get_option( 'marquee_greeting', 'Hello!' );
 			printf( '<marquee>%s</marquee>', esc_html( $greeting ) );
 		}
@@ -23,7 +23,7 @@ function marquee_greeting_init() {
 	wp_register_widget_control(
 		'marquee_greeting',
 		'Marquee Greeting',
-		function() {
+		static function() {
 			if ( isset( $_POST['marquee-greeting'] ) ) {
 				update_option(
 					'marquee_greeting',

package/specs/editor/blocks/post-title.test.js

@@ -5,6 +5,7 @@ import {
 	createNewPost,
 	insertBlock,
 	saveDraft,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Post Title block', () => {
@@ -14,11 +15,11 @@ describe( 'Post Title block', () => {
 
 	it( 'Can edit the post title', async () => {
 		// Create a block with some text that will trigger a list creation.
-		await insertBlock( 'Post Title' );
+		await insertBlock( 'Title' );
 		const editablePostTitleSelector =
 			'.wp-block-post-title[contenteditable="true"]';
-		await page.waitForSelector( editablePostTitleSelector );
-		await page.focus( editablePostTitleSelector );
+		await canvas().waitForSelector( editablePostTitleSelector );
+		await canvas().focus( editablePostTitleSelector );
 
 		// Create a second list item.
 		await page.keyboard.type( 'Just tweaking the post title' );
@@ -26,7 +27,7 @@ describe( 'Post Title block', () => {
 		await saveDraft();
 		await page.reload();
 		await page.waitForSelector( '.edit-post-layout' );
-		const title = await page.$eval(
+		const title = await canvas().$eval(
 			'.editor-post-title__input',
 			( element ) => element.textContent
 		);

package/specs/editor/blocks/site-title.test.js

@@ -9,6 +9,7 @@ import {
 	pressKeyWithModifier,
 	setOption,
 	openDocumentSettingsSidebar,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 const saveEntities = async () => {
@@ -45,8 +46,8 @@ describe( 'Site Title block', () => {
 		await insertBlock( 'Site Title' );
 		const editableSiteTitleSelector =
 			'[aria-label="Block: Site Title"] a[contenteditable="true"]';
-		await page.waitForSelector( editableSiteTitleSelector );
-		await page.focus( editableSiteTitleSelector );
+		await canvas().waitForSelector( editableSiteTitleSelector );
+		await canvas().focus( editableSiteTitleSelector );
 		await pressKeyWithModifier( 'primary', 'a' );
 
 		await page.keyboard.type( 'New Site Title' );

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

@@ -8,6 +8,7 @@ import {
 	clickOnMoreMenuItem,
 	createNewPost,
 	deactivatePlugin,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => {
@@ -28,6 +29,13 @@ describe( 'Annotations', () => {
 
 	beforeEach( async () => {
 		await createNewPost();
+		// To do: run with iframe.
+		await page.evaluate( () => {
+			window.wp.blocks.registerBlockType( 'test/v2', {
+				apiVersion: '2',
+				title: 'test',
+			} );
+		} );
 	} );
 
 	/**
@@ -51,7 +59,7 @@ describe( 'Annotations', () => {
 			await page.$x( "//button[contains(text(), 'Add annotation')]" )
 		 )[ 0 ];
 		await addAnnotationButton.click();
-		await page.evaluate( () =>
+		await canvas().evaluate( () =>
 			document.querySelector( '.wp-block-paragraph' ).focus()
 		);
 	}
@@ -67,7 +75,7 @@ describe( 'Annotations', () => {
 			await page.$x( "//button[contains(text(), 'Remove annotations')]" )
 		 )[ 0 ];
 		await addAnnotationButton.click();
-		await page.evaluate( () =>
+		await canvas().evaluate( () =>
 			document.querySelector( '[contenteditable]' ).focus()
 		);
 	}
@@ -78,11 +86,11 @@ describe( 'Annotations', () => {
 	 * @return {Promise<string>} The annotated text.
 	 */
 	async function getAnnotatedText() {
-		const annotations = await page.$$( ANNOTATIONS_SELECTOR );
+		const annotations = await canvas().$$( ANNOTATIONS_SELECTOR );
 
 		const annotation = annotations[ 0 ];
 
-		return await page.evaluate( ( el ) => el.innerText, annotation );
+		return await canvas().evaluate( ( el ) => el.innerText, annotation );
 	}
 
 	/**
@@ -91,7 +99,7 @@ describe( 'Annotations', () => {
 	 * @return {Promise<string>} Inner HTML.
 	 */
 	async function getRichTextInnerHTML() {
-		const htmlContent = await page.$$( '.wp-block-paragraph' );
+		const htmlContent = await canvas().$$( '.wp-block-paragraph' );
 		return await page.evaluate( ( el ) => {
 			return el.innerHTML;
 		}, htmlContent[ 0 ] );
@@ -102,12 +110,12 @@ describe( 'Annotations', () => {
 
 		await clickOnMoreMenuItem( 'Annotations' );
 
-		let annotations = await page.$$( ANNOTATIONS_SELECTOR );
+		let annotations = await canvas().$$( ANNOTATIONS_SELECTOR );
 		expect( annotations ).toHaveLength( 0 );
 
 		await annotateFirstBlock( 9, 13 );
 
-		annotations = await page.$$( ANNOTATIONS_SELECTOR );
+		annotations = await canvas().$$( ANNOTATIONS_SELECTOR );
 		expect( annotations ).toHaveLength( 1 );
 
 		const text = await getAnnotatedText();
@@ -115,7 +123,7 @@ describe( 'Annotations', () => {
 
 		await clickOnBlockSettingsMenuItem( 'Edit as HTML' );
 
-		const htmlContent = await page.$$(
+		const htmlContent = await canvas().$$(
 			'.block-editor-block-list__block-html-textarea'
 		);
 		const html = await page.evaluate( ( el ) => {
@@ -136,7 +144,7 @@ describe( 'Annotations', () => {
 		await page.keyboard.type( 'D' );
 
 		await removeAnnotations();
-		const htmlContent = await page.$$( '.wp-block-paragraph' );
+		const htmlContent = await canvas().$$( '.wp-block-paragraph' );
 		const html = await page.evaluate( ( el ) => {
 			return el.innerHTML;
 		}, htmlContent[ 0 ] );

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

@@ -11,6 +11,7 @@ import {
 	openDocumentSettingsSidebar,
 	togglePreferencesOption,
 	toggleMoreMenu,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Block variations', () => {
@@ -45,7 +46,7 @@ describe( 'Block variations', () => {
 		await insertBlock( 'Large Quote' );
 
 		expect(
-			await page.$(
+			await canvas().$(
 				'.wp-block[data-type="core/quote"] blockquote.is-style-large'
 			)
 		).toBeDefined();
@@ -58,7 +59,7 @@ describe( 'Block variations', () => {
 		await page.keyboard.press( 'Enter' );
 
 		expect(
-			await page.$(
+			await canvas().$(
 				'.wp-block[data-type="core/quote"] blockquote.is-style-large'
 			)
 		).toBeDefined();
@@ -75,7 +76,7 @@ describe( 'Block variations', () => {
 	test( 'Insert the Success Message block variation', async () => {
 		await insertBlock( 'Success Message' );
 
-		const successMessageBlock = await page.$(
+		const successMessageBlock = await canvas().$(
 			'.wp-block[data-type="core/paragraph"]'
 		);
 		expect( successMessageBlock ).toBeDefined();
@@ -86,12 +87,12 @@ describe( 'Block variations', () => {
 	test( 'Pick the additional variation in the inserted Columns block', async () => {
 		await insertBlock( 'Columns' );
 
-		const fourColumnsVariation = await page.waitForSelector(
+		const fourColumnsVariation = await canvas().waitForSelector(
 			'.wp-block[data-type="core/columns"] .block-editor-block-variation-picker__variation[aria-label="Four columns"]'
 		);
 		await fourColumnsVariation.click();
 		expect(
-			await page.$$(
+			await canvas().$$(
 				'.wp-block[data-type="core/columns"] .wp-block[data-type="core/column"]'
 			)
 		).toHaveLength( 4 );