@wordpress/e2e-tests 2.5.3 → 2.5.7

package/experimental-features.js

@@ -157,4 +157,31 @@ export const siteEditor = {
 			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' )
+			);
+		}
+	},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "2.5.3",
+	"version": "2.5.7",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=12"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^5.4.6",
-		"@wordpress/jest-console": "^4.1.0",
-		"@wordpress/jest-puppeteer-axe": "^3.1.0",
-		"@wordpress/scripts": "^19.1.0",
-		"@wordpress/url": "^3.3.0",
+		"@wordpress/e2e-test-utils": "^5.4.8",
+		"@wordpress/jest-console": "^4.1.1",
+		"@wordpress/jest-puppeteer-axe": "^3.1.1",
+		"@wordpress/scripts": "^19.2.2",
+		"@wordpress/url": "^3.3.1",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"jest-message-util": "^27.0.6",
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
+	"gitHead": "ca22e8852fcc91889510e417bdaa180ad60f8dac"
 }

package/specs/editor/blocks/classic.test.js

@@ -51,8 +51,9 @@ describe( 'Classic', () => {
 		await page.click( '.media-menu-item#menu-item-gallery' );
 
 		// Wait for media modal to appear and upload image.
-		await page.waitForSelector( '.media-modal input[type=file]' );
-		const inputElement = await page.$( '.media-modal input[type=file]' );
+		const inputElement = await page.waitForSelector(
+			'.media-modal .moxie-shim input[type=file]'
+		);
 		const testImagePath = path.join(
 			__dirname,
 			'..',

package/specs/editor/blocks/cover.test.js

@@ -1,3 +1,11 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import { v4 as uuid } from 'uuid';
+
 /**
  * WordPress dependencies
  */
@@ -5,13 +13,110 @@ import {
 	insertBlock,
 	createNewPost,
 	openDocumentSettingsSidebar,
+	transformBlockTo,
 } from '@wordpress/e2e-test-utils';
 
+async function upload( selector ) {
+	const inputElement = await page.waitForSelector(
+		`${ selector } input[type="file"]`
+	);
+	const testImagePath = path.join(
+		__dirname,
+		'..',
+		'..',
+		'..',
+		'assets',
+		'10x10_e2e_test_image_z9T8jK.png'
+	);
+	const filename = uuid();
+	const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
+	fs.copyFileSync( testImagePath, tmpFileName );
+	await inputElement.uploadFile( tmpFileName );
+	await page.waitForSelector( `${ selector } img[src$="${ filename }.png"]` );
+	return filename;
+}
+
 describe( 'Cover', () => {
 	beforeEach( async () => {
 		await createNewPost();
 	} );
 
+	it( 'can set overlay color using color picker on block placeholder', async () => {
+		await insertBlock( 'Cover' );
+		// Get the first color option from the block placeholder's color picker
+		const colorPickerButton = await page.waitForSelector(
+			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
+		);
+		// Get the RGB value of the picked color
+		const pickedColor = await colorPickerButton.evaluate(
+			( node ) => node.style.backgroundColor
+		);
+		// Create the block by clicking selected color button
+		await colorPickerButton.click();
+		// Get the block's background dim element
+		const backgroundDim = await page.waitForSelector(
+			'.wp-block-cover .has-background-dim'
+		);
+		// Get the RGB value of the background dim
+		const dimColor = await backgroundDim.evaluate(
+			( node ) => node.style.backgroundColor
+		);
+
+		expect( pickedColor ).toEqual( dimColor );
+	} );
+
+	it( 'can set background image using image upload on block placeholder', async () => {
+		await insertBlock( 'Cover' );
+		// Create the block using uploaded image
+		const sourceImageFilename = await upload( '.wp-block-cover' );
+		// Get the block's background image URL
+		const blockImage = await page.waitForSelector( '.wp-block-cover img' );
+		const blockImageUrl = await blockImage.evaluate( ( el ) => el.src );
+
+		expect( blockImageUrl ).toContain( sourceImageFilename );
+	} );
+
+	it( 'dims background image down by 50% by default', async () => {
+		await insertBlock( 'Cover' );
+		// Create the block using uploaded image
+		await upload( '.wp-block-cover' );
+		// Get the block's background dim color and its opacity
+		const backgroundDim = await page.waitForSelector(
+			'.wp-block-cover .has-background-dim'
+		);
+		const [
+			backgroundDimColor,
+			backgroundDimOpacity,
+		] = await page.evaluate( ( el ) => {
+			const computedStyle = window.getComputedStyle( el );
+			return [ computedStyle.backgroundColor, computedStyle.opacity ];
+		}, backgroundDim );
+
+		expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
+		expect( backgroundDimOpacity ).toBe( '0.5' );
+	} );
+
+	it( 'can have the title edited', async () => {
+		await insertBlock( 'Cover' );
+		// Click first color option from the block placeholder's color picker
+		const colorPickerButton = await page.waitForSelector(
+			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
+		);
+		await colorPickerButton.click();
+		// Click the title placeholder to put the cursor inside
+		const coverTitle = await page.waitForSelector(
+			'.wp-block-cover .wp-block-paragraph'
+		);
+		await coverTitle.click();
+		// Type the title
+		await page.keyboard.type( 'foo' );
+		const coverTitleText = await coverTitle.evaluate(
+			( el ) => el.innerText
+		);
+
+		expect( coverTitleText ).toEqual( 'foo' );
+	} );
+
 	it( 'can be resized using drag & drop', async () => {
 		await insertBlock( 'Cover' );
 		// Close the inserter
@@ -87,4 +192,26 @@ describe( 'Cover', () => {
 			)
 		).toBeGreaterThan( 100 );
 	} );
+
+	it( 'dims the background image down by 50% when transformed from the Image block', async () => {
+		await insertBlock( 'Image' );
+		// Upload image and transform to the Cover block
+		await upload( '.wp-block-image' );
+		await transformBlockTo( 'Cover' );
+
+		// Get the block's background dim color and its opacity
+		const backgroundDim = await page.waitForSelector(
+			'.wp-block-cover .has-background-dim'
+		);
+		const [
+			backgroundDimColor,
+			backgroundDimOpacity,
+		] = await page.evaluate( ( el ) => {
+			const computedStyle = window.getComputedStyle( el );
+			return [ computedStyle.backgroundColor, computedStyle.opacity ];
+		}, backgroundDim );
+
+		expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
+		expect( backgroundDimOpacity ).toBe( '0.5' );
+	} );
 } );

package/specs/editor/blocks/image.test.js

@@ -74,7 +74,7 @@ describe( 'Image', () => {
 		expect( await getEditedPostContent() ).toMatch( regex );
 	} );
 
-	it( 'should replace, reset size, and keep selection', async () => {
+	it.skip( 'should replace, reset size, and keep selection', async () => {
 		await insertBlock( 'Image' );
 		const filename1 = await upload( '.wp-block-image input[type="file"]' );
 		await waitForImage( filename1 );

package/specs/editor/plugins/image-size.test.js

@@ -12,7 +12,6 @@ import { v4 as uuid } from 'uuid';
 import {
 	activatePlugin,
 	createNewPost,
-	clickButton,
 	deactivatePlugin,
 	insertBlock,
 	openDocumentSettingsSidebar,
@@ -30,11 +29,9 @@ describe( 'changing image size', () => {
 
 	it( 'should insert and change my image size', async () => {
 		await insertBlock( 'Image' );
-		await clickButton( 'Media Library' );
-
-		// Wait for media modal to appear and upload image.
-		await page.waitForSelector( '.media-modal input[type=file]' );
-		const inputElement = await page.$( '.media-modal input[type=file]' );
+		const inputElement = await page.waitForSelector(
+			'figure[aria-label="Block: Image"] input[type=file]'
+		);
 		const testImagePath = path.join(
 			__dirname,
 			'..',
@@ -49,12 +46,7 @@ describe( 'changing image size', () => {
 		await inputElement.uploadFile( tmpFileName );
 
 		// Wait for upload to finish.
-		await page.waitForSelector(
-			`.media-modal li[aria-label="${ filename }"]`
-		);
-
-		// Insert the uploaded image.
-		await page.click( '.media-modal button.media-button-select' );
+		await page.waitForXPath( `//img[contains(@src, "${ filename }")]` );
 
 		// Select the new size updated with the plugin.
 		await openDocumentSettingsSidebar();

package/specs/editor/plugins/inner-blocks-allowed-blocks.test.js

@@ -9,6 +9,7 @@ import {
 	insertBlock,
 	openGlobalBlockInserter,
 	closeGlobalBlockInserter,
+	clickBlockToolbarButton,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Allowed Blocks Setting on InnerBlocks', () => {
@@ -75,6 +76,7 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 		await insertBlock( 'Image' );
 		await closeGlobalBlockInserter();
 		await page.waitForSelector( '.product[data-number-of-children="2"]' );
+		await clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
 		// This focus shouldn't be neessary but there's a bug in trunk right now
 		// Where if you open the inserter, don't do anything and click the "appender" on the canvas
 		// the appender is not opened right away.

package/specs/editor/various/adding-inline-tokens.test.js

@@ -32,8 +32,10 @@ describe( 'adding inline tokens', () => {
 		await clickButton( 'Inline image' );
 
 		// Wait for media modal to appear and upload image.
-		await page.waitForSelector( '.media-modal input[type=file]' );
-		const inputElement = await page.$( '.media-modal input[type=file]' );
+		// Wait for media modal to appear and upload image.
+		const inputElement = await page.waitForSelector(
+			'.media-modal .moxie-shim input[type=file]'
+		);
 		const testImagePath = path.join(
 			__dirname,
 			'..',

package/specs/experiments/blocks/navigation.test.js

@@ -38,12 +38,12 @@ const menusFixture = [
 // Matching against variations of the same URL encoded and non-encoded
 // produces the most reliable mocking.
 const REST_MENUS_ROUTES = [
-	'/__experimental/menus',
-	`rest_route=${ encodeURIComponent( '/__experimental/menus' ) }`,
+	'/wp/v2/menus',
+	`rest_route=${ encodeURIComponent( '/wp/v2/menus' ) }`,
 ];
 const REST_MENU_ITEMS_ROUTES = [
-	'/__experimental/menu-items',
-	`rest_route=${ encodeURIComponent( '/__experimental/menu-items' ) }`,
+	'/wp/v2/menu-items',
+	`rest_route=${ encodeURIComponent( '/wp/v2/menu-items' ) }`,
 ];
 
 const REST_PAGES_ROUTES = [

package/specs/experiments/document-settings.test.js

@@ -36,6 +36,7 @@ describe( 'Document Settings', () => {
 
 	beforeEach( async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 	} );
 
 	describe( 'when a template is selected from the navigation sidebar', () => {

package/specs/experiments/multi-entity-editing.test.js

@@ -145,6 +145,7 @@ describe( 'Multi-entity editor states', () => {
 
 	it( 'should not display any dirty entities when loading the site editor', async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 		expect( await openEntitySavePanel() ).toBe( false );
 	} );
 
@@ -204,6 +205,7 @@ describe( 'Multi-entity editor states', () => {
 			);
 			await saveAllEntities();
 			await siteEditor.visit();
+			await siteEditor.disableWelcomeGuide();
 
 			// Wait for site editor to load.
 			await canvas().waitForSelector(

package/specs/experiments/multi-entity-saving.test.js

@@ -244,6 +244,7 @@ describe( 'Multi-entity save flow', () => {
 				postId: 'tt1-blocks//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' );

package/specs/experiments/settings-sidebar.test.js

@@ -53,6 +53,7 @@ describe( 'Settings sidebar', () => {
 	} );
 	beforeEach( async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 	} );
 
 	describe( 'Template tab', () => {

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

@@ -41,6 +41,7 @@ describe( 'Site Editor Templates Export', () => {
 
 	beforeEach( async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 	} );
 
 	it( 'clicking export should download edit-site-export.zip file', async () => {

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

@@ -19,6 +19,7 @@ describe( 'Site Editor Inserter', () => {
 	} );
 	beforeEach( async () => {
 		await siteEditor.visit();
+		await siteEditor.disableWelcomeGuide();
 	} );
 
 	it( 'inserter toggle button should toggle global inserter', async () => {

package/specs/experiments/template-part.test.js

@@ -19,7 +19,7 @@ import {
 import { siteEditor } from '../../experimental-features';
 
 const templatePartNameInput =
-	'.edit-site-template-part-converter__modal .components-text-control__input';
+	'.edit-site-create-template-part-modal .components-text-control__input';
 
 describe( 'Template Part', () => {
 	beforeAll( async () => {
@@ -36,6 +36,7 @@ describe( 'Template Part', () => {
 	describe( 'Template part block', () => {
 		beforeEach( async () => {
 			await siteEditor.visit();
+			await siteEditor.disableWelcomeGuide();
 		} );
 
 		async function navigateToHeader() {

package/specs/experiments/template-revert.test.js

@@ -16,7 +16,11 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import { siteEditor } from '../../experimental-features';
 
-const { visit: visitSiteEditor, getEditedPostContent } = siteEditor;
+const {
+	visit: visitSiteEditor,
+	getEditedPostContent,
+	disableWelcomeGuide,
+} = siteEditor;
 
 const assertSaveButtonIsDisabled = () =>
 	page.waitForSelector(
@@ -97,6 +101,7 @@ describe( 'Template Revert', () => {
 	beforeEach( async () => {
 		await trashAllPosts( 'wp_template' );
 		await visitSiteEditor();
+		await disableWelcomeGuide();
 	} );
 
 	it( 'should delete the template after saving the reverted template', async () => {

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

@@ -84,6 +84,7 @@ describe( 'Site Editor Performance', () => {
 		);
 
 		await siteEditor.visit( { postId: id, postType: 'page' } );
+		await siteEditor.disableWelcomeGuide();
 
 		let i = 3;