@wordpress/e2e-tests 3.0.2 → 3.0.6

package/specs/editor/various/keep-styles-on-block-transforms.test.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	clickBlockAppender,
+	createNewPost,
+	getEditedPostContent,
+	pressKeyWithModifier,
+	transformBlockTo,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Keep styles on block transforms', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'Should keep colors during a transform', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '## Heading' );
+
+		const textColorButton = await page.waitForSelector(
+			'.block-editor-panel-color-gradient-settings__dropdown'
+		);
+		await textColorButton.click();
+
+		const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`;
+		const [ colorButton ] = await page.$x( colorButtonSelector );
+		await colorButton.click();
+		await page.waitForXPath(
+			`${ colorButtonSelector }[@aria-pressed='true']`
+		);
+		await page.click( 'h2[data-type="core/heading"]' );
+		await transformBlockTo( 'Paragraph' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'Should keep the font size during a transform from multiple blocks into a single one', async () => {
+		// Create a paragraph block with some content.
+		await clickBlockAppender();
+		await page.keyboard.type( 'Line 1 to be made large' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Line 2 to be made large' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Line 3 to be made large' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		await page.click(
+			'[role="radiogroup"][aria-label="Font size"] [aria-label="Large"]'
+		);
+		await transformBlockTo( 'List' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'Should keep the font size during a transform from multiple blocks into multiple blocks', async () => {
+		// Create a paragraph block with some content.
+		await clickBlockAppender();
+		await page.keyboard.type( 'Line 1 to be made large' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Line 2 to be made large' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Line 3 to be made large' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		await page.click(
+			'[role="radiogroup"][aria-label="Font size"] [aria-label="Large"]'
+		);
+		await transformBlockTo( 'Heading' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'Should not include styles in the group block when grouping a block', async () => {
+		// Create a paragraph block with some content.
+		await clickBlockAppender();
+		await page.keyboard.type( 'Line 1 to be made large' );
+		await page.click(
+			'[role="radiogroup"][aria-label="Font size"] [aria-label="Large"]'
+		);
+		await transformBlockTo( 'Group' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );

package/specs/editor/various/post-visibility.test.js

@@ -26,6 +26,15 @@ describe( 'Post visibility', () => {
 			);
 			await privateLabel.click();
 
+			await page.waitForXPath(
+				'//*[text()="Would you like to privately publish this post now?"]'
+			);
+
+			const [ confirmButton ] = await page.$x(
+				'//*[@role="dialog"]//button[text()="OK"]'
+			);
+			await confirmButton.click();
+
 			const currentStatus = await page.evaluate( () => {
 				return wp.data
 					.select( 'core/editor' )
@@ -34,6 +43,42 @@ describe( 'Post visibility', () => {
 
 			expect( currentStatus ).toBe( 'private' );
 		} );
+
+		it( `can be canceled when the viewport is ${ viewport }`, async () => {
+			await setBrowserViewport( viewport );
+
+			await createNewPost();
+
+			await openDocumentSettingsSidebar();
+
+			const initialStatus = await page.evaluate( () => {
+				return wp.data
+					.select( 'core/editor' )
+					.getEditedPostAttribute( 'status' );
+			} );
+
+			await page.click( '.edit-post-post-visibility__toggle' );
+
+			const [ privateLabel ] = await page.$x(
+				'//label[text()="Private"]'
+			);
+			await privateLabel.click();
+			await page.waitForXPath(
+				'//*[text()="Would you like to privately publish this post now?"]'
+			);
+			const cancelButton = await page.waitForXPath(
+				'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
+			);
+			await cancelButton.click();
+
+			const currentStatus = await page.evaluate( () => {
+				return wp.data
+					.select( 'core/editor' )
+					.getEditedPostAttribute( 'status' );
+			} );
+
+			expect( currentStatus ).toBe( initialStatus );
+		} );
 	} );
 
 	it( 'visibility remains private even if the publish date is in the future', async () => {
@@ -60,6 +105,15 @@ describe( 'Post visibility', () => {
 		const [ privateLabel ] = await page.$x( '//label[text()="Private"]' );
 		await privateLabel.click();
 
+		await page.waitForXPath(
+			'//*[text()="Would you like to privately publish this post now?"]'
+		);
+
+		const [ confirmButton ] = await page.$x(
+			'//*[@role="dialog"]//button[text()="OK"]'
+		);
+		await confirmButton.click();
+
 		// Enter a title for this post.
 		await page.type( '.editor-post-title__input', ' Changed' );
 

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

@@ -13,20 +13,24 @@ describe( 'adding blocks', () => {
 		await createNewPost();
 	} );
 
-	it( 'Should switch to the large style of the quote block', async () => {
+	it( 'Should switch to the plain style of the quote block', async () => {
 		// Inserting a quote block
 		await insertBlock( 'Quote' );
 		await page.keyboard.type( 'Quote content' );
 
 		await clickBlockToolbarButton( 'Quote' );
 
-		const largeStyleButton = await page.waitForXPath(
-			'//*[@role="menuitem"][contains(., "Large")]'
+		const plainStyleButton = await page.waitForXPath(
+			'//*[@role="menuitem"][contains(., "Plain")]'
 		);
-		await largeStyleButton.click();
+		await plainStyleButton.click();
 
 		// Check the content
 		const content = await getEditedPostContent();
-		expect( content ).toMatchSnapshot();
+		expect( content ).toMatchInlineSnapshot( `
+		"<!-- wp:quote {\\"className\\":\\"is-style-plain\\"} -->
+		<blockquote class=\\"wp-block-quote is-style-plain\\"><p>Quote content</p></blockquote>
+		<!-- /wp:quote -->"
+	` );
 	} );
 } );

package/specs/performance/site-editor.test.js

@@ -12,6 +12,7 @@ import {
 	activateTheme,
 	canvas,
 	createNewPost,
+	visitSiteEditor,
 	saveDraft,
 	insertBlock,
 } from '@wordpress/e2e-test-utils';
@@ -19,7 +20,6 @@ import {
 /**
  * Internal dependencies
  */
-import { siteEditor } from '../site-editor/utils';
 import {
 	readFile,
 	deleteFile,
@@ -83,8 +83,7 @@ describe( 'Site Editor Performance', () => {
 			new URL( document.location ).searchParams.get( 'post' )
 		);
 
-		await siteEditor.visit( { postId: id, postType: 'page' } );
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor( { postId: id, postType: 'page' } );
 
 		let i = 3;
 

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

@@ -1,12 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
-
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
+import {
+	trashAllPosts,
+	activateTheme,
+	visitSiteEditor,
+} from '@wordpress/e2e-test-utils';
 
 async function getDocumentSettingsTitle() {
 	const titleElement = await page.waitForSelector(
@@ -35,14 +34,13 @@ describe( 'Document Settings', () => {
 	} );
 
 	beforeEach( async () => {
-		await siteEditor.visit();
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor();
 	} );
 
 	describe( 'when a template is selected from the navigation sidebar', () => {
 		it( 'should display the selected templates name in the document header', async () => {
 			// Navigate to a template
-			await siteEditor.visit( {
+			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
@@ -78,7 +76,7 @@ describe( 'Document Settings', () => {
 	describe( 'when a template part is selected from the navigation sidebar', () => {
 		it( "should display the selected template part's name in the document header", async () => {
 			// Navigate to a template part
-			await siteEditor.visit( {
+			await visitSiteEditor( {
 				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
 			} );

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

@@ -11,18 +11,18 @@ import {
 	openDocumentSettingsSidebar,
 	pressKeyWithModifier,
 	selectBlockByClientId,
+	visitSiteEditor,
+	clickSiteEditorMenuItem,
+	navigateSiteEditorBackToRoot,
+	openSiteEditorNavigationPanel,
+	siteEditorNavigateSequence,
 } from '@wordpress/e2e-test-utils';
 
-/**
- * Internal dependencies
- */
-import { navigationPanel, siteEditor } from './utils';
-
 const clickTemplateItem = async ( menus, itemName ) => {
-	await navigationPanel.open();
-	await navigationPanel.backToRoot();
-	await navigationPanel.navigate( menus );
-	await navigationPanel.clickItemByText( itemName );
+	await openSiteEditorNavigationPanel();
+	await navigateSiteEditorBackToRoot();
+	await siteEditorNavigateSequence( menus );
+	await clickSiteEditorMenuItem( itemName );
 };
 
 const createTemplatePart = async (
@@ -144,14 +144,13 @@ describe( 'Multi-entity editor states', () => {
 	} );
 
 	it( 'should not display any dirty entities when loading the site editor', async () => {
-		await siteEditor.visit();
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor();
 		expect( await openEntitySavePanel() ).toBe( false );
 	} );
 
 	// Skip reason: This should be rewritten to use other methods to switching to different templates.
 	it.skip( 'should not dirty an entity by switching to it in the template dropdown', async () => {
-		await siteEditor.visit( {
+		await visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
@@ -204,8 +203,7 @@ describe( 'Multi-entity editor states', () => {
 				true
 			);
 			await saveAllEntities();
-			await siteEditor.visit();
-			await siteEditor.disableWelcomeGuide();
+			await visitSiteEditor();
 
 			// Wait for site editor to load.
 			await canvas().waitForSelector(

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

@@ -12,13 +12,9 @@ import {
 	activateTheme,
 	clickButton,
 	createReusableBlock,
+	visitSiteEditor,
 } from '@wordpress/e2e-test-utils';
 
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
-
 describe( 'Multi-entity save flow', () => {
 	// Selectors - usable between Post/Site editors.
 	const checkedBoxSelector = '.components-checkbox-control__checked';
@@ -263,11 +259,10 @@ describe( 'Multi-entity save flow', () => {
 
 		it( 'Save flow should work as expected', async () => {
 			// Navigate to site editor.
-			await siteEditor.visit( {
+			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
-			await siteEditor.disableWelcomeGuide();
 
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-toolbar__list-view-toggle' );
@@ -301,11 +296,10 @@ describe( 'Multi-entity save flow', () => {
 
 		it( 'Save flow should allow re-saving after changing the same block attribute', async () => {
 			// Navigate to site editor.
-			await siteEditor.visit( {
+			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
-			await siteEditor.disableWelcomeGuide();
 
 			// Insert a paragraph at the bottom.
 			await insertBlock( 'Paragraph' );

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

@@ -7,13 +7,9 @@ import {
 	getAllBlocks,
 	selectBlockByClientId,
 	insertBlock,
+	visitSiteEditor,
 } from '@wordpress/e2e-test-utils';
 
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
-
 async function toggleSidebar() {
 	await page.click(
 		'.edit-site-header__actions button[aria-label="Settings"]'
@@ -52,8 +48,7 @@ describe( 'Settings sidebar', () => {
 		await activateTheme( 'twentytwentyone' );
 	} );
 	beforeEach( async () => {
-		await siteEditor.visit();
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor();
 	} );
 
 	describe( 'Template tab', () => {
@@ -69,7 +64,7 @@ describe( 'Settings sidebar', () => {
 			await toggleSidebar();
 
 			const templateCardBeforeNavigation = await getTemplateCard();
-			await siteEditor.visit( {
+			await visitSiteEditor( {
 				postId: 'emptytheme//singular',
 				postType: 'wp_template',
 			} );

package/specs/site-editor/site-editor-export.test.js

@@ -8,12 +8,12 @@ import os from 'os';
 /**
  * WordPress dependencies
  */
-import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
-
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
+import {
+	trashAllPosts,
+	activateTheme,
+	visitSiteEditor,
+	clickOnMoreMenuItem,
+} from '@wordpress/e2e-test-utils';
 
 async function waitForFileExists( filePath, timeout = 10000 ) {
 	const start = Date.now();
@@ -40,8 +40,7 @@ describe( 'Site Editor Templates Export', () => {
 	} );
 
 	beforeEach( async () => {
-		await siteEditor.visit();
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor();
 	} );
 
 	it( 'clicking export should download edit-site-export.zip file', async () => {
@@ -53,7 +52,7 @@ describe( 'Site Editor Templates Export', () => {
 			downloadPath: directory,
 		} );
 
-		await siteEditor.clickOnMoreMenuItem( 'Export' );
+		await clickOnMoreMenuItem( 'Export', 'site-editor' );
 		const filePath = path.join( directory, 'edit-site-export.zip' );
 		await waitForFileExists( filePath );
 		expect( fs.existsSync( filePath ) ).toBe( true );

package/specs/site-editor/site-editor-inserter.test.js

@@ -1,12 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils';
-
-/**
- * Internal dependencies
- */
-import { siteEditor } from './utils';
+import {
+	trashAllPosts,
+	activateTheme,
+	visitSiteEditor,
+} from '@wordpress/e2e-test-utils';
 
 describe( 'Site Editor Inserter', () => {
 	beforeAll( async () => {
@@ -18,8 +17,7 @@ describe( 'Site Editor Inserter', () => {
 		await activateTheme( 'twentytwentyone' );
 	} );
 	beforeEach( async () => {
-		await siteEditor.visit();
-		await siteEditor.disableWelcomeGuide();
+		await visitSiteEditor();
 	} );
 
 	it( 'inserter toggle button should toggle global inserter', async () => {

package/specs/site-editor/style-variations.test.js

@@ -0,0 +1,211 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	trashAllPosts,
+	activateTheme,
+	visitSiteEditor,
+	toggleGlobalStyles,
+	openGlobalStylesPanel,
+	openPreviousGlobalStylesPanel,
+} from '@wordpress/e2e-test-utils';
+
+async function openOtherStyles() {
+	const OTHER_STYLES_SELECTOR = '//div[contains(text(),"Other styles")]';
+	await ( await page.waitForXPath( OTHER_STYLES_SELECTOR ) ).click();
+}
+
+async function getAvailableStyleVariations() {
+	const VARIATION_ITEMS_STYLES_SELECTOR =
+		'.edit-site-global-styles-variations_item';
+	await page.waitForSelector( VARIATION_ITEMS_STYLES_SELECTOR );
+	return page.$$( VARIATION_ITEMS_STYLES_SELECTOR );
+}
+
+async function applyVariation( number ) {
+	await toggleGlobalStyles();
+	await openOtherStyles();
+	const variations = await getAvailableStyleVariations();
+	await variations[ number ].click();
+}
+
+async function applyPinkVariation() {
+	await applyVariation( 1 );
+}
+
+async function applyYellowVariation() {
+	await applyVariation( 2 );
+}
+
+async function openColorsPanel() {
+	await openGlobalStylesPanel( 'Colors' );
+}
+
+async function openTypographyPanel() {
+	await openGlobalStylesPanel( 'Typography' );
+}
+
+async function openTextPanel() {
+	await openGlobalStylesPanel( 'Text' );
+}
+
+async function openPalettePanel() {
+	const selector = `//div[./h2[text()="Palette"]]//button`;
+	await ( await page.waitForXPath( selector ) ).click();
+}
+
+async function getFontSizeHint() {
+	const element = await page.$(
+		'.components-font-size-picker__header__hint'
+	);
+	return element.evaluate( ( el ) => el.textContent );
+}
+
+async function getCustomFontSizeValue() {
+	const element = await page.$(
+		'.components-font-size-picker input[aria-label="Custom"]'
+	);
+	return element.evaluate( ( el ) => el.value );
+}
+
+async function getColorValue( colorType ) {
+	return page.evaluate( ( _colorType ) => {
+		return document.evaluate(
+			`substring-before(substring-after(//div[@aria-label="Settings"]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`,
+			document,
+			null,
+			XPathResult.ANY_TYPE,
+			null
+		).stringValue;
+	}, colorType );
+}
+
+async function getBackgroundColorValue() {
+	return getColorValue( 'Background' );
+}
+
+async function getTextColorValue() {
+	return getColorValue( 'Text' );
+}
+
+async function getColorPalette( paletteSource ) {
+	const paletteOptions = await page.$x(
+		`//div[./*/h2[text()="${ paletteSource }"]]//button[contains(@class,"components-circular-option-picker__option")]`
+	);
+	return Promise.all(
+		paletteOptions.map( ( element ) => {
+			return element.evaluate( ( el ) => {
+				const color = el.style.backgroundColor;
+				const name = el
+					.getAttribute( 'aria-label' )
+					.substring( 'Color: '.length );
+				return { color, name };
+			} );
+		} )
+	);
+}
+
+async function getThemePalette() {
+	return getColorPalette( 'Theme' );
+}
+
+describe( 'Global styles variations', () => {
+	beforeAll( async () => {
+		await activateTheme( 'gutenberg-test-themes/style-variations' );
+		await trashAllPosts( 'wp_template' );
+		await trashAllPosts( 'wp_template_part' );
+	} );
+	afterAll( async () => {
+		await activateTheme( 'twentytwentyone' );
+	} );
+	beforeEach( async () => {
+		await visitSiteEditor();
+	} );
+
+	it( 'Should have three variations available with the first one being active', async () => {
+		await toggleGlobalStyles();
+		await openOtherStyles();
+		const variations = await getAvailableStyleVariations();
+		expect( variations ).toHaveLength( 3 );
+		expect(
+			await (
+				await variations[ 0 ].getProperty( 'className' )
+			 ).jsonValue()
+		).toContain( 'is-active' );
+		expect(
+			await (
+				await variations[ 1 ].getProperty( 'className' )
+			 ).jsonValue()
+		).not.toContain( 'is-active' );
+		expect(
+			await (
+				await variations[ 2 ].getProperty( 'className' )
+			 ).jsonValue()
+		).not.toContain( 'is-active' );
+	} );
+
+	it( 'Should apply preset colors and font sizes in a variation', async () => {
+		await applyPinkVariation();
+		await openPreviousGlobalStylesPanel();
+		await openColorsPanel();
+		expect( await getBackgroundColorValue() ).toBe( 'rgb(202, 105, 211)' );
+		expect( await getTextColorValue() ).toBe( 'rgb(74, 7, 74)' );
+		await openPreviousGlobalStylesPanel();
+		await openTypographyPanel();
+		await openTextPanel();
+		expect( await getFontSizeHint() ).toBe( 'Medium(px)' );
+	} );
+
+	it( 'Should apply custom colors and font sizes in a variation', async () => {
+		await applyYellowVariation();
+		await openPreviousGlobalStylesPanel();
+		await openColorsPanel();
+		expect( await getBackgroundColorValue() ).toBe( 'rgb(255, 239, 11)' );
+		expect( await getTextColorValue() ).toBe( 'rgb(25, 25, 17)' );
+		await openPreviousGlobalStylesPanel();
+		await openTypographyPanel();
+		await openTextPanel();
+		expect( await getFontSizeHint() ).toBe( '(Custom)' );
+		expect( await getCustomFontSizeValue() ).toBe( '15' );
+	} );
+
+	it( 'Should apply a color palette in a variation', async () => {
+		await applyPinkVariation();
+		await openPreviousGlobalStylesPanel();
+		await openColorsPanel();
+		await openPalettePanel();
+		expect( await getThemePalette() ).toMatchObject( [
+			{
+				color: 'rgb(74, 7, 74)',
+				name: 'Foreground',
+			},
+			{
+				color: 'rgb(202, 105, 211)',
+				name: 'Background',
+			},
+			{
+				color: 'rgba(204, 0, 255, 0.77)',
+				name: 'Awesome pink',
+			},
+		] );
+	} );
+
+	it( 'Should reflect style variations in the styles applied to the editor', async () => {
+		await applyYellowVariation();
+		const frame = await (
+			await page.waitForSelector( '.edit-site-visual-editor iframe' )
+		 ).contentFrame();
+		const paragraph = await frame.waitForXPath(
+			`//p[text()="My awesome paragraph"]`
+		);
+		const paragraphColor = await paragraph.evaluate( ( el ) => {
+			return window.getComputedStyle( el ).color;
+		} );
+		expect( paragraphColor ).toBe( 'rgb(25, 25, 17)' );
+		const body = await frame.$( 'body' );
+		const backgroundColor = await body.evaluate( ( el ) => {
+			return window.getComputedStyle( el ).backgroundColor;
+		} );
+		expect( backgroundColor ).toBe( 'rgb(255, 239, 11)' );
+	} );
+} );