Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add E2E tests for the Filter Products By Stock Block (https://github.com/woocommerce/woocommerce-blocks/pull/6357) 

* Add E2E tests for the Filter Products By Attribute Block woocommerce/woocommerce-blocks#6322

add E2E tests for the Filter Products By Attribute Block

* Add E2E tests for the Filter Products By Stock Block woocommerce/woocommerce-blocks#6323

add E2E tests for the Filter Products By Stock Block

* improve checks

* improve checks

* remove globals.d.ts file
This commit is contained in:
Luigi Teschio 2022-05-13 11:11:02 +02:00 committed by GitHub
parent 76383c781c
commit ac609f05dc
4 changed files with 254 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
plugins/woocommerce-blocks/tests/e2e/fixtures/fixture-data.js
View File

@ -229,6 +229,29 @@ const Products = () => [
categories: [ 'Music' ],
tags: [ 'Newest' ],
},
{
name: 'Woo Single #3 - Limited Edition',
type: 'simple',
regular_price: '100.00',
virtual: true,
downloadable: true,
downloads: [
{
name: 'Woo Single 2',
file:
'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg',
},
],
images: [
{
src:
'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg',
},
],
categories: [ 'Music' ],
stock_status: 'outofstock',
tags: [ 'Newest' ],
},
];
/**

4
plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts
View File

@ -80,7 +80,7 @@ describe( `${ block.name } Block`, () => {
await waitForAllProductsBlockLoaded();
const products = await page.$$( selectors.frontend.productsList );
expect( products ).toHaveLength( 4 );
expect( products ).toHaveLength( 5 );
} );
it( 'should show only products that match the filter', async () => {
@ -131,7 +131,7 @@ describe( `${ block.name } Block`, () => {
selectors.frontend.classicProductsList
);
expect( products ).toHaveLength( 4 );
expect( products ).toHaveLength( 5 );
} );
it( 'should show only products that match the filter', async () => {

202
plugins/woocommerce-blocks/tests/e2e/specs/shopper/filter-products-by-stock.test.ts Normal file
View File

@ -0,0 +1,202 @@
import {
createNewPost,
deleteAllTemplates,
insertBlock,
switchUserToAdmin,
publishPost,
} from '@wordpress/e2e-test-utils';
import { selectBlockByName } from '@woocommerce/blocks-test-utils';
import {
BASE_URL,
goToTemplateEditor,
openBlockEditorSettings,
saveTemplate,
useTheme,
waitForCanvas,
} from '../../utils';
const block = {
name: 'Filter Products by Stock',
slug: 'woocommerce/stock-filter',
class: '.wc-block-stock-filter',
selectors: {
editor: {
filterButtonToggle: "//label[text()='Filter button']",
},
frontend: {
productsList: '.wc-block-grid__products > li',
classicProductsList: '.products.columns-3 > li',
filter: 'label[for=outofstock]',
submitButton: '.wc-block-components-filter-submit-button',
},
},
urlSearchParamWhenFilterIsApplied: '?filter_stock_status=outofstock',
foundProduct: 'Woo Single #3',
};
const { selectors } = block;
const waitForAllProductsBlockLoaded = () =>
page.waitForSelector( selectors.frontend.productsList + '.is-loading', {
hidden: true,
} );
const goToShopPage = () =>
page.goto( BASE_URL + '/shop', {
waitUntil: 'networkidle0',
} );
describe( `${ block.name } Block`, () => {
describe( 'with All Products Block', () => {
let link = '';
beforeAll( async () => {
await switchUserToAdmin();
await createNewPost( {
postType: 'post',
title: block.name,
} );
await insertBlock( block.name );
await insertBlock( 'All Products' );
await publishPost();
link = await page.evaluate( () =>
wp.data.select( 'core/editor' ).getPermalink()
);
} );
it( 'should render', async () => {
await page.goto( link );
await waitForAllProductsBlockLoaded();
const products = await page.$$( selectors.frontend.productsList );
expect( products ).toHaveLength( 5 );
} );
it( 'should show only products that match the filter', async () => {
const isRefreshed = jest.fn( () => void 0 );
page.on( 'load', isRefreshed );
await page.click( selectors.frontend.filter );
await waitForAllProductsBlockLoaded();
const products = await page.$$( selectors.frontend.productsList );
expect( isRefreshed ).not.toBeCalled();
expect( products ).toHaveLength( 1 );
await expect( page ).toMatch( block.foundProduct );
} );
} );
describe( 'with PHP classic template ', () => {
const productCatalogTemplateId =
'woocommerce/woocommerce//archive-product';
useTheme( 'emptytheme' );
beforeAll( async () => {
await deleteAllTemplates( 'wp_template' );
await deleteAllTemplates( 'wp_template_part' );
await goToTemplateEditor( {
postId: productCatalogTemplateId,
} );
await insertBlock( block.name );
await saveTemplate();
await goToShopPage();
} );
afterAll( async () => {
await deleteAllTemplates( 'wp_template' );
await deleteAllTemplates( 'wp_template_part' );
} );
it( 'should render', async () => {
const products = await page.$$(
selectors.frontend.classicProductsList
);
expect( products ).toHaveLength( 5 );
} );
it( 'should show only products that match the filter', async () => {
const isRefreshed = jest.fn( () => void 0 );
page.on( 'load', isRefreshed );
await page.waitForSelector( block.class + '.is-loading', {
hidden: true,
} );
expect( isRefreshed ).not.toBeCalled();
await Promise.all( [
page.waitForNavigation( {
waitUntil: 'networkidle0',
} ),
page.click( selectors.frontend.filter ),
] );
const products = await page.$$(
selectors.frontend.classicProductsList
);
const pageURL = page.url();
const parsedURL = new URL( pageURL );
expect( isRefreshed ).toBeCalledTimes( 1 );
expect( products ).toHaveLength( 1 );
await expect( page ).toMatch( block.foundProduct );
expect( parsedURL.search ).toEqual(
block.urlSearchParamWhenFilterIsApplied
);
} );
it( 'should refresh the page only if the user click on button', async () => {
await goToTemplateEditor( {
postId: productCatalogTemplateId,
} );
await waitForCanvas();
await selectBlockByName( block.slug );
await openBlockEditorSettings();
await page.waitForXPath(
block.selectors.editor.filterButtonToggle
);
const [ filterButtonToggle ] = await page.$x(
selectors.editor.filterButtonToggle
);
await filterButtonToggle.click();
await saveTemplate();
await goToShopPage();
const isRefreshed = jest.fn( () => void 0 );
page.on( 'load', isRefreshed );
await page.waitForSelector( block.class + '.is-loading', {
hidden: true,
} );
expect( isRefreshed ).not.toBeCalled();
await page.waitForSelector( selectors.frontend.filter );
await page.click( selectors.frontend.filter );
await Promise.all( [
page.waitForNavigation( {
waitUntil: 'networkidle0',
} ),
page.click( selectors.frontend.submitButton ),
] );
const pageURL = page.url();
const parsedURL = new URL( pageURL );
await page.waitForSelector(
selectors.frontend.classicProductsList
);
const products = await page.$$(
selectors.frontend.classicProductsList
);
expect( isRefreshed ).toBeCalledTimes( 1 );
expect( products ).toHaveLength( 1 );
await expect( page ).toMatch( block.foundProduct );
expect( parsedURL.search ).toEqual(
block.urlSearchParamWhenFilterIsApplied
);
} );
} );
} );

55
plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart.test.js
View File

@ -19,8 +19,21 @@ import { useTheme } from '../../utils';
const block = {
name: 'Mini Cart',
selectors: {
frontend: {
productWithAddToCartButton:
'.wc-block-grid__product:nth-child(2) .add_to_cart_button',
productTitle:
'.wc-block-grid__product:nth-child(2) .wc-block-components-product-name',
productPrice:
'.wc-block-grid__product:nth-child(2) .wc-block-grid__product-price',
addToCartButton: 'button.add_to_cart_button',
},
},
};
const { selectors } = block;
const options = getDefaultOptions();
const clickMiniCartButton = async () => {
@ -196,9 +209,7 @@ describe( 'Shopper → Mini Cart', () => {
} );
it( 'The Mini Cart title shows correct amount', async () => {
await page.click(
'.wc-block-grid__product:first-child .add_to_cart_button'
);
await page.click( selectors.frontend.productWithAddToCartButton );
await expect( page ).toMatchElement( '.wc-block-mini-cart__title', {
text: 'Your cart (1 item)',
@ -226,9 +237,7 @@ describe( 'Shopper → Mini Cart', () => {
);
}
// Get a random product to better replicate human behavior.
const product =
products[ Math.floor( Math.random() * products.length ) ];
const product = products[ 1 ];
const [ productTitle ] = await getTextContent(
'.wc-block-components-product-name',
product
@ -246,7 +255,7 @@ describe( 'Shopper → Mini Cart', () => {
} );
it( 'Filled Mini Cart footer contains subtotal, view cart button, and go to checkout buttons', async () => {
await page.click( '.add_to_cart_button' );
await page.click( selectors.frontend.addToCartButton );
await expect( page ).toMatchElement( '.wc-block-mini-cart__title', {
text: 'Your cart',
@ -285,9 +294,7 @@ describe( 'Shopper → Mini Cart', () => {
} );
it( 'The quantity of a product can be updated using plus and minus button', async () => {
await page.click(
'.wc-block-grid__product:first-child .add_to_cart_button'
);
await page.click( selectors.frontend.productWithAddToCartButton );
await expect( page ).toMatchElement( '.wc-block-mini-cart__title', {
text: 'Your cart (1 item)',
@ -331,9 +338,7 @@ describe( 'Shopper → Mini Cart', () => {
} );
it( 'Minus button is disabled if product quantity is 1', async () => {
await page.click(
'.wc-block-grid__product:first-child .add_to_cart_button'
);
await page.click( selectors.frontend.productWithAddToCartButton );
await expect( page ).toMatchElement( '.wc-block-mini-cart__title', {
text: 'Your cart (1 item)',
@ -425,12 +430,10 @@ describe( 'Shopper → Mini Cart', () => {
it( 'Mini Cart show tax label and price including tax', async () => {
const [ priceInLoop ] = await getTextContent(
'.wc-block-grid__product:first-child .wc-block-grid__product-price'
selectors.frontend.productPrice
);
await page.click(
'.wc-block-grid__product:first-child .add_to_cart_button'
);
await page.click( selectors.frontend.productWithAddToCartButton );
await expect( page ).toMatchElement( '.wc-block-mini-cart__title', {
text: 'Your cart (1 item)',
@ -471,7 +474,7 @@ describe( 'Shopper → Mini Cart', () => {
} );
it( 'Can remove product from Mini Cart', async () => {
await page.click( '.add_to_cart_button' );
await page.click( selectors.frontend.addToCartButton );
await expect( page ).toMatchElement( '.wc-block-mini-cart__title', {
text: 'Your cart (1 item)',
@ -497,12 +500,10 @@ describe( 'Shopper → Mini Cart', () => {
it( 'Can go to cart page from the Mini Cart Footer', async () => {
const [ productTitle ] = await getTextContent(
'.wc-block-grid__product:first-child .wc-block-components-product-name'
selectors.frontend.productTitle
);
await page.click(
'.wc-block-grid__product:first-child .add_to_cart_button'
);
await page.click( selectors.frontend.productWithAddToCartButton );
await expect( page ).toMatchElement(
'.wc-block-mini-cart__products-table',
@ -533,13 +534,11 @@ describe( 'Shopper → Mini Cart', () => {
it( 'Can go to checkout page from the Mini Cart Footer', async () => {
const productTitle = await page.$eval(
'.wc-block-grid__product:first-child .wc-block-components-product-name',
selectors.frontend.productTitle,
( el ) => el.textContent
);
await page.click(
'.wc-block-grid__product:first-child .add_to_cart_button'
);
await page.click( selectors.frontend.productWithAddToCartButton );
await expect( page ).toMatchElement(
'.wc-block-mini-cart__products-table',
@ -591,7 +590,7 @@ describe( 'Shopper → Mini Cart', () => {
it( 'User can see translation in filled Mini Cart', async () => {
await page.click(
'.wc-block-grid__product:first-child .add_to_cart_button'
selectors.frontend.productWithAddToCartButton
);
await expect( page ).toMatchElement(
@ -623,7 +622,7 @@ describe( 'Shopper → Mini Cart', () => {
it( 'User can see translation in filled Mini Cart', async () => {
await page.click(
'.wc-block-grid__product:first-child .add_to_cart_button'
selectors.frontend.productWithAddToCartButton
);
await expect( page ).toMatchElement(