@wordpress/e2e-tests 2.4.1-next.253d9b6e21.0 → 2.5.1

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

@@ -292,6 +292,9 @@ describe( 'Template Part', () => {
 			const confirmTitleButton = await page.waitForSelector(
 				confirmTitleButtonSelector
 			);
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.type( 'Create New' );
 			await confirmTitleButton.click();
 
 			const newTemplatePart = await page.waitForSelector(
@@ -313,9 +316,9 @@ describe( 'Template Part', () => {
 				chooseExistingButtonSelector
 			);
 			await chooseExistingButton.click();
-			const preview = await page.waitForXPath( testContentSelector );
-			expect( preview ).toBeTruthy();
-
+			const preview = await page.waitForSelector(
+				'[aria-label="Create New"]'
+			);
 			await preview.click();
 			await page.waitForSelector( activatedTemplatePartSelector );
 			const templatePartContent = await page.waitForXPath(

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

@@ -67,7 +67,7 @@ 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 page.click( '.edit-site-template-details__revert-button' );
 	await waitForNotice();
 	await assertSaveButtonIsEnabled();
 };

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

@@ -31,18 +31,18 @@ import {
 jest.setTimeout( 1000000 );
 
 describe( 'Post Editor Performance', () => {
-	it( 'Loading, typing and selecting blocks', async () => {
-		const traceFile = __dirname + '/trace.json';
-		let traceResults;
-		const results = {
-			load: [],
-			type: [],
-			focus: [],
-			inserterOpen: [],
-			inserterHover: [],
-			inserterSearch: [],
-		};
+	const results = {
+		load: [],
+		type: [],
+		focus: [],
+		inserterOpen: [],
+		inserterHover: [],
+		inserterSearch: [],
+	};
+	const traceFile = __dirname + '/trace.json';
+	let traceResults;
 
+	beforeAll( async () => {
 		const html = readFile(
 			join( __dirname, '../../assets/large-post.html' )
 		);
@@ -63,7 +63,30 @@ describe( 'Post Editor Performance', () => {
 			dispatch( 'core/block-editor' ).resetBlocks( blocks );
 		}, html );
 		await saveDraft();
+	} );
+
+	afterAll( async () => {
+		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
+		writeFileSync(
+			join( __dirname, resultsFilename ),
+			JSON.stringify( results, null, 2 )
+		);
+		deleteFile( traceFile );
+	} );
 
+	beforeEach( async () => {
+		// Disable auto-save to avoid impacting the metrics.
+		await page.evaluate( () => {
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.__experimentalUpdateLocalAutosaveInterval( 100000000000 );
+			window.wp.data
+				.dispatch( 'core/editor' )
+				.updateEditorSettings( { autosaveInterval: 100000000000 } );
+		} );
+	} );
+
+	it( 'Loading', async () => {
 		// Measuring loading time
 		let i = 5;
 		while ( i-- ) {
@@ -72,7 +95,77 @@ describe( 'Post Editor Performance', () => {
 			await page.waitForSelector( '.wp-block' );
 			results.load.push( new Date() - startTime );
 		}
+	} );
+
+	it( 'Typing', async () => {
+		// Measuring typing performance
+		await insertBlock( 'Paragraph' );
+		let i = 20;
+		await page.tracing.start( {
+			path: traceFile,
+			screenshots: false,
+			categories: [ 'devtools.timeline' ],
+		} );
+		while ( i-- ) {
+			// Wait for the browser to be idle before starting the monitoring.
+			// The timeout should be big enough to allow all async tasks tor run.
+			// And also to allow Rich Text to mark the change as persistent.
+			// eslint-disable-next-line no-restricted-syntax
+			await page.waitForTimeout( 2000 );
+			await page.keyboard.type( 'x' );
+		}
+		await page.tracing.stop();
+		traceResults = JSON.parse( readFile( traceFile ) );
+		const [
+			keyDownEvents,
+			keyPressEvents,
+			keyUpEvents,
+		] = getTypingEventDurations( traceResults );
+		if (
+			keyDownEvents.length === keyPressEvents.length &&
+			keyPressEvents.length === keyUpEvents.length
+		) {
+			// The first character typed triggers a longer time (isTyping change)
+			// It can impact the stability of the metric, so we exclude it.
+			for ( let j = 1; j < keyDownEvents.length; j++ ) {
+				results.type.push(
+					keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
+				);
+			}
+		}
+	} );
+
+	it( 'Selecting blocks', async () => {
+		// Measuring block selection performance
+		await createNewPost();
+		await page.evaluate( () => {
+			const { createBlock } = window.wp.blocks;
+			const { dispatch } = window.wp.data;
+			const blocks = window.lodash
+				.times( 1000 )
+				.map( () => createBlock( 'core/paragraph' ) );
+			dispatch( 'core/block-editor' ).resetBlocks( blocks );
+		} );
+		const paragraphs = await page.$$( '.wp-block' );
+		await page.tracing.start( {
+			path: traceFile,
+			screenshots: false,
+			categories: [ 'devtools.timeline' ],
+		} );
+		await paragraphs[ 0 ].click();
+		for ( let j = 1; j <= 10; j++ ) {
+			// Wait for the browser to be idle before starting the monitoring.
+			// eslint-disable-next-line no-restricted-syntax
+			await page.waitForTimeout( 1000 );
+			await paragraphs[ j ].click();
+		}
+		await page.tracing.stop();
+		traceResults = JSON.parse( readFile( traceFile ) );
+		const [ focusEvents ] = getSelectionEventDurations( traceResults );
+		results.focus = focusEvents;
+	} );
 
+	it( 'Opening the inserter', async () => {
 		// Measure time to open inserter
 		await page.waitForSelector( '.edit-post-layout' );
 		for ( let j = 0; j < 10; j++ ) {
@@ -90,7 +183,9 @@ describe( 'Post Editor Performance', () => {
 			}
 			await closeGlobalBlockInserter();
 		}
+	} );
 
+	it( 'Searching the inserter', async () => {
 		// Measure time to search the inserter and get results
 		await openGlobalBlockInserter();
 		for ( let j = 0; j < 10; j++ ) {
@@ -123,7 +218,9 @@ describe( 'Post Editor Performance', () => {
 			await page.keyboard.press( 'Backspace' );
 		}
 		await closeGlobalBlockInserter();
+	} );
 
+	it( 'Hovering Inserter Items', async () => {
 		// Measure inserter hover performance
 		const paragraphBlockItem =
 			'.block-editor-inserter__menu .editor-block-list-item-paragraph';
@@ -157,74 +254,5 @@ describe( 'Post Editor Performance', () => {
 			}
 		}
 		await closeGlobalBlockInserter();
-
-		// Measuring typing performance
-		await insertBlock( 'Paragraph' );
-		i = 20;
-		await page.tracing.start( {
-			path: traceFile,
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
-		while ( i-- ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 200 );
-			await page.keyboard.type( 'x' );
-		}
-		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
-		const [
-			keyDownEvents,
-			keyPressEvents,
-			keyUpEvents,
-		] = getTypingEventDurations( traceResults );
-		if (
-			keyDownEvents.length === keyPressEvents.length &&
-			keyPressEvents.length === keyUpEvents.length
-		) {
-			for ( let j = 0; j < keyDownEvents.length; j++ ) {
-				results.type.push(
-					keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
-				);
-			}
-		}
-
-		// Measuring block selection performance
-		await createNewPost();
-		await page.evaluate( () => {
-			const { createBlock } = window.wp.blocks;
-			const { dispatch } = window.wp.data;
-			const blocks = window.lodash
-				.times( 1000 )
-				.map( () => createBlock( 'core/paragraph' ) );
-			dispatch( 'core/block-editor' ).resetBlocks( blocks );
-		} );
-		const paragraphs = await page.$$( '.wp-block' );
-		await page.tracing.start( {
-			path: traceFile,
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
-		await paragraphs[ 0 ].click();
-		for ( let j = 1; j <= 10; j++ ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 200 );
-			await paragraphs[ j ].click();
-		}
-		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
-		const [ focusEvents ] = getSelectionEventDurations( traceResults );
-		results.focus = focusEvents;
-
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
-		deleteFile( traceFile );
-
-		expect( true ).toBe( true );
 	} );
 } );

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

@@ -114,24 +114,9 @@ describe( 'Site Editor Performance', () => {
 			keyUpEvents,
 		] = getTypingEventDurations( traceResults );
 
-		// Both keydown and keypress events are bubbled from the iframe to the
-		// main frame, which must be ignored. These will be the odd values in
-		// the array.
-		const _keyDownEvents = keyDownEvents.filter(
-			( v, ii ) => ii % 2 === 0
-		);
-		const _keyPressEvents = keyPressEvents.filter(
-			( v, ii ) => ii % 2 === 0
-		);
-
-		expect(
-			_keyDownEvents.length === _keyPressEvents.length &&
-				_keyPressEvents.length === keyUpEvents.length
-		).toBe( true );
-
-		for ( let j = 0; j < _keyDownEvents.length; j++ ) {
+		for ( let j = 0; j < keyDownEvents.length; j++ ) {
 			results.type.push(
-				_keyDownEvents[ j ] + _keyPressEvents[ j ] + keyUpEvents[ j ]
+				keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
 			);
 		}
 

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

@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import {
-	activatePlugin,
+	__experimentalActivatePlugin as activatePlugin,
 	activateTheme,
-	deactivatePlugin,
+	__experimentalDeactivatePlugin as deactivatePlugin,
 	visitAdminPage,
 	showBlockToolbar,
 	clickBlockToolbarButton,
@@ -16,7 +16,12 @@ import {
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import { find } from 'puppeteer-testing-library';
+import { find, findAll } from 'puppeteer-testing-library';
+import { first } 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 Customizer', () => {
 	beforeEach( async () => {
@@ -26,14 +31,14 @@ describe( 'Widgets Customizer', () => {
 		// Disable welcome guide if it is enabled.
 		const isWelcomeGuideActive = await page.evaluate( () =>
 			wp.data
-				.select( 'core/customize-widgets' )
-				.__unstableIsFeatureActive( 'welcomeGuide' )
+				.select( 'core/interface' )
+				.isFeatureActive( 'core/customize-widgets', 'welcomeGuide' )
 		);
 		if ( isWelcomeGuideActive ) {
 			await page.evaluate( () =>
 				wp.data
-					.dispatch( 'core/customize-widgets' )
-					.__unstableToggleFeature( 'welcomeGuide' )
+					.dispatch( 'core/interface' )
+					.toggleFeature( 'core/customize-widgets', 'welcomeGuide' )
 			);
 		}
 	} );
@@ -158,6 +163,8 @@ describe( 'Widgets Customizer', () => {
 			name: 'My Search',
 			selector: '.widget-content *',
 		} ).toBeFound( findOptions );
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 
 	it( 'should open the inspector panel', async () => {
@@ -243,6 +250,8 @@ describe( 'Widgets Customizer', () => {
 		} ).toBeFound();
 
 		await expect( inspectorHeading ).not.toBeVisible();
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 
 	it( 'should handle the inserter outer section', async () => {
@@ -350,6 +359,8 @@ describe( 'Widgets Customizer', () => {
 			name: 'Add a block',
 			level: 2,
 		} ).not.toBeFound();
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 
 	it( 'should move focus to the block', async () => {
@@ -445,6 +456,8 @@ describe( 'Widgets Customizer', () => {
 			text: 'First Heading',
 		} );
 		await expect( headingBlock ).toHaveFocus();
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 
 	it( 'should clear block selection', async () => {
@@ -507,6 +520,8 @@ describe( 'Widgets Customizer', () => {
 			role: 'toolbar',
 			name: 'Block tools',
 		} ).not.toBeFound();
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 
 	it( 'should handle legacy widgets', async () => {
@@ -685,6 +700,8 @@ describe( 'Widgets Customizer', () => {
 			selector: '*[aria-live="polite"][aria-relevant="additions text"]',
 		} ).toBeFound();
 		await expect( paragraphBlock ).toBeVisible();
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 
 	it( 'should move (inner) blocks to another sidebar', async () => {
@@ -744,6 +761,100 @@ describe( 'Widgets Customizer', () => {
 		await expect( movedParagraphBlockQuery ).toBeFound();
 		const movedParagraphBlock = await find( movedParagraphBlockQuery );
 		await expect( movedParagraphBlock ).toHaveFocus();
+
+		expect( console ).toHaveErrored( twentyTwentyError );
+	} );
+
+	it( 'should not render Block Settings sections', async () => {
+		// We add Block Settings as a section, but it shouldn't display to
+		// the user as a section on the main menu. It's simply how we
+		// integrate the G sidebar inside the customizer.
+		const findAllBlockSettingsHeader = findAll(
+			{
+				role: 'heading',
+				name: /Block Settings/,
+				level: 3,
+			},
+			{ timeout: 0 }
+		);
+		await expect( findAllBlockSettingsHeader ).toThrowQueryEmptyError();
+	} );
+
+	it( 'should stay in block settings after making a change in that area', async () => {
+		// Open footer block widgets
+		const widgetsPanel = await find( {
+			role: 'heading',
+			name: /Widgets/,
+			level: 3,
+		} );
+		await widgetsPanel.click();
+
+		const footer1Section = await find( {
+			role: 'heading',
+			name: /^Footer #1/,
+			level: 3,
+		} );
+		await footer1Section.click();
+
+		// Add a block to make the publish button active.
+		await addBlock( 'Paragraph' );
+		await page.keyboard.type( 'First Paragraph' );
+
+		await waitForPreviewIframe();
+
+		// Click Publish
+		const publishButton = await find( {
+			role: 'button',
+			name: 'Publish',
+		} );
+		await publishButton.click();
+
+		// Wait for publishing to finish.
+		await page.waitForResponse( createURL( '/wp-admin/admin-ajax.php' ) );
+		await expect( publishButton ).toMatchQuery( {
+			disabled: true,
+		} );
+
+		// Select the paragraph block
+		const paragraphBlock = await find( {
+			role: 'document',
+			name: 'Paragraph block',
+		} );
+		await paragraphBlock.focus();
+
+		// Click the three dots button, then click "Show More Settings".
+		await showBlockToolbar();
+		await clickBlockToolbarButton( 'Options' );
+		const showMoreSettingsButton = await find( {
+			role: 'menuitem',
+			name: 'Show more settings',
+		} );
+		await showMoreSettingsButton.click();
+
+		// Change font size (Any change made in this section is sufficient; not required to be font size)
+		const CUSTOM_FONT_SIZE_LABEL_SELECTOR =
+			"//fieldset[legend[contains(text(),'Font size')]]//label[contains(text(), 'Custom')]";
+		await first( await page.$x( CUSTOM_FONT_SIZE_LABEL_SELECTOR ) ).click();
+		await page.keyboard.type( '23' );
+		await page.keyboard.press( 'Enter' );
+
+		// Now that we've made a change:
+		// (1) Publish button should be active
+		// (2) We should still be in the "Block Settings" area
+		await find( {
+			role: 'button',
+			name: 'Publish',
+		} );
+
+		// This fails on 539cea09 and earlier; we get kicked back to the widgets area.
+		// We expect to stay in block settings.
+		await find( {
+			role: 'heading',
+			name: 'Customizing ▸ Widgets ▸ Footer #1 Block Settings',
+			level: 3,
+		} );
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 } );