woocommerce/plugins/woocommerce-blocks/tests/e2e-jest/utils.js

/**
 * External dependencies
 */
import { Coupon, HTTPClientFactory } from '@woocommerce/api';
import config from 'config';
import {
	canvas,
	disableSiteEditorWelcomeGuide,
	ensureSidebarOpened,
	openGlobalBlockInserter,
	switchBlockInspectorTab,
	switchUserToAdmin,
	visitAdminPage,
	pressKeyWithModifier,
	searchForBlock as searchForFSEBlock,
	enterEditMode,
	getAllBlocks,
} from '@wordpress/e2e-test-utils';
import { addQueryArgs } from '@wordpress/url';
import { WP_ADMIN_DASHBOARD } from '@woocommerce/e2e-utils';
import fs from 'fs';

/**
 * Internal dependencies
 */
import { elementExists, getTextContent } from './page-utils';
import { PERFORMANCE_REPORT_FILENAME } from '../utils/constants';
import { cli } from '../utils';

/**
 * @typedef {import('@types/puppeteer').ElementHandle} ElementHandle
 * @typedef {import('@wordpress/blocks').Block} WPBlock
 */

/**
 * @typedef {{ addedBy: string, hasActions: boolean, templateTitle: string }} TemplateTableItem
 */

export const BASE_URL = config.get( 'url' );
export const adminUsername = config.get( 'users.admin.username' );
export const adminPassword = config.get( 'users.admin.password' );
export const client = HTTPClientFactory.build( BASE_URL )
	.withBasicAuth( adminUsername, adminPassword )
	.create();
export const DEFAULT_TIMEOUT = 30000;
export const SHOP_CHECKOUT_BLOCK_PAGE = BASE_URL + 'checkout-block/';

const SELECTORS = {
	canvas: 'iframe[name="editor-canvas"],.edit-post-visual-editor',
	inserter: {
		search: '.components-search-control__input,.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search',
	},
	templatesListTable: {
		actionsContainer: '.edit-site-list-table__actions',
		cells: '.edit-site-list-table-column',
		headings: 'thead th.edit-site-list-table-column',
		root: '.edit-site-list-table',
		rows: '.edit-site-list-table-row',
		templateActions: '.edit-site-list-table button[aria-label="Actions"]',
		templateTitle: '[data-wp-component="Heading"]',
	},
	themesPage: {
		currentTheme: '.theme.active',
	},
	toolbar: {
		confirmSave: '.editor-entities-saved-states__save-button',
		saveButton: '.edit-site-save-button__button',
		savePrompt: '.entities-saved-states__text-prompt',
	},
	templateEditor: {
		editButton:
			'.edit-site-site-hub__edit-button[aria-label="Open the editor"]',
	},
	editor: {
		filterButtonToggle: '//label[text()="Show \'Apply filters\' button"]',
	},
	frontend: {
		XPathSubmitButton:
			"//*[contains(@class,'wc-block-components-filter-submit-button')]",
	},
};

/**
 * Search for block in the global inserter.
 *
 * @see https://github.com/WordPress/gutenberg/blob/2356b2d3165acd0af980d52bc93fb1e42748bb25/packages/e2e-test-utils/src/inserter.js#L95
 *
 * @param {string} searchTerm The text to search the inserter for.
 */
export async function searchForBlock( searchTerm ) {
	await openGlobalBlockInserter();
	await page.waitForSelector( SELECTORS.inserter.search );
	await page.focus( SELECTORS.inserter.search );
	await pressKeyWithModifier( 'primary', 'a' );
	await page.keyboard.type( searchTerm );
}

/**
 * Opens the inserter, searches for the given term, then selects the first
 * result that appears.
 *
 * @param {string} searchTerm The text to search the inserter for.
 */
export async function insertBlockDontWaitForInsertClose( searchTerm ) {
	await searchForBlock( searchTerm );
	await page.waitForXPath( `//button//span[text()='${ searchTerm }']` );
	const insertButton = (
		await page.$x( `//button//span[text()='${ searchTerm }']` )
	 )[ 0 ];
	await insertButton.click();
}

export const closeInserter = async () => {
	if (
		await page.evaluate( () => {
			return !! document.querySelector(
				'.edit-post-header [aria-label="Add block"]'
			);
		} )
	) {
		await page.click( '.edit-post-header [aria-label="Add block"]' );
		return;
	}
	await page.click(
		'.edit-post-header [aria-label="Toggle block inserter"]'
	);
};

const WP_ADMIN_WIDGETS_EDITOR = WP_ADMIN_DASHBOARD + 'widgets.php';

export const openWidgetEditor = async () => {
	await page.goto( WP_ADMIN_WIDGETS_EDITOR, {
		waitUntil: 'networkidle0',
	} );
};

export const closeModalIfExists = async () => {
	// The modal close button can have different aria-labels, depending on the version of Gutenberg/WP.
	// Newer versions (WP >=6.2) use `Close`, while older versions (WP <6.1) use `Close dialog`.
	const closeButton = await page.$(
		'.components-modal__header [aria-label="Close"], .components-modal__header [aria-label="Close dialog"]'
	);
	if ( closeButton ) {
		await closeButton.click();
	}
};

export const isBlockInsertedInWidgetsArea = async ( blockName ) => {
	const widgetAreaSelector = '.wp-block-widget-area';

	const widgetsArea = await page.$$( widgetAreaSelector );

	return widgetsArea.some(
		async ( widgetArea ) =>
			( await widgetArea.$$( `[data-block-title="${ blockName }"]` )
				.length ) > 0
	);
};

/**
 * Visits site editor depending on used WordPress version and how Gutenberg is installed.
 *
 * @param {Object}                             params                          Query parameters to add to the URL.
 * @param {string}                             [params.postId]                 ID of the template if we want to access template editor.
 * @param {'wp_template' | 'wp_template_part'} [params.postType='wp_template'] Type of template.
 * @param {string}                             [params.path]                   Navigation path.
 */
export async function goToSiteEditor( params = {} ) {
	await visitAdminPage( 'site-editor.php', addQueryArgs( '', params ) );

	if ( params?.postId || Object.keys( params ).length === 0 ) {
		await enterEditMode();
	}
}

/**
 * Visits the Site Editor template edit view.
 *
 * @param {Object}                             params
 * @param {string}                             [params.postId]                 ID of the template if we want to access template editor.
 * @param {'wp_template' | 'wp_template_part'} [params.postType='wp_template'] Type of template.
 */
export async function goToTemplateEditor( {
	postId,
	postType = 'wp_template',
} = {} ) {
	await goToSiteEditor( {
		postType,
		postId,
	} );

	await disableSiteEditorWelcomeGuide();
	await waitForCanvas();
}

/**
 * Visits the Site Editor templates list view.
 *
 * @param {Object}                             params
 * @param {'wp_template' | 'wp_template_part'} [params.postType='wp_template'] Type of template.
 * @param {'list' | 'actions'}                 [params.waitFor='false']        Wait for list or for actions to be present - tempalte actions can take a moment to load, we can wait for them to be present if needed.
 */
export async function goToTemplatesList( {
	postType = 'wp_template',
	waitFor = 'list',
} = {} ) {
	await goToSiteEditor( {
		postType,
		// In WP 6.2, if postId is not defined, the route expects `path` instead
		// of `postType`.
		path: `/${ postType }/all`,
	} );

	if ( waitFor === 'actions' ) {
		await page.waitForSelector(
			SELECTORS.templatesListTable.templateActions
		);
	} else {
		await page.waitForSelector( SELECTORS.templatesListTable.root );
	}
}

/**
 * Waits for the Gutenberg canvas to be available
 *
 * @param {number} [timeout=DEFAULT_TIMEOUT] The amount of ms to wait for the element
 *
 * @return {Promise<?ElementHandle>} The canvas element handle
 */
export function waitForCanvas( timeout = DEFAULT_TIMEOUT ) {
	return page.waitForSelector( SELECTORS.canvas, { timeout } );
}

/**
 * Saves a template
 */
export async function saveTemplate() {
	const { confirmSave, saveButton, savePrompt } = SELECTORS.toolbar;

	await page.click( saveButton );
	await page.waitForSelector( savePrompt );
	await page.click( confirmSave );
	await page.waitForSelector( `${ saveButton }[aria-disabled="true"]` );
}

/**
 * Gets all available templates from the template list table UI
 *
 * @return {Promise<TemplateTableItem[]>} A promise of an array of informations about the templates extracted from the UI
 */
export async function getAllTemplates() {
	const { templatesListTable } = SELECTORS;

	const table = await page.waitForSelector( templatesListTable.root );

	if ( ! table ) throw new Error( 'Templates table not found' );

	const rows = await table.$$( templatesListTable.rows );

	return Promise.all(
		rows.map( async ( row ) => ( {
			addedBy: (
				await getTextContent( templatesListTable.cells, row )
			 )[ 1 ],
			hasActions: await elementExists(
				templatesListTable.actionsContainer,
				row
			),
			templateTitle: (
				await getTextContent( templatesListTable.templateTitle, row )
			 )[ 0 ],
		} ) )
	);
}

/**
 * Gets all the blocks that fulfill a given predicate
 *
 * @param {( block: WPBlock ) => boolean} predicate The function invoked per iteration
 * @return {Promise< Partial< WPBlock >[] >} The blocks which have been found
 */
export async function filterCurrentBlocks( predicate ) {
	/**
	 * @type {WPBlock[]}
	 */
	const blocks = await page.evaluate( () => {
		/**
		 * Gets all serializeable data from a block
		 *
		 * @param {WPBlock} block A Gutenberg Block
		 * @return {Partial<WPBlock>} A block with unserializeable values turned to `null`
		 */
		function getSerializeableBlockData( block ) {
			return JSON.parse( JSON.stringify( block ) );
		}

		const blockEditorStore = window.wp.data.select( 'core/block-editor' );
		/**
		 * @type {string[]}
		 */
		const allClientIds = blockEditorStore.getClientIdsWithDescendants();

		return allClientIds.map( ( id ) =>
			getSerializeableBlockData( blockEditorStore.getBlock( id ) )
		);
	} );

	return blocks.filter( predicate );
}

/**
 * Sets up a suite to use a theme without side-effects
 *
 * *Note:* this “hook” is supposed to be used within `describe` calls to
 * make it easier to set theme dependencies for tests without messing
 * the environment of any other test and to explicitly declare a
 * dependency.
 *
 * @param {string} themeSlug The theme the test suite should use
 */
export function useTheme( themeSlug ) {
	beforeAll( async () => {
		await cli(
			`npm run wp-env run tests-cli wp theme activate ${ themeSlug }`
		);
		await switchUserToAdmin();
	} );

	afterAll( async () => {
		await cli(
			`npm run wp-env run tests-cli wp theme activate storefront`
		);
		await switchUserToAdmin();
	} );
}

/**
 * Takes an average value of all items in an array.
 *
 * @param {Array} array An array of numbers to take an average from.
 * @return {number} The average value of all members of the array.
 */
const average = ( array ) => array.reduce( ( a, b ) => a + b ) / array.length;

/**
 * Writes a line to the e2e performance result for the current test containing longest, shortest, and average run times.
 *
 * @param {string} description Message to describe what you're logging the performance of.
 * @param {Array}  times       array of times to record.
 */
export const logPerformanceResult = ( description, times ) => {
	const roundedTimes = times.map(
		( time ) => Math.round( time + Number.EPSILON * 100 ) / 100
	);
	fs.appendFileSync(
		PERFORMANCE_REPORT_FILENAME,
		JSON.stringify( {
			description,
			longest: Math.max( ...roundedTimes ),
			shortest: Math.min( ...roundedTimes ),
			average: average( roundedTimes ),
		} ) + '\n'
	);
};

/* Add a block to Full Site Editing.
 *
 * *Note:* insertBlock function gets focused on the canvas, this could prevent some dialogs from being displayed. e.g. compatibility notice.
 *
 * @param {string} blockName Block name.
 */
export const addBlockToFSEArea = async ( blockName ) => {
	await searchForFSEBlock( blockName );
	const insertButton = await page.waitForXPath(
		`//button//span[contains(text(), '${ blockName }')]`
	);
	await insertButton.click();
};

/**
 * Creates a basic coupon with the provided coupon amount. Returns the coupon code.
 *
 * @param {Object} [coupon]              Coupon object. Default to fixed cart type and amount = 5.
 * @param {string} [coupon.amount]       Amount to be applied. Defaults to 5.
 * @param {string} [coupon.discountType] Type of a coupon. Defaults to Fixed cart discount.
 * @param {number} [coupon.usageLimit]   How many times the coupon can be used in total. Defaults to -1.
 */
export const createCoupon = async ( coupon ) => {
	const {
		amount = '5',
		discountType = 'Fixed cart discount',
		usageLimit = -1,
	} = coupon || { amount: '5', discountType: 'Fixed cart discount' };

	let couponType;
	switch ( discountType ) {
		case 'Fixed cart discount':
			couponType = 'fixed_cart';
			break;
		case 'Fixed product discount':
			couponType = 'fixed_product';
			break;
		case 'Percentage discount':
			couponType = 'percent';
			break;
		default:
			couponType = discountType;
	}

	// Fill in coupon code
	const couponCode = 'code-' + couponType + new Date().getTime().toString();
	const repository = Coupon.restRepository( client );
	const createdCoupon = await repository.create( {
		code: couponCode,
		discountType: couponType,
		amount,
		usageLimit,
	} );

	return createdCoupon;
};

/**
 *  Wait for all Products Block is loaded completely: when the skeleton disappears, and the products are visible
 */
export const waitForAllProductsBlockLoaded = async () => {
	/**
	 * We use try with empty catch block here to avoid the race condition
	 * between the block loading and the test execution. After user actions,
	 * the products may or may not finish loading at the time we try to wait for
	 * the loading class.
	 *
	 * We need to wait for the loading class to be added then removed because
	 * only waiting for the loading class to be removed could result in a false
	 * positive pass.
	 */
	try {
		await page.waitForSelector(
			'.wc-block-grid__products.is-loading-products'
		);
	} catch ( ok ) {}

	await page.waitForSelector(
		'.wc-block-grid__products:not(.is-loading-products)'
	);
};

/**
 * Get all blocks in the document that match a certain slug.
 *
 * @param {string} slug Slug of the blocks to get.
 *
 * @return {Promise<{}>} Promise resolving with an array containing all blocks in
 * the document that match a certain slug.
 */
export const getBlocksBySlug = async ( slug ) => {
	const blocks = await getAllBlocks();
	return blocks.filter( ( { name } ) => name === slug );
};

/**
 * Insert the All Products block using the global inserter. This util is needed
 * because inserting the All Products block using the `insertBlock()` util
 * causes time outs.
 */
export const insertAllProductsBlock = async () => {
	const searchTerm = 'All Products';

	await searchForBlock( searchTerm );

	// Wait for the default block list to disappear to prevent its items from
	// being considered as search results. This is needed since we're debouncing
	// search request.
	await page.waitForSelector( '.block-editor-inserter__block-list', {
		hidden: true,
	} );

	const insertButton = await page.waitForXPath(
		`//*[@role='option' and contains(., '${ searchTerm }')]`
	);
	if ( ! insertButton ) {
		throw new Error( `Could not find the "${ searchTerm }" block` );
	}
	insertButton?.click();
};

/**
 * Clicks on the button in the header which opens Document Settings sidebar when it is closed.
 * Based on https://github.com/WordPress/gutenberg/blob/trunk/packages/e2e-test-utils/src/open-document-settings-sidebar.js,
 * but updates the selector so it works in WP 6.2 without GB.
 */
export async function openSettingsSidebar() {
	const toggleButton = await page.waitForSelector(
		'.edit-post-header__settings button[aria-label="Settings"]'
	);

	const isClosed = await page.evaluate(
		( element ) => element.getAttribute( 'aria-expanded' ) === 'false',
		toggleButton
	);

	if ( isClosed ) {
		await toggleButton.click();
		await page.waitForSelector( '.edit-post-sidebar' );
	}
}

/**
 * Enables the `Show 'Apply filters' button` toggle.
 */
export const enableApplyFiltersButton = async () => {
	await ensureSidebarOpened();
	await switchBlockInspectorTab( 'Settings' );

	await page.waitForXPath( SELECTORS.editor.filterButtonToggle );

	const [ filterButtonToggle ] = await page.$x(
		SELECTORS.editor.filterButtonToggle
	);
	if ( ! filterButtonToggle ) {
		throw new Error( "'Apply filters' toggle not found via XPath." );
	}
	await filterButtonToggle.click();

	// If for some reason click didn't work (it seems to happen intermittently),
	// click on the toggle via JS.
	await page.evaluate( () => {
		const toggle = document.querySelector(
			'.components-toggle-control:last-child .components-form-toggle__input'
		);
		if ( ! toggle ) {
			throw new Error( "'Apply filters' toggle not found via CSS." );
		}
		if ( ! toggle.checked ) {
			toggle.click();
		}
	} );

	await canvas().waitForXPath( SELECTORS.frontend.XPathSubmitButton );
};