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

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

@@ -1,16 +1,15 @@
 /**
  * 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 () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );
@@ -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)' );
+	} );
+} );

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

@@ -9,19 +9,15 @@ 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';
 
 describe( 'Template Part', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
+		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );
@@ -33,14 +29,13 @@ 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( {
-				postId: 'tt1-blocks//header',
+			await visitSiteEditor( {
+				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
 			} );
 		}
@@ -60,8 +55,8 @@ describe( 'Template Part', () => {
 			);
 
 			// Switch back to the Index template.
-			await siteEditor.visit( {
-				postId: 'tt1-blocks//index',
+			await visitSiteEditor( {
+				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
 		}
@@ -93,12 +88,9 @@ describe( 'Template Part', () => {
 			expect( paragraphInTemplatePart ).not.toBeNull();
 		}
 
-		async function awaitHeaderAndFooterLoad() {
-			await canvas().waitForSelector(
-				'.wp-block-template-part.site-header.block-editor-block-list__layout'
-			);
+		async function awaitHeaderLoad() {
 			await canvas().waitForSelector(
-				'.wp-block-template-part.site-footer.block-editor-block-list__layout'
+				'header.wp-block-template-part.block-editor-block-list__layout'
 			);
 		}
 
@@ -172,7 +164,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'
 			);
@@ -210,7 +202,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'
 			);
@@ -277,7 +269,7 @@ describe( 'Template Part', () => {
 
 			it( 'Should insert new template part on creation', async () => {
 				let siteEditorCanvas = canvas();
-				await awaitHeaderAndFooterLoad();
+				await awaitHeaderLoad();
 
 				// Create new template part.
 				await insertBlock( 'Template Part' );
@@ -317,9 +309,9 @@ 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 awaitHeaderAndFooterLoad();
+				await awaitHeaderLoad();
 				// Try to insert the template part we created.
 				await insertBlock( 'Template Part' );
 				const chooseExistingButton = await siteEditorCanvas.waitForXPath(

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

@@ -8,43 +8,36 @@ 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 = () =>
+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 +65,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 +84,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' );
 	} );
@@ -101,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 () => {
@@ -114,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();
@@ -134,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();
@@ -174,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();
@@ -188,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();
@@ -204,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();
@@ -219,7 +213,7 @@ describe( 'Template Revert', () => {
 		await save();
 		await visitSiteEditor();
 
-		const contentAfter = await getEditedPostContent();
+		const contentAfter = await getCurrentSiteEditorContent();
 		expect( contentBefore ).toBe( contentAfter );
 	} );
 } );

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

@@ -19,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();
@@ -163,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 () => {
@@ -195,7 +189,7 @@ describe( 'Widgets Customizer', () => {
 
 		const backButton = await find( {
 			role: 'button',
-			name: 'Back',
+			name: /Back/,
 			focused: true,
 		} );
 		await expect( backButton ).toHaveFocus();
@@ -250,8 +244,6 @@ describe( 'Widgets Customizer', () => {
 		} ).toBeFound();
 
 		await expect( inspectorHeading ).not.toBeVisible();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should handle the inserter outer section', async () => {
@@ -349,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();
 
@@ -359,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 () => {
@@ -387,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();
@@ -456,8 +446,6 @@ describe( 'Widgets Customizer', () => {
 			text: 'First Heading',
 		} );
 		await expect( headingBlock ).toHaveFocus();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should clear block selection', async () => {
@@ -520,8 +508,6 @@ describe( 'Widgets Customizer', () => {
 			role: 'toolbar',
 			name: 'Block tools',
 		} ).not.toBeFound();
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 
 	it( 'should handle legacy widgets', async () => {
@@ -700,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 () => {
@@ -761,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 () => {
@@ -855,8 +837,6 @@ describe( 'Widgets Customizer', () => {
 			name: 'Customizing ▸ Widgets ▸ Footer #1 Block Settings',
 			level: 3,
 		} );
-
-		expect( console ).toHaveWarned( twentyTwentyError );
 	} );
 } );