@wordpress/e2e-tests 7.4.0 → 7.5.0

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.4.0",
+	"version": "7.5.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.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",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
 }

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/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/iframed-inline-styles.test.js

@@ -31,8 +31,7 @@ describe( 'iframed inline styles', () => {
 		await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
 	} );
 
-	// Skip flaky test. See https://github.com/WordPress/gutenberg/issues/35172
-	it.skip( 'should load inline styles in iframe', async () => {
+	it( 'should load inline styles in iframe', async () => {
 		await insertBlock( 'Iframed Inline Styles' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();

package/specs/editor/plugins/inner-blocks-allowed-blocks.test.js

@@ -50,7 +50,8 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 		await page.waitForSelector( childParagraphSelector );
 		await page.click( childParagraphSelector );
 		await openGlobalBlockInserter();
-		expect( await getAllBlockInserterItemTitles() ).toEqual( [
+		const allowedBlocks = await getAllBlockInserterItemTitles();
+		expect( allowedBlocks.sort() ).toEqual( [
 			'Button',
 			'Gallery',
 			'List',
@@ -75,7 +76,7 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 			await page.$x( `//button//span[contains(text(), 'List')]` )
 		 )[ 0 ];
 		await insertButton.click();
-		// Select the list wrapper so the image is inserable.
+		// Select the list wrapper so the image is insertable.
 		await page.keyboard.press( 'ArrowUp' );
 		await insertBlock( 'Image' );
 		await closeGlobalBlockInserter();

package/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	getAllBlockInserterItemTitles,
+	insertBlock,
+	closeGlobalBlockInserter,
+} from '@wordpress/e2e-test-utils';
+
+const QUICK_INSERTER_RESULTS_SELECTOR =
+	'.block-editor-inserter__quick-inserter-results';
+
+describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => {
+	beforeAll( async () => {
+		await activatePlugin(
+			'gutenberg-test-innerblocks-prioritized-inserter-blocks'
+		);
+	} );
+
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin(
+			'gutenberg-test-innerblocks-prioritized-inserter-blocks'
+		);
+	} );
+
+	describe( 'Quick inserter', () => {
+		it( 'uses defaulting ordering if prioritzed blocks setting was not set', async () => {
+			const parentBlockSelector =
+				'[data-type="test/prioritized-inserter-blocks-unset"]';
+			await insertBlock( 'Prioritized Inserter Blocks Unset' );
+			await closeGlobalBlockInserter();
+
+			await page.waitForSelector( parentBlockSelector );
+
+			await page.click(
+				`${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle`
+			);
+
+			await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR );
+
+			await expect( await getAllBlockInserterItemTitles() ).toHaveLength(
+				6
+			);
+		} );
+
+		it( 'uses the priority ordering if prioritzed blocks setting is set', async () => {
+			const parentBlockSelector =
+				'[data-type="test/prioritized-inserter-blocks-set"]';
+			await insertBlock( 'Prioritized Inserter Blocks Set' );
+			await closeGlobalBlockInserter();
+
+			await page.waitForSelector( parentBlockSelector );
+
+			await page.click(
+				`${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle`
+			);
+
+			await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR );
+
+			// Should still be only 6 results regardless of the priority ordering.
+			const inserterItems = await getAllBlockInserterItemTitles();
+
+			// Should still be only 6 results regardless of the priority ordering.
+			expect( inserterItems ).toHaveLength( 6 );
+
+			expect( inserterItems.slice( 0, 3 ) ).toEqual( [
+				'Audio',
+				'Spacer',
+				'Code',
+			] );
+		} );
+
+		it( 'obeys allowed blocks over prioritzed blocks setting if conflicted', async () => {
+			const parentBlockSelector =
+				'[data-type="test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks"]';
+			await insertBlock(
+				'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks'
+			);
+			await closeGlobalBlockInserter();
+
+			await page.waitForSelector( parentBlockSelector );
+
+			await page.click(
+				`${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle`
+			);
+
+			await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR );
+
+			const inserterItems = await getAllBlockInserterItemTitles();
+
+			expect( inserterItems.slice( 0, 3 ) ).toEqual( [
+				'Spacer',
+				'Code',
+				'Paragraph',
+			] );
+			expect( inserterItems ).toEqual(
+				expect.not.arrayContaining( [ 'Audio' ] )
+			);
+		} );
+	} );
+	describe( 'Slash inserter', () => {
+		it( 'uses the priority ordering if prioritzed blocks setting is set', async () => {
+			await insertBlock( 'Prioritized Inserter Blocks Set' );
+			await page.click( '[data-type="core/image"]' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( '/' );
+			// Wait for the results to display.
+			await page.waitForSelector( '.components-autocomplete__result' );
+			const inserterItemTitles = await page.evaluate( () => {
+				return Array.from(
+					document.querySelectorAll(
+						'.components-autocomplete__result'
+					)
+				).map( ( { innerText } ) => innerText );
+			} );
+			expect( inserterItemTitles ).toHaveLength( 9 ); // Default suggested blocks number.
+			expect( inserterItemTitles.slice( 0, 3 ) ).toEqual( [
+				'Audio',
+				'Spacer',
+				'Code',
+			] );
+		} );
+	} );
+} );

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

@@ -1,177 +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 {
-	insertBlock,
-	createNewPost,
-	openDocumentSettingsSidebar,
-	switchBlockInspectorTab,
-	transformBlockTo,
-} from '@wordpress/e2e-test-utils';
-
-async function upload( selector ) {
-	const inputElement = await page.waitForSelector(
-		`${ selector } input[type="file"]`
-	);
-	const testImagePath = path.join(
-		__dirname,
-		'..',
-		'..',
-		'..',
-		'assets',
-		'10x10_e2e_test_image_z9T8jK.png'
-	);
-	const filename = uuid();
-	const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
-	fs.copyFileSync( testImagePath, tmpFileName );
-	await inputElement.uploadFile( tmpFileName );
-	await page.waitForSelector( `${ selector } img[src$="${ filename }.png"]` );
-	return filename;
-}
-
-describe( 'Cover', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can set background image using image upload on block placeholder', async () => {
-		await insertBlock( 'Cover' );
-		// Create the block using uploaded image.
-		const sourceImageFilename = await upload( '.wp-block-cover' );
-		// Get the block's background image URL.
-		const blockImage = await page.waitForSelector( '.wp-block-cover img' );
-		const blockImageUrl = await blockImage.evaluate( ( el ) => el.src );
-
-		expect( blockImageUrl ).toContain( sourceImageFilename );
-	} );
-
-	it( 'dims background image down by 50% by default', async () => {
-		await insertBlock( 'Cover' );
-		// Create the block using uploaded image.
-		await upload( '.wp-block-cover' );
-		// Get the block's background dim color and its opacity.
-		const backgroundDim = await page.waitForSelector(
-			'.wp-block-cover .has-background-dim'
-		);
-		const [ backgroundDimColor, backgroundDimOpacity ] =
-			await page.evaluate( ( el ) => {
-				const computedStyle = window.getComputedStyle( el );
-				return [ computedStyle.backgroundColor, computedStyle.opacity ];
-			}, backgroundDim );
-
-		expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
-		expect( backgroundDimOpacity ).toBe( '0.5' );
-	} );
-
-	it( 'can be resized using drag & drop', async () => {
-		await insertBlock( 'Cover' );
-		// Close the inserter.
-		await page.click( '.edit-post-header-toolbar__inserter-toggle' );
-		// Open the sidebar.
-		await openDocumentSettingsSidebar();
-		// Choose the first solid color as the background of the cover.
-		await page.click(
-			'.components-circular-option-picker__option-wrapper:first-child button'
-		);
-
-		// Select the cover block. By default the child paragraph gets selected.
-		await page.click(
-			'.edit-post-header-toolbar__document-overview-toggle'
-		);
-		await page.click(
-			'.block-editor-list-view-block__contents-container a'
-		);
-
-		switchBlockInspectorTab( 'Styles' );
-		const heightInputHandle = await page.waitForSelector(
-			'input[id*="block-cover-height-input"]'
-		);
-
-		// Verify the height of the cover is not defined.
-		expect(
-			await page.evaluate( ( { value } ) => value, heightInputHandle )
-		).toBe( '' );
-
-		const resizeButton = await page.$(
-			'.components-resizable-box__handle-bottom'
-		);
-		const boundingBoxResizeButton = await resizeButton.boundingBox();
-		const coordinatesResizeButton = {
-			x: boundingBoxResizeButton.x + boundingBoxResizeButton.width / 2,
-			y: boundingBoxResizeButton.y + boundingBoxResizeButton.height / 2,
-		};
-
-		// Move the  mouse to the position of the resize button.
-		await page.mouse.move(
-			coordinatesResizeButton.x,
-			coordinatesResizeButton.y
-		);
-
-		// Trigger a mousedown event against the resize button.
-		// Using page.mouse.down does not works because it triggers a global event,
-		// not an event for that element.
-		page.evaluate( ( { x, y } ) => {
-			const element = document.querySelector(
-				'.components-resizable-box__handle-bottom'
-			);
-			event = document.createEvent( 'CustomEvent' );
-			event.initCustomEvent( 'mousedown', true, true, null );
-			event.clientX = x;
-			event.clientY = y;
-			element.dispatchEvent( event );
-		}, coordinatesResizeButton );
-
-		// Move the mouse to resize the cover.
-		await page.mouse.move(
-			coordinatesResizeButton.x,
-			coordinatesResizeButton.y + 100,
-			{ steps: 10 }
-		);
-
-		// Release the mouse.
-		await page.mouse.up();
-
-		// Verify the height of the cover has changed.
-		expect(
-			await page.evaluate(
-				( { value } ) => Number.parseInt( value ),
-				heightInputHandle
-			)
-		).toBeGreaterThan( 100 );
-	} );
-
-	it( 'dims the background image down by 50% when transformed from the Image block', async () => {
-		await insertBlock( 'Image' );
-		// Upload image and transform to the Cover block.
-		const filename = await upload( '.wp-block-image' );
-		await page.waitForSelector(
-			`.wp-block-image img[src$="${ filename }.png"]`
-		);
-
-		// Focus the block wrapper before trying to convert to make sure figcaption toolbar is not obscuring
-		// the block toolbar.
-		await page.focus( '.wp-block-image' );
-		await transformBlockTo( 'Cover' );
-
-		// Get the block's background dim color and its opacity.
-		const backgroundDim = await page.waitForSelector(
-			'.wp-block-cover .has-background-dim'
-		);
-		const [ backgroundDimColor, backgroundDimOpacity ] =
-			await page.evaluate( ( el ) => {
-				const computedStyle = window.getComputedStyle( el );
-				return [ computedStyle.backgroundColor, computedStyle.opacity ];
-			}, backgroundDim );
-
-		expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
-		expect( backgroundDimOpacity ).toBe( '0.5' );
-	} );
-} );