mirror of
https://github.com/vercel/commerce.git
synced 2025-05-08 18:57:51 +00:00
60 lines
3.1 KiB
TypeScript
60 lines
3.1 KiB
TypeScript
//---------------------------------------------------------------------------------------------------------------------------------------------------------------\\
|
|
/**
|
|
* Generates test identifiers for a grid item, reflecting the product elements.
|
|
* @param itemSize - The size of the grid item ('full' or 'half').
|
|
* @param itemIndex - Optional index of the item in the grid.
|
|
* @returns An object containing test identifiers mapped to product elements in the grid.
|
|
*/
|
|
function generateGridItemTestIds(itemSize?: 'full' | 'half' | undefined, itemIndex?: number) {
|
|
const size = itemSize !== undefined ? `-${itemSize}` : '';
|
|
const suffix = itemIndex !== undefined ? `-${itemIndex}` : '';
|
|
const itemSelector = `[data-test^="grid-item${size}${suffix}"]`;
|
|
|
|
return {
|
|
container: itemSelector,
|
|
product: {
|
|
link: `${itemSelector} > [data-test="product-link"]`,
|
|
image: `${itemSelector} > [data-test="product-link"] > [data-test="tile-container"] > [data-test="tile-image"]`,
|
|
name: `${itemSelector} > [data-test="product-link"] > [data-test="tile-container"] > [data-test="label-container"] > [data-test="label-content-wrapper"] > [data-test="label-title-text"]`,
|
|
price: {
|
|
amount: `${itemSelector} > [data-test="product-link"] > [data-test="tile-container"] > [data-test="label-container"] > [data-test="label-content-wrapper"] > [data-test="price-amount"]`,
|
|
currencyCode: `${itemSelector} > [data-test="product-link"] > [data-test="tile-container"] > [data-test="label-container"] > [data-test="label-content-wrapper"] > [data-test="price-currency-code"]`
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Generates test identifiers for a carousel item, reflecting the product elements.
|
|
* @param itemIndex - The index of the item in the carousel.
|
|
* @returns An object containing test identifiers mapped to product elements in the carousel.
|
|
*/
|
|
function generateCarouselItemTestIds(itemIndex: number) {
|
|
const itemSelector = `[data-test="carousel-item-${itemIndex}"]`;
|
|
|
|
return {
|
|
container: itemSelector,
|
|
product: {
|
|
link: `${itemSelector} > [data-test="product-link"]`,
|
|
image: `${itemSelector} > [data-test="tile-container"] > [data-test="tile-image"]`,
|
|
name: `${itemSelector} > [data-test="tile-container"] > [data-test="label-container"] > [data-test="label-content-wrapper"] > [data-test="label-title-text"]`,
|
|
price: {
|
|
amount: `${itemSelector} > [data-test="tile-container"] > [data-test="label-container"] > [data-test="label-content-wrapper"] > [data-test="price-amount"]`,
|
|
currencyCode: `${itemSelector} > [data-test="tile-container"] > [data-test="label-container"] > [data-test="label-content-wrapper"] > [data-test="price-currency-code"]`
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
export const DATA_TEST_SELECTORS = {
|
|
productGridSection: {
|
|
container: '[data-test="three-item-grid"]',
|
|
items: (size?: 'full' | 'half' | undefined, index?: number) =>
|
|
generateGridItemTestIds(size, index)
|
|
},
|
|
productCarouselSection: {
|
|
container: '[data-test="carousel-container"]',
|
|
items: (index: number) => generateCarouselItemTestIds(index)
|
|
}
|
|
} as const;
|