Shopper → Mini Cart → Can open/close the drawer (https://github.com/woocommerce/woocommerce-blocks/pull/5894)

This commit is contained in:
Tung Du 2022-02-24 21:02:24 +07:00 committed by GitHub
parent e2618a2e31
commit 49c5659eb9
3 changed files with 100 additions and 33 deletions

View File

@ -19,7 +19,9 @@
"./assets/js/blocks/checkout/inner-blocks/**/index.tsx",
"./assets/js/blocks/checkout/inner-blocks/register-components.ts",
"./assets/js/blocks/cart-checkout/cart/inner-blocks/**/index.tsx",
"./assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts"
"./assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts",
"./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/**/index.tsx",
"./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts"
],
"repository": {
"type": "git",

View File

@ -1,32 +0,0 @@
/**
* Internal dependencies
*/
import { shopper } from '../../../utils';
const block = {
name: 'Mini Cart Block',
};
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 → Can see the icon with a badge', () => {
it( 'Shopper can see the Mini Cart icon and it badge on the front end', async () => {
await shopper.goToBlockPage( block.name );
await expect( page ).toMatchElement( '.wc-block-mini-cart' );
await expect( page ).toMatchElement( '.wc-block-mini-cart__button' );
await expect( page ).toMatchElement(
'.wc-block-mini-cart__quantity-badge'
);
// Make sure the initial quantity is 0.
await expect( page ).toMatchElement( '.wc-block-mini-cart__amount', {
text: '$0',
} );
await expect( page ).toMatchElement( '.wc-block-mini-cart__badge', {
text: '0',
} );
} );
} );

View File

@ -0,0 +1,97 @@
/**
* Internal dependencies
*/
import { shopper } from '../../../utils';
const block = {
name: 'Mini Cart Block',
};
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', () => {
beforeEach( async () => {
await shopper.goToBlockPage( block.name );
} );
describe( 'Icon', () => {
it( 'Shopper can see the Mini Cart icon and it badge on the front end', async () => {
await expect( page ).toMatchElement( '.wc-block-mini-cart' );
await expect( page ).toMatchElement(
'.wc-block-mini-cart__button'
);
await expect( page ).toMatchElement(
'.wc-block-mini-cart__quantity-badge'
);
// Make sure the initial quantity is 0.
await expect( page ).toMatchElement(
'.wc-block-mini-cart__amount',
{
text: '$0',
}
);
await expect( page ).toMatchElement( '.wc-block-mini-cart__badge', {
text: '0',
} );
} );
} );
describe( 'Drawer', () => {
it( 'The drawer opens when shopper clicks on the mini cart icon', async () => {
await page.click( '.wc-block-mini-cart__button' );
await expect( page ).toMatchElement(
'.wc-block-mini-cart__drawer',
{
text: 'Start shopping',
}
);
} );
it( 'The drawer closes when shopper clicks on the drawer close button', async () => {
await page.click( '.wc-block-mini-cart__button' );
await expect( page ).toMatchElement(
'.wc-block-mini-cart__drawer',
{
text: 'Start shopping',
}
);
await page.click(
'.wc-block-mini-cart__drawer .components-modal__header button'
);
await expect( page ).not.toMatchElement(
'.wc-block-mini-cart__drawer',
{
text: 'Start shopping',
}
);
} );
it( 'The drawer closes when shopper clicks outside the drawer', async () => {
await page.click( '.wc-block-mini-cart__button' );
await expect( page ).toMatchElement(
'.wc-block-mini-cart__drawer',
{
text: 'Start shopping',
}
);
await page.mouse.click( 50, 200 );
await expect( page ).not.toMatchElement(
'.wc-block-mini-cart__drawer',
{
text: 'Start shopping',
}
);
} );
} );
} );