Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 7db23cd

Browse files
dinhtungdudinhtungdu
authored
E2E: Refactor Mini Cart to be ready for fully parallel (#10704)
1 parent 78a4520 commit 7db23cd

File tree

3 files changed

+68
-117
lines changed

3 files changed

+68
-117
lines changed

‎tests/e2e/bin/posts/mini-cart.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
<!-- wp:woocommerce/mini-cart /-->
2+
3+
<!-- 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"]]} -->
4+
<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>
5+
<!-- /wp:woocommerce/all-products -->

‎tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts‎

Lines changed: 63 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,79 @@
11
/**
22
* External dependencies
33
*/
4-
import { BlockData } from '@woocommerce/e2e-types';
54
import { test, expect } from '@woocommerce/e2e-playwright-utils';
5+
import { Page } from '@playwright/test';
66

7-
const blockData: BlockData = {
8-
name: 'woocommerce/mini-cart',
9-
mainClass: '.wc-block-mini-cart',
10-
selectors: {
11-
frontend: {
12-
drawer: '.wc-block-mini-cart__drawer',
13-
drawerCloseButton: 'button[aria-label="Close"]',
14-
},
15-
editor: {},
16-
},
7+
const openMiniCart = async ( page: Page ) => {
8+
await page.getByLabel( 'items in cart,' ).hover();
9+
await page.getByLabel( 'items in cart,' ).click();
1710
};
1811

19-
const getMiniCartButton = async ( { page } ) => {
20-
return page.getByLabel( '0 items in cart, total price of $0.00' );
21-
};
12+
test.describe( `Mini Cart Block`, () => {
13+
/**
14+
* This is a workaround to run tests in isolation.
15+
* Ideally, the test should be run in isolation by default. But we're
16+
* overriding the storageState in config which make all tests run with admin
17+
* user.
18+
*/
19+
test.use( {
20+
storageState: {
21+
origins: [],
22+
cookies: [],
23+
},
24+
} );
25+
26+
test.beforeEach( async ( { page } ) => {
27+
await page.goto( `/mini-cart-block`, { waitUntil: 'commit' } );
28+
} );
29+
30+
test( 'should open the empty cart drawer', async ( { page } ) => {
31+
await openMiniCart( page );
32+
33+
await expect( page.getByRole( 'dialog' ) ).toContainText(
34+
'Your cart is currently empty!'
35+
);
36+
} );
37+
38+
test( 'should close the drawer when clicking on the close button', async ( {
39+
page,
40+
} ) => {
41+
await openMiniCart( page );
42+
43+
await expect( page.getByRole( 'dialog' ) ).toContainText(
44+
'Your cart is currently empty!'
45+
);
46+
47+
await page.getByRole( 'button', { name: 'Close' } ).click();
2248

23-
test.describe( `${ blockData.name } Block`, () => {
24-
test.describe( `standalone`, () => {
25-
test.beforeEach( async ( { admin, page, editor } ) => {
26-
await admin.createNewPost( { legacyCanvas: true } );
27-
await editor.insertBlock( { name: blockData.name } );
28-
await editor.publishPost();
29-
const url = new URL( page.url() );
30-
const postId = url.searchParams.get( 'post' );
31-
await page.goto( `/?p=${ postId }`, { waitUntil: 'commit' } );
32-
} );
33-
34-
test( 'should open the empty cart drawer', async ( { page } ) => {
35-
const miniCartButton = await getMiniCartButton( { page } );
36-
37-
await miniCartButton.click();
38-
39-
await expect(
40-
page.locator( blockData.selectors.frontend.drawer ).first()
41-
).toHaveText( 'Your cart is currently empty!' );
42-
} );
43-
44-
test( 'should close the drawer when clicking on the close button', async ( {
45-
page,
46-
} ) => {
47-
const miniCartButton = await getMiniCartButton( { page } );
48-
49-
await miniCartButton.click();
50-
51-
await expect(
52-
page.locator( blockData.selectors.frontend.drawer ).first()
53-
).toHaveText( 'Your cart is currently empty!' );
54-
55-
// Wait for the drawer to fully open.
56-
await page.waitForSelector(
57-
blockData.selectors.frontend.drawerCloseButton
58-
);
59-
60-
const closeButton = page.locator(
61-
blockData.selectors.frontend.drawerCloseButton
62-
);
63-
64-
await closeButton?.click();
65-
66-
// Wait for the drawer to fully close.
67-
await page.waitForSelector( blockData.selectors.frontend.drawer, {
68-
state: 'detached',
69-
} );
70-
71-
expect(
72-
await page
73-
.locator( blockData.selectors.frontend.drawer )
74-
.count()
75-
).toEqual( 0 );
76-
} );
77-
78-
test( 'should close the drawer when clicking outside the drawer', async ( {
79-
page,
80-
} ) => {
81-
const miniCartButton = await getMiniCartButton( { page } );
82-
83-
await miniCartButton.click();
84-
85-
await expect(
86-
page.locator( blockData.selectors.frontend.drawer ).first()
87-
).toHaveText( 'Your cart is currently empty!' );
88-
89-
// Wait for the drawer to fully open.
90-
await page.waitForSelector(
91-
blockData.selectors.frontend.drawerCloseButton
92-
);
93-
94-
await page.mouse.click( 50, 200 );
95-
96-
// Wait for the drawer to fully close.
97-
await page.waitForSelector( blockData.selectors.frontend.drawer, {
98-
state: 'detached',
99-
} );
100-
101-
expect(
102-
await page
103-
.locator( blockData.selectors.frontend.drawer )
104-
.count()
105-
).toEqual( 0 );
106-
} );
49+
await expect( page.getByRole( 'dialog' ) ).toHaveCount( 0 );
10750
} );
10851

109-
test.describe( `with All products Block`, () => {
110-
test.beforeEach( async ( { admin, page, editor } ) => {
111-
await admin.createNewPost( { legacyCanvas: true } );
112-
await editor.insertBlock( { name: blockData.name } );
113-
await editor.insertBlock( { name: 'woocommerce/all-products' } );
114-
await editor.publishPost();
115-
const url = new URL( page.url() );
116-
const postId = url.searchParams.get( 'post' );
117-
await page.goto( `/?p=${ postId }`, { waitUntil: 'commit' } );
118-
} );
52+
test( 'should close the drawer when clicking outside the drawer', async ( {
53+
page,
54+
} ) => {
55+
await openMiniCart( page );
11956

120-
test( 'should open the filled cart drawer', async ( { page } ) => {
121-
const miniCartButton = await getMiniCartButton( { page } );
57+
await expect( page.getByRole( 'dialog' ) ).toContainText(
58+
'Your cart is currently empty!'
59+
);
60+
61+
await expect(
62+
page.getByRole( 'button', { name: 'Close' } )
63+
).toBeInViewport();
64+
65+
await page.mouse.click( 50, 200 );
66+
67+
await expect( page.getByRole( 'dialog' ) ).toHaveCount( 0 );
68+
} );
12269

123-
await page.click( 'text=Add to cart' );
70+
test( 'should open the filled cart drawer', async ( { page } ) => {
71+
await page.click( 'text=Add to cart' );
12472

125-
await miniCartButton.click();
73+
await openMiniCart( page );
12674

127-
await expect(
128-
page.locator( '.wc-block-mini-cart__title' ).first()
129-
).toHaveText( 'Your cart (1 item)' );
130-
} );
75+
await expect( page.getByRole( 'dialog' ) ).toContainText(
76+
'Your cart (1 item)'
77+
);
13178
} );
13279
} );

‎tests/e2e-pw/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts‎ renamed to ‎tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ test.describe( `${ blockData.name }`, () => {
4949
] );
5050

5151
await page.goto( blockData.productPage, {
52-
waitUntil: 'networkidle',
52+
waitUntil: 'commit',
5353
} );
5454

5555
const blockFrontend = await frontendUtils.getBlockByName(

0 commit comments

Comments
 (0)