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](https://github.com/woocommerce/woocommerce-blocks/files/13279109/woocommerce-gutenberg-products-block.zip)

## Testing Notes

### Fix `Hero Product 3 Split` pattern text content [#11612](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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.

<img width="529" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/52fa2815-8c37-4cf6-b6fe-1b487fe6eefd">

### Remove authors filter from Product Collection block [#11427](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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.

<img width="241" alt="Screenshot 2023-11-02 at 15 46 32" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/922e0069-6c59-4044-9fb7-cf2e0337a1b9">

### Change the "chessboard" pattern structure to improve mobile view [#11545](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/11383)

1. Set up [WooCommerce Stripe Payment Gateway](https://wordpress.org/plugins/woocommerce-gateway-stripe/) 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.
   <img width="493" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/49c3ff6a-11f5-4a3d-b24f-599bb962868e">

5. Ensure the express payments method section has a correctly displayed title.
   <img width="471" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/9ea746e2-20e2-4b0f-9f99-07eebb233142">

6. Check out and ensure it works.

### All Products: Add cursor pointer when hovering over pagination items [#11502](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://wordpress.org/plugins/code-snippets/) plugin:

```PHP
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](https://github.com/woocommerce/woocommerce-blocks/pull/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](https://github.com/woocommerce/woocommerce-blocks/pull/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

![Mock](https://github.com/woocommerce/woocommerce-blocks/assets/20098064/d7d7af04-fd50-4d9d-abb7-d07e106d82af)

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](https://github.com/woocommerce/woocommerce-blocks/pull/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