woocommerce/plugins/woocommerce-blocks/tests/e2e/specs/frontend/legacy-template-blocks.test.ts

146 lines
3.9 KiB
TypeScript
Raw Normal View History

import { URL } from 'url';
import { BASE_URL, useTheme } from '../../utils';
const SELECTORS = {
productArchivePage: {
paginationUI: '.woocommerce-pagination',
productContainers: '.products .product',
productsList: '.products',
resultsCount: '.woocommerce-result-count',
title: '.page-title',
},
};
/**
* Extracts data regarding pagination from the page
*
* @return {Promise<{ displayedCount: number, shouldHavePaginationUI: boolean }>} How many products are displayed
* and whether there should be a pagination UI (i.e. the displayed products are lesser than the total
* number of products).
*/
function extractPaginationData() {
const { productArchivePage } = SELECTORS;
return page.$eval( productArchivePage.resultsCount, ( $el ) => {
const resultsCountRegEx = /1(\d+)|\d+/;
const matches = $el.textContent.match( resultsCountRegEx );
// Depending on pagination, string can be either:
// a) 'Showing xy of z results'
// b) 'Showing all x results'
return {
displayedCount: Number( matches[ 1 ] ) || Number( matches[ 0 ] ),
shouldHavePaginationUI: !! matches[ 1 ],
};
} );
}
describe( 'Classic Template blocks', () => {
useTheme( 'emptytheme' );
describe( 'Product Archive block', () => {
it( 'renders a list of products with their count and pagination', async () => {
const { productArchivePage } = SELECTORS;
await page.goto(
new URL( '/?post_type=product', BASE_URL ).toString()
);
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( Number( displayedCount ) );
} );
} );
describe( 'Products by Category block', () => {
it( 'renders a list of products with their count, pagination and the category title', async () => {
const CATEGORY_NAME = 'Uncategorized';
const { productArchivePage } = SELECTORS;
await page.goto(
new URL(
`/product-category/${ CATEGORY_NAME.toLowerCase() }`,
BASE_URL
).toString()
);
await expect( page ).toMatchElement( productArchivePage.title, {
text: CATEGORY_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( Number( displayedCount ) );
} );
} );
describe( 'Products by 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
).toString()
);
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 );
} );
} );
} );