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

160 lines
3.8 KiB
TypeScript

/**
* 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 isBlockEarlierThan< T >(
containerBlock: T,
firstBlock: string,
secondBlock: string
) {
const container =
containerBlock instanceof Function
? await containerBlock()
: containerBlock;
if ( ! container ) {
throw new Error( 'Container block not found.' );
}
const childBlocks = container.locator( ':scope > .wp-block' );
let firstBlockIndex = -1;
let secondBlockIndex = -1;
for ( let i = 0; i < ( await childBlocks.count() ); i++ ) {
const blockName = await childBlocks
.nth( i )
.getAttribute( 'data-type' );
if ( blockName === firstBlock ) {
firstBlockIndex = i;
}
if ( blockName === secondBlock ) {
secondBlockIndex = i;
}
if ( firstBlockIndex !== -1 && secondBlockIndex !== -1 ) {
break;
}
}
if ( firstBlockIndex === -1 || secondBlockIndex === -1 ) {
throw new Error( 'Both blocks must exist within the editor' );
}
return firstBlockIndex < secondBlockIndex;
}
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();
}
}