Cart e2e test housekeeping (https://github.com/woocommerce/woocommerce-blocks/pull/10663)
This commit is contained in:
parent
47c197d165
commit
38594b3c9f
|
@ -1,28 +1,13 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import {
|
||||
clickBlockToolbarButton,
|
||||
switchUserToAdmin,
|
||||
searchForBlock,
|
||||
openGlobalBlockInserter,
|
||||
insertBlock,
|
||||
} from '@wordpress/e2e-test-utils';
|
||||
import {
|
||||
findLabelWithText,
|
||||
visitBlockPage,
|
||||
selectBlockByName,
|
||||
} from '@woocommerce/blocks-test-utils';
|
||||
import { searchForBlock } from '@wordpress/e2e-test-utils';
|
||||
import { merchant } from '@woocommerce/e2e-utils';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import {
|
||||
openSettingsSidebar,
|
||||
openWidgetEditor,
|
||||
closeModalIfExists,
|
||||
} from '../../utils.js';
|
||||
import { openWidgetEditor, closeModalIfExists } from '../../utils.js';
|
||||
|
||||
const block = {
|
||||
name: 'Cart',
|
||||
|
@ -35,179 +20,12 @@ const block = {
|
|||
},
|
||||
};
|
||||
|
||||
const filledCartBlock = {
|
||||
name: 'Filled Cart',
|
||||
slug: 'woocommerce/filled-cart-block',
|
||||
class: '.wp-block-woocommerce-filled-cart-block',
|
||||
};
|
||||
|
||||
const emptyCartBlock = {
|
||||
name: 'Empty Cart',
|
||||
slug: 'woocommerce/empty-cart-block',
|
||||
class: '.wp-block-woocommerce-empty-cart-block',
|
||||
};
|
||||
|
||||
const crossSellsBlock = {
|
||||
name: 'Cart Cross-Sells block',
|
||||
slug: 'woocommerce/cart-cross-sells-products-block',
|
||||
class: '.wp-block-woocommerce-cart-cross-sells-products-block',
|
||||
};
|
||||
|
||||
if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 ) {
|
||||
// eslint-disable-next-line jest/no-focused-tests, jest/expect-expect
|
||||
test.only( `skipping ${ block.name } tests`, () => {} );
|
||||
}
|
||||
|
||||
describe( `${ block.name } Block`, () => {
|
||||
describe( 'in page editor', () => {
|
||||
beforeAll( async () => {
|
||||
await switchUserToAdmin();
|
||||
await visitBlockPage( `${ block.name } Block` );
|
||||
} );
|
||||
|
||||
it( 'can only be inserted once', async () => {
|
||||
await openGlobalBlockInserter();
|
||||
await page.keyboard.type( block.name );
|
||||
const button = await page.$x( block.selectors.insertButton );
|
||||
expect( button ).toHaveLength( 0 );
|
||||
} );
|
||||
|
||||
it( 'inner blocks can be added/removed by filters', async () => {
|
||||
// Begin by removing the block.
|
||||
await selectBlockByName( block.slug );
|
||||
const options = await page.$x(
|
||||
'//div[@class="block-editor-block-toolbar"]//button[@aria-label="Options"]'
|
||||
);
|
||||
await options[ 0 ].click();
|
||||
const removeButton = await page.$x(
|
||||
'//button[contains(., "Remove Cart")]'
|
||||
);
|
||||
await removeButton[ 0 ].click();
|
||||
// Expect block to have been removed.
|
||||
await expect( page ).not.toMatchElement( block.class );
|
||||
|
||||
// Register a checkout filter to allow `core/table` block in the Checkout block's inner blocks, add
|
||||
// core/audio into the woocommerce/cart-order-summary-block and remove core/paragraph from all Cart inner
|
||||
// blocks.
|
||||
await page.evaluate(
|
||||
"wc.blocksCheckout.registerCheckoutFilters( 'woo-test-namespace'," +
|
||||
'{ additionalCartCheckoutInnerBlockTypes: ( value, extensions, { block } ) => {' +
|
||||
" value.push('core/table');" +
|
||||
" if ( block === 'woocommerce/cart-order-summary-block' ) {" +
|
||||
" value.push( 'core/audio' );" +
|
||||
' }' +
|
||||
' return value;' +
|
||||
'}' +
|
||||
'}' +
|
||||
');'
|
||||
);
|
||||
|
||||
await insertBlock( block.name );
|
||||
|
||||
// Select the shipping address block and try to insert a block. Check the Table block is available.
|
||||
await selectBlockByName( 'woocommerce/cart-order-summary-block' );
|
||||
await page.waitForTimeout( 1000 );
|
||||
const addBlockButton = await page.waitForXPath(
|
||||
'//div[@data-type="woocommerce/cart-order-summary-block"]//button[@aria-label="Add block"]'
|
||||
);
|
||||
await addBlockButton.click();
|
||||
await expect( page ).toFill(
|
||||
'input.components-search-control__input',
|
||||
'Table'
|
||||
);
|
||||
const tableButton = await page.waitForXPath(
|
||||
'//*[@role="option" and contains(., "Table")]'
|
||||
);
|
||||
await expect( tableButton ).not.toBeNull();
|
||||
await expect( page ).toFill(
|
||||
'input.components-search-control__input',
|
||||
'Audio'
|
||||
);
|
||||
const audioButton = await page.waitForXPath(
|
||||
'//*[@role="option" and contains(., "Audio")]'
|
||||
);
|
||||
await expect( audioButton ).not.toBeNull();
|
||||
|
||||
// // Now check the filled cart block and expect only the Table block to be available there.
|
||||
await selectBlockByName( 'woocommerce/filled-cart-block' );
|
||||
const filledCartAddBlockButton = await page.waitForXPath(
|
||||
'//div[@data-type="woocommerce/filled-cart-block"]//button[@aria-label="Add block"]'
|
||||
);
|
||||
await filledCartAddBlockButton.click();
|
||||
|
||||
const filledCartTableButton = await page.waitForXPath(
|
||||
'//*[@role="option" and contains(., "Table")]'
|
||||
);
|
||||
expect( filledCartTableButton ).not.toBeNull();
|
||||
const filledCartAudioButton = await page.$x(
|
||||
'//*[@role="option" and contains(., "Audio")]'
|
||||
);
|
||||
expect( filledCartAudioButton ).toHaveLength( 0 );
|
||||
} );
|
||||
|
||||
it( 'renders without crashing', async () => {
|
||||
await expect( page ).toRenderBlock( block );
|
||||
await expect( page ).toRenderBlock( filledCartBlock );
|
||||
await expect( page ).toRenderBlock( crossSellsBlock );
|
||||
await expect( page ).toRenderBlock( emptyCartBlock );
|
||||
} );
|
||||
|
||||
it( 'shows empty cart when changing the view', async () => {
|
||||
await page.waitForSelector( block.class ).catch( () => {
|
||||
throw new Error(
|
||||
`Could not find an element with class ${ block.class } - the block probably did not load correctly.`
|
||||
);
|
||||
} );
|
||||
await selectBlockByName( block.slug );
|
||||
await clickBlockToolbarButton( 'Switch view', 'ariaLabel' );
|
||||
const emptyCartButton = await page.waitForXPath(
|
||||
`//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), 'Empty Cart')]`
|
||||
);
|
||||
// Clicks the element by running the JavaScript HTMLElement.click() method on the given element in the
|
||||
// browser context, which fires a click event. It doesn't scroll the page or move the mouse and works
|
||||
// even if the element is off-screen.
|
||||
await emptyCartButton.evaluate( ( b ) => b.click() );
|
||||
|
||||
await expect( page ).not.toMatchElement(
|
||||
`${ emptyCartBlock.class }[hidden]`
|
||||
);
|
||||
await expect( page ).toMatchElement(
|
||||
`${ filledCartBlock.class }[hidden]`
|
||||
);
|
||||
|
||||
await selectBlockByName( block.slug );
|
||||
await clickBlockToolbarButton( 'Switch view', 'ariaLabel' );
|
||||
const filledCartButton = await page.waitForXPath(
|
||||
`//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), 'Filled Cart')]`
|
||||
);
|
||||
await filledCartButton.evaluate( ( b ) => b.click() );
|
||||
|
||||
await expect( page ).toMatchElement(
|
||||
`${ emptyCartBlock.class }[hidden]`
|
||||
);
|
||||
await expect( page ).not.toMatchElement(
|
||||
`${ filledCartBlock.class }[hidden]`
|
||||
);
|
||||
} );
|
||||
|
||||
describe( 'attributes', () => {
|
||||
beforeEach( async () => {
|
||||
await openSettingsSidebar();
|
||||
await selectBlockByName(
|
||||
'woocommerce/cart-order-summary-shipping-block'
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'can toggle Shipping calculator', async () => {
|
||||
const selector = `.wc-block-components-totals-shipping__change-address__link`;
|
||||
const toggleLabel = await findLabelWithText(
|
||||
'Shipping calculator'
|
||||
);
|
||||
await expect( toggleLabel ).toToggleElement( selector );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'in widget editor', () => {
|
||||
it( "can't be inserted in a widget area", async () => {
|
||||
await merchant.login();
|
||||
|
|
|
@ -12,6 +12,7 @@ const blockData: BlockData = {
|
|||
editor: {
|
||||
block: '.wp-block-woocommerce-cart',
|
||||
insertButton: "//button//span[text()='Cart']",
|
||||
shippingBlock: '.wp-block-woocommerce-shipping-calculator',
|
||||
},
|
||||
frontend: {
|
||||
block: '.wp-block-woocommerce-cart',
|
||||
|
@ -20,7 +21,8 @@ const blockData: BlockData = {
|
|||
};
|
||||
|
||||
test.describe( 'Merchant → Cart', () => {
|
||||
const blockSelectorInEditor = blockData.selectors.editor.block;
|
||||
// `as string` is safe here because we know the variable is a string, it is defined above.
|
||||
const blockSelectorInEditor = blockData.selectors.editor.block as string;
|
||||
|
||||
test.describe( 'in page editor', () => {
|
||||
test.beforeEach( async ( { editorUtils, admin } ) => {
|
||||
|
@ -31,14 +33,15 @@ test.describe( 'Merchant → Cart', () => {
|
|||
await editorUtils.enterEditMode();
|
||||
} );
|
||||
|
||||
test( 'it renders without crashing', async ( { editorUtils } ) => {
|
||||
test( 'renders without crashing and can only be inserted once', async ( {
|
||||
page,
|
||||
editorUtils,
|
||||
} ) => {
|
||||
const blockPresence = await editorUtils.getBlockByName(
|
||||
blockData.slug
|
||||
);
|
||||
expect( blockPresence ).toBeTruthy();
|
||||
} );
|
||||
|
||||
test( 'can only be inserted once', async ( { page, editorUtils } ) => {
|
||||
await editorUtils.openGlobalBlockInserter();
|
||||
await page.getByPlaceholder( 'Search' ).fill( blockData.slug );
|
||||
const cartBlockButton = page.getByRole( 'option', {
|
||||
|
@ -140,7 +143,7 @@ test.describe( 'Merchant → Cart', () => {
|
|||
await expect( filledCartAudioButton ).toBeHidden();
|
||||
} );
|
||||
|
||||
test( 'shows empty cart when changing the view', async ( {
|
||||
test( 'shows empty cart when changing the view and allows toggling of shipping calculator', async ( {
|
||||
page,
|
||||
editor,
|
||||
editorUtils,
|
||||
|
@ -185,6 +188,24 @@ test.describe( 'Merchant → Cart', () => {
|
|||
' [data-type="woocommerce/empty-cart-block"]'
|
||||
)
|
||||
).toBeHidden();
|
||||
|
||||
await editor.selectBlocks(
|
||||
await editorUtils.getBlockByName(
|
||||
'woocommerce/cart-order-summary-shipping-block'
|
||||
)
|
||||
);
|
||||
await editor.openDocumentSettingsSidebar();
|
||||
const shippingLabel = editorUtils.page.getByLabel(
|
||||
'Shipping calculator'
|
||||
);
|
||||
await shippingLabel.check();
|
||||
await expect(
|
||||
editor.canvas.getByText( 'Change address' )
|
||||
).toBeVisible();
|
||||
await shippingLabel.uncheck();
|
||||
await expect(
|
||||
editor.canvas.getByText( 'Change address' )
|
||||
).toBeHidden();
|
||||
} );
|
||||
} );
|
||||
} );
|
Loading…
Reference in New Issue