From 590c157fe41b49e4151a64313cb847beb73c9007 Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:37:33 +0100 Subject: [PATCH 1/6] Enable shrink columns option in Product Collection by default --- .../js/blocks/product-collection/constants.ts | 2 +- .../product-collection.block_theme.spec.ts | 89 ++++++++++++++----- .../product-collection.page.ts | 13 +++ 3 files changed, 82 insertions(+), 22 deletions(-) diff --git a/assets/js/blocks/product-collection/constants.ts b/assets/js/blocks/product-collection/constants.ts index 3e65598bd1c..a88fd5d3754 100644 --- a/assets/js/blocks/product-collection/constants.ts +++ b/assets/js/blocks/product-collection/constants.ts @@ -59,7 +59,7 @@ export const DEFAULT_ATTRIBUTES: Partial< ProductCollectionAttributes > = { displayLayout: { type: LayoutOptions.GRID, columns: 3, - shrinkColumns: false, + shrinkColumns: true, }, }; diff --git a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts index 4794d4315f7..0f6f44519f0 100644 --- a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts +++ b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts @@ -317,30 +317,77 @@ test.describe( 'Product Collection', () => { } ); } ); - test( 'Responsive -> Block correctly adjusts number of columns on smaller screens', async ( { - pageObject, - } ) => { - await pageObject.publishAndGoToFrontend(); - - const firstProduct = pageObject.products.first(); + test.describe( 'Responsive', () => { + test( 'Block with shrink columns ENABLED correctly adjusts number of columns on smaller screens', async ( { + pageObject, + } ) => { + await pageObject.publishAndGoToFrontend(); - // In the original viewport size, we expect the product width to be less than the parent width - // because we will have more than 1 column - let productSize = await firstProduct.boundingBox(); - let parentSize = await firstProduct.locator( 'xpath=..' ).boundingBox(); - expect( productSize?.width ).toBeLessThan( - parentSize?.width as number - ); + const product1 = pageObject.products.nth( 0 ); + const product2 = pageObject.products.nth( 1 ); + + const gap = 21; + let product1Size = await product1.boundingBox(); + let product2Size = await product2.boundingBox(); + let width = + ( product1Size?.width as number ) + + ( product2Size?.width as number ) + + gap; + let parentSize = await product1.locator( 'xpath=..' ).boundingBox(); + + // In the original viewport size, we expect the product width to be less than the parent width + // because we will have more than 2 columns + expect( width ).toBeLessThan( parentSize?.width as number ); + + await pageObject.setViewportSize( { + height: 667, + width: 375, + } ); - await pageObject.setViewportSize( { - height: 667, - width: 375, + // In the smaller viewport size, we expect the product width to be (approximately) + // the half of available space because with column shrinking option + // enabled, it will shrink to 2 columns. + product1Size = await product1.boundingBox(); + product2Size = await product2.boundingBox(); + parentSize = await product1.locator( 'xpath=..' ).boundingBox(); + width = + ( product1Size?.width as number ) + + ( product2Size?.width as number ) + + gap; + expect( width ).toBeCloseTo( parentSize?.width as number ); } ); - // In the smaller viewport size, we expect the product width to be (approximately) the same as the parent width - // because we will have only 1 column - productSize = await firstProduct.boundingBox(); - parentSize = await firstProduct.locator( 'xpath=..' ).boundingBox(); - expect( productSize?.width ).toBeCloseTo( parentSize?.width as number ); + test( 'Block with shrink columns DISABLED collapses to single column on small screens', async ( { + pageObject, + } ) => { + await pageObject.createNewPostAndInsertBlock(); + await pageObject.setShrinkColumnsToFit( false ); + await pageObject.publishAndGoToFrontend(); + + const firstProduct = pageObject.products.first(); + + // In the original viewport size, we expect the product width to be less than the parent width + // because we will have more than 1 column + let productSize = await firstProduct.boundingBox(); + let parentSize = await firstProduct + .locator( 'xpath=..' ) + .boundingBox(); + expect( productSize?.width ).toBeLessThan( + parentSize?.width as number + ); + + await pageObject.setViewportSize( { + height: 667, + width: 375, + } ); + + // In the smaller viewport size, we expect the product width to be (approximately) the same as the parent width + // because we will have only 1 column + productSize = await firstProduct.boundingBox(); + parentSize = await firstProduct.locator( 'xpath=..' ).boundingBox(); + expect( productSize?.width ).toBeCloseTo( + parentSize?.width as number + ); + } ); } ); } ); diff --git a/tests/e2e/tests/product-collection/product-collection.page.ts b/tests/e2e/tests/product-collection/product-collection.page.ts index 01eac81f276..3f407bb2390 100644 --- a/tests/e2e/tests/product-collection/product-collection.page.ts +++ b/tests/e2e/tests/product-collection/product-collection.page.ts @@ -29,6 +29,7 @@ export const SELECTORS = { onSaleControlLabel: 'Show only products on sale', inheritQueryFromTemplateControl: '.wc-block-product-collection__inherit-query-control', + shrinkColumnsToFit: 'Shrink columns to fit', productSearchLabel: 'Search', productSearchButton: '.wp-block-search__button wp-element-button', }; @@ -287,6 +288,18 @@ class ProductCollectionPage { await this.refreshLocators( 'editor' ); } + async setShrinkColumnsToFit( value = true ) { + const sidebarSettings = await this.locateSidebarSettings(); + const input = sidebarSettings.getByLabel( + SELECTORS.shrinkColumnsToFit + ); + if ( value ) { + await input.check(); + } else { + await input.uncheck(); + } + } + async setProductAttribute( attribute: 'Color' | 'Size', value: string ) { const sidebarSettings = await this.locateSidebarSettings(); From 1bb05fd3fe1cd7a6011fbdf6e0d7e81c4724c823 Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:25:33 +0100 Subject: [PATCH 2/6] Improve tests about responsiveness --- .../product-collection.block_theme.spec.ts | 52 ++++++++----------- 1 file changed, 22 insertions(+), 30 deletions(-) diff --git a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts index 0f6f44519f0..2028e4d9c57 100644 --- a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts +++ b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts @@ -318,43 +318,31 @@ test.describe( 'Product Collection', () => { } ); test.describe( 'Responsive', () => { - test( 'Block with shrink columns ENABLED correctly adjusts number of columns on smaller screens', async ( { + test( 'Block with shrink columns ENABLED correctly displays as grid', async ( { pageObject, } ) => { await pageObject.publishAndGoToFrontend(); - - const product1 = pageObject.products.nth( 0 ); - const product2 = pageObject.products.nth( 1 ); - - const gap = 21; - let product1Size = await product1.boundingBox(); - let product2Size = await product2.boundingBox(); - let width = - ( product1Size?.width as number ) + - ( product2Size?.width as number ) + - gap; - let parentSize = await product1.locator( 'xpath=..' ).boundingBox(); - - // In the original viewport size, we expect the product width to be less than the parent width - // because we will have more than 2 columns - expect( width ).toBeLessThan( parentSize?.width as number ); + const productTemplate = pageObject.productTemplate; + + await expect( productTemplate ).toHaveCSS( 'display', 'grid' ); + // By default there should be 3 columns, so grid-template-columns + // should be compiled to three values + await expect( productTemplate ).toHaveCSS( + 'grid-template-columns', + /^\d+px \d+px \d+px$/ + ); await pageObject.setViewportSize( { height: 667, - width: 375, + width: 390, // iPhone 12 Pro } ); - // In the smaller viewport size, we expect the product width to be (approximately) - // the half of available space because with column shrinking option - // enabled, it will shrink to 2 columns. - product1Size = await product1.boundingBox(); - product2Size = await product2.boundingBox(); - parentSize = await product1.locator( 'xpath=..' ).boundingBox(); - width = - ( product1Size?.width as number ) + - ( product2Size?.width as number ) + - gap; - expect( width ).toBeCloseTo( parentSize?.width as number ); + // Verifies grid-template-columns compiles to two numbers, + // which means there are two columns on mobile. + await expect( productTemplate ).toHaveCSS( + 'grid-template-columns', + /^\d+px \d+px$/ + ); } ); test( 'Block with shrink columns DISABLED collapses to single column on small screens', async ( { @@ -364,6 +352,10 @@ test.describe( 'Product Collection', () => { await pageObject.setShrinkColumnsToFit( false ); await pageObject.publishAndGoToFrontend(); + const productTemplate = pageObject.productTemplate; + + await expect( productTemplate ).not.toHaveCSS( 'display', 'grid' ); + const firstProduct = pageObject.products.first(); // In the original viewport size, we expect the product width to be less than the parent width @@ -378,7 +370,7 @@ test.describe( 'Product Collection', () => { await pageObject.setViewportSize( { height: 667, - width: 375, + width: 390, // iPhone 12 Pro } ); // In the smaller viewport size, we expect the product width to be (approximately) the same as the parent width From 5c634ce34ebce8eb403eeca4e7837dc65f2a8b66 Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:42:17 +0100 Subject: [PATCH 3/6] Make regex allowing for floating pixels --- .../product-collection/product-collection.block_theme.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts index 2028e4d9c57..0fdbe242949 100644 --- a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts +++ b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts @@ -329,7 +329,7 @@ test.describe( 'Product Collection', () => { // should be compiled to three values await expect( productTemplate ).toHaveCSS( 'grid-template-columns', - /^\d+px \d+px \d+px$/ + /^\d+(\.\d+)?px \d+(\.\d+)?px \d+(\.\d+)?px$/ ); await pageObject.setViewportSize( { @@ -341,7 +341,7 @@ test.describe( 'Product Collection', () => { // which means there are two columns on mobile. await expect( productTemplate ).toHaveCSS( 'grid-template-columns', - /^\d+px \d+px$/ + /^\d+(\.\d+)?px \d+(\.\d+)?px$/ ); } ); From 52db23d831c2754afa47ca531abf98a361aae099 Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Wed, 22 Nov 2023 16:28:13 +0100 Subject: [PATCH 4/6] Related products should not use sticky and author attribute or have hardcoded queryId --- patterns/related-products.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/patterns/related-products.php b/patterns/related-products.php index f695dcdbbf8..affe7d603e6 100644 --- a/patterns/related-products.php +++ b/patterns/related-products.php @@ -9,7 +9,7 @@
- +

From 3beccabf6b38e6017bdc84a8a5aa77cc1d38cf7e Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Wed, 22 Nov 2023 16:36:26 +0100 Subject: [PATCH 5/6] Bring back properties for Related Products as it's based on Propducts block, not Product Collection --- patterns/related-products.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/patterns/related-products.php b/patterns/related-products.php index affe7d603e6..48b30be4610 100644 --- a/patterns/related-products.php +++ b/patterns/related-products.php @@ -9,7 +9,7 @@
- +

From 52c21dac630654fbf6f2b58640b00d75365ae335 Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Wed, 22 Nov 2023 16:43:37 +0100 Subject: [PATCH 6/6] Enable shrink columns to fit by default in patterns --- patterns/product-collection-full-grid.php | 2 +- patterns/product-collection-grid.php | 2 +- patterns/product-collection-rows.php | 2 +- patterns/product-collection-simple-grid.php | 2 +- patterns/product-query-product-gallery.php | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/patterns/product-collection-full-grid.php b/patterns/product-collection-full-grid.php index 88ddd39338e..80419c375c5 100644 --- a/patterns/product-collection-full-grid.php +++ b/patterns/product-collection-full-grid.php @@ -7,7 +7,7 @@ */ ?> - +
diff --git a/patterns/product-collection-grid.php b/patterns/product-collection-grid.php index 4552d20983b..ebf58027ce4 100644 --- a/patterns/product-collection-grid.php +++ b/patterns/product-collection-grid.php @@ -7,7 +7,7 @@ */ ?> - +
diff --git a/patterns/product-collection-rows.php b/patterns/product-collection-rows.php index f449f420eb2..b52768a87b3 100644 --- a/patterns/product-collection-rows.php +++ b/patterns/product-collection-rows.php @@ -7,7 +7,7 @@ */ ?> - +
diff --git a/patterns/product-collection-simple-grid.php b/patterns/product-collection-simple-grid.php index 4af8bbee522..cbf813f0990 100644 --- a/patterns/product-collection-simple-grid.php +++ b/patterns/product-collection-simple-grid.php @@ -7,7 +7,7 @@ */ ?> - +
diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php index b38f5bfb2cb..326a4b5e137 100644 --- a/patterns/product-query-product-gallery.php +++ b/patterns/product-query-product-gallery.php @@ -15,7 +15,7 @@

- +