woocommerce/plugins/woocommerce-blocks/docs/testing/releases/570.md

## Testing notes and ZIP for release 5.7.0

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

## Feature plugin and package inclusion in WooCommerce

### Enable re-select category for Featured Category block ([4559](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4559))

1. Insert a featured category block into a page.
2. Select a category and save the block.
3. Reselect the block you just created.
4. Click on the edit button (pencil icon). Confirm you can select a different category.

### Reviews by Category: Show review count instead of product count ([4552](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4552))

1. Create a new test product. Make sure it is in a product category.
2. As a customer, add a review for the new test product.
3. Add the Reviews by Category block to a page.
4. Select the block and in the inspector, see the "Category" section.
5. Confirm the "Category" section shows the correct review count next to each category. It should match the number of reviews in the category, not the number of products in the category.

### Fix unfiltered html usage of blocks ([4551](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4551))

1. Login to WordPress as an author, not an admin user.
2. Create a page and add the Product Search Block. Save the page.
3. View the page on the frontend. Confirm the search input and form is shown.

### Twenty Twenty: Fix broken sale badge left alignment ([4549](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4549))

Test with the Twenty Twenty theme active.

1. Create a new test product with both a regular and sale price.
2. Create a page and add the All Products Block.
3. Select and edit the All Products Block to change the layout.
4. Within the All Products Block editor, select the Product Image. In it's settings, change the "sale badge alignment" to "left".
5. Save the page and view it on the frontend. Confirm the sale badge is left aligned, not full width.

| Before                                                                                                                | After                                                                                                                |
| --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| ![#3097-before](https://user-images.githubusercontent.com/3323310/128196639-39369cc7-af8e-4e41-929c-2bce28010e99.png) | ![#3097-after](https://user-images.githubusercontent.com/3323310/128197197-e9bbaa63-c71e-485e-8c40-abe14e1b9919.png) |

### Fix handpicked product selections when a store has over 100 products. ([4534](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4534))

To test this you need a catalog with > 100 products.

1. Add a handpicked product block to a page.
2. Make 20 selections. You may need to search for products to have more results appear.
3. Save and reload the page.
4. Confirm the 20 selections you made before and still visible and selected.

## Feature plugin only

### Switch from Select to Combobox for Country and State Inputs ([4369](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4369))

1. Add an item to the cart and visit the checkout block page
2. Try searching for a country in the country input. Matching values should be shown, and the selected value should persist after making a selection.
3. Repeat for state input (for countries with states such as USA).

### Call validation before submitting the order ([4561](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4561))

1. Using a private/incognito browser window, add an item to the cart and visit the checkout block page
2. Use browser autofill to populate the checkout form
3. Submit the order. Check order contains the correct address details.
4. Start a new private/incognito browser window, add an item to the cart and visit the checkout page
5. Edit the email field by removing @ to make it invalid.
6. Submit the order. Ensure a validation error is shown.

### Fix store notice classes ([4568](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4568))

1. Set up WooCommerce Stripe Payment Gateway and go to a page with the Checkout block.
2. Try to pay with a card number that fails like 4000000000000127.
3. Notice the payment will be rejected.
4. Verify the correct icon (exclamation mark instead of check mark) is rendered in the error message.

| Before                                                                                                          | After                                                                                                          |
| --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![before](https://user-images.githubusercontent.com/1558827/129184772-371e9fc8-49d8-4b70-bede-fad0772328a5.png) | ![after](https://user-images.githubusercontent.com/1558827/129184925-6ee304cb-4540-4659-b154-fbeb7e418a55.png) |

### Remove top rule so validation messages are positioned correctly below ([4582](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4582))

1. Add an item to the cart and visit the checkout block page
2. Click inside a required input, leave it blank, then click outside of it
3. A red validation notice should appear below the field. It should not overlap other content.

### Twenty Twenty-One: Adjust removable chip background color ([4547](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4547))

Test with the Twenty Twenty-One theme active. You'll need a test product and a test coupon code.

1. Add an item to the cart and visit the cart block page.
2. Apply a coupon.
3. Confirm the coupon has the correct styling:

| Before                                                                                                                | After                                                                                                                |
| --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| ![#4404-before](https://user-images.githubusercontent.com/3323310/128184619-030aecf6-1496-43c8-b649-c7e513d9a377.png) | ![#4404-after](https://user-images.githubusercontent.com/3323310/128184613-fb17fd6c-c7c4-401c-9628-5337f1b24082.png) |