Merge branch 'trunk' into dev/refactor-prod-control-ts

Author: samueljseay

assets/js/base/context/hooks/collections/use-collection.ts

@@ -49,10 +49,10 @@ export interface useCollectionOptions {
 	isEditor?: boolean;
 }
 
-export const useCollection = (
+export const useCollection = < T >(
 	options: useCollectionOptions
 ): {
-	results: unknown;
+	results: T[];
 	isLoading: boolean;
 } => {
 	const {
@@ -68,7 +68,7 @@ export const useCollection = (
 				'the resource properties.'
 		);
 	}
-	const currentResults = useRef< { results: unknown; isLoading: boolean } >( {
+	const currentResults = useRef< { results: T[]; isLoading: boolean } >( {
 		results: [],
 		isLoading: true,
 	} );
@@ -102,7 +102,7 @@ export const useCollection = (
 			}
 
 			return {
-				results: store.getCollection< T >( ...args ),
+				results: store.getCollection< T[] >( ...args ),
 				isLoading: ! store.hasFinishedResolution(
 					'getCollection',
 					args

assets/js/base/context/hooks/use-store-products.ts

@@ -35,16 +35,17 @@ export const useStoreProducts = (
 		namespace: '/wc/store/v1',
 		resourceName: 'products',
 	};
-	const { results: products, isLoading: productsLoading } = useCollection( {
-		...collectionOptions,
-		query,
-	} );
+	const { results: products, isLoading: productsLoading } =
+		useCollection< ProductResponseItem >( {
+			...collectionOptions,
+			query,
+		} );
 	const { value: totalProducts } = useCollectionHeader( 'x-wp-total', {
 		...collectionOptions,
 		query,
 	} );
 	return {
-		products: products as ProductResponseItem[], // TODO: Remove this once getCollection selector and resolver is converted to TS.
+		products,
 		totalProducts: parseInt( totalProducts as string, 10 ),
 		productsLoading,
 	};

assets/js/blocks/active-filters/active-attribute-filters.tsx

@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { getSettingWithCoercion } from '@woocommerce/settings';
 import {
 	AttributeObject,
+	AttributeTerm,
 	isAttributeQueryCollection,
 	isAttributeTermCollection,
 	isBoolean,
@@ -47,7 +48,7 @@ const ActiveAttributeFilters = ( {
 	displayStyle,
 	isLoadingCallback,
 }: ActiveAttributeFiltersProps ) => {
-	const { results, isLoading } = useCollection( {
+	const { results, isLoading } = useCollection< AttributeTerm >( {
 		namespace: '/wc/store/v1',
 		resourceName: 'products/attributes/terms',
 		resourceValues: [ attributeObject.id ],

assets/js/blocks/attribute-filter/block.tsx

@@ -19,6 +19,7 @@ import { getSettingWithCoercion } from '@woocommerce/settings';
 import { getQueryArgs, removeQueryArgs } from '@wordpress/url';
 import {
 	AttributeQuery,
+	AttributeTerm,
 	isAttributeQueryCollection,
 	isBoolean,
 	isString,
@@ -124,7 +125,7 @@ const AttributeFilterBlock = ( {
 		useQueryStateByKey( 'attributes', [] );
 
 	const { results: attributeTerms, isLoading: attributeTermsLoading } =
-		useCollection( {
+		useCollection< AttributeTerm >( {
 			namespace: '/wc/store/v1',
 			resourceName: 'products/attributes/terms',
 			resourceValues: [ attributeObject?.id || 0 ],

assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx

@@ -19,12 +19,15 @@ const FrontendBlock = ( {
 } ): JSX.Element | null => {
 	const { cartItems, cartIsLoading } = useStoreCart();
 	useEffect( () => {
+		if ( cartItems.length !== 0 || cartIsLoading ) {
+			return;
+		}
 		dispatchEvent( 'wc-blocks_render_blocks_frontend', {
 			element: document.body.querySelector(
 				'.wp-block-woocommerce-cart'
 			),
 		} );
-	}, [] );
+	}, [ cartIsLoading, cartItems ] );
 	if ( ! cartIsLoading && cartItems.length === 0 ) {
 		return <div className={ className }>{ children }</div>;
 	}

assets/js/interactivity/index.js

@@ -12,6 +12,4 @@ document.addEventListener( 'DOMContentLoaded', async () => {
 	registerDirectives();
 	await init();
 	afterLoads.forEach( ( afterLoad ) => afterLoad( rawStore ) );
-	// eslint-disable-next-line no-console
-	console.log( 'Interactivity API started' );
 } );

patterns/product-collection-grid.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Title: Product Collection Grid
+ * Slug: woocommerce-blocks/product-collection-grid
+ * Categories: WooCommerce
+ * Inserter: false
+ */
+?>
+
+<!-- wp:woocommerce/product-collection {"queryId":0,"query":{"perPage":4,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":{},"parents":[],"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":4}} -->
+<div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
+<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
+
+<!-- wp:post-title {"textAlign":"left","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}},"typography":{"lineHeight":"1"}},"fontSize":"small","__woocommerceNamespace":"woocommerce/product-collection/product-title"} /-->
+
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"left","style":{"typography":{"fontSize":"0.8rem","lineHeight":"1","fontStyle":"normal","fontWeight":"600"}}} /-->
+<!-- /wp:woocommerce/product-template -->
+
+<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-numbers /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
+<p></p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results --></div>
+<!-- /wp:woocommerce/product-collection -->

src/BlockTypes/ProductButton.php

@@ -61,7 +61,6 @@ protected function enqueue_assets( array $attributes ) {
 	 */
 	public function dequeue_add_to_cart_scripts() {
 		wp_dequeue_script( 'wc-add-to-cart' );
-		wp_dequeue_script( 'wc-add-to-cart-variation' );
 	}
 
 	/**

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 -->

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)'
+		);
 	} );
 } );