97 lines
5.7 KiB
Markdown
97 lines
5.7 KiB
Markdown
# 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
|