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

141 lines
3.8 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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( 'Legacy 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 ) );
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
)
);
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 )
);
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 );
} );
} );
} );