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

# Testing notes and ZIP for release 9.0.0

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

## Feature plugin and package inclusion in WooCommerce

### Fix skewed placeholder of a Product Image block. ([7651](https://github.com/woocommerce/woocommerce-blocks/pull/7651))

Prerequisites:

0. Make sure you have a product without a highlighted image (you can create a new product or remove the image from an existing one).

Case 1: image is wider than 500px:

1. Go to Appearance > Site Editor > Templates > Product Catalog.
2. Remove the legacy placeholder block.
3. Add blocks that use Product Image placeholder:

- Single Product
- All Products
- Product Query

4. ✅ Check on the wide-screen (image should have more than 500px width) if the placeholder image is a square (not skewed)

Case 2: image is narrower than 500px:

1. Add a Columns block.
2. Inside one of the columns, add the Single Product block, to another one add Product Query block. Columns block limits the available space for a product to display (you should achieve less than 500px width for product image)
3. ✅ Check if the placeholder image is a square (not skewed)

### Fix missing translations in the inspector (editor mode) for the Cart Cross-Sells Blocks. ([7616](https://github.com/woocommerce/woocommerce-blocks/pull/7616))

1. Change your site language (I tested using the Spanish language — Español). Make sure the translation files are updated (Check Dashboard -> updates).
2. Go to the `Cart Block` (Editor mode)
3. Select the `Cart Cross-Sell` and `Cart Cross-Sells products` blocks, and make sure the title & description are translated in the inspector. See the image below:

![image](https://user-images.githubusercontent.com/14235870/200624981-e42e7f16-36de-4eb7-961b-800b79f268ff.png)

### Move paymentResult to the payment store. ([7692](https://github.com/woocommerce/woocommerce-blocks/pull/7692))

1. Checkout successfully using the stripe payment method (4242 4242 4242 4242)
2. Checkout unsuccessfully using stripe (4000 000 000 0002)
3. Both should not throw any console errors #and step 2 should display a "Something went wrong" error at the top of the Checkout block and a "Card declined" error in the payment method block.

Make loading placeholder colors match the current font color for the theme. ([7658](https://github.com/woocommerce/woocommerce-blocks/pull/7658))

### Add the `Products by Attribute` template. ([7660](https://github.com/woocommerce/woocommerce-blocks/pull/7660))

1. Make sure you are using a blocks theme.
2. Go to the site editor and click on `Browse all templates` (or `site-editor.php?postType=wp_template`).
3. Check that the `Products by Attribute` template shows on the list.
4. Click on it and make sure it shows the legacy grid block.
5. Edit the template and add a block on top of it and save.
6. Go to `Products`>`Attribute` (`/wp-admin/edit.php?post_type=product&page=product_attributes`).
7. Edit one of the attributes, check the `Enable archives?` checkbox, and save.
8. Go back to the attributes list and click `Configure terms` on the attribute you just edited it.
9. Click on `View` on one of the terms to view it in the frontend.
10. Make sure you see the edits you made on the `Product by Attribute` template.

### Make loading placeholder colors match the current font color for the theme. ([7658](https://github.com/woocommerce/woocommerce-blocks/pull/7658))

1. Change the font color of your theme (via Appearance > Site Editor > Styles) to something that is not black or white (ie: yellow);
2. Add all filter blocks (Filter by Price, Filter By Attribute, etc) and the All Products block to a post or page;
3. Visit the page that you added the blocks;
4. Make sure that the colors for the loading placeholder matches the current font color.

### Add a `clearValidationErrors` action to the `wc/store/validation` data store. ([7601](https://github.com/woocommerce/woocommerce-blocks/pull/7601))

1. Use the Checkout block, enter invalid information in fields and ensure validation errors still show. (e.g. enter an invalid ZIP code for UK by just using numbers)
6. Leave fields blank and ensure validation shows.
7. Fix the errors and ensure you can check out.

### Add `ValidatedTextInput` and `ValidationInputError` to the `@woocommerce/blocks-checkout` package. ([7583](https://github.com/woocommerce/woocommerce-blocks/pull/7583))

1. Enter an invalid ZIP code, ensure the error appears.
2. Leave the First name/Last name fields blank, ensure errors appear under them.

### Add `StoreNoticesContainer` to the `@woocommerce/blocks-checkout` package. ([7558](https://github.com/woocommerce/woocommerce-blocks/pull/7558))

1. Add some items and go to the Cart block.
2. In a new tab, open edit one of the items in your cart. Set it to out of stock.
3. Without reloading, go back to the Cart tab, and try to increase the quantity of an item. Ensure you see an error above the Cart block.
4. Set the item back to in stock, and proceed to the Checkout block.
5. Enter an invalid ZIP code, ensure a notice appears above the Checkout block.
6. Using Stripe, enter this card number, it will be declined: `4000 0000 0000 9995` ensure the error appears in the payment methods area.

![image](https://user-images.githubusercontent.com/5656702/199278579-9c61adab-b9f7-4aa5-a0e3-88c8cd589ff0.png)

### Change action type name for use shipping as billing option. ([7695](https://github.com/woocommerce/woocommerce-blocks/pull/7695))

1. Add a physical product to your basket.
2. Go to Checkout
3. Shipping details should be displayed. Enter some details here.
4. Untick "Use same address for billing"
5. Enter different billing details
6. Place the order and check the shipping and billing details are different