@wordpress/e2e-tests 7.18.0 → 7.19.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.19.0 (2023-12-13)
+
 ## 7.18.0 (2023-11-29)
 
 ## 7.17.0 (2023-11-16)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.18.0",
+	"version": "7.19.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,12 +23,12 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.18.0",
-		"@wordpress/interactivity": "^3.0.0",
-		"@wordpress/jest-console": "^7.18.0",
-		"@wordpress/jest-puppeteer-axe": "^6.18.0",
-		"@wordpress/scripts": "^26.18.0",
-		"@wordpress/url": "^3.48.0",
+		"@wordpress/e2e-test-utils": "^10.19.0",
+		"@wordpress/interactivity": "^3.1.0",
+		"@wordpress/jest-console": "^7.19.0",
+		"@wordpress/jest-puppeteer-axe": "^6.19.0",
+		"@wordpress/scripts": "^26.19.0",
+		"@wordpress/url": "^3.49.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
+	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
 }

package/plugins/interactive-blocks/router-navigate/render.php

@@ -3,6 +3,7 @@
  * HTML for testing the router navigate function.
  *
  * @package gutenberg-test-interactive-blocks
+ *
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 

package/plugins/interactive-blocks/router-regions/render.php

@@ -3,6 +3,7 @@
  * HTML for testing the hydration of router regions.
  *
  * @package gutenberg-test-interactive-blocks
+ *
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 

package/plugins/interactive-blocks/store-tag/render.php

@@ -3,6 +3,7 @@
  * HTML for testing the hydration of the serialized store.
  *
  * @package gutenberg-test-interactive-blocks
+ *
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 

package/specs/editor/various/change-detection.test.js

@@ -370,7 +370,11 @@ describe( 'Change detection', () => {
 	it( 'consecutive edits to the same attribute should mark the post as dirty after a save', async () => {
 		// Open the sidebar block settings.
 		await openDocumentSettingsSidebar();
-		await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' );
+
+		const blockInspectorTab = await page.waitForXPath(
+			'//button[@role="tab"][contains(text(), "Block")]'
+		);
+		await blockInspectorTab.click();
 
 		// Insert a paragraph.
 		await clickBlockAppender();

package/specs/editor/various/editor-modes.test.js

@@ -102,21 +102,24 @@ describe( 'Editing modes (visual/HTML)', () => {
 		expect( title ).toBe( 'Paragraph' );
 
 		// The Block inspector should be active.
-		let blockInspectorTab = await page.$(
-			'.edit-post-sidebar__panel-tab.is-active[data-label="Block"]'
+		let [ blockInspectorTab ] = await page.$x(
+			'//button[@role="tab"][@aria-selected="true"][contains(text(), "Block")]'
 		);
 		expect( blockInspectorTab ).not.toBeNull();
 
 		await switchEditorModeTo( 'Code' );
 
 		// The Block inspector should not be active anymore.
-		blockInspectorTab = await page.$(
-			'.edit-post-sidebar__panel-tab.is-active[data-label="Block"]'
+		[ blockInspectorTab ] = await page.$x(
+			'//button[@role="tab"][@aria-selected="true"][contains(text(), "Block")]'
 		);
-		expect( blockInspectorTab ).toBeNull();
+		expect( blockInspectorTab ).toBeUndefined();
 
 		// No block is selected.
-		await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' );
+		const inactiveBlockInspectorTab = await page.waitForXPath(
+			'//button[@role="tab"][contains(text(), "Block")]'
+		);
+		inactiveBlockInspectorTab.click();
 		const noBlocksElement = await page.$(
 			'.block-editor-block-inspector__no-blocks'
 		);

package/specs/editor/various/preferences.test.js

@@ -17,7 +17,7 @@ describe( 'preferences', () => {
 	async function getActiveSidebarTabText() {
 		try {
 			return await page.$eval(
-				'.edit-post-sidebar__panel-tab.is-active',
+				'div[aria-label="Editor settings"] [role="tab"][aria-selected="true"]',
 				( node ) => node.textContent
 			);
 		} catch ( error ) {
@@ -29,11 +29,15 @@ describe( 'preferences', () => {
 	}
 
 	it( 'remembers sidebar dismissal between sessions', async () => {
+		const blockTab = await page.waitForXPath(
+			`//button[@role="tab"][contains(text(), 'Block')]`
+		);
+
 		// Open by default.
 		expect( await getActiveSidebarTabText() ).toBe( 'Post' );
 
 		// Change to "Block" tab.
-		await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block"]' );
+		await blockTab.click();
 		expect( await getActiveSidebarTabText() ).toBe( 'Block' );
 
 		// Regression test: Reload resets to document tab.
@@ -46,7 +50,7 @@ describe( 'preferences', () => {
 
 		// Dismiss.
 		await page.click(
-			'.edit-post-sidebar__panel-tabs [aria-label="Close Settings"]'
+			'div[aria-label="Editor settings"] div[role="tablist"] + button[aria-label="Close Settings"]'
 		);
 		expect( await getActiveSidebarTabText() ).toBe( null );
 

package/specs/editor/various/sidebar.test.js

@@ -13,7 +13,8 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 const SIDEBAR_SELECTOR = '.edit-post-sidebar';
-const ACTIVE_SIDEBAR_TAB_SELECTOR = '.edit-post-sidebar__panel-tab.is-active';
+const ACTIVE_SIDEBAR_TAB_SELECTOR =
+	'div[aria-label="Editor settings"] [role="tab"][aria-selected="true"]';
 const ACTIVE_SIDEBAR_BUTTON_TEXT = 'Post';
 
 describe( 'Sidebar', () => {
@@ -99,22 +100,24 @@ describe( 'Sidebar', () => {
 
 		// Tab lands at first (presumed selected) option "Post".
 		await page.keyboard.press( 'Tab' );
-		const isActiveDocumentTab = await page.evaluate(
-			() =>
-				document.activeElement.textContent === 'Post' &&
-				document.activeElement.classList.contains( 'is-active' )
+
+		// The Post tab should be focused and selected.
+		const [ documentInspectorTab ] = await page.$x(
+			'//button[@role="tab"][@aria-selected="true"][contains(text(), "Post")]'
 		);
-		expect( isActiveDocumentTab ).toBe( true );
+		expect( documentInspectorTab ).toBeDefined();
+		expect( documentInspectorTab ).toHaveFocus();
 
-		// Tab into and activate "Block".
-		await page.keyboard.press( 'Tab' );
+		// Arrow key into and activate "Block".
+		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.press( 'Space' );
-		const isActiveBlockTab = await page.evaluate(
-			() =>
-				document.activeElement.textContent === 'Block' &&
-				document.activeElement.classList.contains( 'is-active' )
+
+		// The Block tab should be focused and selected.
+		const [ blockInspectorTab ] = await page.$x(
+			'//button[@role="tab"][@aria-selected="true"][contains(text(), "Block")]'
 		);
-		expect( isActiveBlockTab ).toBe( true );
+		expect( blockInspectorTab ).toBeDefined();
+		expect( blockInspectorTab ).toHaveFocus();
 	} );
 
 	it( 'should be possible to programmatically remove Document Settings panels', async () => {

package/specs/editor/plugins/innerblocks-locking-all-embed.js

@@ -1,56 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	createEmbeddingMatcher,
-	createJSONResponse,
-	setUpResponseMocking,
-} from '@wordpress/e2e-test-utils';
-
-const MOCK_RESPONSES = [
-	{
-		match: createEmbeddingMatcher( 'https://twitter.com/wordpress' ),
-		onRequestMatch: createJSONResponse( {
-			url: 'https://twitter.com/wordpress',
-			html: '<p>Mock success response.</p>',
-			type: 'rich',
-			provider_name: 'Twitter',
-			provider_url: 'https://twitter.com',
-			version: '1.0',
-		} ),
-	},
-];
-
-describe( 'Embed block inside a locked all parent', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-innerblocks-locking-all-embed' );
-	} );
-
-	beforeEach( async () => {
-		await setUpResponseMocking( MOCK_RESPONSES );
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin(
-			'gutenberg-test-innerblocks-locking-all-embed'
-		);
-	} );
-
-	it( 'embed block should be able to embed external content', async () => {
-		await insertBlock( 'Test Inner Blocks Locking All Embed' );
-		const embedInputSelector =
-			'.components-placeholder__input[aria-label="Embed URL"]';
-		await page.waitForSelector( embedInputSelector );
-		await page.click( embedInputSelector );
-		// This URL should not have a trailing slash.
-		await page.keyboard.type( 'https://twitter.com/wordpress' );
-		await page.keyboard.press( 'Enter' );
-		// The twitter block should appear correctly.
-		await page.waitForSelector( 'figure.wp-block-embed' );
-	} );
-} );

package/specs/site-editor/multi-entity-saving.test.js

@@ -1,239 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	disablePrePublishChecks,
-	getOption,
-	insertBlock,
-	publishPost,
-	setOption,
-	trashAllPosts,
-	activateTheme,
-	clickButton,
-	createReusableBlock,
-	deleteAllTemplates,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Multi-entity save flow', () => {
-	// Selectors - usable between Post/Site editors.
-	const checkedBoxSelector = '.components-checkbox-control__checked';
-	const checkboxInputSelector = '.components-checkbox-control__input';
-	const entitiesSaveSelector = '.editor-entities-saved-states__save-button';
-	const savePanelSelector = '.entities-saved-states__panel';
-	const closePanelButtonSelector =
-		'.editor-post-publish-panel__header-cancel-button button:not(:disabled)';
-
-	// Reusable assertions across Post/Site editors.
-	const assertAllBoxesChecked = async () => {
-		const checkedBoxes = await page.$$( checkedBoxSelector );
-		const checkboxInputs = await page.$$( checkboxInputSelector );
-		expect( checkedBoxes.length - checkboxInputs.length ).toBe( 0 );
-	};
-	const assertExistence = async ( selector, shouldBePresent ) => {
-		const element = await page.$( selector );
-		if ( shouldBePresent ) {
-			expect( element ).not.toBeNull();
-		} else {
-			expect( element ).toBeNull();
-		}
-	};
-
-	let originalSiteTitle, originalBlogDescription;
-
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-		await trashAllPosts( 'wp_block' );
-
-		// Get the current Site Title and Site Tagline, so that we can reset
-		// them back to the original values once the test suite has finished.
-		originalSiteTitle = await getOption( 'blogname' );
-		originalBlogDescription = await getOption( 'blogdescription' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-
-		// Reset the Site Title and Site Tagline back to their original values.
-		await setOption( 'blogname', originalSiteTitle );
-		await setOption( 'blogdescription', originalBlogDescription );
-	} );
-
-	describe( 'Post Editor', () => {
-		// Selectors - Post editor specific.
-		const draftSavedSelector = '.editor-post-saved-state.is-saved';
-		const multiSaveSelector =
-			'.editor-post-publish-button__button.has-changes-dot';
-		const savePostSelector = '.editor-post-publish-button__button';
-		const enabledSavePostSelector = `${ savePostSelector }[aria-disabled=false]`;
-		const publishA11ySelector =
-			'.edit-post-layout__toggle-publish-panel-button';
-		const saveA11ySelector =
-			'.edit-post-layout__toggle-entities-saved-states-panel-button';
-		const publishPanelSelector = '.editor-post-publish-panel';
-
-		// Reusable assertions inside Post editor.
-		const assertMultiSaveEnabled = async () => {
-			const multiSaveButton =
-				await page.waitForSelector( multiSaveSelector );
-			expect( multiSaveButton ).not.toBeNull();
-		};
-		const assertMultiSaveDisabled = async () => {
-			const multiSaveButton = await page.waitForSelector(
-				multiSaveSelector,
-				{ hidden: true }
-			);
-			expect( multiSaveButton ).toBeNull();
-		};
-
-		it( 'Save flow should work as expected.', async () => {
-			await createNewPost();
-			// Edit the page some.
-			await canvas().waitForSelector( '.editor-post-title' );
-			await canvas().click( '.editor-post-title' );
-			await page.keyboard.type( 'Test Post...' );
-			await page.keyboard.press( 'Enter' );
-
-			// Should not trigger multi-entity save button with only post edited.
-			await assertMultiSaveDisabled();
-
-			// Should only have publish panel a11y button active with only post edited.
-			await assertExistence( publishA11ySelector, true );
-			await assertExistence( saveA11ySelector, false );
-			await assertExistence( publishPanelSelector, false );
-			await assertExistence( savePanelSelector, false );
-
-			// Add a reusable block and edit it.
-			await createReusableBlock( 'Hi!', 'Test' );
-			await canvas().waitForSelector( 'p[data-type="core/paragraph"]' );
-			await canvas().click( 'p[data-type="core/paragraph"]' );
-			await page.keyboard.type( 'Oh!' );
-
-			// Should trigger multi-entity save button once template part edited.
-			await assertMultiSaveEnabled();
-
-			// Should only have save panel a11y button active after child entities edited.
-			await assertExistence( publishA11ySelector, false );
-			await assertExistence( saveA11ySelector, true );
-			await assertExistence( publishPanelSelector, false );
-			await assertExistence( savePanelSelector, false );
-
-			// Opening panel has boxes checked by default.
-			await page.click( savePostSelector );
-			await page.waitForSelector( savePanelSelector );
-			await assertAllBoxesChecked();
-
-			// Should not show other panels (or their a11y buttons) while save panel opened.
-			await assertExistence( publishA11ySelector, false );
-			await assertExistence( saveA11ySelector, false );
-			await assertExistence( publishPanelSelector, false );
-
-			// Publish panel should open after saving.
-			await page.click( entitiesSaveSelector );
-			await page.waitForSelector( publishPanelSelector );
-
-			// No other panels (or their a11y buttons) should be present with publish panel open.
-			await assertExistence( publishA11ySelector, false );
-			await assertExistence( saveA11ySelector, false );
-			await assertExistence( savePanelSelector, false );
-
-			// Close publish panel.
-			const closePanelButton = await page.waitForSelector(
-				closePanelButtonSelector
-			);
-			await closePanelButton.click();
-
-			// Verify saving is disabled.
-			const draftSaved = await page.waitForSelector( draftSavedSelector );
-			expect( draftSaved ).not.toBeNull();
-			await assertMultiSaveDisabled();
-			await assertExistence( saveA11ySelector, false );
-
-			await publishPost();
-			// Wait for the success notice specifically for the published post.
-			// `publishPost()` has a similar check but it only checks for the
-			// existence of any snackbars. In this case, there's another "Site updated"
-			// notice which will be sufficient for that and thus creating a false-positive.
-			await page.waitForXPath(
-				'//*[@id="a11y-speak-polite"][contains(text(), "Post published")]'
-			);
-
-			// Unselect the blocks to avoid clicking the block toolbar.
-			await page.evaluate( () => {
-				wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
-			} );
-
-			// Update the post.
-			await canvas().click( '.editor-post-title' );
-			await page.keyboard.type( '...more title!' );
-
-			// Verify update button is enabled.
-			const enabledSaveButton = await page.waitForSelector(
-				enabledSavePostSelector
-			);
-			expect( enabledSaveButton ).not.toBeNull();
-			// Verify multi-entity saving not enabled.
-			await assertMultiSaveDisabled();
-			await assertExistence( saveA11ySelector, false );
-
-			// Update reusable block again.
-			await canvas().click( 'p[data-type="core/paragraph"]' );
-			// We need to click again due to the clickthrough overlays in reusable blocks.
-			await canvas().click( 'p[data-type="core/paragraph"]' );
-			await page.keyboard.type( 'R!' );
-
-			// Multi-entity saving should be enabled.
-			await assertMultiSaveEnabled();
-			await assertExistence( saveA11ySelector, true );
-		} );
-
-		it( 'Site blocks should save individually', async () => {
-			await createNewPost();
-			await disablePrePublishChecks();
-
-			await insertBlock( 'Site Title' );
-			// Ensure title is retrieved before typing.
-			await page.waitForXPath(
-				`//a[contains(text(), "${ originalSiteTitle }")]`
-			);
-			const editableSiteTitleSelector =
-				'.wp-block-site-title a[contenteditable="true"]';
-			await canvas().waitForSelector( editableSiteTitleSelector );
-			await canvas().focus( editableSiteTitleSelector );
-			await page.keyboard.type( '...' );
-
-			await insertBlock( 'Site Tagline' );
-			// Wait for the placeholder.
-			await canvas().waitForXPath(
-				'//span[@data-rich-text-placeholder="Write site tagline…"]'
-			);
-			const editableSiteTagLineSelector =
-				'.wp-block-site-tagline[contenteditable="true"]';
-			await canvas().waitForSelector( editableSiteTagLineSelector );
-			await canvas().focus( editableSiteTagLineSelector );
-			await page.keyboard.type( 'Just another WordPress site' );
-
-			await clickButton( 'Publish' );
-			await page.waitForSelector( savePanelSelector );
-			let checkboxInputs = await page.$$( checkboxInputSelector );
-			expect( checkboxInputs ).toHaveLength( 3 );
-
-			await checkboxInputs[ 1 ].click();
-			await page.click( entitiesSaveSelector );
-
-			// Wait for the snackbar notice that the post has been published.
-			await page.waitForSelector( '.components-snackbar' );
-
-			await clickButton( 'Update…' );
-			await page.waitForSelector( savePanelSelector );
-
-			await page.waitForSelector( checkboxInputSelector );
-			checkboxInputs = await page.$$( checkboxInputSelector );
-
-			expect( checkboxInputs ).toHaveLength( 1 );
-		} );
-	} );
-} );

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

@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import fs from 'fs';
-import path from 'path';
-import os from 'os';
-
-/**
- * WordPress dependencies
- */
-import {
-	deleteAllTemplates,
-	activateTheme,
-	visitSiteEditor,
-	enterEditMode,
-	clickOnMoreMenuItem,
-} from '@wordpress/e2e-test-utils';
-
-async function waitForFileExists( filePath, timeout = 10000 ) {
-	const start = Date.now();
-	while ( ! fs.existsSync( filePath ) ) {
-		// Puppeteer doesn't have an API for managing file downloads.
-		// We are using `waitForTimeout` to add delays between check of file existence.
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 1000 );
-		if ( Date.now() - start > timeout ) {
-			throw Error( 'waitForFileExists timeout' );
-		}
-	}
-}
-
-describe( 'Site Editor Templates Export', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	beforeEach( async () => {
-		await visitSiteEditor();
-		await enterEditMode();
-	} );
-
-	it( 'clicking export should download emptytheme.zip file', async () => {
-		const directory = fs.mkdtempSync(
-			path.join( os.tmpdir(), 'test-edit-site-export-' )
-		);
-		await page._client.send( 'Page.setDownloadBehavior', {
-			behavior: 'allow',
-			downloadPath: directory,
-		} );
-
-		await clickOnMoreMenuItem( 'Export', 'site-editor' );
-		const filePath = path.join( directory, 'emptytheme.zip' );
-		await waitForFileExists( filePath );
-		expect( fs.existsSync( filePath ) ).toBe( true );
-		fs.unlinkSync( filePath );
-	} );
-} );