@wordpress/e2e-tests 4.0.1 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "4.0.1",
+	"version": "4.0.2",
 	"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": "^7.2.0",
-		"@wordpress/jest-console": "^5.0.2",
-		"@wordpress/jest-puppeteer-axe": "^4.0.2",
-		"@wordpress/scripts": "^22.4.0",
-		"@wordpress/url": "^3.7.0",
+		"@wordpress/e2e-test-utils": "^7.2.1",
+		"@wordpress/jest-console": "^5.0.3",
+		"@wordpress/jest-puppeteer-axe": "^4.0.3",
+		"@wordpress/scripts": "^22.4.1",
+		"@wordpress/url": "^3.7.1",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9c15c669843d53c5ca6024a4c486d01d819d123f"
+	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
 }

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

@@ -24,11 +24,21 @@ describe( 'Comment Query Loop', () => {
 			'newest'
 		);
 	} );
+	it( 'We show no results message if there are no comments', async () => {
+		await trashAllComments();
+		await createNewPost();
+		await insertBlock( 'Comments Query Loop' );
+		await page.waitForSelector( '[data-testid="noresults"]' );
+		expect(
+			await page.evaluate(
+				( el ) => el.innerText,
+				await page.$( '[data-testid="noresults"]' )
+			)
+		).toEqual( 'No results found.' );
+	} );
 	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.
@@ -89,9 +99,7 @@ describe( 'Comment Query Loop', () => {
 	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.

package/specs/editor/various/__snapshots__/post-editor-template-mode.test.js.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Post Editor Template mode Allow creating custom block templates in classic themes 1`] = `
-"<a class=\\"skip-link screen-reader-text\\" href=\\"#wp--skip-link--target\\">Skip to content</a>
-<header class=\\"wp-block-group\\"><h1 class=\\"wp-block-site-title\\"><a href=\\"http://localhost:8889\\" rel=\\"home\\">gutenberg</a></h1>
-
-<p class=\\"wp-block-site-tagline\\">Just another WordPress site</p></header>
-
-
-
-<hr class=\\"wp-block-separator\\">
-
-
-
-<main class=\\"wp-block-group\\" id=\\"wp--skip-link--target\\">
-<div class=\\"wp-block-group\\"><div class=\\"wp-block-group__inner-container\\"><div class=\\"wp-block-group__inner-container\\"><h2 class=\\"wp-block-post-title\\">Another FSE Post</h2></div></div></div>
-
-
-<div class=\\"entry-content wp-block-post-content\\">
-<p>Hello World</p>
-</div></main>
-
-
-
-<p>Just a random paragraph added to the template</p>
-"
-`;

package/specs/editor/various/post-editor-template-mode.test.js

@@ -1,377 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activateTheme,
-	createNewPost,
-	insertBlock,
-	saveDraft,
-	openPreviewPage,
-	openDocumentSettingsSidebar,
-	activatePlugin,
-	deactivatePlugin,
-	deleteAllTemplates,
-	setBrowserViewport,
-} from '@wordpress/e2e-test-utils';
-
-const openSidebarPanelWithTitle = async ( title ) => {
-	const panel = await page.waitForXPath(
-		`//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ title }")]`
-	);
-
-	const expanded = await page.evaluate(
-		( element ) => element.getAttribute( 'aria-expanded' ),
-		panel
-	);
-	if ( expanded === 'false' ) {
-		await panel.click();
-	}
-};
-
-const disableTemplateWelcomeGuide = async () => {
-	// Turn off the welcome guide if it's visible.
-	const isWelcomeGuideActive = await page.evaluate( () =>
-		wp.data
-			.select( 'core/edit-post' )
-			.isFeatureActive( 'welcomeGuideTemplate' )
-	);
-	if ( isWelcomeGuideActive ) {
-		await page.evaluate( () =>
-			wp.data
-				.dispatch( 'core/edit-post' )
-				.toggleFeature( 'welcomeGuideTemplate' )
-		);
-	}
-};
-
-const switchToTemplateMode = async () => {
-	await disableTemplateWelcomeGuide();
-
-	// Switch to template mode.
-	await openDocumentSettingsSidebar();
-	await openSidebarPanelWithTitle( 'Template' );
-	const editTemplateXPath =
-		"//*[contains(@class, 'edit-post-template__actions')]//button[contains(text(), 'Edit')]";
-	const switchLink = await page.waitForXPath( editTemplateXPath );
-	await switchLink.click();
-
-	// Check that we switched properly to edit mode.
-	await page.waitForXPath(
-		'//*[text()="Editing template. Changes made here affect all posts and pages that use the template."]'
-	);
-	const title = await page.$eval(
-		'.edit-post-template-top-area',
-		( el ) => el.innerText
-	);
-	expect( title ).toContain( 'Just an FSE Post\n' );
-};
-
-const createNewTemplate = async ( templateName ) => {
-	await disableTemplateWelcomeGuide();
-
-	// Create a new custom template.
-	await openDocumentSettingsSidebar();
-	await openSidebarPanelWithTitle( 'Template' );
-	const newTemplateXPath =
-		"//*[contains(@class, 'edit-post-template__actions')]//button[contains(text(), 'New')]";
-	const newButton = await page.waitForXPath( newTemplateXPath );
-	await newButton.click();
-
-	// Fill the template title and submit.
-	const templateNameInputSelector =
-		'.edit-post-template__modal .components-text-control__input';
-	await page.click( templateNameInputSelector );
-	await page.keyboard.type( templateName );
-	await page.keyboard.press( 'Enter' );
-
-	// Check that we switched properly to edit mode.
-	await page.waitForXPath(
-		'//*[contains(@class, "components-snackbar")]/*[text()="Custom template created. You\'re in template mode now."]'
-	);
-};
-
-describe( 'Post Editor Template mode', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-templates' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-		await deactivatePlugin( 'gutenberg-test-block-templates' );
-	} );
-
-	it( 'Allow to switch to template mode, edit the template and check the result', async () => {
-		await activateTheme( 'emptytheme' );
-		await createNewPost();
-		// Create a random post.
-		await page.type( '.editor-post-title__input', 'Just an FSE Post' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Hello World' );
-
-		// Unselect the blocks.
-		await page.evaluate( () => {
-			wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
-		} );
-
-		// Save the post
-		// Saving shouldn't be necessary but unfortunately,
-		// there's a template resolution bug forcing us to do so.
-		await saveDraft();
-		await page.reload();
-		await switchToTemplateMode();
-
-		// Edit the template.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type(
-			'Just a random paragraph added to the template'
-		);
-
-		// Save changes.
-		const publishButton = await page.waitForXPath(
-			`//button[contains(text(), 'Publish')]`
-		);
-		await publishButton.click();
-		const saveButton = await page.waitForXPath(
-			`//div[contains(@class, "entities-saved-states__panel-header")]/button[contains(text(), 'Save')]`
-		);
-		await saveButton.click();
-
-		// Preview changes.
-		const previewPage = await openPreviewPage();
-		await previewPage.waitForXPath(
-			'//p[contains(text(), "Just a random paragraph added to the template")]'
-		);
-	} );
-
-	it.skip( 'Allow creating custom block templates in classic themes', async () => {
-		await activateTheme( 'twentytwentyone' );
-		await createNewPost();
-		// Create a random post.
-		await page.type( '.editor-post-title__input', 'Another FSE Post' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Hello World' );
-
-		// Unselect the blocks.
-		await page.evaluate( () => {
-			wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
-		} );
-
-		// Save the post
-		// Saving shouldn't be necessary but unfortunately,
-		// there's a template resolution bug forcing us to do so.
-		await saveDraft();
-		await page.reload();
-
-		await createNewTemplate( 'Blank Template' );
-
-		// Edit the template.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type(
-			'Just a random paragraph added to the template'
-		);
-
-		// Save changes.
-		const publishButton = await page.waitForXPath(
-			`//button[contains(text(), 'Publish')]`
-		);
-		await publishButton.click();
-		const saveButton = await page.waitForXPath(
-			`//div[contains(@class, "entities-saved-states__panel-header")]/button[contains(text(), 'Save')]`
-		);
-		await saveButton.click();
-		// Avoid publishing the post
-		const cancelButton = await page.waitForXPath(
-			`//button[contains(text(), 'Cancel')]`
-		);
-		await cancelButton.click();
-
-		// Preview changes.
-		const previewPage = await openPreviewPage();
-		await previewPage.waitForSelector( '.wp-site-blocks' );
-		const content = await previewPage.evaluate(
-			() => document.querySelector( '.wp-site-blocks' ).innerHTML
-		);
-
-		expect( content ).toMatchSnapshot();
-	} );
-} );
-
-describe( 'Delete Post Template Confirmation Dialog', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-templates' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-		await activateTheme( 'twentytwentyone' );
-		await createNewPost();
-		// Create a random post.
-		await page.type( '.editor-post-title__input', 'Just an FSE Post' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Hello World' );
-
-		// Save the post
-		// Saving shouldn't be necessary but unfortunately,
-		// there's a template resolution bug forcing us to do so.
-		await saveDraft();
-		await page.reload();
-		// Unselect the blocks.
-		await page.evaluate( () => {
-			wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
-		} );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-		await deactivatePlugin( 'gutenberg-test-block-templates' );
-	} );
-
-	[ 'large', 'small' ].forEach( ( viewport ) => {
-		it( `should retain template if deletion is canceled when the viewport is ${ viewport }`, async () => {
-			await setBrowserViewport( viewport );
-
-			const isWelcomeGuideActive = await page.evaluate(
-				() =>
-					!! wp.data
-						.select( 'core/preferences' )
-						.get( 'core/edit-post', 'welcomeGuide' )
-			);
-			if ( isWelcomeGuideActive === true ) {
-				await page.evaluate( () =>
-					wp.data
-						.dispatch( 'core/preferences' )
-						.toggle( 'core/edit-post', 'welcomeGuide' )
-				);
-				await page.reload();
-				await page.waitForSelector( '.edit-post-layout' );
-			}
-			if ( viewport === 'small' ) {
-				await page.waitForXPath( '//button[@aria-label="Settings"]' );
-				await openDocumentSettingsSidebar();
-			}
-			const templateTitle = `${ viewport } Viewport Deletion Test`;
-
-			await createNewTemplate( templateTitle );
-			// Edit the template
-			if ( viewport === 'small' ) {
-				await page.waitForXPath( `//h2[text()="${ templateTitle }"]` );
-				const closeDocumentSettingsButton = await page.waitForXPath(
-					'//button[@aria-label="Close settings"]'
-				);
-				await closeDocumentSettingsButton.click();
-			}
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type(
-				'Just a random paragraph added to the template'
-			);
-
-			// Save changes
-			const publishButton = await page.waitForXPath(
-				`//button[contains(text(), 'Publish')]`
-			);
-			await publishButton.click();
-			const saveButton = await page.waitForXPath(
-				`//div[contains(@class, "entities-saved-states__panel-header")]/button[contains(text(), 'Save')]`
-			);
-			await saveButton.click();
-			// Avoid publishing the post
-			// Select the cancel button via parent div's class, because the text `Cancel` is used on another button as well
-			const cancelButton = await page.waitForXPath(
-				`//div[contains(@class,"editor-post-publish-panel__header-cancel-button")]/button[not(@disabled)]`
-			);
-			await cancelButton.click();
-
-			const templateDropdown = await page.waitForXPath(
-				`//button[contains(text(), '${ templateTitle }')]`
-			);
-			await templateDropdown.click();
-			const deleteTemplateButton = await page.waitForXPath(
-				'//button[@role="menuitem"][@aria-label="Delete template"]'
-			);
-			await deleteTemplateButton.click();
-
-			await page.waitForXPath(
-				`//*[text()="Are you sure you want to delete the ${ templateTitle } template? It may be used by other pages or posts."]`
-			);
-			const dialogCancelButton = await page.waitForXPath(
-				'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
-			);
-			await dialogCancelButton.click();
-
-			const exitTemplateModeButton = await page.waitForXPath(
-				'//button[text()="Back"]'
-			);
-			await exitTemplateModeButton.click();
-
-			await page.waitForXPath(
-				'//button[@aria-label="Settings"][@aria-expanded="false"]'
-			);
-			await openDocumentSettingsSidebar();
-
-			const element = await page.waitForXPath(
-				'//h2/button[contains(text(), "Template")]/../..//select'
-			);
-			const value = await element.getProperty( 'value' );
-			const currentTemplateSlug = await value.jsonValue();
-
-			expect( currentTemplateSlug ).toBe(
-				`wp-custom-template-${ viewport }-viewport-deletion-test`
-			);
-		} );
-
-		it( `should delete template if deletion is confirmed when the viewport is ${ viewport }`, async () => {
-			const templateTitle = `${ viewport } Viewport Deletion Test`;
-
-			await setBrowserViewport( viewport );
-
-			await switchToTemplateMode();
-			if ( viewport === 'small' ) {
-				const closeDocumentSettingsButton = await page.waitForXPath(
-					'//div[contains(@class,"interface-complementary-area-header__small")]/button[@aria-label="Close settings"]'
-				);
-				await closeDocumentSettingsButton.click();
-			}
-
-			const templateDropdown = await page.waitForXPath(
-				`//button[contains(text(), '${ templateTitle }')]`
-			);
-			await templateDropdown.click();
-
-			const deleteTemplateButton = await page.waitForXPath(
-				'//button[@role="menuitem"][@aria-label="Delete template"]'
-			);
-			await deleteTemplateButton.click();
-
-			await page.waitForXPath(
-				`//*[text()="Are you sure you want to delete the ${ templateTitle } template? It may be used by other pages or posts."]`
-			);
-			const dialogConfirmButton = await page.waitForXPath(
-				'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="OK"]'
-			);
-
-			await dialogConfirmButton.click();
-
-			// Saving isn't technically necessary, but for themes without any specified templates,
-			// the removal of the Templates dropdown is delayed. A save and reload allows for this
-			// delay and prevents flakiness
-			await saveDraft();
-			await page.reload();
-
-			const optionElementHandlers = await page.$x(
-				'//h2/button[contains(text(), "Template")]/../..//select/option'
-			);
-			const availableTemplates = [];
-			for ( const elem of optionElementHandlers ) {
-				const elemName = await elem.getProperty( 'textContent' );
-				const templateName = await elemName.jsonValue();
-				availableTemplates.push( templateName );
-			}
-
-			expect(
-				availableTemplates.includes(
-					`${ viewport } Viewport Deletion Test`
-				)
-			).toBe( false );
-		} );
-	} );
-} );

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

@@ -1,90 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	deleteAllTemplates,
-	activateTheme,
-	visitSiteEditor,
-} from '@wordpress/e2e-test-utils';
-
-async function getDocumentSettingsTitle() {
-	const titleElement = await page.waitForSelector(
-		'.edit-site-document-actions__title'
-	);
-
-	return titleElement.evaluate( ( el ) => el.textContent );
-}
-
-async function getDocumentSettingsSecondaryTitle() {
-	const secondaryTitleElement = await page.waitForSelector(
-		'.edit-site-document-actions__secondary-item'
-	);
-
-	return secondaryTitleElement.evaluate( ( el ) => el.textContent );
-}
-
-describe( 'Document Settings', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	beforeEach( async () => {
-		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 visitSiteEditor( {
-				postId: 'emptytheme//index',
-				postType: 'wp_template',
-			} );
-
-			// Evaluate the document settings title.
-			const actual = await getDocumentSettingsTitle();
-
-			expect( actual ).toEqual( 'Editing template: Index' );
-		} );
-
-		describe( 'and a template part is clicked in the template', () => {
-			it.skip( "should display the selected template part's name in the document header", async () => {
-				// Select the header template part via list view.
-				await page.click(
-					'.edit-post-header-toolbar__list-view-toggle'
-				);
-				const headerTemplatePartListViewButton = await page.waitForXPath(
-					'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
-				);
-				headerTemplatePartListViewButton.click();
-				await page.click(
-					'button[aria-label="Close List View Sidebar"]'
-				);
-
-				// Evaluate the document settings secondary title.
-				const actual = await getDocumentSettingsSecondaryTitle();
-
-				expect( actual ).toEqual( 'Editing template part: header' );
-			} );
-		} );
-	} );
-
-	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 visitSiteEditor( {
-				postId: 'emptytheme//header',
-				postType: 'wp_template_part',
-			} );
-
-			// Evaluate the document settings title.
-			const actual = await getDocumentSettingsTitle();
-
-			expect( actual ).toEqual( 'Editing template part: header' );
-		} );
-	} );
-} );