@wordpress/e2e-tests 3.0.2 → 3.0.6

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

@@ -9,13 +9,9 @@ import {
 	selectBlockByClientId,
 	clickBlockToolbarButton,
 	canvas,
+	visitSiteEditor,
 } from '@wordpress/e2e-test-utils';
 
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
-
 const templatePartNameInput =
 	'.edit-site-create-template-part-modal .components-text-control__input';
 
@@ -33,13 +29,12 @@ describe( 'Template Part', () => {
 
 	describe( 'Template part block', () => {
 		beforeEach( async () => {
-			await siteEditor.visit();
-			await siteEditor.disableWelcomeGuide();
+			await visitSiteEditor();
 		} );
 
 		async function navigateToHeader() {
 			// Switch to editing the header template part.
-			await siteEditor.visit( {
+			await visitSiteEditor( {
 				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
 			} );
@@ -60,7 +55,7 @@ describe( 'Template Part', () => {
 			);
 
 			// Switch back to the Index template.
-			await siteEditor.visit( {
+			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
@@ -314,7 +309,7 @@ describe( 'Template Part', () => {
 				await page.click( entitiesSaveSelector );
 
 				// Reload the page so as the new template part is available in the existing template parts.
-				await siteEditor.visit();
+				await visitSiteEditor();
 				siteEditorCanvas = canvas();
 				await awaitHeaderLoad();
 				// Try to insert the template part we created.

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

@@ -8,20 +8,11 @@ import {
 	switchUserToAdmin,
 	switchUserToTest,
 	visitAdminPage,
+	visitSiteEditor,
+	getCurrentSiteEditorContent,
 } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
-
-const {
-	visit: visitSiteEditor,
-	getEditedPostContent,
-	disableWelcomeGuide,
-} = siteEditor;
-
 const assertSaveButtonIsDisabled = async () =>
 	page.waitForSelector(
 		'.edit-site-save-button__button[aria-disabled="true"]'
@@ -105,7 +96,6 @@ describe( 'Template Revert', () => {
 	beforeEach( async () => {
 		await trashAllPosts( 'wp_template' );
 		await visitSiteEditor();
-		await disableWelcomeGuide();
 	} );
 
 	it( 'should delete the template after saving the reverted template', async () => {
@@ -118,19 +108,19 @@ describe( 'Template Revert', () => {
 	} );
 
 	it( 'should show the original content after revert', async () => {
-		const contentBefore = await getEditedPostContent();
+		const contentBefore = await getCurrentSiteEditorContent();
 
 		await addDummyText();
 		await save();
 		await revertTemplate();
 		await save();
 
-		const contentAfter = await getEditedPostContent();
+		const contentAfter = await getCurrentSiteEditorContent();
 		expect( contentBefore ).toBe( contentAfter );
 	} );
 
 	it( 'should show the original content after revert and page reload', async () => {
-		const contentBefore = await getEditedPostContent();
+		const contentBefore = await getCurrentSiteEditorContent();
 
 		await addDummyText();
 		await save();
@@ -138,38 +128,38 @@ describe( 'Template Revert', () => {
 		await save();
 		await visitSiteEditor();
 
-		const contentAfter = await getEditedPostContent();
+		const contentAfter = await getCurrentSiteEditorContent();
 		expect( contentBefore ).toBe( contentAfter );
 	} );
 
 	it( 'should show the edited content after revert and clicking undo in the header toolbar', async () => {
 		await addDummyText();
 		await save();
-		const contentBefore = await getEditedPostContent();
+		const contentBefore = await getCurrentSiteEditorContent();
 
 		await revertTemplate();
 		await save();
 		await undoRevertInHeaderToolbar();
 
-		const contentAfter = await getEditedPostContent();
+		const contentAfter = await getCurrentSiteEditorContent();
 		expect( contentBefore ).toBe( contentAfter );
 	} );
 
 	it( 'should show the edited content after revert and clicking undo in the notice', async () => {
 		await addDummyText();
 		await save();
-		const contentBefore = await getEditedPostContent();
+		const contentBefore = await getCurrentSiteEditorContent();
 
 		await revertTemplate();
 		await save();
 		await undoRevertInNotice();
 
-		const contentAfter = await getEditedPostContent();
+		const contentAfter = await getCurrentSiteEditorContent();
 		expect( contentBefore ).toBe( contentAfter );
 	} );
 
 	it( 'should show the original content after revert, clicking undo then redo in the header toolbar', async () => {
-		const contentBefore = await getEditedPostContent();
+		const contentBefore = await getCurrentSiteEditorContent();
 
 		await addDummyText();
 		await save();
@@ -178,12 +168,12 @@ describe( 'Template Revert', () => {
 		await undoRevertInHeaderToolbar();
 		await clickRedoInHeaderToolbar();
 
-		const contentAfter = await getEditedPostContent();
+		const contentAfter = await getCurrentSiteEditorContent();
 		expect( contentBefore ).toBe( contentAfter );
 	} );
 
 	it( 'should show the original content after revert, clicking undo in the notice then undo in the header toolbar', async () => {
-		const contentBefore = await getEditedPostContent();
+		const contentBefore = await getCurrentSiteEditorContent();
 
 		await addDummyText();
 		await save();
@@ -192,14 +182,14 @@ describe( 'Template Revert', () => {
 		await undoRevertInNotice();
 		await undoRevertInHeaderToolbar();
 
-		const contentAfter = await getEditedPostContent();
+		const contentAfter = await getCurrentSiteEditorContent();
 		expect( contentBefore ).toBe( contentAfter );
 	} );
 
 	it( 'should show the edited content after revert, clicking undo in the header toolbar, save and reload', async () => {
 		await addDummyText();
 		await save();
-		const contentBefore = await getEditedPostContent();
+		const contentBefore = await getCurrentSiteEditorContent();
 
 		await revertTemplate();
 		await save();
@@ -208,14 +198,14 @@ describe( 'Template Revert', () => {
 		await assertSaveButtonIsDisabled();
 		await visitSiteEditor();
 
-		const contentAfter = await getEditedPostContent();
+		const contentAfter = await getCurrentSiteEditorContent();
 		expect( contentBefore ).toBe( contentAfter );
 	} );
 
 	it( 'should show the edited content after revert, clicking undo in the notice and reload', async () => {
 		await addDummyText();
 		await save();
-		const contentBefore = await getEditedPostContent();
+		const contentBefore = await getCurrentSiteEditorContent();
 
 		await revertTemplate();
 		await save();
@@ -223,7 +213,7 @@ describe( 'Template Revert', () => {
 		await save();
 		await visitSiteEditor();
 
-		const contentAfter = await getEditedPostContent();
+		const contentAfter = await getCurrentSiteEditorContent();
 		expect( contentBefore ).toBe( contentAfter );
 	} );
 } );

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