@wordpress/e2e-test-utils-playwright 1.48.0 → 1.48.1

package/src/admin/visit-site-editor.ts

@@ -1,62 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Admin } from './';
-
-interface SiteEditorOptions {
-	postId?: string | number;
-	postType?: string;
-	path?: string;
-	canvas?: string;
-	activeView?: string;
-	showWelcomeGuide?: boolean;
-}
-
-/**
- * Visits the Site Editor main page.
- *
- * @param this
- * @param options Options to visit the site editor.
- */
-export async function visitSiteEditor(
-	this: Admin,
-	options: SiteEditorOptions = {}
-) {
-	const { postId, postType, path, canvas, activeView } = options;
-	const query = new URLSearchParams();
-
-	if ( postId ) {
-		query.set( 'postId', String( postId ) );
-	}
-	if ( postType ) {
-		query.set( 'postType', postType );
-	}
-	if ( path ) {
-		query.set( 'path', path );
-	}
-	if ( canvas ) {
-		query.set( 'canvas', canvas );
-	}
-	if ( activeView ) {
-		query.set( 'activeView', activeView );
-	}
-
-	await this.visitAdminPage( 'site-editor.php', query.toString() );
-
-	if ( ! options.showWelcomeGuide ) {
-		await this.editor.setPreferences( 'core/edit-site', {
-			welcomeGuide: false,
-			welcomeGuideStyles: false,
-			welcomeGuidePage: false,
-			welcomeGuideTemplate: false,
-		} );
-	}
-
-	/**
-	 * Wait until the editor is loaded. The logic is a copy of the
-	 * `waitWhileSiteEditorLoading` function in the `edit-site` package.
-	 */
-	if ( ! query.size || postId || canvas === 'edit' ) {
-		await this.waitForSiteEditor();
-	}
-}

package/src/admin/wait-for-site-editor.ts

@@ -1,52 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Admin } from './';
-
-/**
- * Waits for the Site Editor to finish loading, i.e., for all resolvers
- * in the `core` store to finish and then pause for a short period.
- *
- * @param this
- */
-export async function waitForSiteEditor( this: Admin ) {
-	await this.page.evaluate( () => {
-		const MAX_LOADING_TIME = 10000;
-		const MAX_PAUSE_TIME = 100;
-
-		return new Promise< void >( ( resolve ) => {
-			let pauseTimeout: ReturnType< typeof setTimeout > | undefined;
-
-			function finish() {
-				unsubscribe();
-				clearTimeout( pauseTimeout );
-				clearTimeout( maxTimeout );
-				resolve();
-			}
-
-			const maxTimeout = setTimeout( finish, MAX_LOADING_TIME );
-
-			function checkResolving() {
-				const isResolving = window.wp.data
-					.select( 'core' )
-					.hasResolvingSelectors();
-
-				if ( isResolving ) {
-					clearTimeout( pauseTimeout );
-					pauseTimeout = undefined;
-					return;
-				}
-
-				if ( ! pauseTimeout ) {
-					pauseTimeout = setTimeout( finish, MAX_PAUSE_TIME );
-				}
-			}
-
-			const unsubscribe = window.wp.data.subscribe(
-				checkResolving,
-				'core'
-			);
-			checkResolving();
-		} );
-	} );
-}

package/src/config.ts

@@ -1,12 +0,0 @@
-const {
-	WP_USERNAME = 'admin',
-	WP_PASSWORD = 'password',
-	WP_BASE_URL = 'http://localhost:8889',
-} = process.env;
-
-const WP_ADMIN_USER = {
-	username: WP_USERNAME,
-	password: WP_PASSWORD,
-} as const;
-
-export { WP_ADMIN_USER, WP_USERNAME, WP_PASSWORD, WP_BASE_URL };

package/src/editor/click-block-options-menu-item.ts

@@ -1,18 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Clicks a block toolbar button.
- *
- * @param this
- * @param label The text string of the button label.
- */
-export async function clickBlockOptionsMenuItem( this: Editor, label: string ) {
-	await this.clickBlockToolbarButton( 'Options' );
-	await this.page
-		.getByRole( 'menu', { name: 'Options' } )
-		.getByRole( 'menuitem', { name: label } )
-		.click();
-}

package/src/editor/click-block-toolbar-button.ts

@@ -1,21 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Clicks a block toolbar button.
- *
- * @param this
- * @param label The text string of the button label.
- */
-export async function clickBlockToolbarButton( this: Editor, label: string ) {
-	await this.showBlockToolbar();
-
-	const blockToolbar = this.page.locator(
-		'role=toolbar[name="Block tools"i]'
-	);
-	const button = blockToolbar.locator( `role=button[name="${ label }"]` );
-
-	await button.click();
-}

package/src/editor/get-blocks.ts

@@ -1,75 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-type Block = {
-	name: string;
-	attributes: Record< string, unknown >;
-	innerBlocks: Block[];
-};
-
-/**
- * Returns the edited blocks.
- *
- * @param options
- * @param options.clientId Limit the results to be only under a partial tree of the specified clientId.
- * @param options.full     Whether to return the full block data or just the name and attributes.
- *
- * @return  The blocks.
- */
-export async function getBlocks(
-	this: Editor,
-	{ clientId, full = false }: { clientId?: string; full?: boolean } = {}
-) {
-	await this.page.waitForFunction(
-		() => window?.wp?.blocks && window?.wp?.data
-	);
-
-	return await this.page.evaluate(
-		( [ _full, _clientId ] ) => {
-			// Serialize serializable attributes of blocks.
-			function serializeAttributes(
-				attributes: Record< string, unknown >
-			) {
-				return Object.fromEntries(
-					Object.entries( attributes ).map( ( [ key, value ] ) => {
-						// Serialize RichTextData to string.
-						if (
-							value instanceof window.wp.richText.RichTextData
-						) {
-							return [ key, ( value as string ).toString() ];
-						}
-						return [ key, value ];
-					} )
-				);
-			}
-
-			// Remove other unpredictable properties like clientId from blocks for testing purposes.
-			function recursivelyTransformBlocks( blocks: Block[] ): Block[] {
-				return blocks.map( ( block ) => ( {
-					name: block.name,
-					attributes: serializeAttributes( block.attributes ),
-					innerBlocks: recursivelyTransformBlocks(
-						block.innerBlocks
-					),
-				} ) );
-			}
-
-			const blocks = window.wp.data
-				.select( 'core/block-editor' )
-				.getBlocks( _clientId ) as Block[];
-
-			// The editor might still contain an unmodified empty block even when it's technically "empty".
-			if (
-				blocks.length === 1 &&
-				window.wp.blocks.isUnmodifiedDefaultBlock( blocks[ 0 ] )
-			) {
-				return [];
-			}
-
-			return _full ? blocks : recursivelyTransformBlocks( blocks );
-		},
-		[ full, clientId ]
-	);
-}

package/src/editor/get-edited-post-content.ts

@@ -1,19 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Returns a promise which resolves with the edited post content (HTML string).
- *
- * @param this
- *
- * @return Promise resolving with post content markup.
- */
-export async function getEditedPostContent( this: Editor ) {
-	await this.page.waitForFunction( () => window?.wp?.data );
-
-	return await this.page.evaluate( () =>
-		window.wp.data.select( 'core/editor' ).getEditedPostContent()
-	);
-}

package/src/editor/index.ts

@@ -1,95 +0,0 @@
-/**
- * External dependencies
- */
-import type {
-	Browser,
-	Page,
-	BrowserContext,
-	FrameLocator,
-} from '@playwright/test';
-
-/**
- * Internal dependencies
- */
-import { clickBlockOptionsMenuItem } from './click-block-options-menu-item';
-import { clickBlockToolbarButton } from './click-block-toolbar-button';
-import { getBlocks } from './get-blocks';
-import { getEditedPostContent } from './get-edited-post-content';
-import { insertBlock } from './insert-block';
-import { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
-import { openPreviewPage } from './preview';
-import { publishPost } from './publish-post';
-import { saveDraft } from './save-draft';
-import { selectBlocks } from './select-blocks';
-import { setContent } from './set-content';
-import { setPreferences } from './set-preferences';
-import { showBlockToolbar } from './show-block-toolbar';
-import { saveSiteEditorEntities } from './site-editor';
-import { setIsFixedToolbar } from './set-is-fixed-toolbar';
-import { switchToLegacyCanvas } from './switch-to-legacy-canvas';
-import { transformBlockTo } from './transform-block-to';
-import { switchEditorTool } from './switch-editor-tool';
-
-type EditorConstructorProps = {
-	page: Page;
-};
-
-export class Editor {
-	browser: Browser;
-	page: Page;
-	context: BrowserContext;
-
-	constructor( { page }: EditorConstructorProps ) {
-		this.page = page;
-		this.context = page.context();
-		this.browser = this.context.browser()!;
-	}
-
-	get canvas(): FrameLocator {
-		return this.page.frameLocator( '[name="editor-canvas"]' );
-	}
-
-	/** @borrows clickBlockOptionsMenuItem as this.clickBlockOptionsMenuItem */
-	clickBlockOptionsMenuItem: typeof clickBlockOptionsMenuItem =
-		clickBlockOptionsMenuItem.bind( this );
-	/** @borrows clickBlockToolbarButton as this.clickBlockToolbarButton */
-	clickBlockToolbarButton: typeof clickBlockToolbarButton =
-		clickBlockToolbarButton.bind( this );
-	/** @borrows getBlocks as this.getBlocks */
-	getBlocks: typeof getBlocks = getBlocks.bind( this );
-	/** @borrows getEditedPostContent as this.getEditedPostContent */
-	getEditedPostContent: typeof getEditedPostContent =
-		getEditedPostContent.bind( this );
-	/** @borrows insertBlock as this.insertBlock */
-	insertBlock: typeof insertBlock = insertBlock.bind( this );
-	/** @borrows openDocumentSettingsSidebar as this.openDocumentSettingsSidebar */
-	openDocumentSettingsSidebar: typeof openDocumentSettingsSidebar =
-		openDocumentSettingsSidebar.bind( this );
-	/** @borrows openPreviewPage as this.openPreviewPage */
-	openPreviewPage: typeof openPreviewPage = openPreviewPage.bind( this );
-	/** @borrows publishPost as this.publishPost */
-	publishPost: typeof publishPost = publishPost.bind( this );
-	/** @borrows saveDraft as this.saveDraft */
-	saveDraft: typeof saveDraft = saveDraft.bind( this );
-	/** @borrows saveSiteEditorEntities as this.saveSiteEditorEntities */
-	saveSiteEditorEntities: typeof saveSiteEditorEntities =
-		saveSiteEditorEntities.bind( this );
-	/** @borrows selectBlocks as this.selectBlocks */
-	selectBlocks: typeof selectBlocks = selectBlocks.bind( this );
-	/** @borrows setContent as this.setContent */
-	setContent: typeof setContent = setContent.bind( this );
-	/** @borrows setPreferences as this.setPreferences */
-	setPreferences: typeof setPreferences = setPreferences.bind( this );
-	/** @borrows showBlockToolbar as this.showBlockToolbar */
-	showBlockToolbar: typeof showBlockToolbar = showBlockToolbar.bind( this );
-	/** @borrows setIsFixedToolbar as this.setIsFixedToolbar */
-	setIsFixedToolbar: typeof setIsFixedToolbar =
-		setIsFixedToolbar.bind( this );
-	/** @borrows switchEditorTool as this.switchEditorTool */
-	switchEditorTool: typeof switchEditorTool = switchEditorTool.bind( this );
-	/** @borrows switchToLegacyCanvas as this.switchToLegacyCanvas */
-	switchToLegacyCanvas: typeof switchToLegacyCanvas =
-		switchToLegacyCanvas.bind( this );
-	/** @borrows transformBlockTo as this.transformBlockTo */
-	transformBlockTo: typeof transformBlockTo = transformBlockTo.bind( this );
-}

package/src/editor/insert-block.ts

@@ -1,54 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-interface BlockRepresentation {
-	name: string;
-	attributes?: Object;
-	innerBlocks?: BlockRepresentation[];
-}
-
-/**
- * Insert a block.
- *
- * @param blockRepresentation Inserted block representation.
- * @param options
- * @param options.clientId    Client ID of the parent block to insert into.
- */
-async function insertBlock(
-	this: Editor,
-	blockRepresentation: BlockRepresentation,
-	{ clientId }: { clientId?: string } = {}
-) {
-	await this.page.waitForFunction(
-		() => window?.wp?.blocks && window?.wp?.data
-	);
-
-	await this.page.evaluate(
-		( [ _blockRepresentation, _clientId ] ) => {
-			function recursiveCreateBlock( {
-				name,
-				attributes = {},
-				innerBlocks = [],
-			}: BlockRepresentation ): Object {
-				return window.wp.blocks.createBlock(
-					name,
-					attributes,
-					innerBlocks.map( ( innerBlock ) =>
-						recursiveCreateBlock( innerBlock )
-					)
-				);
-			}
-			const block = recursiveCreateBlock( _blockRepresentation );
-
-			window.wp.data
-				.dispatch( 'core/block-editor' )
-				.insertBlock( block, undefined, _clientId );
-		},
-		[ blockRepresentation, clientId ] as const
-	);
-}
-
-export type { BlockRepresentation };
-export { insertBlock };

package/src/editor/open-document-settings-sidebar.ts

@@ -1,31 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Clicks on the button in the header which opens Document Settings sidebar when
- * it is closed.
- *
- * @param this
- */
-export async function openDocumentSettingsSidebar( this: Editor ) {
-	const toggleButton = this.page
-		.getByRole( 'region', { name: 'Editor top bar' } )
-		.getByRole( 'button', {
-			name: 'Settings',
-			exact: true,
-			disabled: false,
-		} );
-
-	const isClosed =
-		( await toggleButton.getAttribute( 'aria-expanded' ) ) === 'false';
-
-	if ( isClosed ) {
-		await toggleButton.click();
-		await this.page
-			.getByRole( 'region', { name: 'Editor settings' } )
-			.getByRole( 'button', { name: 'Close Settings' } )
-			.waitFor();
-	}
-}

package/src/editor/preview.ts

@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import type { Page } from '@playwright/test';
-
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Opens the preview page of an edited post.
- *
- * @param this
- *
- * @return preview page.
- */
-export async function openPreviewPage( this: Editor ): Promise< Page > {
-	const editorTopBar = this.page.locator(
-		'role=region[name="Editor top bar"i]'
-	);
-	const previewButton = editorTopBar.locator( 'role=button[name="View"i]' );
-
-	await previewButton.click();
-
-	const [ previewPage ] = await Promise.all( [
-		this.context.waitForEvent( 'page' ),
-		this.page.click( 'role=menuitem[name="Preview in new tab"i]' ),
-	] );
-
-	return previewPage;
-}

package/src/editor/publish-post.ts

@@ -1,51 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Publishes the post, resolving once the request is complete (once a notice
- * is displayed).
- *
- * @param this
- */
-export async function publishPost( this: Editor ) {
-	// If we have changes in other entities, the label is `Save` instead of `Publish`.
-	const saveButton = this.page
-		.getByRole( 'region', { name: 'Editor top bar' } )
-		.getByRole( 'button', { name: 'Save', exact: true } );
-	const publishButton = this.page
-		.getByRole( 'region', { name: 'Editor top bar' } )
-		.getByRole( 'button', { name: 'Publish', exact: true } );
-	const buttonToClick = ( await saveButton.isVisible() )
-		? saveButton
-		: publishButton;
-	await buttonToClick.click();
-
-	const entitiesSaveButton = this.page
-		.getByRole( 'region', { name: 'Editor publish' } )
-		.getByRole( 'button', { name: 'Save', exact: true } );
-	const isEntitiesSavePanelVisible = await entitiesSaveButton.isVisible();
-
-	// Save any entities.
-	if ( isEntitiesSavePanelVisible ) {
-		// Handle saving entities.
-		await entitiesSaveButton.click();
-	}
-
-	// Handle saving just the post.
-	await this.page
-		.getByRole( 'region', {
-			name: 'Editor publish',
-		} )
-		.getByRole( 'button', { name: 'Publish', exact: true } )
-		.click();
-
-	await this.page
-		.getByRole( 'button', { name: 'Dismiss this notice' } )
-		.filter( { hasText: 'published' } )
-		.waitFor();
-	const postId = new URL( this.page.url() ).searchParams.get( 'post' );
-
-	return typeof postId === 'string' ? parseInt( postId, 10 ) : null;
-}

package/src/editor/save-draft.ts

@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Saves the post as a draft, resolving once the request is complete (once a notice
- * is displayed).
- */
-export async function saveDraft( this: Editor ) {
-	await this.page
-		.getByRole( 'region', { name: 'Editor top bar' } )
-		.getByRole( 'button', { name: 'Save draft' } )
-		.click();
-
-	await this.page
-		.getByRole( 'button', { name: 'Dismiss this notice' } )
-		.filter( { hasText: 'Draft saved' } )
-		.waitFor();
-}

package/src/editor/select-blocks.ts

@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import type { Locator } from '@playwright/test';
-
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-export async function selectBlocks(
-	this: Editor,
-	startSelectorOrLocator: string | Locator,
-	endSelectorOrLocator?: string | Locator
-) {
-	const startBlock =
-		typeof startSelectorOrLocator === 'string'
-			? this.canvas.locator( startSelectorOrLocator )
-			: startSelectorOrLocator;
-
-	const endBlock =
-		typeof endSelectorOrLocator === 'string'
-			? this.canvas.locator( endSelectorOrLocator )
-			: endSelectorOrLocator;
-
-	const startClientId = await startBlock.getAttribute( 'data-block' );
-	const endClientId = await endBlock?.getAttribute( 'data-block' );
-
-	if ( endClientId ) {
-		await this.page.evaluate(
-			( [ startId, endId ] ) => {
-				// @ts-ignore
-				wp.data
-					.dispatch( 'core/block-editor' )
-					.multiSelect( startId, endId );
-			},
-			[ startClientId, endClientId ]
-		);
-	} else {
-		await this.page.evaluate(
-			( [ clientId ] ) => {
-				// @ts-ignore
-				wp.data.dispatch( 'core/block-editor' ).selectBlock( clientId );
-			},
-			[ startClientId ]
-		);
-	}
-}

package/src/editor/set-content.ts

@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Set the content of the editor.
- *
- * @param this
- * @param html Serialized block HTML.
- */
-async function setContent( this: Editor, html: string ) {
-	await this.page.waitForFunction(
-		() => window?.wp?.blocks && window?.wp?.data
-	);
-
-	await this.page.evaluate( ( _html ) => {
-		const blocks = window.wp.blocks.parse( _html );
-
-		window.wp.data.dispatch( 'core/block-editor' ).resetBlocks( blocks );
-	}, html );
-}
-
-export { setContent };

package/src/editor/set-is-fixed-toolbar.ts

@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Toggles the fixed toolbar option.
- *
- * @param this
- * @param isFixed Boolean value true/false for on/off.
- */
-export async function setIsFixedToolbar( this: Editor, isFixed: boolean ) {
-	await this.page.waitForFunction( () => window?.wp?.data );
-
-	await this.page.evaluate( ( _isFixed ) => {
-		window.wp.data
-			.dispatch( 'core/preferences' )
-			.set( 'core', 'fixedToolbar', _isFixed );
-	}, isFixed );
-}

package/src/editor/set-preferences.ts

@@ -1,37 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-type PreferencesContext =
-	| 'core/edit-post'
-	| 'core/edit-site'
-	| 'core/customize-widgets';
-
-/**
- * Set the preferences of the editor.
- *
- * @param this
- * @param context     Context to set preferences for.
- * @param preferences Preferences to set.
- */
-export async function setPreferences(
-	this: Editor,
-	context: PreferencesContext,
-	preferences: Record< string, any >
-) {
-	await this.page.waitForFunction( () => window?.wp?.data );
-
-	await this.page.evaluate(
-		async ( props ) => {
-			for ( const [ key, value ] of Object.entries(
-				props.preferences
-			) ) {
-				await window.wp.data
-					.dispatch( 'core/preferences' )
-					.set( props.context, key, value );
-			}
-		},
-		{ context, preferences }
-	);
-}