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

551 lines
17 KiB
JavaScript
Raw Normal View History

/**
* 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 GUTENBERG_EDITOR_CONTEXT =
process.env.GUTENBERG_EDITOR_CONTEXT || 'core';
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
);
};
Critical flow: Can see correct tax (https://github.com/woocommerce/woocommerce-blocks/pull/5900) * Tax is displayed correctly e2e test * Add extra utils to shopper * add single e2e test script oin package.json * Feedback changes from Niels * Test tax is correct on summary page * Check if CI test passes * Longer timeout for tax test * change timeout in jest config * increate jest timeout * Test * Test * Test * setTimeout outside of tests to 120000 * Address raluca's feedback and timeout everywheregaa * Increase timeout on for search box * set jest timeout to 120000 * Raluca's suggestions * Debug * Increase search timeout to 5000 * Only run Tax e2e tests in CI for quicker debug - REMOVE THIS * use waitforSelector * 30s delay for toMatchElement * Let'shope this works * Remove toMatchElement * waitForSelector * Run debug test only * Debug tax test * debug taxes * shopper using toMatchElement again * Remove the 30000 timeout delay from toMatchElement * Run all tests but only once * Remove tax test * Revert "Remove tax test" This reverts commit 7db34120e1e91f4fd26514fdb9525cac2a6066bb. * Delete the minicart test * Revert "Revert "Remove tax test"" This reverts commit 31dd654e52f37fcd02ccd25336958248bef495c6. * Revert "Delete the minicart test" This reverts commit 5595f0834a975d097a300bc0c7cbf643caa8b764. * tax test * block addToCart * Put back block functions * Refactor block.addToCart * mini-cart e2e test uses shopper.block.emptyCart() * only run shopper tests in CI * Run frontend and shopper tests and change waitFor -> waitForTimeout * Run frontend tests in CI * Run CI e2e tests again * Skip legacy template blocks * Skip legacy template test but run all others * Switch to storefront instead of twentytwentyone after legacy-template-blocks tests finish * Tidy up * fix typo * Fix ESLint issue Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Saad Tarhi <saad.tarhi@automattic.com>
2022-03-08 14:50:16 +00:00
/**
* 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 ) {}
Convert filter blocks to inner blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6978) * register filter wrapper block * register block variation * rename the active filters wrapper * prevent 404 error * Revert "prevent 404 error" This reverts commit 8b6cb7c6658b2a5a99b890b67f1dce8c1c51cdbf. * render parent wrapper block * support price filter block * hide the active filter block from inserter * swap the title of wrapper and inner filter block for active filters * hide the legacy heading for the price filter * update block title and description for active filters and price filter * remove heading control for price filter * remove heading control for active filters * update pattern * try: upgrade button * limit the number of inner block to 2 * prevent removing the inner filter block * Revert "prevent removing the inner filter block" This reverts commit 83b7feed78a7a7f50fd5799d1706faa9f2fc9050. * convert stock filter to inner block * refactor block upgrade button to share between filter blocks * update default heading * update pattern * update icon and title * Fix stock filter error by importing translations package * Upgrade Active Filters name to Active Filter Controls * Add upgrade support to price filter * Convert attribute filter to inner block (https://github.com/woocommerce/woocommerce-blocks/pull/7101) * wip: convert attribute filter to inner block * fix: render inner attribute filter block on the front end * refactor: inner block wrapper, extract the attribute parsing logic into a utility Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com> * Set correct attribute on the new filter blocks when they are upgraded * Use the Warning component to display the upgrade message so it is consistent with Gutenberg * address code review * better detect legacy block to show the upgrade notice * rename UpgradeToolbarButton to UpgradeNotice * add upgrade notice to the stock filter block * rename InnerBlockWrapper to BlockWrapper * attribute-filter: control wrapper visibility * passing block attributes down to inner active filters control block * fix styling of inner attribute filter control block * passing attribute to inner price filter control block * passing down the attribute to inner stock filter control block * remove unneccessary parsing * use default scope for variations * fix default attribute values * use default block appender * fix: lock control blocks * remove dynamic title code from attribute filter block * register active filters as variation and set it to the default that overrides the base block * fix isActive for default variation * fix: isActive logic for the active filters block * register side effect * fix ts error * e2e: fix active filters block backend test * e2e: fix frontend active filters test * e2e: fix attribute filter test * e2e: fix price filter test * e2e: fix stock filter test * e2e: update fixture * e2e: fix attribute filter test * remove invalid test * e2e: update heading selector for price filter in backend test * e2e: fixe backend price filter heading test * fix: patterns i18n * fix: heading level when upgrading the block Co-authored-by: Tung Du <dinhtungdu@gmail.com>
2022-10-07 15:00:19 +00:00
await page.waitForSelector(
'.wc-block-grid__products:not(.is-loading-products)'
);
};
/**
* Execute or skip the test suite base on the provided condition.
*
* @param {boolean} condition Condition to execute test suite.
*/
export const describeOrSkip = ( condition ) =>
condition ? describe : describe.skip;
/**
* 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 );
};