147 lines
3.9 KiB
TypeScript
147 lines
3.9 KiB
TypeScript
/**
|
||
* External dependencies
|
||
*/
|
||
import { URL } from 'url';
|
||
|
||
/**
|
||
* Internal dependencies
|
||
*/
|
||
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 x–y 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 );
|
||
} );
|
||
} );
|
||
} );
|