@wordpress/e2e-tests 2.5.14 → 3.0.0

package/specs/site-editor/template-part.test.js

@@ -2,9 +2,7 @@
  * WordPress dependencies
  */
 import {
-	createNewPost,
 	insertBlock,
-	disablePrePublishChecks,
 	trashAllPosts,
 	activateTheme,
 	getAllBlocks,
@@ -23,7 +21,7 @@ const templatePartNameInput =
 
 describe( 'Template Part', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );
@@ -42,7 +40,7 @@ describe( 'Template Part', () => {
 		async function navigateToHeader() {
 			// Switch to editing the header template part.
 			await siteEditor.visit( {
-				postId: 'tt1-blocks//header',
+				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
 			} );
 		}
@@ -63,7 +61,7 @@ describe( 'Template Part', () => {
 
 			// Switch back to the Index template.
 			await siteEditor.visit( {
-				postId: 'tt1-blocks//index',
+				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
 		}
@@ -95,12 +93,9 @@ describe( 'Template Part', () => {
 			expect( paragraphInTemplatePart ).not.toBeNull();
 		}
 
-		async function awaitHeaderAndFooterLoad() {
+		async function awaitHeaderLoad() {
 			await canvas().waitForSelector(
-				'.wp-block-template-part.site-header.block-editor-block-list__layout'
-			);
-			await canvas().waitForSelector(
-				'.wp-block-template-part.site-footer.block-editor-block-list__layout'
+				'header.wp-block-template-part.block-editor-block-list__layout'
 			);
 		}
 
@@ -174,7 +169,7 @@ describe( 'Template Part', () => {
 		} );
 
 		it( 'Should convert selected block to template part', async () => {
-			await awaitHeaderAndFooterLoad();
+			await awaitHeaderLoad();
 			const initialTemplateParts = await canvas().$$(
 				'.wp-block-template-part'
 			);
@@ -212,7 +207,7 @@ describe( 'Template Part', () => {
 		} );
 
 		it( 'Should convert multiple selected blocks to template part', async () => {
-			await awaitHeaderAndFooterLoad();
+			await awaitHeaderLoad();
 			const initialTemplateParts = await canvas().$$(
 				'.wp-block-template-part'
 			);
@@ -260,73 +255,94 @@ describe( 'Template Part', () => {
 				finalTemplateParts.length - initialTemplateParts.length
 			).toBe( 1 );
 		} );
-	} );
-
-	describe( 'Template part placeholder', () => {
-		// Test constants for template part.
-		const testContent = 'some words...';
-
-		// Selectors
-		const entitiesSaveSelector =
-			'.editor-entities-saved-states__save-button';
-		const savePostSelector = '.editor-post-publish-button__button';
-		const templatePartSelector = '*[data-type="core/template-part"]';
-		const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
-		const testContentSelector = `//p[contains(., "${ testContent }")]`;
-		const createNewButtonSelector =
-			'//button[contains(text(), "New template part")]';
-		const chooseExistingButtonSelector =
-			'//button[contains(text(), "Choose existing")]';
-		const confirmTitleButtonSelector =
-			'.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
-
-		// Template parts can't be used in posts, so this test needs to be rebuilt for the template editor.
-		it.skip( 'Should insert new template part on creation', async () => {
-			await createNewPost();
-			await disablePrePublishChecks();
-			// Create new template part.
-			await insertBlock( 'Template Part' );
-			await page.waitForXPath( chooseExistingButtonSelector );
-			const [ createNewButton ] = await page.$x(
-				createNewButtonSelector
-			);
-			await createNewButton.click();
-			const confirmTitleButton = await page.waitForSelector(
-				confirmTitleButtonSelector
-			);
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.type( 'Create New' );
-			await confirmTitleButton.click();
-
-			const newTemplatePart = await page.waitForSelector(
-				activatedTemplatePartSelector
-			);
-			expect( newTemplatePart ).toBeTruthy();
-
-			// Finish creating template part, insert some text, and save.
-			await page.click( '.block-editor-button-block-appender' );
-			await page.click( '.editor-block-list-item-paragraph' );
-			await page.keyboard.type( testContent );
-			await page.click( savePostSelector );
-			await page.click( entitiesSaveSelector );
-
-			await createNewPost();
-			// Try to insert the template part we created.
-			await insertBlock( 'Template Part' );
-			const chooseExistingButton = await page.waitForXPath(
-				chooseExistingButtonSelector
-			);
-			await chooseExistingButton.click();
-			const preview = await page.waitForSelector(
-				'[aria-label="Create New"]'
-			);
-			await preview.click();
-			await page.waitForSelector( activatedTemplatePartSelector );
-			const templatePartContent = await page.waitForXPath(
-				testContentSelector
-			);
-			expect( templatePartContent ).toBeTruthy();
+		describe( 'Template part placeholder', () => {
+			// Test constants for template part.
+			const testContent = 'some words...';
+
+			// Selectors
+			const entitiesSaveSelector =
+				'.editor-entities-saved-states__save-button';
+			const savePostSelector = '.edit-site-save-button__button';
+			const templatePartSelector = '*[data-type="core/template-part"]';
+			const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
+			const createNewButtonSelector =
+				'//button[contains(text(), "New template part")]';
+			const chooseExistingButtonSelector =
+				'//button[contains(text(), "Choose existing")]';
+			const confirmTitleButtonSelector =
+				'.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
+
+			it( 'Should insert new template part on creation', async () => {
+				let siteEditorCanvas = canvas();
+				await awaitHeaderLoad();
+
+				// Create new template part.
+				await insertBlock( 'Template Part' );
+				await siteEditorCanvas.waitForXPath(
+					chooseExistingButtonSelector
+				);
+				const [ createNewButton ] = await siteEditorCanvas.$x(
+					createNewButtonSelector
+				);
+				await createNewButton.click();
+				const confirmTitleButton = await page.waitForSelector(
+					confirmTitleButtonSelector
+				);
+				await page.keyboard.press( 'Tab' );
+				await page.keyboard.press( 'Tab' );
+				await page.keyboard.type( 'Create New' );
+				await confirmTitleButton.click();
+
+				const newTemplatePart = await siteEditorCanvas.waitForSelector(
+					activatedTemplatePartSelector
+				);
+				expect( newTemplatePart ).toBeTruthy();
+
+				// Finish creating template part, insert some text, and save.
+				await siteEditorCanvas.waitForSelector(
+					'.block-editor-button-block-appender'
+				);
+				await siteEditorCanvas.click(
+					'.block-editor-button-block-appender'
+				);
+				await page.waitForSelector(
+					'.editor-block-list-item-paragraph'
+				);
+				await page.click( '.editor-block-list-item-paragraph' );
+				await page.keyboard.type( testContent );
+				await page.click( savePostSelector );
+				await page.click( entitiesSaveSelector );
+
+				// Reload the page so as the new template part is available in the existing template parts.
+				await siteEditor.visit();
+				siteEditorCanvas = canvas();
+				await awaitHeaderLoad();
+				// Try to insert the template part we created.
+				await insertBlock( 'Template Part' );
+				const chooseExistingButton = await siteEditorCanvas.waitForXPath(
+					chooseExistingButtonSelector
+				);
+				await chooseExistingButton.click();
+				await page.waitForSelector(
+					'.wp-block-template-part__selection-preview-container'
+				);
+				const preview = await page.waitForSelector(
+					'.wp-block-template-part__selection-preview-item[aria-label="Create New"]'
+				);
+				await preview.click();
+				// We now have the same template part two times in the page, so check accordingly.
+				const paragraphs = await siteEditorCanvas.$$eval(
+					'[data-type="core/template-part"] > p:first-child',
+					( options ) =>
+						options.map( ( option ) => option.textContent )
+				);
+				expect( paragraphs ).toHaveLength( 2 );
+				expect(
+					paragraphs.every(
+						( paragraph ) => paragraph === testContent
+					)
+				).toBeTruthy();
+			} );
 		} );
 	} );
 } );

package/specs/site-editor/template-revert.test.js

@@ -22,29 +22,31 @@ const {
 	disableWelcomeGuide,
 } = siteEditor;
 
-const assertSaveButtonIsDisabled = () =>
+const assertSaveButtonIsDisabled = async () =>
 	page.waitForSelector(
 		'.edit-site-save-button__button[aria-disabled="true"]'
 	);
 
-const assertSaveButtonIsEnabled = () =>
+const assertSaveButtonIsEnabled = async () =>
 	page.waitForSelector(
 		'.edit-site-save-button__button[aria-disabled="false"]'
 	);
 
-const waitForNotice = () => page.waitForSelector( '.components-snackbar' );
-
 const clickButtonInNotice = async () => {
 	const selector = '.components-snackbar button';
 	await page.waitForSelector( selector );
 	await page.click( selector );
 };
 
-const clickUndoInHeaderToolbar = () =>
+const clickUndoInHeaderToolbar = async () =>
 	page.click( '.edit-site-header__toolbar button[aria-label="Undo"]' );
 
-const clickRedoInHeaderToolbar = () =>
-	page.click( '.edit-site-header__toolbar button[aria-label="Redo"]' );
+const clickRedoInHeaderToolbar = async () => {
+	await page.waitForSelector(
+		'.edit-site-header__toolbar button[aria-label="Redo"][aria-disabled="false"]'
+	);
+	return page.click( '.edit-site-header__toolbar button[aria-label="Redo"]' );
+};
 
 const undoRevertInHeaderToolbar = async () => {
 	await clickUndoInHeaderToolbar();
@@ -72,7 +74,9 @@ const save = async () => {
 const revertTemplate = async () => {
 	await page.click( '.edit-site-document-actions__get-info' );
 	await page.click( '.edit-site-template-details__revert-button' );
-	await waitForNotice();
+	await page.waitForXPath(
+		'//*[contains(@class, "components-snackbar") and contains(text(), "Template reverted")]'
+	);
 	await assertSaveButtonIsEnabled();
 };
 
@@ -89,7 +93,7 @@ const assertTemplatesAreDeleted = async () => {
 
 describe( 'Template Revert', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );

package/specs/widgets/customizing-widgets.test.js

@@ -10,6 +10,7 @@ import {
 	clickBlockToolbarButton,
 	deleteAllWidgets,
 	createURL,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -18,10 +19,6 @@ import {
 // eslint-disable-next-line no-restricted-imports
 import { find, findAll } from 'puppeteer-testing-library';
 
-const twentyTwentyError = `Stylesheet twentytwenty-block-editor-styles-css was not properly added.
-For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
-For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`;
-
 describe( 'Widgets Customizer', () => {
 	beforeEach( async () => {
 		await deleteAllWidgets();
@@ -162,8 +159,6 @@ describe( 'Widgets Customizer', () => {
 			name: 'My Search',
 			selector: '.widget-content *',
 		} ).toBeFound( findOptions );
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should open the inspector panel', async () => {
@@ -194,7 +189,7 @@ describe( 'Widgets Customizer', () => {
 
 		const backButton = await find( {
 			role: 'button',
-			name: 'Back',
+			name: /Back/,
 			focused: true,
 		} );
 		await expect( backButton ).toHaveFocus();
@@ -249,8 +244,6 @@ describe( 'Widgets Customizer', () => {
 		} ).toBeFound();
 
 		await expect( inspectorHeading ).not.toBeVisible();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should handle the inserter outer section', async () => {
@@ -348,7 +341,7 @@ describe( 'Widgets Customizer', () => {
 		// Back to the widget areas panel.
 		const backButton = await find( {
 			role: 'button',
-			name: 'Back',
+			name: /Back/,
 		} );
 		await backButton.click();
 
@@ -358,8 +351,6 @@ describe( 'Widgets Customizer', () => {
 			name: 'Add a block',
 			level: 2,
 		} ).not.toBeFound();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should move focus to the block', async () => {
@@ -386,7 +377,7 @@ describe( 'Widgets Customizer', () => {
 		await page.keyboard.type( 'First Heading' );
 
 		// Navigate back to the parent panel.
-		const backButton = await find( { role: 'button', name: 'Back' } );
+		const backButton = await find( { role: 'button', name: /Back/ } );
 		await backButton.click();
 
 		await waitForPreviewIframe();
@@ -455,8 +446,6 @@ describe( 'Widgets Customizer', () => {
 			text: 'First Heading',
 		} );
 		await expect( headingBlock ).toHaveFocus();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should clear block selection', async () => {
@@ -519,8 +508,6 @@ describe( 'Widgets Customizer', () => {
 			role: 'toolbar',
 			name: 'Block tools',
 		} ).not.toBeFound();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should handle legacy widgets', async () => {
@@ -699,8 +686,6 @@ describe( 'Widgets Customizer', () => {
 			selector: '*[aria-live="polite"][aria-relevant="additions text"]',
 		} ).toBeFound();
 		await expect( paragraphBlock ).toBeVisible();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should move (inner) blocks to another sidebar', async () => {
@@ -760,8 +745,6 @@ describe( 'Widgets Customizer', () => {
 		await expect( movedParagraphBlockQuery ).toBeFound();
 		const movedParagraphBlock = await find( movedParagraphBlockQuery );
 		await expect( movedParagraphBlock ).toHaveFocus();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should not render Block Settings sections', async () => {
@@ -831,6 +814,9 @@ describe( 'Widgets Customizer', () => {
 		await showMoreSettingsButton.click();
 
 		// Change `drop cap` (Any change made in this section is sufficient; not required to be `drop cap`).
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const [ dropCapToggle ] = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);
@@ -851,8 +837,6 @@ describe( 'Widgets Customizer', () => {
 			name: 'Customizing ▸ Widgets ▸ Footer #1 Block Settings',
 			level: 3,
 		} );
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 } );
 

package/specs/widgets/editing-widgets.test.js

@@ -16,6 +16,7 @@ import {
 	openGlobalBlockInserter,
 	searchForBlock,
 	closeGlobalBlockInserter,
+	setBrowserViewport,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -25,10 +26,6 @@ import {
 import { find, findAll } from 'puppeteer-testing-library';
 import { groupBy, mapValues } from 'lodash';
 
-const twentyTwentyError = `Stylesheet twentytwenty-block-editor-styles-css was not properly added.
-For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
-For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`;
-
 describe( 'Widgets screen', () => {
 	beforeEach( async () => {
 		await visitWidgetsScreen();
@@ -232,8 +229,6 @@ describe( 'Widgets screen', () => {
 		</div></div>",
 		}
 	` );
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it.skip( 'Should insert content using the inline inserter', async () => {
@@ -601,8 +596,6 @@ describe( 'Widgets screen', () => {
 				initialSerializedWidgetAreas[ 'sidebar-1' ],
 			].join( '\n' )
 		);
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it.skip( 'Should display legacy widgets', async () => {
@@ -777,8 +770,6 @@ describe( 'Widgets screen', () => {
 		</div></div>",
 		}
 	` );
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'Allows widget deletion to be undone', async () => {
@@ -838,8 +829,6 @@ describe( 'Widgets screen', () => {
 		</div></div>",
 		}
 	` );
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'can toggle sidebar list view', async () => {
@@ -854,6 +843,41 @@ describe( 'Widgets screen', () => {
 		expect( listItems.length >= widgetAreas.length ).toEqual( true );
 		await closeListView();
 	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/38002.
+	it( 'allows blocks to be added on mobile viewports', async () => {
+		await setBrowserViewport( 'small' );
+		const [ firstWidgetArea ] = await findAll( {
+			role: 'document',
+			name: 'Block: Widget Area',
+		} );
+
+		const addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
+		await addParagraphBlock.click();
+
+		const addedParagraphBlockInFirstWidgetArea = await find(
+			{
+				name: /^Empty block/,
+				selector: '[data-block][data-type="core/paragraph"]',
+			},
+			{
+				root: firstWidgetArea,
+			}
+		);
+		await addedParagraphBlockInFirstWidgetArea.focus();
+		await page.keyboard.type( 'First Paragraph' );
+		const updatedParagraphBlockInFirstWidgetArea = await find(
+			{
+				name: 'Paragraph block',
+				value: 'First Paragraph',
+			},
+			{
+				root: firstWidgetArea,
+			}
+		);
+
+		expect( updatedParagraphBlockInFirstWidgetArea ).toBeTruthy();
+	} );
 } );
 
 /**