Shopper → Mini Cart → Can see the icon with a badge (https://github.com/woocommerce/woocommerce-blocks/pull/5877)

plugins/woocommerce-blocks/tests/e2e/specs/backend/__fixtures__/mini-cart.fixture.json

@@ -1 +1 @@
-{"title":"Mini Cart Block","pageContent":"<!-- wp:woocommerce/mini-cart /-->"}
+{"title":"Mini Cart Block","pageContent":"<!-- wp:woocommerce/mini-cart /--><!-- wp:woocommerce/all-products {\"columns\":3,\"rows\":3,\"alignButtons\":false,\"contentVisibility\":{\"orderBy\":true},\"orderby\":\"date\",\"layoutConfig\":[[\"woocommerce/product-image\"],[\"woocommerce/product-title\"],[\"woocommerce/product-price\"],[\"woocommerce/product-rating\"],[\"woocommerce/product-button\"]]} -->\n<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;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>\n<!-- /wp:woocommerce/all-products -->"}

plugins/woocommerce-blocks/tests/e2e/specs/shopper/mini-cart-icon.test.js

@@ -0,0 +1,32 @@
+/**
+ * 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',
+		} );
+	} );
+} );

plugins/woocommerce-blocks/tests/utils/ensure-sidebar-opened.ts

@@ -0,0 +1,19 @@
+/**
+ * Verifies that the edit post sidebar is opened, and if it is not, opens it.
+ *
+ * We're using the older version of wordpress/scripts, so this is needed to
+ * fix the issue of the sidebar not opening.
+ *
+ * @todo Remove custom ensureSidebarOpened() once we upgrade to the latest version of wordpress/scripts.
+ *
+ * @return {Promise} Promise resolving once the edit post sidebar is opened.
+ */
+export async function ensureSidebarOpened(): Promise< void > {
+	const toggleSidebarButton = await page.$(
+		'.edit-post-header__settings [aria-label="Settings"][aria-expanded="false"]'
+	);
+
+	if ( toggleSidebarButton ) {
+		await toggleSidebarButton.click();
+	}
+}

plugins/woocommerce-blocks/tests/utils/get-block-page-permalink.js

@@ -1,15 +1,13 @@
 /**
  * External dependencies
  */
-import {
-	ensureSidebarOpened,
-	findSidebarPanelToggleButtonWithTitle,
-} from '@wordpress/e2e-test-utils';
+import { findSidebarPanelToggleButtonWithTitle } from '@wordpress/e2e-test-utils';
 
 /**
  * Internal dependencies
  */
 import { visitBlockPage } from './visit-block-page';
+import { ensureSidebarOpened } from './ensure-sidebar-opened';
 
 const blockPagePermalinks = {};
 

plugins/woocommerce-blocks/tests/utils/shopper.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { shopper as wcShopper } from '@woocommerce/e2e-utils';
+import { createURL } from '@wordpress/e2e-test-utils';
 
 /**
  * Internal dependencies
@@ -46,4 +47,14 @@ export const shopper = {
 			}
 		);
 	},
+
+	goToBlockPage: async ( title ) => {
+		await page.goto( createURL( '/' ), { waitUntil: 'networkidle0' } );
+
+		await expect( page ).toClick( '.nav-menu a', { text: title } );
+
+		await page.waitForNavigation();
+
+		await expect( page ).toMatchElement( 'h1', { text: title } );
+	},
 };