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

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();
+	} );
 } );
 
 /**

package/themes/style-variations/block-templates/index.html

@@ -0,0 +1,11 @@
+<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<div class="wp-block-query">
+	<!-- wp:post-template -->
+	<!-- wp:post-title {"isLink":true} /-->
+	<!-- wp:post-excerpt /-->
+	<!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
+<!-- wp:paragraph -->
+<p>My awesome paragraph</p>
+<!-- /wp:paragraph -->

package/themes/style-variations/style.css

@@ -0,0 +1,15 @@
+/*
+Theme Name: Style variations
+Theme URI: https://github.com/wordpress/theme-experiments/
+Author: the WordPress team
+Description: Style variations test theme.
+Requires at least: 5.3
+Tested up to: 5.5
+Requires PHP: 5.6
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: style-variations
+Style variations WordPress Theme, (C) 2021 WordPress.org
+Style variations is distributed under the terms of the GNU GPL.
+*/

package/themes/style-variations/styles/pink.json

@@ -0,0 +1,33 @@
+{
+	"version": 2,
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "foreground",
+					"color": "#4a074a",
+					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#ca69d3",
+					"name": "Background"
+				},
+				{
+					"slug": "awesome-pink",
+					"color": "#cc00ffc4",
+					"name": "Awesome pink"
+				}
+			]
+		}
+	},
+	"styles": {
+		"color": {
+			"background": "var(--wp--preset--color--background)",
+			"text": "var(--wp--preset--color--foreground)"
+		},
+		"typography": {
+			"fontSize": "var(--wp--preset--font-size--medium)"
+		}
+	}
+}

package/themes/style-variations/styles/yellow.json

@@ -0,0 +1,12 @@
+{
+	"version": 2,
+	"styles": {
+		"color": {
+			"background": "#ffef0b",
+			"text": "#191911"
+		},
+		"typography": {
+			"fontSize": "15px"
+		}
+	}
+}

package/themes/style-variations/theme.json

@@ -0,0 +1,8 @@
+{
+	"version": 2,
+	"styles": {
+		"color": {
+			"background": "red"
+		}
+	}
+}

package/config/gutenberg-phase.js

@@ -1,9 +0,0 @@
-global.process.env = {
-	...global.process.env,
-	// Inject the `GUTENBERG_PHASE` global, used for feature flagging.
-	// eslint-disable-next-line @wordpress/gutenberg-phase
-	GUTENBERG_PHASE: parseInt(
-		process.env.npm_package_config_GUTENBERG_PHASE,
-		10
-	),
-};

package/specs/editor/various/__snapshots__/style-variation.test.js.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`adding blocks Should switch to the large style of the quote block 1`] = `
-"<!-- wp:quote {\\"className\\":\\"is-style-large\\"} -->
-<blockquote class=\\"wp-block-quote is-style-large\\"><p>Quote content</p></blockquote>
-<!-- /wp:quote -->"
-`;

package/specs/site-editor/utils.js

@@ -1,153 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addQueryArgs } from '@wordpress/url';
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
-
-export const navigationPanel = {
-	async open() {
-		const isOpen = !! ( await page.$(
-			'.edit-site-navigation-toggle.is-open'
-		) );
-
-		if ( ! isOpen ) {
-			await page.click( '.edit-site-navigation-toggle__button' );
-			await page.waitForSelector( '.edit-site-navigation-panel' );
-		}
-	},
-
-	async close() {
-		const isOpen = !! ( await page.$(
-			'.edit-site-navigation-toggle.is-open'
-		) );
-
-		if ( isOpen ) {
-			await page.click( '.edit-site-navigation-toggle__button' );
-		}
-	},
-
-	async isRoot() {
-		const isBackToDashboardButtonVisible = !! ( await page.$(
-			'.edit-site-navigation-panel .edit-site-navigation-panel__back-to-dashboard'
-		) );
-
-		return isBackToDashboardButtonVisible;
-	},
-
-	async back() {
-		await page.click( '.components-navigation__back-button' );
-	},
-
-	async navigate( menus ) {
-		if ( ! Array.isArray( menus ) ) {
-			menus = [ menus ];
-		}
-
-		for ( const menu of menus ) {
-			( await this.getItemByText( menu ) ).click();
-		}
-	},
-
-	async backToRoot() {
-		while ( ! ( await this.isRoot() ) ) {
-			await this.back();
-		}
-	},
-
-	async getItemByText( text ) {
-		const item = await page.waitForXPath(
-			`//div[contains(@class, "edit-site-navigation-panel")]//button[.//*[text()="${ text }"]]`,
-			{ visible: true }
-		);
-		return item;
-	},
-
-	async clickItemByText( text ) {
-		const item = await this.getItemByText( text );
-		await item.click();
-	},
-};
-
-export const siteEditor = {
-	async visit( query ) {
-		query = addQueryArgs( '', {
-			page: 'gutenberg-edit-site',
-			...query,
-		} ).slice( 1 );
-		await visitAdminPage( 'themes.php', query );
-		await page.waitForSelector( '.edit-site-visual-editor iframe' );
-	},
-
-	async toggleMoreMenu() {
-		// eslint-disable-next-line jest/no-standalone-expect
-		await expect( page ).toClick(
-			'.edit-site-more-menu [aria-label="More tools & options"]'
-		);
-	},
-
-	async clickOnMoreMenuItem( buttonLabel ) {
-		await this.toggleMoreMenu();
-		const moreMenuContainerSelector =
-			'//*[contains(concat(" ", @class, " "), " edit-site-more-menu__content ")]';
-		const elementToClick = (
-			await page.$x(
-				`${ moreMenuContainerSelector }//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ buttonLabel }")]`
-			)
-		 )[ 0 ];
-
-		await elementToClick.click();
-	},
-
-	async getEditedPostContent() {
-		return page.evaluate( async () => {
-			const postId = window.wp.data
-				.select( 'core/edit-site' )
-				.getEditedPostId();
-			const postType = window.wp.data
-				.select( 'core/edit-site' )
-				.getEditedPostType();
-			const record = window.wp.data
-				.select( 'core' )
-				.getEditedEntityRecord( 'postType', postType, postId );
-			if ( record ) {
-				if ( typeof record.content === 'function' ) {
-					return record.content( record );
-				} else if ( record.blocks ) {
-					return window.wp.blocks.__unstableSerializeAndClean(
-						record.blocks
-					);
-				} else if ( record.content ) {
-					return record.content;
-				}
-			}
-			return '';
-		} );
-	},
-
-	async disableWelcomeGuide() {
-		const isWelcomeGuideActive = await page.evaluate( () =>
-			wp.data.select( 'core/edit-site' ).isFeatureActive( 'welcomeGuide' )
-		);
-		const isWelcomeGuideStyesActive = await page.evaluate( () =>
-			wp.data
-				.select( 'core/edit-site' )
-				.isFeatureActive( 'welcomeGuideStyles' )
-		);
-
-		if ( isWelcomeGuideActive ) {
-			await page.evaluate( () =>
-				wp.data
-					.dispatch( 'core/edit-site' )
-					.toggleFeature( 'welcomeGuide' )
-			);
-		}
-
-		if ( isWelcomeGuideStyesActive ) {
-			await page.evaluate( () =>
-				wp.data
-					.dispatch( 'core/edit-site' )
-					.toggleFeature( 'welcomeGuideStyles' )
-			);
-		}
-	},
-};