E2E tests for Product Tag Template and Legacy Block (https://github.com/woocommerce/woocommerce-blocks/pull/5888)
Also: * Add fixtures for tags * Teardown both categories and tags when tests are done
This commit is contained in:
parent
d64ebc72dc
commit
341a742916
|
@ -14,6 +14,7 @@ import {
|
|||
createProducts,
|
||||
createReviews,
|
||||
createCategories,
|
||||
createTags,
|
||||
createShippingZones,
|
||||
createBlockPages,
|
||||
enablePaymentGateways,
|
||||
|
@ -39,21 +40,23 @@ module.exports = async ( globalConfig ) => {
|
|||
createTaxes(),
|
||||
createCoupons(),
|
||||
createCategories(),
|
||||
createTags(),
|
||||
createShippingZones(),
|
||||
createProductAttributes(),
|
||||
enablePaymentGateways(),
|
||||
setupPageSettings(),
|
||||
] );
|
||||
] ).catch( console.log );
|
||||
const [
|
||||
taxes,
|
||||
coupons,
|
||||
categories,
|
||||
tags,
|
||||
shippingZones,
|
||||
attributes,
|
||||
] = results;
|
||||
// Create products after categories.
|
||||
|
||||
const products = await createProducts( categories, attributes );
|
||||
const products = await createProducts( categories, tags, attributes );
|
||||
/**
|
||||
* Create fixture reviews data for each product.
|
||||
*/
|
||||
|
@ -68,6 +71,8 @@ module.exports = async ( globalConfig ) => {
|
|||
shippingZones,
|
||||
pages,
|
||||
attributes,
|
||||
categories,
|
||||
tags,
|
||||
};
|
||||
} catch ( e ) {
|
||||
console.log( e );
|
||||
|
|
|
@ -9,6 +9,8 @@ import { teardown as teardownPuppeteer } from 'jest-environment-puppeteer';
|
|||
*/
|
||||
import {
|
||||
deleteTaxes,
|
||||
deleteCategories,
|
||||
deleteTags,
|
||||
deleteCoupons,
|
||||
deleteProducts,
|
||||
deleteShippingZones,
|
||||
|
@ -20,6 +22,8 @@ module.exports = async ( globalConfig ) => {
|
|||
await teardownPuppeteer( globalConfig );
|
||||
const {
|
||||
taxes,
|
||||
tags,
|
||||
categories,
|
||||
coupons,
|
||||
products,
|
||||
shippingZones,
|
||||
|
@ -27,6 +31,8 @@ module.exports = async ( globalConfig ) => {
|
|||
attributes,
|
||||
} = global.fixtureData;
|
||||
return Promise.allSettled( [
|
||||
deleteCategories( categories ),
|
||||
deleteTags( tags ),
|
||||
deleteTaxes( taxes ),
|
||||
deleteCoupons( coupons ),
|
||||
deleteProducts( products ),
|
||||
|
|
|
@ -126,6 +126,17 @@ const Categories = () => [
|
|||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Product tags fixture data, using the create batch endpoint
|
||||
*
|
||||
* @see {@link https://woocommerce.github.io/woocommerce-rest-api-docs/#batch-update-product-tags|Batch update product tags}
|
||||
*/
|
||||
const Tags = () => [
|
||||
{
|
||||
name: 'Newest',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Product fixture data, using the create batch endpoint
|
||||
*
|
||||
|
@ -173,6 +184,7 @@ const Products = () => [
|
|||
options: [ '128gb' ],
|
||||
},
|
||||
],
|
||||
tags: [ 'Newest' ],
|
||||
},
|
||||
{
|
||||
name: '32GB USB Stick',
|
||||
|
@ -215,6 +227,7 @@ const Products = () => [
|
|||
},
|
||||
],
|
||||
categories: [ 'Music' ],
|
||||
tags: [ 'Newest' ],
|
||||
},
|
||||
];
|
||||
|
||||
|
@ -370,5 +383,6 @@ module.exports = {
|
|||
Settings,
|
||||
PageSettings,
|
||||
Shipping,
|
||||
Tags,
|
||||
Taxes,
|
||||
};
|
||||
|
|
|
@ -141,6 +141,35 @@ const deleteCategories = ( categories ) => {
|
|||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* Create Product Tags.
|
||||
*
|
||||
* @param {Object[]} fixture An array of objects describing our data, defaults
|
||||
* to our fixture.
|
||||
* @return {Promise} a promise that resolves to an array of newly created tags,
|
||||
* or rejects if the request failed.
|
||||
*/
|
||||
const createTags = ( fixture = fixtures.Tags() ) =>
|
||||
WooCommerce.post( 'products/tags/batch', {
|
||||
create: fixture,
|
||||
} ).then( ( response ) => response.data.create );
|
||||
|
||||
/**
|
||||
* Delete Product Tags.
|
||||
*
|
||||
* @param {Object[]} tags an array of tags to delete.
|
||||
*
|
||||
* @return {Promise} return a promise that resolves to the deleted data or
|
||||
* reject if the request failed.
|
||||
*/
|
||||
const deleteTags = ( tags ) => {
|
||||
const ids = tags.map( ( tag ) => tag.id );
|
||||
|
||||
return WooCommerce.post( 'products/tags/batch', {
|
||||
delete: ids,
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* Create Products.
|
||||
*
|
||||
|
@ -149,6 +178,7 @@ const deleteCategories = ( categories ) => {
|
|||
* @todo add more products to e2e fixtures data.
|
||||
*
|
||||
* @param {Array} categories Array of category objects so we can replace names with ids in the request.
|
||||
* @param {Array} tags Array of category objects so we can replace names with ids in the request.
|
||||
* @param {Array} attributes Array of attribute objects so we can replace names with ids in the request.
|
||||
* @param {Object[]} fixture An array of objects describing our data, defaults
|
||||
* to our fixture.
|
||||
|
@ -157,6 +187,7 @@ const deleteCategories = ( categories ) => {
|
|||
*/
|
||||
const createProducts = (
|
||||
categories,
|
||||
tags,
|
||||
attributes,
|
||||
fixture = fixtures.Products()
|
||||
) => {
|
||||
|
@ -168,6 +199,11 @@ const createProducts = (
|
|||
)
|
||||
);
|
||||
}
|
||||
if ( tags && product.tags ) {
|
||||
product.tags = product.tags.map( ( tagName ) =>
|
||||
tags.find( ( tag ) => tag.name === tagName )
|
||||
);
|
||||
}
|
||||
if ( attributes && product.attributes ) {
|
||||
product.attributes = product.attributes.map(
|
||||
( productAttribute ) => {
|
||||
|
@ -415,6 +451,8 @@ module.exports = {
|
|||
deleteCoupons,
|
||||
createCategories,
|
||||
deleteCategories,
|
||||
createTags,
|
||||
deleteTags,
|
||||
createProducts,
|
||||
deleteProducts,
|
||||
createReviews,
|
||||
|
|
|
@ -20,6 +20,16 @@ exports[`Store Editing Templates Product Category block template should contain
|
|||
<!-- wp:template-part {\\"slug\\":\\"footer\\",\\"theme\\":\\"emptytheme\\"} /-->"
|
||||
`;
|
||||
|
||||
exports[`Store Editing Templates Product Tag block template should contain the "WooCommerce Product Taxonomy Block" legacy template 1`] = `
|
||||
"<!-- wp:template-part {\\"slug\\":\\"header\\",\\"theme\\":\\"emptytheme\\"} /-->
|
||||
|
||||
<!-- wp:group {\\"layout\\":{\\"inherit\\":true}} -->
|
||||
<div class=\\"wp-block-group\\"><!-- wp:woocommerce/legacy-template {\\"template\\":\\"taxonomy-product_tag\\"} /--></div>
|
||||
<!-- /wp:group -->
|
||||
|
||||
<!-- wp:template-part {\\"slug\\":\\"footer\\",\\"theme\\":\\"emptytheme\\"} /-->"
|
||||
`;
|
||||
|
||||
exports[`Store Editing Templates Single Product block template should contain the "WooCommerce Single Product Block" legacy template 1`] = `
|
||||
"<!-- wp:template-part {\\"slug\\":\\"header\\",\\"theme\\":\\"emptytheme\\"} /-->
|
||||
|
||||
|
|
|
@ -81,6 +81,14 @@ const BLOCK_DATA = {
|
|||
},
|
||||
name: 'woocommerce/legacy-template',
|
||||
},
|
||||
'taxonomy-product_tag': {
|
||||
attributes: {
|
||||
placeholder: 'archive-product',
|
||||
template: 'taxonomy-product_tag',
|
||||
title: 'WooCommerce Product Tag Block',
|
||||
},
|
||||
name: 'woocommerce/legacy-template',
|
||||
},
|
||||
};
|
||||
|
||||
const SELECTORS = {
|
||||
|
@ -393,4 +401,94 @@ describe( 'Store Editing Templates', () => {
|
|||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'Product Tag block template', () => {
|
||||
it( 'default template from WooCommerce Blocks is available on an FSE theme', async () => {
|
||||
const EXPECTED_TEMPLATE = defaultTemplateProps( 'Product Tag' );
|
||||
|
||||
await goToSiteEditor( '?postType=wp_template' );
|
||||
|
||||
const templates = await getAllTemplates();
|
||||
|
||||
try {
|
||||
expect( templates ).toContainEqual( EXPECTED_TEMPLATE );
|
||||
} catch ( ok ) {
|
||||
// Depending on the speed of the execution and whether Chrome is headless or not
|
||||
// the id might be parsed or not
|
||||
|
||||
expect( templates ).toContainEqual( {
|
||||
...EXPECTED_TEMPLATE,
|
||||
addedBy: WOOCOMMERCE_PARSED_ID,
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
it( 'should contain the "WooCommerce Product Taxonomy Block" legacy template', async () => {
|
||||
const templateQuery = addQueryArgs( '', {
|
||||
postId: 'woocommerce/woocommerce//taxonomy-product_tag',
|
||||
postType: 'wp_template',
|
||||
} );
|
||||
|
||||
await goToSiteEditor( templateQuery );
|
||||
await waitForCanvas();
|
||||
|
||||
const [ legacyBlock ] = await filterCurrentBlocks(
|
||||
( block ) =>
|
||||
block.name === BLOCK_DATA[ 'taxonomy-product_tag' ].name
|
||||
);
|
||||
|
||||
expect( legacyBlock.attributes.template ).toBe(
|
||||
BLOCK_DATA[ 'taxonomy-product_tag' ].attributes.template
|
||||
);
|
||||
expect( await getCurrentSiteEditorContent() ).toMatchSnapshot();
|
||||
} );
|
||||
|
||||
it( 'should show the action menu if the template has been customized by the user', async () => {
|
||||
const EXPECTED_TEMPLATE = {
|
||||
...defaultTemplateProps( 'Product Tag' ),
|
||||
hasActions: true,
|
||||
};
|
||||
|
||||
await visitTemplateAndAddCustomParagraph( 'taxonomy-product_tag' );
|
||||
|
||||
await goToSiteEditor( '?postType=wp_template' );
|
||||
const templates = await getAllTemplates();
|
||||
|
||||
try {
|
||||
expect( templates ).toContainEqual( EXPECTED_TEMPLATE );
|
||||
} catch ( ok ) {
|
||||
// Depending on the speed of the execution and whether Chrome is headless or not
|
||||
// the id might be parsed or not
|
||||
|
||||
expect( templates ).toContainEqual( {
|
||||
...EXPECTED_TEMPLATE,
|
||||
addedBy: WOOCOMMERCE_PARSED_ID,
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
it( 'should preserve and correctly show the user customization on the back-end', async () => {
|
||||
const templateQuery = addQueryArgs( '', {
|
||||
postId: 'woocommerce/woocommerce//taxonomy-product_tag',
|
||||
postType: 'wp_template',
|
||||
} );
|
||||
|
||||
await goToSiteEditor( templateQuery );
|
||||
await waitForCanvas();
|
||||
|
||||
await expect( canvas() ).toMatchElement(
|
||||
SELECTORS.blocks.paragraph,
|
||||
{ text: CUSTOMIZED_STRING, timeout: DEFAULT_TIMEOUT }
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'should show the user customization on the front-end', async () => {
|
||||
await page.goto( new URL( '/product-tag/newest', BASE_URL ) );
|
||||
|
||||
await expect( page ).toMatchElement( 'p', {
|
||||
text: CUSTOMIZED_STRING,
|
||||
timeout: DEFAULT_TIMEOUT,
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
|
|
@ -111,4 +111,39 @@ describe( 'Legacy Template blocks', () => {
|
|||
expect( $productElements ).toHaveLength( Number( displayedCount ) );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'Product Tag block', () => {
|
||||
it( 'renders a list of products with their count, pagination and the tag title', async () => {
|
||||
const TAG_NAME = 'Newest';
|
||||
const { productArchivePage } = SELECTORS;
|
||||
|
||||
await page.goto(
|
||||
new URL( `/product-tag/${ TAG_NAME.toLowerCase() }`, BASE_URL )
|
||||
);
|
||||
|
||||
await expect( page ).toMatchElement( productArchivePage.title, {
|
||||
text: TAG_NAME,
|
||||
} );
|
||||
|
||||
await page.waitForSelector( productArchivePage.productsList );
|
||||
await page.waitForSelector( productArchivePage.resultsCount );
|
||||
|
||||
const {
|
||||
displayedCount,
|
||||
shouldHavePaginationUI,
|
||||
} = await extractPaginationData();
|
||||
|
||||
if ( shouldHavePaginationUI ) {
|
||||
await expect( page ).toMatchElement(
|
||||
productArchivePage.paginationUI
|
||||
);
|
||||
}
|
||||
|
||||
const $productElements = await page.$$(
|
||||
productArchivePage.productContainers
|
||||
);
|
||||
|
||||
expect( $productElements ).toHaveLength( displayedCount );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
|
Loading…
Reference in New Issue