@wordpress/e2e-tests 7.4.0 → 7.6.0

package/CHANGELOG.md

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

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.4.0",
+	"version": "7.6.0",
 	"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.4.0",
-		"@wordpress/jest-console": "^7.4.0",
-		"@wordpress/jest-puppeteer-axe": "^6.4.0",
-		"@wordpress/scripts": "^26.4.0",
-		"@wordpress/url": "^3.34.0",
+		"@wordpress/e2e-test-utils": "^10.6.0",
+		"@wordpress/jest-console": "^7.6.0",
+		"@wordpress/jest-puppeteer-axe": "^6.6.0",
+		"@wordpress/scripts": "^26.6.0",
+		"@wordpress/url": "^3.36.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

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-prioritized-inserter-blocks/index.js

@@ -0,0 +1,82 @@
+( function () {
+	const { registerBlockType } = wp.blocks;
+	const { createElement: el } = wp.element;
+	const { InnerBlocks } = wp.blockEditor;
+
+    const divProps = {
+		className: 'product',
+		style: { outline: '1px solid gray', padding: 5 },
+	};
+
+    // without a placeholder within the inner blocks it can be difficult to select the block using e2e tests
+    // especially using Puppeteer, so we use an image block which has a placeholder.
+	const template = [
+		[ 'core/image' ],
+    ];
+
+	const save = function () {
+		return el( 'div', divProps, el( InnerBlocks.Content ) );
+	};
+	registerBlockType( 'test/prioritized-inserter-blocks-unset', {
+		title: 'Prioritized Inserter Blocks Unset',
+		icon: 'carrot',
+		category: 'text',
+
+		edit() {
+			return el( 'div', divProps, el( InnerBlocks, { template } ) );
+		},
+
+		save,
+	} );
+
+	registerBlockType( 'test/prioritized-inserter-blocks-set', {
+		title: 'Prioritized Inserter Blocks Set',
+		icon: 'carrot',
+		category: 'text',
+		edit() {
+			return el(
+				'div',
+				divProps,
+				el( InnerBlocks, {
+                    template,
+					prioritizedInserterBlocks: [
+                        'core/audio',
+						'core/spacer',
+                        'core/code',
+					],
+				} )
+			);
+		},
+
+		save,
+	} );
+
+    registerBlockType( 'test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks', {
+		title: 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks',
+		icon: 'carrot',
+		category: 'text',
+		edit() {
+			return el(
+				'div',
+				divProps,
+				el( InnerBlocks, {
+                    template,
+                    allowedBlocks: [
+                        'core/spacer',
+                        'core/code',
+                        'core/paragraph',
+                        'core/heading'
+                    ],
+					prioritizedInserterBlocks: [
+                        'core/audio', // this is **not** in the allowedBlocks list
+						'core/spacer',
+                        'core/code',
+					],
+				} )
+			);
+		},
+
+		save,
+	} );
+
+} )();

package/plugins/inner-blocks-prioritized-inserter-blocks.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test InnerBlocks Prioritized Inserter Blocks
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-inner-blocks-prioritized-inserter-blocks
+ */
+
+/**
+ * Registers a custom script for the plugin.
+ */
+function enqueue_inner_blocks_prioritized_inserter_blocks_script() {
+	wp_enqueue_script(
+		'gutenberg-test-inner-blocks-prioritized-inserter-blocks',
+		plugins_url( 'inner-blocks-prioritized-inserter-blocks/index.js', __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-block-editor',
+			'wp-element',
+			'wp-i18n',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'inner-blocks-prioritized-inserter-blocks/index.js' ),
+		true
+	);
+}
+
+add_action( 'init', 'enqueue_inner_blocks_prioritized_inserter_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 );

package/specs/editor/plugins/child-blocks.test.js

@@ -56,7 +56,8 @@ describe( 'Child Blocks', () => {
 			'[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender'
 		);
 		await openGlobalBlockInserter();
-		expect( await getAllBlockInserterItemTitles() ).toEqual( [
+		const allowedBlocks = await getAllBlockInserterItemTitles();
+		expect( allowedBlocks.sort() ).toEqual( [
 			'Child Blocks Child',
 			'Image',
 			'Paragraph',

package/specs/editor/plugins/cpt-locking.test.js

@@ -12,6 +12,7 @@ import {
 	pressKeyTimes,
 	pressKeyWithModifier,
 	setPostContent,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'cpt locking', () => {
@@ -35,7 +36,7 @@ describe( 'cpt locking', () => {
 	};
 
 	const shouldNotAllowBlocksToBeRemoved = async () => {
-		await page.type(
+		await canvas().type(
 			'.block-editor-rich-text__editable[data-type="core/paragraph"]',
 			'p1'
 		);
@@ -46,12 +47,12 @@ describe( 'cpt locking', () => {
 	};
 
 	const shouldAllowBlocksToBeMoved = async () => {
-		await page.click(
+		await canvas().click(
 			'div > .block-editor-rich-text__editable[data-type="core/paragraph"]'
 		);
 		expect( await page.$( 'button[aria-label="Move up"]' ) ).not.toBeNull();
 		await page.click( 'button[aria-label="Move up"]' );
-		await page.type(
+		await canvas().type(
 			'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
 			'p1'
 		);
@@ -71,14 +72,14 @@ describe( 'cpt locking', () => {
 		);
 
 		it( 'should not allow blocks to be moved', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
 			);
 			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
 		} );
 
 		it( 'should not error when deleting the cotents of a paragraph', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-block-list__block[data-type="core/paragraph"]'
 			);
 			const textToType = 'Paragraph';
@@ -88,7 +89,7 @@ describe( 'cpt locking', () => {
 		} );
 
 		it( 'should insert line breaks when using enter and shift-enter', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-block-list__block[data-type="core/paragraph"]'
 			);
 			await page.keyboard.type( 'First line' );
@@ -118,12 +119,14 @@ describe( 'cpt locking', () => {
 		} );
 
 		it( 'should not allow blocks to be inserted in inner blocks', async () => {
-			await page.click( 'button[aria-label="Two columns; equal split"]' );
+			await canvas().click(
+				'button[aria-label="Two columns; equal split"]'
+			);
 			await page.evaluate(
 				() => new Promise( window.requestIdleCallback )
 			);
 			expect(
-				await page.$(
+				await canvas().$(
 					'.wp-block-column .block-editor-button-block-appender'
 				)
 			).toBeNull();
@@ -173,7 +176,7 @@ describe( 'cpt locking', () => {
 		} );
 
 		it( 'should allow blocks to be removed', async () => {
-			await page.type(
+			await canvas().type(
 				'.block-editor-rich-text__editable[data-type="core/paragraph"]',
 				'p1'
 			);
@@ -193,7 +196,7 @@ describe( 'cpt locking', () => {
 		} );
 
 		it( 'should allow blocks to be removed', async () => {
-			await page.type(
+			await canvas().type(
 				'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
 				'p1'
 			);
@@ -219,7 +222,7 @@ describe( 'cpt locking', () => {
 		);
 
 		it( 'should not allow blocks to be moved', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
 			);
 			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
@@ -239,7 +242,7 @@ describe( 'cpt locking', () => {
 		);
 
 		it( 'should not allow blocks to be moved', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
 			);
 			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();