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

Shopper → Mini Cart → Can view filled mini cart contents block (https://github.com/woocommerce/woocommerce-blocks/pull/5923)

This commit is contained in:
Tung Du 2022-03-01 18:25:13 +07:00 committed by GitHub
parent cabf4e7db6
commit 22eccc8614
2 changed files with 166 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,8 @@
/**
* External dependencies
*/
import { setDefaultOptions, getDefaultOptions } from 'expect-puppeteer';
/**
* Internal dependencies
*/
@ -7,12 +12,37 @@ const block = {
name: 'Mini Cart Block',
};
const options = getDefaultOptions();
const clickMiniCartButton = async () => {
await page.hover( '.wc-block-mini-cart__button' );
await page.waitForSelector( '.wc-block-mini-cart__drawer.is-loading', {
hidden: true,
} );
await page.click( '.wc-block-mini-cart__button' );
};
if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 3 ) {
// eslint-disable-next-line jest/no-focused-tests
test.only( `skipping ${ block.name } tests`, () => {} );
}
describe( 'Shopper → Mini Cart', () => {
beforeAll( async () => {
/**
* Mini Cart takes time to open. Sometimes, on slow machines, 500ms
* is not enough. So, we increase the default timeout to 5 seconds.
*/
setDefaultOptions( { ...options, timeout: 5000 } );
} );
afterAll( async () => {
// Reset default options.
setDefaultOptions( options );
} );
beforeEach( async () => {
await shopper.goToBlockPage( block.name );
} );
@ -42,7 +72,7 @@ describe( 'Shopper → Mini Cart', () => {
describe( 'Drawer', () => {
it( 'The drawer opens when shopper clicks on the mini cart icon', async () => {
await page.click( '.wc-block-mini-cart__button' );
await clickMiniCartButton();
await expect( page ).toMatchElement(
'.wc-block-mini-cart__drawer',
@ -53,7 +83,7 @@ describe( 'Shopper → Mini Cart', () => {
} );
it( 'The drawer closes when shopper clicks on the drawer close button', async () => {
await page.click( '.wc-block-mini-cart__button' );
await clickMiniCartButton();
await expect( page ).toMatchElement(
'.wc-block-mini-cart__drawer',
@ -62,6 +92,9 @@ describe( 'Shopper → Mini Cart', () => {
}
);
// Wait for the drawer to fully open.
await page.waitForTimeout( 500 );
await page.click(
'.wc-block-mini-cart__drawer .components-modal__header button'
);
@ -75,7 +108,7 @@ describe( 'Shopper → Mini Cart', () => {
} );
it( 'The drawer closes when shopper clicks outside the drawer', async () => {
await page.click( '.wc-block-mini-cart__button' );
await clickMiniCartButton();
await expect( page ).toMatchElement(
'.wc-block-mini-cart__drawer',
@ -94,4 +127,95 @@ describe( 'Shopper → Mini Cart', () => {
);
} );
} );
describe( 'Filled mini cart', () => {
beforeAll( async () => {
await shopper.emptyCart();
} );
afterEach( async () => {
await shopper.emptyCart();
} );
it( 'The Mini Cart title shows correct amount', async () => {
await page.click(
'.wc-block-grid__product:first-child .add_to_cart_button'
);
await expect( page ).toMatchElement( '.wc-block-mini-cart__title', {
text: 'Your cart (1 item)',
} );
await page.mouse.click( 50, 200 );
await page.click(
'.wc-block-grid__product:last-child .add_to_cart_button'
);
await expect( page ).toMatchElement( '.wc-block-mini-cart__title', {
text: 'Your cart (2 items)',
} );
} );
it( 'The Mini Cart products table show added products', async () => {
const products = await page.$$(
'.wc-block-all-products .wc-block-grid__product'
);
if ( products.length === 0 ) {
throw new Error(
'No products found on the Mini Cart Block page.'
);
}
// Get a random product to better replicate human behavior.
const product =
products[ Math.floor( Math.random() * products.length ) ];
const productTitleEl = await product.$(
'.wc-block-components-product-name'
);
const productTitle = await productTitleEl.getProperty(
'textContent'
);
const addToCartButton = await product.$( '.add_to_cart_button' );
await addToCartButton.click();
await expect( page ).toMatchElement(
'.wc-block-mini-cart__products-table',
{
text: productTitle,
}
);
} );
it( 'Filled Mini Cart footer contains subtotal, view cart button, and go to checkout buttons', async () => {
await page.click( '.add_to_cart_button' );
await expect( page ).toMatchElement( '.wc-block-mini-cart__title', {
text: 'Your cart',
} );
await expect( page ).toMatchElement(
'.wc-block-mini-cart__footer',
{
text: 'Subtotal',
}
);
await expect( page ).toMatchElement(
'.wc-block-mini-cart__footer-cart',
{
text: 'View my cart',
}
);
await expect( page ).toMatchElement(
'.wc-block-mini-cart__footer-checkout',
{
text: 'Go to checkout',
}
);
} );
} );
} );

40
plugins/woocommerce-blocks/tests/utils/shopper.js
View File

@ -1,7 +1,11 @@
/**
* External dependencies
*/
import { shopper as wcShopper } from '@woocommerce/e2e-utils';
import {
shopper as wcShopper,
uiUnblocked,
SHOP_CART_PAGE,
} from '@woocommerce/e2e-utils';
/**
* Internal dependencies
@ -56,4 +60,38 @@ export const shopper = {
await expect( page ).toMatchElement( 'h1', { text: title } );
},
/**
* Override the @woocommerce/e2e-utils `emptyCart` method to fix the
* ReferenceError issue and remove the cart items.
*
* @todo Remove shopper.emptyCart overload once the upstream is fixed
*/
emptyCart: async () => {
await page.goto( SHOP_CART_PAGE, {
waitUntil: 'networkidle0',
} );
// Remove products if they exist
if ( ( await page.$( '.remove' ) ) !== null ) {
let products = await page.$$( '.remove' );
while ( products && products.length > 0 ) {
await page.click( '.remove' );
await uiUnblocked();
products = await page.$$( '.remove' );
}
}
// Remove coupons if they exist
if ( ( await page.$( '.woocommerce-remove-coupon' ) ) !== null ) {
await page.click( '.woocommerce-remove-coupon' );
await uiUnblocked();
}
await page.waitForSelector( '.woocommerce-info' );
// eslint-disable-next-line jest/no-standalone-expect
await expect( page ).toMatchElement( '.woocommerce-info', {
text: 'Your cart is currently empty.',
} );
},
};