@wordpress/e2e-tests 7.2.0 → 7.3.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.3.0 (2023-04-26)
+
 ## 7.2.0 (2023-04-12)
 
 ## 7.1.0 (2023-03-29)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.2.0",
+	"version": "7.3.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.2.0",
-		"@wordpress/jest-console": "^7.2.0",
-		"@wordpress/jest-puppeteer-axe": "^6.2.0",
-		"@wordpress/scripts": "^26.2.0",
-		"@wordpress/url": "^3.32.0",
+		"@wordpress/e2e-test-utils": "^10.3.0",
+		"@wordpress/jest-console": "^7.3.0",
+		"@wordpress/jest-puppeteer-axe": "^6.3.0",
+		"@wordpress/scripts": "^26.3.0",
+		"@wordpress/url": "^3.33.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
+	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
 }

package/plugins/iframed-enqueue-block-assets/style.css

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied both on the front of your site and in the
+ * editor.
+ */
+body {
+	background-color: rgb(33, 117, 155) !important;
+	color: #fff !important;
+	padding: 2px !important;
+}

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

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed enqueue_block_assets
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-iframed-enqueue-block-assets
+ */
+
+add_action(
+	'enqueue_block_assets',
+	function() {
+		wp_enqueue_style(
+			'iframed-enqueue-block-assets',
+			plugin_dir_url( __FILE__ ) . 'iframed-enqueue-block-assets/style.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-enqueue-block-assets/style.css' )
+		);
+		wp_add_inline_style( 'iframed-enqueue-block-assets', 'body{padding:20px!important}' );
+	}
+);

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

@@ -0,0 +1,44 @@
+/**
+ * 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 () => {
+		// 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'
+		);
+	} );
+} );

package/specs/editor/various/navigable-toolbar.test.js

@@ -11,38 +11,12 @@ async function isInBlockToolbar() {
 	} );
 }
 
-describe.each( [
-	[ 'unified', true ],
-	[ 'contextual', false ],
-] )( 'block toolbar (%s: %p)', ( label, isUnifiedToolbar ) => {
+describe( 'Block Toolbar', () => {
 	beforeEach( async () => {
 		await createNewPost();
-
-		await page.evaluate( ( _isUnifiedToolbar ) => {
-			const { select, dispatch } = wp.data;
-			const isCurrentlyUnified =
-				select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' );
-			if ( isCurrentlyUnified !== _isUnifiedToolbar ) {
-				dispatch( 'core/edit-post' ).toggleFeature( 'fixedToolbar' );
-			}
-		}, isUnifiedToolbar );
 	} );
 
-	it( 'navigates in and out of toolbar by keyboard (Alt+F10, Escape)', async () => {
-		// Assumes new post focus starts in title. Create first new
-		// block by Enter.
-		await page.keyboard.press( 'Enter' );
-
-		// [TEMPORARY]: A new paragraph is not technically a block yet
-		// until starting to type within it.
-		await page.keyboard.type( 'Example' );
-
-		// Upward.
-		await pressKeyWithModifier( 'alt', 'F10' );
-		expect( await isInBlockToolbar() ).toBe( true );
-	} );
-
-	if ( ! isUnifiedToolbar ) {
+	describe( 'Contextual Toolbar', () => {
 		it( 'should not scroll page', async () => {
 			while (
 				await page.evaluate( () => {
@@ -74,5 +48,57 @@ describe.each( [
 
 			expect( scrollTopBefore ).toBe( scrollTopAfter );
 		} );
-	}
+
+		it( 'navigates into the toolbar by keyboard (Alt+F10)', async () => {
+			// Assumes new post focus starts in title. Create first new
+			// block by Enter.
+			await page.keyboard.press( 'Enter' );
+
+			// [TEMPORARY]: A new paragraph is not technically a block yet
+			// until starting to type within it.
+			await page.keyboard.type( 'Example' );
+
+			// Upward.
+			await pressKeyWithModifier( 'alt', 'F10' );
+
+			expect( await isInBlockToolbar() ).toBe( true );
+		} );
+	} );
+
+	describe( 'Unified Toolbar', () => {
+		beforeEach( async () => {
+			// Enable unified toolbar
+			await page.evaluate( () => {
+				const { select, dispatch } = wp.data;
+				const isCurrentlyUnified =
+					select( 'core/edit-post' ).isFeatureActive(
+						'fixedToolbar'
+					);
+				if ( ! isCurrentlyUnified ) {
+					dispatch( 'core/edit-post' ).toggleFeature(
+						'fixedToolbar'
+					);
+				}
+			} );
+		} );
+
+		it( 'navigates into the toolbar by keyboard (Alt+F10)', async () => {
+			// Assumes new post focus starts in title. Create first new
+			// block by Enter.
+			await page.keyboard.press( 'Enter' );
+
+			// [TEMPORARY]: A new paragraph is not technically a block yet
+			// until starting to type within it.
+			await page.keyboard.type( 'Example' );
+
+			// Upward.
+			await pressKeyWithModifier( 'alt', 'F10' );
+
+			expect(
+				await page.evaluate( () => {
+					return document.activeElement.getAttribute( 'aria-label' );
+				} )
+			).toBe( 'Show document tools' );
+		} );
+	} );
 } );

package/specs/editor/plugins/custom-post-types.test.js

@@ -1,81 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	publishPost,
-	findSidebarPanelWithTitle,
-	clickBlockAppender,
-} from '@wordpress/e2e-test-utils';
-
-const openPageAttributesPanel = async () => {
-	const openButton = await findSidebarPanelWithTitle( 'Page Attributes' );
-
-	// Get the classes from the panel.
-	const buttonClassName = await (
-		await openButton.getProperty( 'className' )
-	 ).jsonValue();
-
-	// Open the panel if needed.
-	if ( -1 === buttonClassName.indexOf( 'is-opened' ) ) {
-		await openButton.click();
-	}
-};
-
-describe( 'Test Custom Post Types', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-custom-post-types' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-custom-post-types' );
-	} );
-
-	it( 'should be able to create an hierarchical post without title support', async () => {
-		const PARENT_PAGE_INPUT =
-			'.editor-page-attributes__parent input:not([disabled])';
-		const SUGGESTION =
-			'.editor-page-attributes__parent .components-form-token-field__suggestion:first-child';
-
-		// Create a parent post.
-		await createNewPost( { postType: 'hierar-no-title' } );
-		await clickBlockAppender();
-		await page.keyboard.type( 'Parent Post' );
-		await publishPost();
-		// Create a post that is a child of the previously created post.
-		await createNewPost( { postType: 'hierar-no-title' } );
-		await openPageAttributesPanel();
-		await page.waitForSelector( PARENT_PAGE_INPUT );
-		await page.click( PARENT_PAGE_INPUT );
-		await page.waitForSelector( SUGGESTION );
-		const optionToSelect = await page.$( SUGGESTION );
-		const valueToSelect = await page.$eval(
-			SUGGESTION,
-			( element ) => element.textContent
-		);
-		await optionToSelect.click();
-		await clickBlockAppender();
-		await page.keyboard.type( 'Child Post' );
-		await publishPost();
-		// Reload the child post and verify it is still correctly selected as a child post.
-		await page.reload();
-		await page.waitForSelector( PARENT_PAGE_INPUT );
-		// Wait for the list of suggestions to fetch
-		// There should be a better way to do that.
-		await page.waitForFunction(
-			( [ value, inputSelector ] ) =>
-				document.querySelector( inputSelector ).value === value,
-			{},
-			[ valueToSelect, PARENT_PAGE_INPUT ]
-		);
-	} );
-	it( 'should create a cpt with a legacy block in its template without WSOD', async () => {
-		await createNewPost( { postType: 'leg_block_in_tpl' } );
-		await clickBlockAppender();
-		await page.keyboard.type( 'Hello there' );
-		await page.waitForSelector( '[data-type="core/embed"]' );
-		await publishPost();
-	} );
-} );