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

E2E: Refactor Mini Cart to be ready for fully parallel (https://github.com/woocommerce/woocommerce-blocks/pull/10704)

This commit is contained in:
Tung Du 2023-08-24 20:33:20 +07:00 committed by GitHub
parent 542a04d282
commit 69d5f47048
3 changed files with 70 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-blocks/tests/e2e/bin/posts/mini-cart.html
View File

@ -1 +1,5 @@
<!-- wp:woocommerce/mini-cart /-->
<!-- wp:woocommerce/all-products {"columns":3,"rows":3,"alignButtons":false,"contentVisibility":{"orderBy":true},"orderby":"date","layoutConfig":[["woocommerce/product-image",{"imageSizing":"thumbnail"}],["woocommerce/product-title"],["woocommerce/product-price"],["woocommerce/product-rating"],["woocommerce/product-button"]]} -->
<div class="wp-block-woocommerce-all-products wc-block-all-products" data-attributes="{&quot;alignButtons&quot;:false,&quot;columns&quot;:3,&quot;contentVisibility&quot;:{&quot;orderBy&quot;:true},&quot;isPreview&quot;:false,&quot;layoutConfig&quot;:[[&quot;woocommerce/product-image&quot;,{&quot;imageSizing&quot;:&quot;thumbnail&quot;}],[&quot;woocommerce/product-title&quot;],[&quot;woocommerce/product-price&quot;],[&quot;woocommerce/product-rating&quot;],[&quot;woocommerce/product-button&quot;]],&quot;orderby&quot;:&quot;date&quot;,&quot;rows&quot;:3}"></div>
<!-- /wp:woocommerce/all-products -->

183
plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts
View File

@ -1,132 +1,79 @@
/**
* External dependencies
*/
import { BlockData } from '@woocommerce/e2e-types';
import { test, expect } from '@woocommerce/e2e-playwright-utils';
import { Page } from '@playwright/test';
const blockData: BlockData = {
name: 'woocommerce/mini-cart',
mainClass: '.wc-block-mini-cart',
selectors: {
frontend: {
drawer: '.wc-block-mini-cart__drawer',
drawerCloseButton: 'button[aria-label="Close"]',
const openMiniCart = async ( page: Page ) => {
await page.getByLabel( 'items in cart,' ).hover();
await page.getByLabel( 'items in cart,' ).click();
};
test.describe( `Mini Cart Block`, () => {
/**
* This is a workaround to run tests in isolation.
* Ideally, the test should be run in isolation by default. But we're
* overriding the storageState in config which make all tests run with admin
* user.
*/
test.use( {
storageState: {
origins: [],
cookies: [],
},
editor: {},
},
};
const getMiniCartButton = async ( { page } ) => {
return page.getByLabel( '0 items in cart, total price of $0.00' );
};
test.describe( `${ blockData.name } Block`, () => {
test.describe( `standalone`, () => {
test.beforeEach( async ( { admin, page, editor } ) => {
await admin.createNewPost( { legacyCanvas: true } );
await editor.insertBlock( { name: blockData.name } );
await editor.publishPost();
const url = new URL( page.url() );
const postId = url.searchParams.get( 'post' );
await page.goto( `/?p=${ postId }`, { waitUntil: 'commit' } );
} );
test( 'should open the empty cart drawer', async ( { page } ) => {
const miniCartButton = await getMiniCartButton( { page } );
await miniCartButton.click();
await expect(
page.locator( blockData.selectors.frontend.drawer ).first()
).toHaveText( 'Your cart is currently empty!' );
} );
test( 'should close the drawer when clicking on the close button', async ( {
page,
} ) => {
const miniCartButton = await getMiniCartButton( { page } );
await miniCartButton.click();
await expect(
page.locator( blockData.selectors.frontend.drawer ).first()
).toHaveText( 'Your cart is currently empty!' );
// Wait for the drawer to fully open.
await page.waitForSelector(
blockData.selectors.frontend.drawerCloseButton
);
const closeButton = page.locator(
blockData.selectors.frontend.drawerCloseButton
);
await closeButton?.click();
// Wait for the drawer to fully close.
await page.waitForSelector( blockData.selectors.frontend.drawer, {
state: 'detached',
} );
expect(
await page
.locator( blockData.selectors.frontend.drawer )
.count()
).toEqual( 0 );
} );
test( 'should close the drawer when clicking outside the drawer', async ( {
page,
} ) => {
const miniCartButton = await getMiniCartButton( { page } );
await miniCartButton.click();
await expect(
page.locator( blockData.selectors.frontend.drawer ).first()
).toHaveText( 'Your cart is currently empty!' );
// Wait for the drawer to fully open.
await page.waitForSelector(
blockData.selectors.frontend.drawerCloseButton
);
await page.mouse.click( 50, 200 );
// Wait for the drawer to fully close.
await page.waitForSelector( blockData.selectors.frontend.drawer, {
state: 'detached',
} );
expect(
await page
.locator( blockData.selectors.frontend.drawer )
.count()
).toEqual( 0 );
} );
} );
test.describe( `with All products Block`, () => {
test.beforeEach( async ( { admin, page, editor } ) => {
await admin.createNewPost( { legacyCanvas: true } );
await editor.insertBlock( { name: blockData.name } );
await editor.insertBlock( { name: 'woocommerce/all-products' } );
await editor.publishPost();
const url = new URL( page.url() );
const postId = url.searchParams.get( 'post' );
await page.goto( `/?p=${ postId }`, { waitUntil: 'commit' } );
} );
test.beforeEach( async ( { page } ) => {
await page.goto( `/mini-cart-block`, { waitUntil: 'commit' } );
} );
test( 'should open the filled cart drawer', async ( { page } ) => {
const miniCartButton = await getMiniCartButton( { page } );
test( 'should open the empty cart drawer', async ( { page } ) => {
await openMiniCart( page );
await page.click( 'text=Add to cart' );
await expect( page.getByRole( 'dialog' ) ).toContainText(
'Your cart is currently empty!'
);
} );
await miniCartButton.click();
test( 'should close the drawer when clicking on the close button', async ( {
page,
} ) => {
await openMiniCart( page );
await expect(
page.locator( '.wc-block-mini-cart__title' ).first()
).toHaveText( 'Your cart (1 item)' );
} );
await expect( page.getByRole( 'dialog' ) ).toContainText(
'Your cart is currently empty!'
);
await page.getByRole( 'button', { name: 'Close' } ).click();
await expect( page.getByRole( 'dialog' ) ).toHaveCount( 0 );
} );
test( 'should close the drawer when clicking outside the drawer', async ( {
page,
} ) => {
await openMiniCart( page );
await expect( page.getByRole( 'dialog' ) ).toContainText(
'Your cart is currently empty!'
);
await expect(
page.getByRole( 'button', { name: 'Close' } )
).toBeInViewport();
await page.mouse.click( 50, 200 );
await expect( page.getByRole( 'dialog' ) ).toHaveCount( 0 );
} );
test( 'should open the filled cart drawer', async ( { page } ) => {
await page.click( 'text=Add to cart' );
await openMiniCart( page );
await expect( page.getByRole( 'dialog' ) ).toContainText(
'Your cart (1 item)'
);
} );
} );

2
plugins/woocommerce-blocks/tests/e2e-pw/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts → plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts
View File

@ -49,7 +49,7 @@ test.describe( `${ blockData.name }`, () => {
] );
await page.goto( blockData.productPage, {
waitUntil: 'networkidle',
waitUntil: 'commit',
} );
const blockFrontend = await frontendUtils.getBlockByName(