@wordpress/e2e-tests 7.9.0 → 7.10.0

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.9.0",
+	"version": "7.10.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.9.0",
-		"@wordpress/jest-console": "^7.9.0",
-		"@wordpress/jest-puppeteer-axe": "^6.9.0",
-		"@wordpress/scripts": "^26.9.0",
-		"@wordpress/url": "^3.39.0",
+		"@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",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
+	"gitHead": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
 }

package/plugins/iframed-enqueue-block-editor-settings.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed enqueue block editor settings
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-iframed-enqueue-block-editor-settings
+ */
+
+add_action(
+	'block_editor_settings_all',
+	function( $settings ) {
+		$settings['styles'][] = array(
+			'css'            => 'p { border: 1px solid red }',
+			'__unstableType' => 'plugin',
+		);
+		return $settings;
+	}
+);

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

@@ -7,7 +7,7 @@
 
 ?>
 <div data-wp-interactive>
-	<div data-wp-fakeshow="state.isOpen">
+	<div data-wp-show-mock="state.isOpen">
 		<input
 			data-testid="input"
 			data-wp-effect="effects.elementAddedToTheDOM"

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

@@ -1,28 +1,19 @@
 ( ( { wp } ) => {
-	const { store, directive, useContext, useMemo } = wp.interactivity;
+	const { store, directive } = wp.interactivity;
 
-	// Fake `data-wp-fakeshow` directive to test when things are removed from the DOM.
-	// Replace with `data-wp-show` when it's ready.
+	// Fake `data-wp-show-mock` directive to test when things are removed from the
+	// DOM.  Replace with `data-wp-show` when it's ready.
 	directive(
-		'fakeshow',
+		'show-mock',
 		( {
 			directives: {
-				fakeshow: { default: fakeshow },
+				"show-mock": { default: showMock },
 			},
 			element,
 			evaluate,
-			context,
 		} ) => {
-			const contextValue = useContext( context );
-			const children = useMemo(
-				() =>
-					element.type === 'template'
-						? element.props.templateChildren
-						: element,
-				[]
-			);
-			if ( ! evaluate( fakeshow, { context: contextValue } ) ) return null;
-			return children;
+			if ( ! evaluate( showMock ) ) return null;
+			return element;
 		}
 	);
 

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

@@ -18,3 +18,7 @@
 		data-wp-test-context
 	></div>
 </div>
+
+<div data-testid="non-existent-directives">
+	<div data-wp-interactive ><div data-wp-non-existent-directive></div></div>
+</div>

package/plugins/interactive-blocks/tovdom-islands/render.php

@@ -7,14 +7,14 @@
 
 ?>
 <div>
-	<div data-wp-show="state.falseValue">
+	<div data-wp-show-mock="state.falseValue">
 		<span data-testid="not inside an island">
 			This should be shown because it is inside an island.
 		</span>
 	</div>
 
 	<div data-wp-interactive>
-		<div data-wp-show="state.falseValue">
+		<div data-wp-show-mock="state.falseValue">
 			<span data-testid="inside an island">
 				This should not be shown because it is inside an island.
 			</span>
@@ -23,7 +23,7 @@
 
 	<div data-wp-interactive>
 		<div data-wp-ignore>
-			<div data-wp-show="state.falseValue">
+			<div data-wp-show-mock="state.falseValue">
 				<span
 					data-testid="inside an inner block of an isolated island"
 				>
@@ -37,7 +37,7 @@
 	<div data-wp-interactive>
 		<div data-wp-interactive>
 			<div
-				data-wp-show="state.falseValue"
+				data-wp-show-mock="state.falseValue"
 				data-testid="island inside another island"
 			>
 				<span>
@@ -51,7 +51,7 @@
 	<div data-wp-interactive>
 		<div>
 			<div data-wp-interactive data-wp-ignore>
-				<div data-wp-show="state.falseValue">
+				<div data-wp-show-mock="state.falseValue">
 					<span
 						data-testid="island inside inner block of isolated island"
 					>

package/plugins/interactive-blocks/tovdom-islands/view.js

@@ -1,5 +1,22 @@
 ( ( { wp } ) => {
-	const { store } = wp.interactivity;
+	const { store, directive, createElement } = wp.interactivity;
+
+	// Fake `data-wp-show-mock` 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,
+		} ) => {
+			if ( ! evaluate( showMock ) )
+				element.props.children =
+					createElement( "template", null, element.props.children );
+		}
+	);
 
 	store( {
 		state: {

package/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	canvas,
+	activateTheme,
+} from '@wordpress/e2e-test-utils';
+
+async function getComputedStyle( context, selector, property ) {
+	return await context.evaluate(
+		( sel, prop ) =>
+			window.getComputedStyle( document.querySelector( sel ) )[ prop ],
+		selector,
+		property
+	);
+}
+
+describe( 'iframed block editor settings styles', () => {
+	beforeEach( async () => {
+		// Activate the empty theme (block based theme), which is iframed.
+		await activateTheme( 'emptytheme' );
+		await activatePlugin(
+			'gutenberg-test-iframed-enqueue-block-editor-settings'
+		);
+		await createNewPost();
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin(
+			'gutenberg-test-iframed-enqueue-block-editor-settings'
+		);
+		await activateTheme( 'twentytwentyone' );
+	} );
+
+	it( 'should load styles added through block editor settings', async () => {
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+		// Expect a red border (added in PHP).
+		expect( await getComputedStyle( canvas(), 'p', 'border-color' ) ).toBe(
+			'rgb(255, 0, 0)'
+		);
+
+		await page.evaluate( () => {
+			const settings = window.wp.data
+				.select( 'core/editor' )
+				.getEditorSettings();
+			wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+				...settings,
+				styles: [
+					...settings.styles,
+					{
+						css: 'p { border-width: 2px; }',
+						__unstableType: 'plugin',
+					},
+				],
+			} );
+		} );
+
+		// Expect a 2px border (added in JS).
+		expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
+			'2px'
+		);
+	} );
+
+	it( 'should load theme styles added through block editor settings', async () => {
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+
+		await page.evaluate( () => {
+			// Make sure that theme styles are added even if the theme styles
+			// preference is off.
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.toggleFeature( 'themeStyles' );
+			const settings = window.wp.data
+				.select( 'core/editor' )
+				.getEditorSettings();
+			wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+				...settings,
+				styles: [
+					...settings.styles,
+					{
+						css: 'p { border-width: 2px; }',
+						__unstableType: 'theme',
+					},
+				],
+			} );
+		} );
+
+		// Expect a 1px border because theme styles are disabled.
+		expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
+			'1px'
+		);
+
+		await page.evaluate( () => {
+			// Now enable theme styles.
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.toggleFeature( 'themeStyles' );
+		} );
+
+		// Expect a 2px border because theme styles are enabled.
+		expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
+			'2px'
+		);
+	} );
+} );

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

@@ -111,7 +111,8 @@ describe( 'Reusable blocks', () => {
 		await insertReusableBlock( 'Surprised greeting block' );
 
 		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Detach pattern' );
+		await clickBlockToolbarButton( 'Options' );
+		await clickMenuItem( 'Detach pattern' );
 
 		// Check that we have a paragraph block on the page.
 		const paragraphBlock = await canvas().$(
@@ -217,7 +218,8 @@ describe( 'Reusable blocks', () => {
 		await insertReusableBlock( 'Multi-selection reusable block' );
 
 		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Detach patterns' );
+		await clickBlockToolbarButton( 'Options' );
+		await clickMenuItem( 'Detach patterns' );
 
 		// Check that we have two paragraph blocks on the page.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -349,7 +351,8 @@ describe( 'Reusable blocks', () => {
 
 		// Convert back to regular blocks.
 		await clickBlockToolbarButton( 'Select Edited block' );
-		await clickBlockToolbarButton( 'Detach pattern' );
+		await clickBlockToolbarButton( 'Options' );
+		await clickMenuItem( 'Detach pattern' );
 		await page.waitForXPath( selector, {
 			hidden: true,
 		} );

package/specs/site-editor/settings-sidebar.test.js

@@ -81,7 +81,7 @@ describe( 'Settings sidebar', () => {
 			expect( templateCardAfterNavigation ).toMatchObject( {
 				title: 'Single Entries',
 				description:
-					'Displays any single entry, such as a post or a page. This template will serve as a fallback when a more specific template (e.g., Single Post, Page, or Attachment) cannot be found.',
+					'Displays any single entry, such as a post or a page. This template will serve as a fallback when a more specific template (e.g. Single Post, Page, or Attachment) cannot be found.',
 			} );
 		} );
 	} );

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

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

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

@@ -1,53 +0,0 @@
-<?php
-/**
- * HTML for testing the directive `data-wp-show`.
- *
- * @package gutenberg-test-interactive-blocks
- */
-
-?>
-<div data-wp-interactive>
-	<button
-		data-wp-on--click="actions.toggleTrueValue"
-		data-testid="toggle trueValue"
-	>
-		Toggle trueValue
-	</button>
-
-	<button
-		data-wp-on--click="actions.toggleFalseValue"
-		data-testid="toggle falseValue"
-	>
-		Toggle falseValue
-	</button>
-
-	<div
-		data-wp-show="state.trueValue"
-		id="truthy-div"
-		data-testid="show if callback returns truthy value"
-	>
-		<p>trueValue children</p>
-	</div>
-
-	<div
-		data-wp-show="state.falseValue"
-		data-testid="do not show if callback returns false value"
-	>
-		<p>falseValue children</p>
-	</div>
-
-	<div data-wp-context='{ "falseValue": false }'>
-		<div
-			data-wp-show="context.falseValue"
-			data-testid="can use context values"
-		>
-			falseValue
-		</div>
-		<button
-			data-wp-on--click="actions.toggleContextFalseValue"
-			data-testid="toggle context false value"
-		>
-			Toggle context falseValue
-		</button>
-	</div>
-</div>

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

@@ -1,24 +0,0 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store } = wp.interactivity;
-
-	store( {
-		state: {
-			trueValue: true,
-			falseValue: false,
-		},
-		actions: {
-			toggleTrueValue: ( { state } ) => {
-				state.trueValue = ! state.trueValue;
-			},
-			toggleFalseValue: ( { state } ) => {
-				state.falseValue = ! state.falseValue;
-			},
-			toggleContextFalseValue: ( { context } ) => {
-				context.falseValue = ! context.falseValue;
-			},
-		},
-	} );
-} )( window );

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

@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	clickOnMoreMenuItem,
-	createNewPost,
-	deactivatePlugin,
-	searchForBlock,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Allowed Blocks Filter', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-allowed-blocks' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-allowed-blocks' );
-	} );
-
-	it( 'should restrict the allowed blocks in the inserter', async () => {
-		// The paragraph block is available.
-		await searchForBlock( 'Paragraph' );
-		const paragraphBlockButton = (
-			await page.$x( `//button//span[contains(text(), 'Paragraph')]` )
-		 )[ 0 ];
-		expect( paragraphBlockButton ).not.toBeNull();
-
-		// The gallery block is not available.
-		await searchForBlock( 'Gallery' );
-
-		const galleryBlockButton = (
-			await page.$x( `//button//span[contains(text(), 'Gallery')]` )
-		 )[ 0 ];
-		expect( galleryBlockButton ).toBeUndefined();
-	} );
-
-	it( 'should remove not allowed blocks from the block manager', async () => {
-		await clickOnMoreMenuItem( 'Preferences' );
-		const [ blocksTab ] = await page.$x(
-			`//button[contains(text(), "Blocks")]`
-		);
-		await blocksTab.click();
-
-		const BLOCK_LABEL_SELECTOR =
-			'.edit-post-block-manager__checklist-item .components-checkbox-control__label';
-		await page.waitForSelector( BLOCK_LABEL_SELECTOR );
-		const blocks = await page.evaluate( ( selector ) => {
-			return Array.from( document.querySelectorAll( selector ) )
-				.map( ( element ) => ( element.innerText || '' ).trim() )
-				.sort();
-		}, BLOCK_LABEL_SELECTOR );
-		expect( blocks ).toEqual( [ 'Image', 'Paragraph' ] );
-	} );
-} );

package/specs/editor/plugins/iframed-equeue-block-assets.test.js

@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	canvas,
-	activateTheme,
-} from '@wordpress/e2e-test-utils';
-
-async function getComputedStyle( context, selector, property ) {
-	return await context.evaluate(
-		( sel, prop ) =>
-			window.getComputedStyle( document.querySelector( sel ) )[ prop ],
-		selector,
-		property
-	);
-}
-
-describe( 'iframed inline styles', () => {
-	beforeEach( async () => {
-		// Activate the empty theme (block based theme), which is iframed.
-		await activateTheme( 'emptytheme' );
-		await activatePlugin( 'gutenberg-test-iframed-enqueue_block_assets' );
-		await createNewPost();
-	} );
-
-	afterEach( async () => {
-		await deactivatePlugin( 'gutenberg-test-iframed-enqueue_block_assets' );
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	it( 'should load styles added through enqueue_block_assets', async () => {
-		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
-		// Check stylesheet.
-		expect(
-			await getComputedStyle( canvas(), 'body', 'background-color' )
-		).toBe( 'rgb(33, 117, 155)' );
-		// Check inline style.
-		expect( await getComputedStyle( canvas(), 'body', 'padding' ) ).toBe(
-			'20px'
-		);
-
-		expect(
-			await canvas().evaluate( () => ( { ...document.body.dataset } ) )
-		).toEqual( {
-			iframedEnqueueBlockAssetsL10n: 'Iframed Enqueue Block Assets!',
-		} );
-	} );
-} );