@wordpress/e2e-tests 7.9.0 → 7.11.0

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/__snapshots__/inserting-blocks.test.js.snap

@@ -88,8 +88,8 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:cover {"isDark":false,"layout":{"type":"constrained"}} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
+<!-- wp:cover {"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
 <!-- /wp:cover -->
 
 <!-- wp:heading -->

package/specs/editor/various/__snapshots__/rich-text.test.js.snap

@@ -24,6 +24,16 @@ exports[`RichText should apply multiple formats when selection is collapsed 1`]
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should copy/paste heading 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">Heading</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Heading</h2>
+<!-- /wp:heading -->"
+`;
+
 exports[`RichText should handle Home and End keys 1`] = `
 "<!-- wp:paragraph -->
 <p>-<strong>12</strong>+</p>
@@ -129,7 +139,11 @@ exports[`RichText should paste paragraph contents into list 1`] = `
 
 <!-- wp:list -->
 <ul><!-- wp:list-item -->
-<li>1<br>2</li>
+<li>1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>2</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
 `;

package/specs/editor/various/block-editor-keyboard-shortcuts.test.js

@@ -90,9 +90,9 @@ describe( 'block editor keyboard shortcuts', () => {
 		} );
 		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Create pattern/reusable block' );
+			await clickMenuItem( 'Create pattern' );
 			const reusableBlockNameInputSelector =
-				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+				'.patterns-menu-items__convert-modal .components-text-control__input';
 			const nameInput = await page.waitForSelector(
 				reusableBlockNameInputSelector
 			);
@@ -102,7 +102,7 @@ describe( 'block editor keyboard shortcuts', () => {
 			await page.keyboard.press( 'ArrowLeft' );
 			await page.keyboard.press( 'Delete' );
 			await clickOnCloseModalButton(
-				'.reusable-blocks-menu-items__convert-modal'
+				'.patterns-menu-items__convert-modal'
 			);
 			expect( await getEditedPostContent() ).toMatchSnapshot();
 		} );

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

@@ -20,11 +20,11 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
-	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+	'.patterns-menu-items__convert-modal .components-text-control__input';
 const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
 const syncToggleSelectorChecked =
-	'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
+	'.patterns-menu-items__convert-modal .components-form-toggle.is-checked';
 
 const saveAll = async () => {
 	const publishButtonSelector =
@@ -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().$(
@@ -195,7 +196,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert block to a reusable block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern/reusable block' );
+		await clickMenuItem( 'Create pattern' );
 
 		// Set title.
 		const nameInput = await page.waitForSelector(
@@ -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,
 		} );
@@ -379,7 +382,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert to reusable.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern/reusable block' );
+		await clickMenuItem( 'Create pattern' );
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);

package/specs/editor/various/rich-text.test.js

@@ -556,4 +556,15 @@ describe( 'RichText', () => {
 		// Expect: <strong>1</strong>-<em>2</em>
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	test( 'should copy/paste heading', async () => {
+		await insertBlock( 'Heading' );
+		await page.keyboard.type( 'Heading' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await pressKeyWithModifier( 'primary', 'c' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Enter' );
+		await pressKeyWithModifier( 'primary', 'v' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

package/specs/experiments/blocks/post-comments-form.test.js

@@ -11,7 +11,7 @@ import {
 	canvas,
 } from '@wordpress/e2e-test-utils';
 
-describe( 'Post Comments Form', () => {
+describe( 'Comments Form', () => {
 	let previousCommentStatus;
 
 	beforeAll( async () => {
@@ -42,7 +42,7 @@ describe( 'Post Comments Form', () => {
 			await enterEditMode();
 
 			// Insert post comments form
-			await insertBlock( 'Post Comments Form' );
+			await insertBlock( 'Comments Form' );
 
 			// Ensure the placeholder is there
 			await expect( canvas() ).toMatchElement(

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.',
 			} );
 		} );
 	} );