@wordpress/e2e-tests 7.8.0 → 7.9.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.9.0 (2023-07-20)
+
 ## 7.8.0 (2023-07-05)
 
 ## 7.7.0 (2023-06-23)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.8.0",
+	"version": "7.9.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.8.0",
-		"@wordpress/jest-console": "^7.8.0",
-		"@wordpress/jest-puppeteer-axe": "^6.8.0",
-		"@wordpress/scripts": "^26.8.0",
-		"@wordpress/url": "^3.38.0",
+		"@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",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bcd13d59b22553b3c9dc5869077bff1e864cf9f5"
+	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
 }

package/plugins/block-context.php

@@ -8,10 +8,10 @@
  */
 
 /**
- * Enqueues a custom script for the plugin.
+ * Registers plugin test context blocks.
  */
-function gutenberg_test_enqueue_block_context_script() {
-	wp_enqueue_script(
+function gutenberg_test_register_context_blocks() {
+	wp_register_script(
 		'gutenberg-test-block-context',
 		plugins_url( 'block-context/index.js', __FILE__ ),
 		array(
@@ -22,37 +22,32 @@ function gutenberg_test_enqueue_block_context_script() {
 		filemtime( plugin_dir_path( __FILE__ ) . 'block-context/index.js' ),
 		true
 	);
-}
-add_action( 'init', 'gutenberg_test_enqueue_block_context_script' );
 
-/**
- * Registers plugin test context blocks.
- */
-function gutenberg_test_register_context_blocks() {
 	register_block_type(
 		'gutenberg/test-context-provider',
 		array(
-			'attributes'       => array(
+			'attributes'            => array(
 				'recordId' => array(
 					'type'    => 'number',
 					'default' => 0,
 				),
 			),
-			'provides_context' => array(
+			'provides_context'      => array(
 				'gutenberg/recordId' => 'recordId',
 			),
+			'editor_script_handles' => array( 'gutenberg-test-block-context' ),
 		)
 	);
 
 	register_block_type(
 		'gutenberg/test-context-consumer',
 		array(
-			'uses_context'    => array(
+			'uses_context'          => array(
 				'gutenberg/recordId',
 				'postId',
 				'postType',
 			),
-			'render_callback' => static function( $attributes, $content, $block ) {
+			'render_callback'       => static function( $attributes, $content, $block ) {
 				$ordered_context = array(
 					$block->context['gutenberg/recordId'],
 					$block->context['postId'],
@@ -61,6 +56,7 @@ function gutenberg_test_register_context_blocks() {
 
 				return implode( ',', $ordered_context );
 			},
+			'editor_script_handles' => array( 'gutenberg-test-block-context' ),
 		)
 	);
 }

package/plugins/iframed-enqueue-block-assets/script.js

@@ -0,0 +1,3 @@
+window.addEventListener( 'load', () => {
+    document.body.dataset.iframedEnqueueBlockAssetsL10n = window.iframedEnqueueBlockAssetsL10n.test;
+} );

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

@@ -17,5 +17,18 @@ add_action(
 			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-enqueue-block-assets/style.css' )
 		);
 		wp_add_inline_style( 'iframed-enqueue-block-assets', 'body{padding:20px!important}' );
+		wp_enqueue_script(
+			'iframed-enqueue-block-assets-script',
+			plugin_dir_url( __FILE__ ) . 'iframed-enqueue-block-assets/script.js',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-enqueue-block-assets/script.js' )
+		);
+		wp_localize_script(
+			'iframed-enqueue-block-assets-script',
+			'iframedEnqueueBlockAssetsL10n',
+			array(
+				'test' => 'Iframed Enqueue Block Assets!',
+			)
+		);
 	}
 );

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

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

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

@@ -0,0 +1,93 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-style`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+
+<div data-wp-interactive>
+	<button
+		data-wp-on--click="actions.toggleColor"
+		data-testid="toggle color"
+	>
+		Toggle Color
+	</button>
+
+	<button
+		data-wp-on--click="actions.switchColorToFalse"
+		data-testid="switch color to false"
+	>
+		Switch Color to False
+	</button>
+
+	<div
+		style="color: red; background: green;"
+		data-wp-style--color="state.color"
+		data-testid="dont change style if callback returns same value on hydration"
+	>Don't change style if callback returns same value on hydration</div>
+
+	<div
+		style="color: blue; background: green;"
+		data-wp-style--color="state.falseValue"
+		data-testid="remove style if callback returns falsy value on hydration"
+	>Remove style if callback returns falsy value on hydration</div>
+
+	<div
+		style="color: blue; background: green;"
+		data-wp-style--color="state.color"
+		data-testid="change style if callback returns a new value on hydration"
+	>Change style if callback returns a new value on hydration</div>
+
+	<div
+		style="color: blue; background: green; border: 1px solid black"
+		data-wp-style--color="state.falseValue"
+		data-wp-style--background="state.color"
+		data-wp-style--border="state.border"
+		data-testid="handles multiple styles and callbacks on hydration"
+	>Handles multiple styles and callbacks on hydration</div>
+
+	<div
+		data-wp-style--color="state.color"
+		data-testid="can add style when style attribute is missing on hydration"
+	>Can add style when style attribute is missing on hydration</div>
+
+	<div
+		style="color: red;"
+		data-wp-style--color="state.color"
+		data-testid="can toggle style"
+	>Can toggle style</div>
+
+	<div
+		style="color: red;"
+		data-wp-style--color="state.color"
+		data-testid="can remove style"
+	>Can remove style</div>
+
+	<div
+		style="color: blue; background: green; border: 1px solid black;"
+		data-wp-style--background="state.color"
+		data-testid="can toggle style in the middle"
+	>Can toggle style in the middle</div>
+
+	<div
+		style="background-color: green;"
+		data-wp-style--background-color="state.color"
+		data-testid="handles styles names with hyphens"
+	>Handles styles names with hyphens</div>
+
+	<div data-wp-context='{ "color": "blue" }'>
+		<div
+			style="color: blue;"
+			data-wp-style--color="context.color"
+			data-testid="can use context values"
+		></div>
+		<button
+			data-wp-on--click="actions.toggleContext"
+			data-testid="toggle context"
+		>
+			Toggle context
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,22 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			falseValue: false,
+			color: "red",
+			border: "2px solid yellow"
+		},
+		actions: {
+			toggleColor: ( { state } ) => {
+				state.color = state.color === "red" ? "blue" : "red";
+			},
+			switchColorToFalse: ({ state }) => {
+				state.color = false;
+			},
+			toggleContext: ( { context } ) => {
+				context.color = context.color === "red" ? "blue" : "red";
+			},
+		},
+	} );
+} )( window );

package/specs/editor/plugins/__snapshots__/container-blocks.test.js.snap

@@ -22,10 +22,11 @@ exports[`InnerBlocks Template Sync Ensures blocks without locking are kept intac
 <p class="has-large-font-size">Content…</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:paragraph -->
-<p>added paragraph</p>
-<!-- /wp:paragraph -->
-<!-- /wp:test/test-inner-blocks-no-locking -->"
+			<!-- wp:paragraph -->
+			<p>added paragraph</p>
+			<!-- /wp:paragraph -->
+		<!-- /wp:test/test-inner-blocks-no-locking -->
+"
 `;
 
 exports[`InnerBlocks Template Sync Removes blocks that are not expected by the template if a lock all exists 1`] = `

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

@@ -32,6 +32,7 @@ describe( 'iframed inline styles', () => {
 	} );
 
 	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' )
@@ -40,5 +41,11 @@ describe( 'iframed inline styles', () => {
 		expect( await getComputedStyle( canvas(), 'body', 'padding' ) ).toBe(
 			'20px'
 		);
+
+		expect(
+			await canvas().evaluate( () => ( { ...document.body.dataset } ) )
+		).toEqual( {
+			iframedEnqueueBlockAssetsL10n: 'Iframed Enqueue Block Assets!',
+		} );
 	} );
 } );

package/specs/editor/various/publish-button.test.js

@@ -43,19 +43,4 @@ describe( 'PostPublishButton', () => {
 			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
 		).not.toBeNull();
 	} );
-
-	it( 'should be disabled when metabox is being saved', async () => {
-		await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
-		expect(
-			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
-		).toBeNull();
-
-		await page.evaluate( () => {
-			window.wp.data.dispatch( 'core/edit-post' ).requestMetaBoxUpdates();
-			return true;
-		} );
-		expect(
-			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
-		).not.toBeNull();
-	} );
 } );

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

@@ -23,8 +23,6 @@ const reusableBlockNameInputSelector =
 	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
-const syncToggleSelector =
-	'.reusable-blocks-menu-items__convert-modal .components-form-toggle__input';
 const syncToggleSelectorChecked =
 	'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
 
@@ -205,14 +203,12 @@ describe( 'Reusable blocks', () => {
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Multi-selection reusable block' );
-		const syncToggle = await page.waitForSelector( syncToggleSelector );
-		syncToggle.click();
 		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
 
 		// Wait for creation to finish.
 		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[text()="Synced Pattern created."]'
+			'//*[contains(@class, "components-snackbar")]/*[contains(text(),"Pattern created:")]'
 		);
 
 		await clearAllBlocks();
@@ -352,7 +348,7 @@ describe( 'Reusable blocks', () => {
 		expect( reusableBlockWithParagraph ).toBeTruthy();
 
 		// Convert back to regular blocks.
-		await clickBlockToolbarButton( 'Select Pattern' );
+		await clickBlockToolbarButton( 'Select Edited block' );
 		await clickBlockToolbarButton( 'Detach pattern' );
 		await page.waitForXPath( selector, {
 			hidden: true,
@@ -389,8 +385,6 @@ describe( 'Reusable blocks', () => {
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Block with styles' );
-		const syncToggle = await page.waitForSelector( syncToggleSelector );
-		syncToggle.click();
 		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
 		const reusableBlock = await canvas().waitForSelector(

package/specs/site-editor/multi-entity-saving.test.js

@@ -12,8 +12,6 @@ import {
 	activateTheme,
 	clickButton,
 	createReusableBlock,
-	visitSiteEditor,
-	enterEditMode,
 	deleteAllTemplates,
 	canvas,
 } from '@wordpress/e2e-test-utils';
@@ -239,104 +237,4 @@ describe( 'Multi-entity save flow', () => {
 			expect( checkboxInputs ).toHaveLength( 1 );
 		} );
 	} );
-
-	describe( 'Site Editor', () => {
-		// Selectors - Site editor specific.
-		const saveSiteSelector = '.edit-site-save-button__button';
-		const activeSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=false]`;
-		const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`;
-		const saveA11ySelector = '.edit-site-editor__toggle-save-panel-button';
-
-		const saveAllChanges = async () => {
-			// Clicking button should open panel with boxes checked.
-			await page.click( activeSaveSiteSelector );
-			await page.waitForSelector( savePanelSelector );
-			await assertAllBoxesChecked();
-
-			// Save a11y button should not be present with save panel open.
-			await assertExistence( saveA11ySelector, false );
-
-			// Saving should result in items being saved.
-			await page.click( entitiesSaveSelector );
-		};
-
-		it( 'Save flow should work as expected', async () => {
-			// Navigate to site editor.
-			await visitSiteEditor( {
-				postId: 'emptytheme//index',
-				postType: 'wp_template',
-			} );
-
-			await enterEditMode();
-
-			// Select the header template part via list view.
-			await page.click( '.edit-site-header-edit-mode__list-view-toggle' );
-			const headerTemplatePartListViewButton = await page.waitForXPath(
-				'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "header")]'
-			);
-			headerTemplatePartListViewButton.click();
-			await page.click( 'button[aria-label="Close"]' );
-
-			// Insert something to dirty the editor.
-			await insertBlock( 'Paragraph' );
-
-			const enabledButton = await page.waitForSelector(
-				activeSaveSiteSelector
-			);
-
-			// Should be enabled after edits.
-			expect( enabledButton ).not.toBeNull();
-
-			// Save a11y button should be present.
-			await assertExistence( saveA11ySelector, true );
-
-			// Save all changes.
-			await saveAllChanges();
-
-			const disabledButton = await page.waitForSelector(
-				disabledSaveSiteSelector
-			);
-			expect( disabledButton ).not.toBeNull();
-		} );
-
-		it( 'Save flow should allow re-saving after changing the same block attribute', async () => {
-			// Navigate to site editor.
-			await visitSiteEditor( {
-				postId: 'emptytheme//index',
-				postType: 'wp_template',
-			} );
-
-			await enterEditMode();
-
-			// Insert a paragraph at the bottom.
-			await insertBlock( 'Paragraph' );
-
-			// Open the block settings.
-			await page.click( 'button[aria-label="Settings"]' );
-
-			// Wait for the font size picker controls.
-			await page.waitForSelector(
-				'.components-font-size-picker__controls'
-			);
-
-			// Change the font size.
-			await page.click(
-				'.components-font-size-picker__controls button[aria-label="Small"]'
-			);
-
-			// Save all changes.
-			await saveAllChanges();
-
-			// Change the font size.
-			await page.click(
-				'.components-font-size-picker__controls button[aria-label="Medium"]'
-			);
-
-			// Assert that the save button has been re-enabled.
-			const saveButton = await page.waitForSelector(
-				activeSaveSiteSelector
-			);
-			expect( saveButton ).not.toBeNull();
-		} );
-	} );
 } );

package/specs/editor/various/adding-inline-tokens.test.js

@@ -1,80 +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 {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	clickBlockToolbarButton,
-	clickButton,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'adding inline tokens', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should insert inline image', async () => {
-		// Create a paragraph.
-		await clickBlockAppender();
-		await page.keyboard.type( 'a ' );
-
-		await clickBlockToolbarButton( 'More' );
-		await clickButton( 'Inline image' );
-
-		// Wait for media modal to appear and upload image.
-		// Wait for media modal to appear and upload image.
-		const inputElement = await page.waitForSelector(
-			'.media-modal .moxie-shim 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 );
-
-		// Wait for upload.
-		await page.waitForSelector(
-			`.media-modal li[aria-label="${ filename }"]`
-		);
-
-		// Insert the uploaded image.
-		await page.click( '.media-modal button.media-button-select' );
-
-		// Check the content.
-		const regex = new RegExp(
-			`<!-- wp:paragraph -->\\s*<p>a <img class="wp-image-\\d+" style="width:\\s*10px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?><\\/p>\\s*<!-- \\/wp:paragraph -->`
-		);
-		expect( await getEditedPostContent() ).toMatch( regex );
-
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await page.waitForSelector(
-			'.block-editor-format-toolbar__image-popover'
-		);
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.type( '20' );
-		await page.keyboard.press( 'Enter' );
-
-		// Check the content.
-		const regex2 = new RegExp(
-			`<!-- wp:paragraph -->\\s*<p>a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?><\\/p>\\s*<!-- \\/wp:paragraph -->`
-		);
-		expect( await getEditedPostContent() ).toMatch( regex2 );
-	} );
-} );