@wordpress/e2e-tests 2.5.13 → 2.5.17

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "2.5.13",
+	"version": "2.5.17",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,7 +26,7 @@
 		"@wordpress/e2e-test-utils": "^5.4.10",
 		"@wordpress/jest-console": "^4.1.1",
 		"@wordpress/jest-puppeteer-axe": "^3.1.1",
-		"@wordpress/scripts": "^19.2.2",
+		"@wordpress/scripts": "^19.2.4",
 		"@wordpress/url": "^3.3.1",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1081a28b2368fcebd9a14554fbd0e25eb33fbcb6"
+	"gitHead": "823b3225e81748f8febb808e780e2b71478bc854"
 }

package/specs/editor/plugins/iframed-inline-styles.test.js

@@ -57,11 +57,5 @@ describe( 'iframed inline styles', () => {
 		expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
 			'2px'
 		);
-
-		expect( console ).toHaveWarned(
-			`Stylesheet iframed-inline-styles-compat-style-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). <link rel="stylesheet" id="iframed-inline-styles-compat-style-css" href="http://localhost:8889/wp-content/plugins/gutenberg-test-plugins/iframed-inline-styles/compat-style.css?ver=1626189899" media="all">`
-		);
 	} );
 } );

package/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js

@@ -63,9 +63,5 @@ describe( 'iframed multiple block stylesheets', () => {
 		expect( await getComputedStyle( canvas(), 'background-color' ) ).toBe(
 			'rgb(0, 0, 0)'
 		);
-
-		// Skip warnings related to block-styles enqueing and the use of add_editor_style.
-		// The issue is tracked on https://github.com/WordPress/gutenberg/issues/33212.
-		expect( console ).toHaveWarned();
 	} );
 } );

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

@@ -84,8 +84,8 @@ describe( 'Multi-entity save flow', () => {
 			expect( multiSaveButton ).toBeNull();
 		};
 
-		it( 'Save flow should work as expected.', async () => {
-			await createNewPost();
+		// Template parts can't be used in posts, so this test needs to be rebuilt using perhaps reusable blocks.
+		it.skip( 'Save flow should work as expected.', async () => {
 			// Edit the page some.
 			await page.click( '.editor-post-title' );
 			await page.keyboard.type( 'Test Post...' );
@@ -250,6 +250,19 @@ describe( 'Multi-entity save flow', () => {
 		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 assertExistance( 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 siteEditor.visit( {
@@ -279,20 +292,55 @@ describe( 'Multi-entity save flow', () => {
 			// Save a11y button should be present.
 			await assertExistance( saveA11ySelector, true );
 
-			// Clicking button should open panel with boxes checked.
-			await page.click( activeSaveSiteSelector );
-			await page.waitForSelector( savePanelSelector );
-			await assertAllBoxesChecked();
+			// Save all changes.
+			await saveAllChanges();
 
-			// Save a11y button should not be present with save panel open.
-			await assertExistance( saveA11ySelector, false );
-
-			// Saving should result in items being saved.
-			await page.click( entitiesSaveSelector );
 			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 siteEditor.visit( {
+				postId: 'tt1-blocks//index',
+				postType: 'wp_template',
+			} );
+			await siteEditor.disableWelcomeGuide();
+
+			// Insert a paragraph at the bottom.
+			await insertBlock( 'Paragraph' );
+
+			// Open the block settings.
+			await page.click( 'button[aria-label="Settings"]' );
+
+			// Click on font size selector.
+			await page.click( 'button[aria-label="Font size"]' );
+
+			// Click on a different font size.
+			const extraSmallFontSize = await page.waitForXPath(
+				'//li[contains(text(), "Extra small")]'
+			);
+			await extraSmallFontSize.click();
+
+			// Save all changes.
+			await saveAllChanges();
+
+			// Click on font size selector again.
+			await page.click( 'button[aria-label="Font size"]' );
+
+			// Select another font size.
+			const normalFontSize = await page.waitForXPath(
+				'//li[contains(text(), "Normal")]'
+			);
+			await normalFontSize.click();
+
+			// Assert that the save button has been re-enabled.
+			const saveButton = await page.waitForSelector(
+				activeSaveSiteSelector
+			);
+			expect( saveButton ).not.toBeNull();
+		} );
 	} );
 } );

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

@@ -280,7 +280,8 @@ describe( 'Template Part', () => {
 		const confirmTitleButtonSelector =
 			'.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
 
-		it( 'Should insert new template part on creation', async () => {
+		// 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.

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

@@ -18,10 +18,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 +158,6 @@ describe( 'Widgets Customizer', () => {
 			name: 'My Search',
 			selector: '.widget-content *',
 		} ).toBeFound( findOptions );
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should open the inspector panel', async () => {
@@ -249,8 +243,6 @@ describe( 'Widgets Customizer', () => {
 		} ).toBeFound();
 
 		await expect( inspectorHeading ).not.toBeVisible();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should handle the inserter outer section', async () => {
@@ -358,8 +350,6 @@ describe( 'Widgets Customizer', () => {
 			name: 'Add a block',
 			level: 2,
 		} ).not.toBeFound();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should move focus to the block', async () => {
@@ -455,8 +445,6 @@ describe( 'Widgets Customizer', () => {
 			text: 'First Heading',
 		} );
 		await expect( headingBlock ).toHaveFocus();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should clear block selection', async () => {
@@ -519,8 +507,6 @@ describe( 'Widgets Customizer', () => {
 			role: 'toolbar',
 			name: 'Block tools',
 		} ).not.toBeFound();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should handle legacy widgets', async () => {
@@ -699,8 +685,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 +744,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 () => {
@@ -851,8 +833,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();
+	} );
 } );
 
 /**