@wordpress/e2e-tests 3.1.0 → 4.0.1

package/specs/experiments/blocks/comments-query.test.js

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activateTheme,
+	createNewPost,
+	insertBlock,
+	pressKeyTimes,
+	publishPost,
+	setOption,
+	trashAllComments,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Comment Query Loop', () => {
+	let previousPageComments,
+		previousCommentsPerPage,
+		previousDefaultCommentsPage;
+	beforeAll( async () => {
+		await activateTheme( 'emptytheme' );
+		previousPageComments = await setOption( 'page_comments', '1' );
+		previousCommentsPerPage = await setOption( 'comments_per_page', '1' );
+		previousDefaultCommentsPage = await setOption(
+			'default_comments_page',
+			'newest'
+		);
+	} );
+	it( 'Pagination links are working as expected', async () => {
+		await createNewPost();
+		// Insert the Query Comment Loop block.
+		await insertBlock( 'Comments Query Loop' );
+		// Insert the Comment Loop form.
+		await insertBlock( 'Post Comments Form' );
+		await publishPost();
+		// Visit the post that was just published.
+		await page.click(
+			'.post-publish-panel__postpublish-buttons .is-primary'
+		);
+
+		// TODO: We can extract this into a util once we find we need it elsewhere.
+		// Create three comments for that post.
+		for ( let i = 0; i < 3; i++ ) {
+			await page.waitForSelector( 'textarea#comment' );
+			await page.click( 'textarea#comment' );
+			await page.type(
+				`textarea#comment`,
+				`This is an automated comment - ${ i }`
+			);
+			await pressKeyTimes( 'Tab', 1 );
+			await Promise.all( [
+				page.keyboard.press( 'Enter' ),
+				page.waitForNavigation( { waitUntil: 'networkidle0' } ),
+			] );
+		}
+
+		// We check that there is a previous comments page link.
+		expect(
+			await page.$( '.wp-block-comments-pagination-previous' )
+		).not.toBeNull();
+		expect(
+			await page.$( '.wp-block-comments-pagination-next' )
+		).toBeNull();
+
+		await Promise.all( [
+			page.click( '.wp-block-comments-pagination-previous' ),
+			page.waitForNavigation( { waitUntil: 'networkidle0' } ),
+		] );
+
+		// We check that there are a previous and a next link.
+		expect(
+			await page.$( '.wp-block-comments-pagination-previous' )
+		).not.toBeNull();
+		expect(
+			await page.$( '.wp-block-comments-pagination-next' )
+		).not.toBeNull();
+
+		await Promise.all( [
+			page.click( '.wp-block-comments-pagination-previous' ),
+			page.waitForNavigation( { waitUntil: 'networkidle0' } ),
+		] );
+
+		// We check that there is only have a next link
+		expect(
+			await page.$( '.wp-block-comments-pagination-previous' )
+		).toBeNull();
+		expect(
+			await page.$( '.wp-block-comments-pagination-next' )
+		).not.toBeNull();
+	} );
+	it( 'Pagination links are not appearing if break comments is not enabled', async () => {
+		await setOption( 'page_comments', '0' );
+		await createNewPost();
+		// Insert the Query Comment Loop block.
+		await insertBlock( 'Comments Query Loop' );
+		// Insert the Comment Loop form.
+		await insertBlock( 'Post Comments Form' );
+		await publishPost();
+		// Visit the post that was just published.
+		await page.click(
+			'.post-publish-panel__postpublish-buttons .is-primary'
+		);
+
+		// Create three comments for that post.
+		for ( let i = 0; i < 3; i++ ) {
+			await page.waitForSelector( 'textarea#comment' );
+			await page.click( 'textarea#comment' );
+			await page.type(
+				`textarea#comment`,
+				`This is an automated comment - ${ i }`
+			);
+			await pressKeyTimes( 'Tab', 1 );
+			await Promise.all( [
+				page.keyboard.press( 'Enter' ),
+				page.waitForNavigation( { waitUntil: 'networkidle0' } ),
+			] );
+		}
+		// We check that there are no comments page link.
+		expect(
+			await page.$( '.wp-block-comments-pagination-previous' )
+		).toBeNull();
+		expect(
+			await page.$( '.wp-block-comments-pagination-next' )
+		).toBeNull();
+	} );
+	afterAll( async () => {
+		await trashAllComments();
+		await activateTheme( 'twentytwentyone' );
+		await setOption( 'page_comments', previousPageComments );
+		await setOption( 'comments_per_page', previousCommentsPerPage );
+		await setOption( 'default_comments_page', previousDefaultCommentsPage );
+	} );
+} );

package/specs/experiments/navigation-editor.test.js

@@ -701,147 +701,152 @@ describe.skip( 'Navigation editor', () => {
 			expect( lastItemAttributes.isTopLevelLink ).toBeTruthy();
 		} );
 	} );
-} );
 
-describe( 'Delete menu button', () => {
-	useExperimentalFeatures( [ '#gutenberg-navigation' ] );
+	describe( 'Delete menu button', () => {
+		useExperimentalFeatures( [ '#gutenberg-navigation' ] );
 
-	beforeAll( async () => {
-		await deleteAllMenus();
-		await deleteAllLinkedResources();
-	} );
-
-	afterEach( async () => {
-		await deleteAllMenus();
-		await deleteAllLinkedResources();
-	} );
+		beforeAll( async () => {
+			await deleteAllMenus();
+			await deleteAllLinkedResources();
+		} );
 
-	afterEach( async () => {
-		await setBrowserViewport( 'large' );
-	} );
-	it.each( [ 'large', 'small' ] )(
-		`should retain menu when confirmation is canceled and the viewport is %s`,
-		async ( viewport ) => {
-			const menuName = 'Menu delete test';
-			await createMenu( { name: menuName }, menuItemsFixture );
-			await visitNavigationEditor();
-			await setBrowserViewport( viewport );
-			// Wait for the header to show the menu name.
-			await page.waitForXPath(
-				`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
-			);
+		afterEach( async () => {
+			await deleteAllMenus();
+			await deleteAllLinkedResources();
+		} );
 
-			if ( viewport === 'small' ) {
-				const openSettingsSidebar = await page.waitForXPath(
-					'//button[@aria-label="Settings"][@aria-expanded="false"]'
+		afterEach( async () => {
+			await setBrowserViewport( 'large' );
+		} );
+		it.each( [ 'large', 'small' ] )(
+			`should retain menu when confirmation is canceled and the viewport is %s`,
+			async ( viewport ) => {
+				const menuName = 'Menu delete test';
+				await createMenu( { name: menuName }, menuItemsFixture );
+				await visitNavigationEditor();
+				await setBrowserViewport( viewport );
+				// Wait for the header to show the menu name.
+				await page.waitForXPath(
+					`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
 				);
-				await openSettingsSidebar.click();
-			}
 
-			const deleteMenuButton = await page.waitForXPath(
-				'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
-			);
-			await deleteMenuButton.click();
+				if ( viewport === 'small' ) {
+					const openSettingsSidebar = await page.waitForXPath(
+						'//button[@aria-label="Settings"][@aria-expanded="false"]'
+					);
+					await openSettingsSidebar.click();
+				}
 
-			const cancelButton = await page.waitForXPath(
-				'//*[@role="dialog"]//button[text()="Cancel"]'
-			);
-			await cancelButton.click();
+				const deleteMenuButton = await page.waitForXPath(
+					'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
+				);
+				await deleteMenuButton.click();
 
-			const menuActionsDropdown = await page.waitForXPath(
-				`//*[contains(@class,"edit-navigation-menu-actions")]//h2[text()="${ menuName }"]`
-			);
-			const currentSelectedMenu = await page.evaluate(
-				( el ) => el.textContent,
-				menuActionsDropdown
-			);
+				const cancelButton = await page.waitForXPath(
+					'//*[@role="dialog"]//button[text()="Cancel"]'
+				);
+				await cancelButton.click();
 
-			expect( currentSelectedMenu ).toBe( menuName );
-		}
-	);
-	it.each( [ 'large', 'small' ] )(
-		`should delete menu when confirmation is confirmed and there are no other menus and the viewport is %s`,
-		async ( viewport ) => {
-			const menuName = 'Menu delete test';
-			await createMenu( { name: menuName }, menuItemsFixture );
-			await visitNavigationEditor();
-			await setBrowserViewport( viewport );
-			// Wait for the header to show the menu name.
-			await page.waitForXPath(
-				`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
-			);
-			if ( viewport === 'small' ) {
-				const openSettingsSidebar = await page.waitForXPath(
-					'//button[@aria-label="Settings"][@aria-expanded="false"]'
+				const menuActionsDropdown = await page.waitForXPath(
+					`//*[contains(@class,"edit-navigation-menu-actions")]//h2[text()="${ menuName }"]`
+				);
+				const currentSelectedMenu = await page.evaluate(
+					( el ) => el.textContent,
+					menuActionsDropdown
 				);
-				await openSettingsSidebar.click();
+
+				expect( currentSelectedMenu ).toBe( menuName );
 			}
+		);
+		it.each( [ 'large', 'small' ] )(
+			`should delete menu when confirmation is confirmed and there are no other menus and the viewport is %s`,
+			async ( viewport ) => {
+				const menuName = 'Menu delete test';
+				await createMenu( { name: menuName }, menuItemsFixture );
+				await visitNavigationEditor();
+				await setBrowserViewport( viewport );
+				// Wait for the header to show the menu name.
+				await page.waitForXPath(
+					`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
+				);
+				if ( viewport === 'small' ) {
+					const openSettingsSidebar = await page.waitForXPath(
+						'//button[@aria-label="Settings"][@aria-expanded="false"]'
+					);
+					await openSettingsSidebar.click();
+				}
 
-			const deleteMenuButton = await page.waitForXPath(
-				'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
-			);
-			await deleteMenuButton.click();
+				const deleteMenuButton = await page.waitForXPath(
+					'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
+				);
+				await deleteMenuButton.click();
 
-			const confirmButton = await page.waitForXPath(
-				'//*[@role="dialog"]//button[text()="OK"]'
-			);
-			await confirmButton.click();
+				const confirmButton = await page.waitForXPath(
+					'//*[@role="dialog"]//button[text()="OK"]'
+				);
+				await confirmButton.click();
 
-			await page.waitForXPath(
-				`//*[@role="button"][@aria-label="Dismiss this notice"]//*[text()='"${ menuName }" menu has been deleted']`
-			);
+				await page.waitForXPath(
+					`//*[@role="button"][@aria-label="Dismiss this notice"]//*[text()='"${ menuName }" menu has been deleted']`
+				);
 
-			// If the "Create your first menu" prompt appears, we know there are no remaining menus,
-			// so our test menu must have been deleted successfully.
-			const createFirstMenuPrompt = await page.waitForXPath(
-				'//h3[.="Create your first menu"]',
-				{
-					visible: true,
-				}
-			);
-			const noMenusRemaining = createFirstMenuPrompt ? true : false;
-			expect( noMenusRemaining ).toBe( true );
-		}
-	);
+				// If the "Create your first menu" prompt appears, we know there are no remaining menus,
+				// so our test menu must have been deleted successfully.
+				const createFirstMenuPrompt = await page.waitForXPath(
+					'//h3[.="Create your first menu"]',
+					{
+						visible: true,
+					}
+				);
+				const noMenusRemaining = createFirstMenuPrompt ? true : false;
+				expect( noMenusRemaining ).toBe( true );
+			}
+		);
 
-	it.each( [ 'large', 'small' ] )(
-		`should delete menu when confirmation is confirmed and there are other existing menus and the viewport is %s`,
-		async () => {
-			const menuName = 'Menu delete test';
-			await createMenu( { name: menuName }, menuItemsFixture );
-			await createMenu( { name: `${ menuName } 2` }, menuItemsFixture );
-			await visitNavigationEditor();
-			// Wait for the header to show the menu name
-			await page.waitForXPath(
-				`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
-			);
+		it.each( [ 'large', 'small' ] )(
+			`should delete menu when confirmation is confirmed and there are other existing menus and the viewport is %s`,
+			async () => {
+				const menuName = 'Menu delete test';
+				await createMenu( { name: menuName }, menuItemsFixture );
+				await createMenu(
+					{ name: `${ menuName } 2` },
+					menuItemsFixture
+				);
+				await visitNavigationEditor();
+				// Wait for the header to show the menu name
+				await page.waitForXPath(
+					`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
+				);
 
-			// Confirm both test menus are present
-			openMenuActionsDropdown();
-			const firstTestMenuItem = await getMenuItem( menuName );
-			const secondTestMenuItem = await getMenuItem( `${ menuName } 2` );
+				// Confirm both test menus are present
+				openMenuActionsDropdown();
+				const firstTestMenuItem = await getMenuItem( menuName );
+				const secondTestMenuItem = await getMenuItem(
+					`${ menuName } 2`
+				);
 
-			expect( firstTestMenuItem ).not.toBeNull();
-			expect( secondTestMenuItem ).not.toBeNull();
+				expect( firstTestMenuItem ).not.toBeNull();
+				expect( secondTestMenuItem ).not.toBeNull();
 
-			// Delete the first test menu
-			const deleteMenuButton = await page.waitForXPath(
-				'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
-			);
-			await deleteMenuButton.click();
+				// Delete the first test menu
+				const deleteMenuButton = await page.waitForXPath(
+					'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
+				);
+				await deleteMenuButton.click();
 
-			const confirmButton = await page.waitForXPath(
-				'//*[@role="dialog"]//button[text()="OK"]'
-			);
-			await confirmButton.click();
+				const confirmButton = await page.waitForXPath(
+					'//*[@role="dialog"]//button[text()="OK"]'
+				);
+				await confirmButton.click();
 
-			await page.waitForXPath(
-				`//*[@role="button"][@aria-label="Dismiss this notice"]//*[text()='"${ menuName }" menu has been deleted']`
-			);
+				await page.waitForXPath(
+					`//*[@role="button"][@aria-label="Dismiss this notice"]//*[text()='"${ menuName }" menu has been deleted']`
+				);
 
-			openMenuActionsDropdown();
-			const deletedTestMenuItem = await getMenuItem( menuName );
-			expect( deletedTestMenuItem ).toBeNull();
-		}
-	);
+				openMenuActionsDropdown();
+				const deletedTestMenuItem = await getMenuItem( menuName );
+				expect( deletedTestMenuItem ).toBeNull();
+			}
+		);
+	} );
 } );

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

@@ -86,12 +86,10 @@ describe( 'Post Editor Performance', () => {
 	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 } );
+			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+				autosaveInterval: 100000000000,
+				localAutosaveInterval: 100000000000,
+			} );
 		} );
 	} );
 

package/specs/site-editor/global-styles-sidebar.test.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	deleteAllTemplates,
+	activateTheme,
+	visitSiteEditor,
+	toggleGlobalStyles,
+	openGlobalStylesPanel,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Global styles sidebar', () => {
+	beforeAll( async () => {
+		await activateTheme( 'emptytheme' );
+		await Promise.all( [
+			deleteAllTemplates( 'wp_template' ),
+			deleteAllTemplates( 'wp_template_part' ),
+		] );
+	} );
+	afterAll( async () => {
+		await Promise.all( [
+			deleteAllTemplates( 'wp_template' ),
+			deleteAllTemplates( 'wp_template_part' ),
+		] );
+		await activateTheme( 'twentytwentyone' );
+	} );
+	beforeEach( async () => {
+		await visitSiteEditor();
+	} );
+	describe( 'blocks list', () => {
+		it( 'should filter results properly', async () => {
+			await toggleGlobalStyles();
+			await openGlobalStylesPanel( 'Blocks' );
+			await page.focus( '.edit-site-block-types-search input' );
+			await page.keyboard.type( 'heading' );
+			const results = await page.$$(
+				'.edit-site-block-types-item-list div[role="listitem"]'
+			);
+			expect( results.length ).toEqual( 1 );
+		} );
+	} );
+} );

package/specs/site-editor/iframe-rendering-mode.test.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { activateTheme, visitSiteEditor } from '@wordpress/e2e-test-utils';
+
+describe( 'Site editor iframe rendering mode', () => {
+	beforeAll( async () => {
+		await activateTheme( 'emptytheme' );
+	} );
+
+	afterAll( async () => {
+		await activateTheme( 'twentytwentyone' );
+	} );
+
+	it( 'Should render editor in standards mode.', async () => {
+		await visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+		} );
+
+		const compatMode = await page.evaluate(
+			() =>
+				document.querySelector( `iframe[name='editor-canvas']` )
+					.contentDocument.compatMode
+		);
+
+		// CSS1Compat = expected standards mode.
+		// BackCompat = quirks mode.
+		expect( compatMode ).toBe( 'CSS1Compat' );
+	} );
+} );

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

@@ -43,7 +43,7 @@ describe( 'Site Editor Templates Export', () => {
 		await visitSiteEditor();
 	} );
 
-	it( 'clicking export should download edit-site-export.zip file', async () => {
+	it( 'clicking export should download emptytheme.zip file', async () => {
 		const directory = fs.mkdtempSync(
 			path.join( os.tmpdir(), 'test-edit-site-export-' )
 		);
@@ -53,7 +53,7 @@ describe( 'Site Editor Templates Export', () => {
 		} );
 
 		await clickOnMoreMenuItem( 'Export', 'site-editor' );
-		const filePath = path.join( directory, 'edit-site-export.zip' );
+		const filePath = path.join( directory, 'emptytheme.zip' );
 		await waitForFileExists( filePath );
 		expect( fs.existsSync( filePath ) ).toBe( true );
 		fs.unlinkSync( filePath );

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

@@ -11,7 +11,7 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 async function openOtherStyles() {
-	const OTHER_STYLES_SELECTOR = '//div[contains(text(),"Other styles")]';
+	const OTHER_STYLES_SELECTOR = '//div[contains(text(),"Browse styles")]';
 	await ( await page.waitForXPath( OTHER_STYLES_SELECTOR ) ).click();
 }
 
@@ -22,19 +22,21 @@ async function getAvailableStyleVariations() {
 	return page.$$( VARIATION_ITEMS_STYLES_SELECTOR );
 }
 
-async function applyVariation( number ) {
+async function applyVariation( label ) {
 	await toggleGlobalStyles();
 	await openOtherStyles();
-	const variations = await getAvailableStyleVariations();
-	await variations[ number ].click();
+	const variation = await page.waitForXPath(
+		`//*[@role="button"][@aria-label="${ label }"]`
+	);
+	await variation.click();
 }
 
 async function applyPinkVariation() {
-	await applyVariation( 1 );
+	await applyVariation( 'pink' );
 }
 
 async function applyYellowVariation() {
-	await applyVariation( 2 );
+	await applyVariation( 'yellow' );
 }
 
 async function openColorsPanel() {
@@ -71,7 +73,7 @@ async function getCustomFontSizeValue() {
 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: "), ";")`,
+			`substring-before(substring-after(//div[contains(@class, "edit-site-global-styles-sidebar__panel")]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`,
 			document,
 			null,
 			XPathResult.ANY_TYPE,

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

@@ -21,9 +21,11 @@ describe( 'Template Part', () => {
 		await deleteAllTemplates( 'wp_template' );
 		await deleteAllTemplates( 'wp_template_part' );
 	} );
-	afterAll( async () => {
+	afterEach( async () => {
 		await deleteAllTemplates( 'wp_template' );
 		await deleteAllTemplates( 'wp_template_part' );
+	} );
+	afterAll( async () => {
 		await activateTheme( 'twentytwentyone' );
 	} );