woocommerce/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1150.md

Testing notes and ZIP for release 11.5.0

Zip file for testing: woocommerce-gutenberg-products-block.zip

Testing Notes

Fix Hero Product 3 Split pattern text content #11612

1. Create a new page or post and insert the Hero Product 3 Split pattern.
2. Check there's no duplicated description and every section description makes sense with their title.

Move Textarea to components package #11384

1. Add an item to your cart.
2. Go to the Checkout block, ensure the order notes section displays correctly, check the option to add a note to your order and ensure that the text area appears.
3. Enter text into it and check out.
4. Ensure your note is saved alongside your order.

Remove authors filter from Product Collection block #11427

1. Go to Editor
2. Add Product Collection block
3. Disable "Inherit query from template"
4. Make sure there's no "Authors" filter available in the Inspector Controls
5. Smoke test the Product Collection in the Editor and Frontend
6. Go to Editor
7. Add Products (Beta) block
8. Disable "Inherit query from template"
9. Add couple of product filters (for example Sale Status and Attributes)
10. Click "Upgrade to Product Collection" in Inspectopr Controls
11. Make sure Product Collection preserved the filters and works correctly after migration
12. Save and check the frontend.

Move SortSelect to components package #11411

1. Set up some reviews on your products (Go to the product on the front end then the Reviews tab)
2. Add the All Reviews and All Products blocks to a page.
3. Visit that page and ensure the select box to change the ordering of reviews is visible. Interact with it and ensure the order of the reviews changes.
4. On the All Products block, ensure the select box to change the ordering of products is visible. Interact with it and ensure the order of products changes.

Ensure input is validated when autofilled in Firefox #11062

Perform these steps both in Firefox and Chrome/Brave/Edge.

1. As a guest user (open the site in an incognito/private window), add an item to your cart and go to the Checkout block.
2. Enter your details and check out successfully.
3. Repeat again without closing the window, when you load the Checkout block the second time, expand the saved address card.
4. The address details should be auto filled based on your last order.
5. Ensure you can check out without editing the fields.

Prevent theme button border appearing in opinionated patterns #11564

1. Go to Appearance > Editor > Styles > Blocks > Button and set a border style for Button blocks.
2. Create a page and add the following patterns: Discount Banner with Image, Discount Banner and Product Collection Banner.
3. Verify the buttons in those patterns have no border.

Add margin bottom to the Hero Product 3 Split pattern #11573

1. Create a new page or post and insert the Hero Product 3 Split pattern.
2. Make sure it has a bottom margin of 80px.

Set explicit margins in the search bar group on the Large Header pattern #11571

1. Create a new page or post and insert the Large Header pattern.
2. Check the search bar is aligned with the mini-cart button to the right.

Add aspect ratio to the Featured Products 5 Columns pattern #11570

1. Create a new page or post and insert the Product Collection: Featured Products 5 Columns pattern.
2. Save and check all the images have the same size.

Prevent Sale badge overflowing the Product Image in some product grid blocks #11556

1. With Twenty-Twenty Four, add the On Sale Products, All Products and Product Collection blocks to a page.
2. Set all of them to Full Width.
3. Preview that page in the frontend.
4. Verify the On Sale badge doesn't overflow the image.
5. Do some more smoke testing with other themes to verify there are no regressions (I tested TT1, TT2, TT3, TT4 and Storefront).

Footer with 2 Menus Dark pattern: Fix the Site Title color contrast in TT4. #11484

1. Activate the Twenty Twenty-Four theme.
2. Create a new page.
3. Add the Footer with 2 Menus Dark pattern.
4. Verify that the Site Title is visible and has correct color contrast both in the editor and the frontend.
5. Enable the Twenty Twenty-Three theme and repeat all steps to make sure there are no regressions.

[CYS] Fix Product Collection 4 Columns pattern button height #11553

1. Create a new page or post and insert the Product Collection 4 Columns pattern.
2. Check the button height looks like the screenshot below.

Change the "chessboard" pattern structure to improve mobile view #11545

1. Create a new page or post and insert the Hero Product Chessboard pattern.
2. Check it looks good on mobile sizes and looks like the screenshot below.

Footer with 3 menus pattern: update the spacing in the columns to improve the mobile view #11544

1. Create a new page or post and insert the Footer with 3 menus.
2. Check the pattern looks like the after screenshot.

Ensure that the "Remove Item" link on Cart block has a hover state #11526

1. Create a test page and add a few filters and the Products (beta) block to it.
2. Create another test page and add the Cart block to it.
3. Go to the first test page with the Products (beta) block.
4. Select one of the filters and hover over the Reset link.
5. Verify that this PR does not introduce a regression.
6. Add a product to the cart.
7. Go to the second test page with the Cart block.
8. Hover over the "Remove Item" link and verify that it has a hover state.

Add checkout-header template to the correct area in site editor #11528

1. Go to Appearance > Editor > Patterns
2. Click "headers" under the template parts section
3. Checkout checkout-header is visible

Move Title to components package #11383

1. Set up WooCommerce Stripe Payment Gateway and ensure your site is using HTTPS so express methods from Stripe can show.

2. Open the Checkout page in the page editor. Ensure the form steps show up correctly with the correct titles.

3. Add an item to your cart.

4. Go to the Checkout block, ensure each step on the form has a correctly displaying title.

5. Ensure the express payments method section has a correctly displayed title.

6. Check out and ensure it works.

All Products: Add cursor pointer when hovering over pagination items #11502

1. Add the All Products block to a page.
2. Scroll down to the pagination of the block.
3. Hover over pagination numbers and arrows and confirm that the cursor changes to pointer.

Comboboxes should match against values before looking at labels #11410

1. In chrome, add a new address for autocompletion. Use a US address with MA as the state.
2. As a guest user, go to checkout. Autocomplete the shipping address section.
3. Ensure that the state field selects massachusetts.

Essential Header Dark pattern: Fix color contrast issues in TT4 #11480

1. Activate the Twenty Twenty-Four theme.
2. Create a new page.
3. Add the Essential Header Dark pattern.
4. In the Navigation block make sure you have some nested items. (Dropdown menu)
5. Verify that the Search button color contrast is correct both in the editor and the frontend.
6. Verify that the dropdown menu links have a correct color contrast in the frontend.
7. Enable the Twenty Twenty-Three theme and repeat all steps to make sure there are no regressions.

Product Collection: Fix the PHP Warning after migrating from Products (Beta) #11494

1. Create a new page or post.
2. Add the Large Image Product Gallery pattern.
3. Use the Upgrade to Product Collection option in the sidebar and save the page.
4. Ensure there are no warnings in the editor and the front end.

Remove bullet points and unnecessary padding from SearchListControl #11444

1. Add a Single Product, Featured Product and Featured Category to a page.
2. Ensure that the list of possible selection is shown as a list without bullet points and extra padding (the bottom border should reach all the way through).

Fix products incorrectly marked as discounted #11386

1. Add a discounted item and a regular-priced item to your cart.
2. Go to the Cart Block page. Confirm that the discount label is only visible next to the discounted product.
3. Go to the Checkout Block page. Under the Order Summary section, confirm that the discount label is only visible next to the discounted product.
4. Add the following code snippet using the Code Snippets plugin:

function calc_price( $cart_object ) {
    foreach ( $cart_object->get_cart() as $hash => $value ) {
        $value['data']->set_price( 50 );
    }
}
add_action( 'woocommerce_before_calculate_totals', 'calc_price' );

5. Go to the Cart Block page. Confirm that both products reflect the new price (50) and neither displays a discount label.
6. Go to the Checkout Block page, under the Order summary section, Confirm that both products reflect the new price (50) and neither displays a discount label.

Display shipping calculator link for guests shopper #11442

Case 1

1. Go to the WooCommerce settings page: wp-admin/admin.php?page=wc-settings.
2. Change 'Default customer location' to No location by default.
3. Remove any default(fallback) shipping rates.
4. Open your site in a private session(incognito mode).
5. Add some products to the cart.
6. Go to the cart page, and confirm the "Add an address for shipping rates" link is present in the shipping calculator.
7. Click on the link, and confirm it is working as expected.
8. Open your site in a regular session where you're already logged in and have placed an order before.
9. Add some products to the cart.
10. Go to the cart page, confirm the shipping address, and "change address" link present in the shipping calculator.
11. Click on the link, and confirm it is working as expected.

Case 2

1. Go to the WooCommerce settings page: wp-admin/admin.php?page=wc-settings.
2. Change 'Default customer location' to No location by default.
3. Add any default(fallback) shipping rates.
4. Open your site in a private session(incognito mode).
5. Add some products to the cart.
6. Go to the cart page, and confirm the shipping calculator is hidden and default shipping rates are visible
7. Open your site in a regular session where you're already logged in and have placed an order before.
8. Add some products to the cart.
9. Go to the cart page, confirm the shipping address, and "change address" link present in the shipping calculator.
10. Click on the link, and confirm it is working as expected.

Case 3

1. Go to the WooCommerce settings page: wp-admin/admin.php?page=wc-settings.
2. Change 'Default customer location' to Shop country/region.
3. Add the store's address.
4. Add the rates that cover the store's address
5. As a guest/not logged-in user, visit the cart page with some products added already.
6. Confirm the shipping address calculator link to change or add a new address is displayed.

Add a safe guard that the variable is set before accessing it #11424

1. Go to Editor
2. Add Product Collection block
3. Enter Code Editor mode
4. Find and remove "shrinkColumns":false" - it will mimic the case it's undefined

5. Save the page/template and go to frontend
6. Make sure there's no warning and Product Collection is rendered in non-responsive mode (when you narrow down the screen it will preserve the number of columns and finally collapse to single one for mobile view)

Testing notes for the development team

Use the header element for the checkout header #11222

1. Install and activate a blocks theme eg TT3/TT4
2. Go to Appearance > Editor > Templates > Manage All Templates > Page: Checkout ensure none has customizations (or delete them if so), and enter edition mode
3. On List View select Checkout Header, open Block > Advanced pane and ensure HTML ELEMENT is set to <header>
4. Do a test purchase, and on the checkout page verify the header is wrapped in a <header> tag