@wordpress/e2e-tests 2.5.9 → 3.0.1-next.33ec3857e2.0

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

@@ -7,6 +7,7 @@ import {
 	deactivatePlugin,
 	publishPost,
 	findSidebarPanelWithTitle,
+	clickBlockAppender,
 } from '@wordpress/e2e-test-utils';
 
 const openPageAttributesPanel = async () => {
@@ -40,7 +41,7 @@ describe( 'Test Custom Post Types', () => {
 
 		// Create a parent post.
 		await createNewPost( { postType: 'hierar-no-title' } );
-		await page.click( '.block-editor-writing-flow' );
+		await clickBlockAppender();
 		await page.keyboard.type( 'Parent Post' );
 		await publishPost();
 		// Create a post that is a child of the previously created post.
@@ -55,7 +56,7 @@ describe( 'Test Custom Post Types', () => {
 			( element ) => element.textContent
 		);
 		await optionToSelect.click();
-		await page.click( '.block-editor-writing-flow' );
+		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.
@@ -72,7 +73,7 @@ describe( 'Test Custom Post Types', () => {
 	} );
 	it( 'should create a cpt with a legacy block in its template without WSOD', async () => {
 		await createNewPost( { postType: 'leg_block_in_tpl' } );
-		await page.click( '.block-editor-writing-flow' );
+		await clickBlockAppender();
 		await page.keyboard.type( 'Hello there' );
 		await page.waitForSelector( '[data-type="core/embed"]' );
 		await publishPost();

package/specs/editor/various/adding-patterns.test.js

@@ -7,7 +7,7 @@ import {
 	getEditedPostContent,
 } from '@wordpress/e2e-test-utils';
 
-/** @typedef {import('puppeteer').ElementHandle} ElementHandle */
+/** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
 
 describe( 'adding patterns', () => {
 	beforeEach( async () => {

package/specs/editor/various/block-grouping.test.js

@@ -13,6 +13,7 @@ import {
 	getAvailableBlockTransforms,
 	activatePlugin,
 	deactivatePlugin,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 async function insertBlocksOfSameType() {
@@ -110,6 +111,35 @@ describe( 'Block Grouping', () => {
 			);
 			expect( ungroupButtons ).toHaveLength( 0 );
 		} );
+		it( 'should group and ungroup a controlled block properly', async () => {
+			const getParagraphText = async () => {
+				const paragraphInReusableSelector =
+					'.block-editor-block-list__block[data-type="core/block"] p';
+				await page.waitForSelector( paragraphInReusableSelector );
+				return page.$eval(
+					paragraphInReusableSelector,
+					( element ) => element.innerText
+				);
+			};
+
+			const paragraphText = 'hi';
+			await createReusableBlock( paragraphText, 'Block' );
+			// Group
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Group' );
+
+			let group = await page.$$( '[data-type="core/group"]' );
+			expect( group ).toHaveLength( 1 );
+			// Make sure the paragraph in reusable block exists.
+			expect( await getParagraphText() ).toMatch( paragraphText );
+
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Ungroup' );
+			group = await page.$$( '[data-type="core/group"]' );
+			expect( group ).toHaveLength( 0 );
+			// Make sure the paragraph in reusable block exists.
+			expect( await getParagraphText() ).toEqual( paragraphText );
+		} );
 	} );
 
 	describe( 'Grouping Block availability', () => {

package/specs/editor/various/block-hierarchy-navigation.test.js

@@ -51,7 +51,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
 			)
 		 )[ 0 ];
 		await columnsBlockMenuItem.click();
@@ -75,7 +75,7 @@ describe( 'Navigating the block hierarchy', () => {
 		// Navigate to the last column block.
 		const lastColumnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
 			)
 		 )[ 3 ];
 		await lastColumnsBlockMenuItem.click();
@@ -188,7 +188,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const groupMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
 			)
 		 )[ 0 ];
 		await groupMenuItem.click();

package/specs/editor/various/change-detection.test.js

@@ -10,6 +10,7 @@ import {
 	saveDraft,
 	openDocumentSettingsSidebar,
 	isCurrentURL,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Change detection', () => {
@@ -381,6 +382,10 @@ describe( 'Change detection', () => {
 
 		// Change the paragraph's `drop cap`.
 		await page.click( '[data-type="core/paragraph"]' );
+
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const [ dropCapToggle ] = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);

package/specs/editor/various/editor-modes.test.js

@@ -10,6 +10,7 @@ import {
 	switchEditorModeTo,
 	pressKeyTimes,
 	pressKeyWithModifier,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Editing modes (visual/HTML)', () => {
@@ -54,6 +55,9 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 		// The `drop cap` toggle for the paragraph block should appear, even in
 		// HTML editing mode.
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const dropCapToggle = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);
@@ -74,6 +78,9 @@ describe( 'Editing modes (visual/HTML)', () => {
 		expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );
 
 		// Change the `drop cap` using the sidebar.
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const [ dropCapToggle ] = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);

package/specs/editor/various/font-size-picker.test.js

@@ -8,6 +8,7 @@ import {
 	pressKeyWithModifier,
 	pressKeyTimes,
 	activateTheme,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 const openFontSizeSelectControl = async () => {
@@ -17,13 +18,6 @@ const openFontSizeSelectControl = async () => {
 	return selectControl.click();
 };
 
-const openTypographyToolsPanelMenu = async () => {
-	const toggleSelector =
-		"//div[contains(@class, 'typography-block-support-panel')]//button[contains(@class, 'components-dropdown-menu__toggle')]";
-	const toggle = await page.waitForXPath( toggleSelector );
-	return toggle.click();
-};
-
 const FONT_SIZE_TOGGLE_GROUP_SELECTOR =
 	"//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]";
 

package/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RichText should remove highlighting element 1`] = `
+"<!-- wp:paragraph -->
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`RichText should remove highlighting element 2`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->"
+`;

package/specs/editor/various/format-library/text-color.test.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	getEditedPostContent,
+	clickBlockAppender,
+	pressKeyWithModifier,
+	clickBlockToolbarButton,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'RichText', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'should remove highlighting element', async () => {
+		await clickBlockAppender();
+
+		// Add text and select to color.
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await clickBlockToolbarButton( 'More' );
+
+		const button = await page.waitForXPath(
+			`//button[text()='Highlight']`
+		);
+		// Clicks may fail if the button is out of view. Assure it is before click.
+		await button.evaluate( ( element ) => element.scrollIntoView() );
+		await button.click();
+
+		// Use a color name with multiple words to ensure that it becomes
+		// active. Previously we had a broken regular expression.
+		const option = await page.waitForSelector(
+			'[aria-label="Color: Cyan bluish gray"]'
+		);
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );

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

@@ -14,7 +14,7 @@ import {
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
-/** @typedef {import('puppeteer').ElementHandle} ElementHandle */
+/** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
 
 /**
  * Waits for all patterns in the inserter to have a height, which should
@@ -173,7 +173,7 @@ describe( 'Inserting blocks', () => {
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/9583
 	it( 'should not allow transfer of focus outside of the block-insertion menu once open', async () => {
 		// Enter the default block and click the inserter toggle button to the left of it.
-		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Enter' );
 		await showBlockToolbar();
 		await page.click(
 			'.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle'
@@ -243,6 +243,10 @@ describe( 'Inserting blocks', () => {
 		);
 		expect( selectedButtonBlocks.length ).toBe( 1 );
 
+		// The block appender is only visible when there's no selection.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
+		);
 		// Specifically click the root container appender.
 		await page.click(
 			'.block-editor-block-list__layout.is-root-container > .block-list-appender .block-editor-inserter__toggle'

package/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -155,6 +155,12 @@ describe( 'Order of block keyboard navigation', () => {
 				.focus();
 		} );
 
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await expect( await getActiveLabel() ).toBe( 'Add block' );
+
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await expect( await getActiveLabel() ).toBe( 'Add default block' );
+
 		await pressKeyWithModifier( 'shift', 'Tab' );
 		await expect( await getActiveLabel() ).toBe(
 			'Paragraph Block. Row 2. 1'

package/specs/editor/various/list-view.test.js

@@ -42,12 +42,12 @@ describe( 'List view', () => {
 		await pressKeyWithModifier( 'access', 'o' );
 
 		const paragraphBlock = await page.waitForXPath(
-			'//button[contains(., "Paragraph")][@draggable="true"]'
+			'//a[contains(., "Paragraph")][@draggable="true"]'
 		);
 
 		// Drag above the heading block
 		const headingBlock = await page.waitForXPath(
-			'//button[contains(., "Heading")][@draggable="true"]'
+			'//a[contains(., "Heading")][@draggable="true"]'
 		);
 
 		await dragAndDrop( paragraphBlock, headingBlock, -5 );

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

@@ -31,8 +31,8 @@ describe.each( [
 
 	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 ArrowDown.
-		await page.keyboard.press( 'ArrowDown' );
+		// block by Enter.
+		await page.keyboard.press( 'Enter' );
 
 		// [TEMPORARY]: A new paragraph is not technically a block yet
 		// until starting to type within it.

package/specs/editor/various/preview.test.js

@@ -14,7 +14,7 @@ import {
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
-/** @typedef {import('puppeteer').Page} Page */
+/** @typedef {import('puppeteer-core').Page} Page */
 
 /**
  * Given the Page instance for the editor, opens preview drodpdown, and

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

@@ -14,6 +14,7 @@ import {
 	toggleGlobalBlockInserter,
 	openDocumentSettingsSidebar,
 	saveDraft,
+	createReusableBlock,
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
@@ -44,32 +45,6 @@ const clearAllBlocks = async () => {
 	} );
 };
 
-const createReusableBlock = async ( content, title ) => {
-	// Insert a paragraph block
-	await insertBlock( 'Paragraph' );
-	await page.keyboard.type( content );
-
-	await clickBlockToolbarButton( 'Options' );
-	await clickMenuItem( 'Add to Reusable blocks' );
-	const nameInput = await page.waitForSelector(
-		reusableBlockNameInputSelector
-	);
-	await nameInput.click();
-	await page.keyboard.type( title );
-	await page.keyboard.press( 'Enter' );
-
-	// Wait for creation to finish
-	await page.waitForXPath(
-		'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
-	);
-
-	// Check that we have a reusable block on the page
-	const block = await page.waitForSelector(
-		'.block-editor-block-list__block[data-type="core/block"]'
-	);
-	expect( block ).not.toBeNull();
-};
-
 describe( 'Reusable blocks', () => {
 	afterAll( async () => {
 		await trashAllPosts( 'wp_block' );

package/specs/editor/various/writing-flow.test.js

@@ -45,9 +45,11 @@ const addParagraphsAndColumnsDemo = async () => {
 	await page.keyboard.press( 'Enter' ); // Insert paragraph.
 	await page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
 
-	// Arrow down from last of layouts exits nested context to default
-	// appender of root level.
-	await page.keyboard.press( 'ArrowDown' );
+	await page.keyboard.press( 'Escape' ); // Enter navigation mode
+	await page.keyboard.press( 'ArrowLeft' ); // move to the column block
+	await page.keyboard.press( 'ArrowLeft' ); // move to the columns block
+	await page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected
+	await page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
 	await page.keyboard.type( 'Second paragraph' );
 };
 
@@ -289,6 +291,8 @@ describe( 'Writing Flow', () => {
 		// See: https://github.com/WordPress/gutenberg/issues/9626
 
 		await insertBlock( 'Shortcode' );
+		await insertBlock( 'Paragraph' );
+		await await page.click( '.wp-block-shortcode' );
 
 		// Should remain in title upon ArrowRight:
 		await page.keyboard.press( 'ArrowRight' );
@@ -304,7 +308,7 @@ describe( 'Writing Flow', () => {
 		);
 		expect( isInShortcodeBlock ).toBe( true );
 
-		// Should navigate into blocks list upon ArrowDown:
+		// Should navigate to the next block.
 		await page.keyboard.press( 'ArrowDown' );
 		const isInParagraphBlock = await page.evaluate(
 			() => !! document.activeElement.closest( '.wp-block-paragraph' )

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

@@ -13,7 +13,7 @@ async function getDocumentSettingsTitle() {
 		'.edit-site-document-actions__title'
 	);
 
-	return titleElement.evaluate( ( el ) => el.innerText );
+	return titleElement.evaluate( ( el ) => el.textContent );
 }
 
 async function getDocumentSettingsSecondaryTitle() {
@@ -21,7 +21,7 @@ async function getDocumentSettingsSecondaryTitle() {
 		'.edit-site-document-actions__secondary-item'
 	);
 
-	return secondaryTitleElement.evaluate( ( el ) => el.innerText );
+	return secondaryTitleElement.evaluate( ( el ) => el.textContent );
 }
 
 describe( 'Document Settings', () => {
@@ -50,7 +50,7 @@ describe( 'Document Settings', () => {
 			// Evaluate the document settings title
 			const actual = await getDocumentSettingsTitle();
 
-			expect( actual ).toEqual( 'Index' );
+			expect( actual ).toEqual( 'Editing template: Index' );
 		} );
 
 		describe( 'and a template part is clicked in the template', () => {
@@ -60,7 +60,7 @@ describe( 'Document Settings', () => {
 					'.edit-post-header-toolbar__list-view-toggle'
 				);
 				const headerTemplatePartListViewButton = await page.waitForXPath(
-					'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
+					'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
 				);
 				headerTemplatePartListViewButton.click();
 				await page.click(
@@ -70,7 +70,7 @@ describe( 'Document Settings', () => {
 				// Evaluate the document settings secondary title
 				const actual = await getDocumentSettingsSecondaryTitle();
 
-				expect( actual ).toEqual( 'Header' );
+				expect( actual ).toEqual( 'Editing template part: header' );
 			} );
 		} );
 	} );
@@ -86,7 +86,7 @@ describe( 'Document Settings', () => {
 			// Evaluate the document settings title
 			const actual = await getDocumentSettingsTitle();
 
-			expect( actual ).toEqual( 'header' );
+			expect( actual ).toEqual( 'Editing template part: header' );
 		} );
 	} );
 } );