E2E: Refactor Mini Cart to be ready for fully parallel (#10704)

woocommerce · Aug 24, 2023 · 7db23cd · 7db23cd
1 parent 78a4520
commit 7db23cd
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 117 deletions.
diff --git a/tests/e2e/bin/posts/mini-cart.html b/tests/e2e/bin/posts/mini-cart.html
@@ -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 -->
diff --git a/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts
@@ -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"]',
-		},
-		editor: {},
-	},
+const openMiniCart = async ( page: Page ) => {
+	await page.getByLabel( 'items in cart,' ).hover();
+	await page.getByLabel( 'items in cart,' ).click();
 };
 
-const getMiniCartButton = async ( { page } ) => {
-	return page.getByLabel( '0 items in cart, total price of $0.00' );
-};
+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: [],
+		},
+	} );
+
+	test.beforeEach( async ( { page } ) => {
+		await page.goto( `/mini-cart-block`, { waitUntil: 'commit' } );
+	} );
+
+	test( 'should open the empty cart drawer', async ( { page } ) => {
+		await openMiniCart( page );
+
+		await expect( page.getByRole( 'dialog' ) ).toContainText(
+			'Your cart is currently empty!'
+		);
+	} );
+
+	test( 'should close the drawer when clicking on the close button', async ( {
+		page,
+	} ) => {
+		await openMiniCart( page );
+
+		await expect( page.getByRole( 'dialog' ) ).toContainText(
+			'Your cart is currently empty!'
+		);
+
+		await page.getByRole( 'button', { name: 'Close' } ).click();
 
-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 );
-		} );
+		await expect( page.getByRole( 'dialog' ) ).toHaveCount( 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( 'should close the drawer when clicking outside the drawer', async ( {
+		page,
+	} ) => {
+		await openMiniCart( page );
 
-		test( 'should open the filled cart drawer', async ( { page } ) => {
-			const miniCartButton = await getMiniCartButton( { 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 );
+	} );
 
-			await page.click( 'text=Add to cart' );
+	test( 'should open the filled cart drawer', async ( { page } ) => {
+		await page.click( 'text=Add to cart' );
 
-			await miniCartButton.click();
+		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 (1 item)'
+		);
 	} );
 } );
diff --git a/...t-gallery-large-image.block_theme.spec.ts → ...t-gallery-large-image.block_theme.spec.ts b/...t-gallery-large-image.block_theme.spec.ts → ...t-gallery-large-image.block_theme.spec.ts
@@ -49,7 +49,7 @@ test.describe( `${ blockData.name }`, () => {
 		] );
 
 		await page.goto( blockData.productPage, {
-			waitUntil: 'networkidle',
+			waitUntil: 'commit',
 		} );
 
 		const blockFrontend = await frontendUtils.getBlockByName(