woocommerce/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts

/**
 * External dependencies
 */
import { Editor as CoreEditor } from '@wordpress/e2e-test-utils-playwright';

export class Editor extends CoreEditor {
	async getBlockByName( name: string ) {
		const blockSelector = `[data-type="${ name }"]`;
		const canvasLocator = this.page
			.locator( '.editor-styles-wrapper, iframe[name=editor-canvas]' )
			.first();

		const isFramed = await canvasLocator.evaluate(
			( node ) => node.tagName === 'IFRAME'
		);

		if ( isFramed ) {
			return this.canvas.locator( blockSelector );
		}

		return this.page.locator( blockSelector );
	}

	async getBlockRootClientId( clientId: string ) {
		return this.page.evaluate< string | null, string >( ( id ) => {
			return window.wp.data
				.select( 'core/block-editor' )
				.getBlockRootClientId( id );
		}, clientId );
	}

	/**
	 * Opens the global inserter.
	 */
	async openGlobalBlockInserter() {
		const toggleButton = this.page.getByRole( 'button', {
			name: 'Toggle block inserter',
		} );
		const isOpen =
			( await toggleButton.getAttribute( 'aria-pressed' ) ) === 'true';

		if ( ! isOpen ) {
			await toggleButton.click();
			await this.page.locator( '.block-editor-inserter__menu' ).waitFor();
		}
	}

	async enterEditMode() {
		await this.page
			.getByRole( 'button', {
				name: 'Edit',
				exact: true,
			} )
			.dispatchEvent( 'click' );

		const sidebar = this.page.locator( '.edit-site-layout__sidebar' );
		const canvasLoader = this.page.locator( '.edit-site-canvas-loader' );

		await sidebar.waitFor( {
			state: 'hidden',
		} );

		await canvasLoader.waitFor( {
			state: 'hidden',
		} );
	}

	async transformIntoBlocks() {
		// Select the block, so the button is visible.
		const block = this.canvas
			.locator( `[data-type="woocommerce/legacy-template"]` )
			.first();

		if ( ! ( await block.isVisible() ) ) {
			return;
		}

		await this.selectBlocks( block );

		const transformButton = block.getByRole( 'button', {
			name: 'Transform into blocks',
		} );

		if ( transformButton ) {
			await transformButton.click();

			// save changes
			await this.saveSiteEditorEntities();
		}
	}

	async publishAndVisitPost() {
		const postId = await this.publishPost();
		await this.page.goto( `/?p=${ postId }` );
	}

	/**
	 * Unlike the `insertBlock` method, which manipulates the block tree
	 * directly, this method simulates real user behavior when inserting a
	 * block to the editor by searching for block name then clicking on the
	 * first matching result.
	 *
	 * Besides, some blocks that manipulate their attributes after insertion
	 * aren't work probably with `insertBlock` as that method requires
	 * attributes object and uses that data to creat the block object.
	 */
	async insertBlockUsingGlobalInserter( blockTitle: string ) {
		await this.openGlobalBlockInserter();
		await this.page.getByPlaceholder( 'Search' ).fill( blockTitle );
		await this.page
			.getByRole( 'option', { name: blockTitle, exact: true } )
			.first()
			.click();
	}
}