# Testing notes and ZIP for release 10.9.0

Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12343048/woocommerce-gutenberg-products-block.zip)

## WooCommerce Core

### Enhancements

#### Add the `wc-blocks-footer-pattern` class identifier to all footer patterns. [#10542](https://github.com/woocommerce/woocommerce-blocks/pull/10542)

1. Create a new post
2. Insert the following footer patterns to the post:

-   Large Footer
-   Large Footer Dark
-   Simple Footer
-   Simple Footer Dark
-   Footer with Simple Menu and Cart
-   Footer with 2 Menus
-   Footer with 2 Menus Dark
-   Footer with 3 Menus

3. Open the code editor and make sure you can see the `wc-blocks-footer-pattern` class in all footer patterns:

<img width="1997" alt="Screenshot 2023-08-11 at 11 16 38" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/05048b34-92ed-4020-a4be-87e4a72e2a16">

4. No changes should be observed by the end users: all patterns listed above should work as expected both on the editor side and on the front end.

#### Add the `wc-blocks-header-pattern` class identifier to all header patterns. [#10541](https://github.com/woocommerce/woocommerce-blocks/pull/10541)

1. Create a new post
2. Insert the following header patterns to the post:

-   Centered Header Menu with Search
-   Essential Header
-   Essential Header Dark
-   Large Header
-   Large Header Dark
-   Minimal Header

3. Open the code editor and make sure you can see the `wc-blocks-header-pattern` class in all header patterns:

<img width="1604" alt="Screenshot 2023-08-11 at 10 55 27" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/2f534cf2-1b6e-428f-87e3-c08d5cd6db51">

4. No changes should be observed by the end users: all patterns listed above should work as expected both on the editor side and on the front end.

#### Featured Products: Fresh & Tasty pattern: Enhance mobile view and optimize images. [#10521](https://github.com/woocommerce/woocommerce-blocks/pull/10521)

1. Create a new post
2. Insert the **Featured Products: Fresh & Tasty** pattern
3. Make sure the pattern is properly displayed in the editor without any problems
4. Save the post and head over to the front-end
5. Make sure the pattern is correctly displayed and the mobile view matches the screenshot provided on the description of this PR.

##### Screenshots

<table>
<tr>
<td valign="top">Before:
<br><br>
<img width="200" alt="Screenshot 2023-08-09 at 18 11 40" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/1b3c6d76-bea1-4dd2-8d15-7462798fb7b2">
</td>
<td valign="top">After:
<br><br>
<img width="220" alt="Screenshot 2023-08-09 at 18 11 57" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/a4dff933-7a46-42f7-9b4c-d5c63003b954">
</td>
</tr>
</table>

#### Add placeholder images and update text styles for the Alternating Image and Text pattern. [#10479](https://github.com/woocommerce/woocommerce-blocks/pull/10479)

1. Create a new post.
2. Insert the **Alternating Image and Text** pattern.
3. Save the post and ensure everything is working as expected both in the editor and on the frontend. The designs should match the "After" screenshot on this PR.

##### Screenshots

<table>
<tr>
<td valign="top">Before:
<br><br>
<img width="1245" alt="Screenshot 2023-08-04 at 15 57 46" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/a26c67b9-8229-470b-bebb-bd34f4f0db85">
</td>
<td valign="top">After:
<br><br>
<img width="1212" alt="Screenshot 2023-08-04 at 16 02 36" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/948fd856-6a2c-49e0-aa0b-6e33241d7429">
</td>
</tr>
</table>

#### Performance: Selecting shipping rates during checkout, and API calls in general, are now faster. Shipping selection improved by at least 1 second. [#10472](https://github.com/woocommerce/woocommerce-blocks/pull/10472)

1. Add items to the cart and head to checkout.
2. Enter your address. Ensure your store has a few shipping methods to choose from.
3. Select a shipping rate. Confirm the UI is blocked (cursor change, faded out radio button).
4. Confirm shipping totals etc update successfully.

#### Checkout: Prevent postcode validation error notice appearing after pushing changes for other fields. [#10315](https://github.com/woocommerce/woocommerce-blocks/pull/10315)

1. Add some items to the cart and go to the checkout page
2. Fill out your shipping address and ensure rates appear. You need to complete all required fields before this occurs.
3. Type into a shipping address field. After a short delay confirm that the shipping rates refresh.
4. Type into a different field. Without waiting, tab out of the field. The refresh should happen immediately.
5. Interact with the postcode + country fields.
    - Choose Algeria. Enter invalid postcode e.g. ABC. Notice the inline validation.
    - Choose Albania. Inline validation should disappear. The postcode is now valid.
    - Go back to Algeria. The postcode will clear. There should be no validation message visible.
    - Place order. Empty postcode field now has a validation message.
6. Correct all errors and successfully place the order.

#### Product Button block: Integrate Interactivity API to make the block dynamically. [#10006](https://github.com/woocommerce/woocommerce-blocks/pull/10006)

1. Ensure that you are using the Blockified Product Catalog Template. If not, enable it.
2. Open the Site Editor and add the Mini Cart Block on the header. Save.
3. Visit the Product Catalog (`/shop`).
4. Click the button to ensure the product is added to the cart.
5. Ensure that the transition Add to cart -> loading status -> 1 in the cart is smooth.
6. Click on the Mini Cart.
7. Edit the quantity of the product.
8. Ensure that the changes are reflected in the Product Button.
9. Via dev tools ensure that the button element has the class `added` when the product is in the cart, and the button element has the class `loading` while the product is added to the cart.

##### Test ProductButton with cache plugin

1. Install the plugin [WP Optimize](https://wordpress.org/plugins/wp-optimize/).
2. Ensure that your cart is empty.
3. Ensure that you have the Mini Cart block in the header.
4. Enable the cache.
5. Visit the page with the Products block.
6. Refresh the page.
7. Add a product.
8. Refresh the page.
9. Ensure that the counter is updated with a smoother animation.
10. Open the Mini Cart block and change the quantity of the product in the cart.
11. Ensure that the counter inside the button is updated with a smoother animation.
12. Disable the plugin.
13. Visit the page with the Products block.
14. Open the Mini Cart block and change the quantity of the product in the cart.
15. Ensure that the counter inside the button is updated with a smoother animation.
16. Ensure that there isn't any regression.

#### Interactivity API: Update interactive regions during client-side navigation [#10200](https://github.com/woocommerce/woocommerce-blocks/pull/10200)

1. Ensure that you are using the Blockified Product Catalog Template. If not, enable it.
2. Open the Site Editor and go to the Product Catalog Template.
3. In order to make pagination more noticeable, in the Product query block, disable the inherited query settings and manually modify the block markup to set the `perPage` prop inside the `query` attribute to `1`.
4. Visit the Product Catalog (`/shop`).
5. Click on any link inside the Pagination block.
6. Via dev tools, ensure that only the HTML inside the Query block is updated.
7. Navigate back and forward.
8. Via dev tools, ensure that only the HTML inside the Query block is updated.
9. Click on any link outside the Pagination block
10. Ensure that the browser navigates to the selected link.

##### Screenshots

<table>
<tr>
<td valign="top">Before:
<br><br>
<video src="https://github.com/woocommerce/woocommerce-blocks/assets/6917969/8ec402c1-a723-4e80-a76c-9e9987192a5f"></video>
</td>
<td valign="top">After:
<br><br>
<video src="https://github.com/woocommerce/woocommerce-blocks/assets/6917969/ebf388ba-c3d7-4f5a-89f7-43a26a041f66"></video>
</td>
</tr>
</table>

### Bug Fixes

#### Fix Express Payments buttons display in the Cart block. [#10534](https://github.com/woocommerce/woocommerce-blocks/pull/10534)

1. activate Stripe and PayPal and make sure they are active
2. add a product to cart
3. visit the Cart block and make sure buttons are stacked
4. go to the Checkout block and make sure buttons are in a grid
5. repeat the testing in the editor as well
6. repeat the steps with different screen sizes
7. Mini cart does not display express payments so it does not need testing

#### Fixed a bug which caused theme border colors to not correctly show on the blocks on the editor side. [#10468](https://github.com/woocommerce/woocommerce-blocks/pull/10468)

1. Add a “Featured Category” block to your page.
2. Open the Inspector Controls → Styles tab → Add a border.
3. Select a custom width and select a color from the theme colors.
4. Ensure this color is shown correctly in the editor.
5. [Regression test] Ensure custom colors are shown correctly in the editor.
6. [Regression test] Ensure both are shown in the front-end.

#### Fix an issue where inner Cart blocks were incorrectly nested. [#10447](https://github.com/woocommerce/woocommerce-blocks/pull/10447)

1. Enable a block theme.
2. Go to Appearance -> Editor -> Templates -> Cart.
3. Edit the template and click the "Cart" button at the top of the editor - a dropdown will appear. Click "Clear customizations" here (If it does not show then proceed anyway)
4. Open the list view of blocks, and expand the Cart block, and the Empty Cart block. Ensure there are no duplicate Empty/Filled cart blocks in the top-level Empty Cart block.