From 49c5659eb95ea1729a676de230e04740e469ff51 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 24 Feb 2022 21:02:24 +0700
Subject: [PATCH] =?UTF-8?q?Shopper=20=E2=86=92=20Mini=20Cart=20=E2=86=92?=
 =?UTF-8?q?=20Can=20open/close=20the=20drawer=20(https://github.com/woocom?=
 =?UTF-8?q?merce/woocommerce-blocks/pull/5894)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 plugins/woocommerce-blocks/package.json       |  4 +-
 .../e2e/specs/shopper/mini-cart-icon.test.js  | 32 ------
 .../tests/e2e/specs/shopper/mini-cart.test.js | 97 +++++++++++++++++++
 3 files changed, 100 insertions(+), 33 deletions(-)
 delete mode 100644 plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart-icon.test.js
 create mode 100644 plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart.test.js

diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json
index a5da875391a..5b419458a81 100644
--- a/plugins/woocommerce-blocks/package.json
+++ b/plugins/woocommerce-blocks/package.json
@@ -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",
diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart-icon.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart-icon.test.js
deleted file mode 100644
index faebf1075c3..00000000000
--- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart-icon.test.js
+++ /dev/null
@@ -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',
-		} );
-	} );
-} );
diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart.test.js
new file mode 100644
index 00000000000..9d4efe5e0da
--- /dev/null
+++ b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart.test.js
@@ -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',
+				}
+			);
+		} );
+	} );
+} );