Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add testing instructions for the release

This commit is contained in:
Tarun Vijwani 2023-06-06 12:21:45 +04:00
parent 459f8da651
commit 4cf62bd787
2 changed files with 555 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

554
plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1040.md Normal file
View File

@ -0,0 +1,554 @@
# Testing notes and ZIP for release 10.3.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11661487/woocommerce-gutenberg-products-block.zip)
## WooCommerce Core
### Product Rating: fix the filter woocommerce_product_get_rating_html is removed [#9719](https://github.com/woocommerce/woocommerce-blocks/pull/9719)
1. Ensure that you have the Blockified Single Product Template.
2. Visit a product.
3. Add some comments and rate the product.
4. Be sure that the ratings in the comments don't show the average rating
### Product rating: improve preview style when the product doesn't have rating [#9684](https://github.com/woocommerce/woocommerce-blocks/pull/9684)
1. Edit the Single Product Template (migrate to the blockified template if it isn't).
2. Add the Product Rating block.
3. Ensure that it looks like the image above.
### Combine country asset data to reduce the amount of data consumed by the cart and checkout blocks [#9552](https://github.com/woocommerce/woocommerce-blocks/pull/9552)
1. Go to the block based cart
2. Open the shipping calculator and enter your address, confirming state + country fields are working
3. Go to the block based checkout
4. Fill out the shipping and address forms separately,, confirming the country and state fields populate correctly. Ensure an address with states, such as the US, is used at least once.
5. In WooCommerce > Settings and change "Shipping location(s)" to specific locations. Limit to a few countries
6. Go back to checkout and confirm the limitations are in place in the shipping address form
### Add to Cart with Options Block: Remove global variable overwrite. [#9457](https://github.com/woocommerce/woocommerce-blocks/pull/9457)
1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard and on the sidebar, click on "Appearance > Editor".
5. Select the Single Product template to customize it and click on edit.
6. Make sure the Add to Cart with Options block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
7. On the frontend, ensure the button works as expected and the product can be added to the cart.
### Product Image Gallery: Reintroduce filters and override-restore the global product variable. [#9630](https://github.com/woocommerce/woocommerce-blocks/pull/9630)
1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard, and on the sidebar, click on "Appearance > Editor".
2. Select the Single Product template to customize it and click on edit.
3. If you are still using the Classic template, click on the button to transform it to the blockifyed version.
4. Make sure the Product Image Gallery block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
5. On the frontend, ensure the gallery works as expected, and the thumbnails can be selected.
### Blockified Single Product Template: add product-classes via `wc_get_product_class` [#9697](https://github.com/woocommerce/woocommerce-blocks/pull/9697)
1. Ensure that you are using the Blockified Single Product Template.
2. Visit a product page.
3. Check the body and ensure that the product classes are added
### Add to Cart with Options block: Restore the global variable to its original value after being overriden [#9581](https://github.com/woocommerce/woocommerce-blocks/pull/9581)
1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard and on the sidebar, click on "Appearance > Editor".
2. Select the Single Product template to customize it and click on edit.
3. If you are still using the Classic template, click on the button to transform it to the blockifyed version.
4. Make sure the Add to Cart with Options block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
5. On the frontend, ensure the button works as expected, and the product can be added to the cart.
6. Access the single template for all available product types, including simple, variable, grouped, and external and make sure you can add all of them to the cart.
#### Testing with Jetpack
1. Install and enable the Jetpack plugin on a live site (such as Jurassic Ninja).
3. Access `wp-admin/admin.php?page=jetpack_modules` to confirm the WooCommerce Analytics module is enabled.
4. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard and on the sidebar, click on "Appearance > Editor".
2. Select the Single Product template to customize it and click on edit.
3. Add the single product block on the single product template and save.
4. Visit the product page on the front end when logged out and make sure everything works as expected (no fatal errors should be observed).
### Enable Single Product block [#9714](https://github.com/woocommerce/woocommerce-blocks/pull/9714)
1. Add the Single Product block in a post/page.
2. Visit the created post/page.
3. Click the `add to cart` button .
4. Ensure that the product is added to the cart and any notice is visible.
5. Edit the Single Product Template.
6. Add the Single Product block.
7. Repeat 3-4 steps.
### Product Image Gallery block: Fix magnifying glass appearing outside the block content area [#9594](https://github.com/woocommerce/woocommerce-blocks/pull/9594)
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three", etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select the Single Product template from the list.
6. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
7. Inside the Site editor, click on the List View button, usually found at the top left of the editing space, to see the list of blocks added to the editor area.
8. In the list of blocks, move the Product Image Gallery block to be above the Breadcrumbs block;
9. Once the Product Image Gallery block is displayed on top of the Breadcrumbs block in the Editor area, on the top-right side click on the Save button;
10. Visit the product page and make sure that the magnifying glass is correctly displayed on the top right corner of the image
### Make Mini-Cart block work well with caching plugins [#9493](https://github.com/woocommerce/woocommerce-blocks/pull/9493)
**With your admin user:**
1. Install _[WP-Optimize - Clean, Compress, Cache](https://wordpress.org/plugins/wp-optimize/)_ or a similar caching plugin.
2. Go to WP-Optimize > Settings > Cache and enable page caching.
**In a private/incognito window without being logged in:**
3. In the frontend visit any page. This will cache the page without products in the cart.
**With your admin user:**
4. Add some products to your cart.
5. Visit the same page from step 3.
6. Notice the Mini Cart totals do include the products you added in step 4, even though it's serving the cached version of step 3.
### Product Price: remove underline on sale price [#9702](https://github.com/woocommerce/woocommerce-blocks/pull/9702)
1. Ensure you are using the Blockified Single Product Template and Product Catalog Template.
2. Visit a product with a sale price.
3. Ensure that the sale price isn't underlined.
4. Visit the `/shop` page.
5. Ensure that the sale price isn't underlined
### Blockified Single Product Template: avoid to add another group block on the editor side when the user creates a template for a specific product [#9699](https://github.com/woocommerce/woocommerce-blocks/pull/9699)
1. Open the Site Editor.
2. Be sure that the Single Product template is blockified.
3. Click `Manage All Templates` button.
4. Click `Add New`.
5. Select Product.
6. Select a product.
7. Open the list view.
8. Ensure that the template is wrapped by just one group block.
9. Visit the product.
10. Ensure that there is a div with the class `woocommerce` that wraps the entire template.
11. Visit another product.
12. Ensure that there is a div with the class `woocommerce` that wraps the entire template.
### Blockified Single Product Template: use h1 for the Product Title [#9698](https://github.com/woocommerce/woocommerce-blocks/pull/9698)
1. Ensure that the Single Product Template doesn't have any customization.
2. Edit it.
3. Focus on the Product Title.
4. Ensure that `h1` is set.
### Ensure aria-label is showing correct value based on setting [#9672](https://github.com/woocommerce/woocommerce-blocks/pull/9672)
1. Add the Mini-Cart block to a post or page and set the Display total price attribute to false.
2. Go to the frontend and with your browser devtools (F12). Inspect element and look for the`.wc-block-mini-cart__button` on the `mini cart block`. Find the `aria-label`.
3. Notice it says `X item(s) in cart`, with the price. Hover over the `mini cart` icon and click on. Inspect the element again to ensure it is still displaying `X item(s) in cart`.
4. Go back to the `mini cart` settings and switch it to show `Display total price`.
5. The `aria-label` should now show "X item(s) in cart, total price of Y".
6. BONUS: Add another instance of the `mini cart` in the header and perform the same tests and ensure each instance of the `mini cart` shows their own `aria-label` value depending on the `Display total price` settings.
### Product Categories List: Add show child categories only toggle [#9550](https://github.com/woocommerce/woocommerce-blocks/pull/9550)
1. Set up product categories with children and grandchildren, making sure they have products.
2. Add the Product Categories List block to a page, and also to the Products by Category template.
3. Check that the toggle only appears when the block is used in the Site Editor (e.g. on a template)
4. Ensure that when the toggle is enabled and you're visiting a category with children, only the children are shown.
5. Make sure that if when you have the _show children only_ toggle enabled, and you click the last child then it renders the current category instead of rendering nothing at all.
6. Ensure no regressions when using this block on posts/pages
7. Enable Classic theme such as Storefront
8. Usage the block in the widget area and check that the feature is available and works as expected and described above.
### Stack cart and checkout buttons on smaller screens [#9603](https://github.com/woocommerce/woocommerce-blocks/pull/9603)
1. In a post/page add the `Mini Cart` block.
2. In the frontend, click on the mini cart button to reveal the drawer.
3. Ensure the `View my cart` and `Checkout` buttons are visible and side by side.
4. Using the developer tools, switch to a mobile view.
5. Ensure now the `View my cart` and `Checkout` buttons are visible and now stacked top and bottom.
### Remove `setFullAddressPushed` to prevent address continually pushing [#9606](https://github.com/woocommerce/woocommerce-blocks/pull/9606)
1. Ensure you have shipping rates set up for UK.
2. Add an item to your cart, go to the Checkout block.
3. Enter a full address using United Kingdom as the country, enter `L1 0BP` as the Postcode. Wait for shipping rates to load.
4. Change country to Portugal. Do not change anything else.
5. Ensure the shipping rates don't continually load.
### Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible [#9648](https://github.com/woocommerce/woocommerce-blocks/pull/9648)
1. Set up your browser so scrollbars are visible (that might depend on the browser/OS you use).
2. Add the Mini-Cart block to the header of your store.
3. In the frontend, open the Mini-Cart drawer and verify there is no horizontal shift of the contents.
Before | After
--- | ---
[before](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/dedaa44b-2a07-4fd5-9ea2-c3d1b9e13080) | [after](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/9bc56a48-88df-4e0a-af9e-98843433ca7a)
### Product Rating block: Add the block to the Single Product template by default [#9510](https://github.com/woocommerce/woocommerce-blocks/pull/9510)
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three", etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select the Single Product template from the list.
6. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
7. Make sure the Product Rating block appears below the Product Title block;
8. On the top right side, click on Save;
9. Visit a product page and make sure the Product Rating block appears below the Product Title.
### Ensure inner content is not truncated on different widths [#9640](https://github.com/woocommerce/woocommerce-blocks/pull/9640)
1. Create a new post & add the WooCommerce Just Arrived Full Hero pattern.
2. Adjust the alignment on the Cover Block from Full width (the pattern's default) to either Wide width or None.
3. Note that the text (Heading, Paragraph, and Buttons blocks) are not squished or truncated to the right and that they show as expected aligning towards the right side of the block.
### Fix invisible Mini-Cart badge in themes without <body> background [#9601](https://github.com/woocommerce/woocommerce-blocks/pull/9601)
1. With any block theme, go to Appearance > Editor > edit any template > Styles > Additional CSS and add these styles:
```CSS
body {
background: transparent !important;
}
```
2. Add the Mini-Cart block to the header of your site or to a post or page.
3. In the frontend, add some products to your cart.
4. Verify the Mini-Cart badge is visible.
Before | After
--- | ---
![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/f1be4c5a-b9ec-4b92-bb3d-3083ceb9f4e9) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/01ed4c2f-f2a8-4fee-abba-e4c53413079c)
### Product Rating block: Add Single Product template support to the block [#9499](https://github.com/woocommerce/woocommerce-blocks/pull/9499)
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three", etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select the Single Product template from the list.
6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
7. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
8. Click on the 'Product Rating' block to add it to the template.
11. Once the block is added to the template, make sure the rating stars appears, and, on the top-right side, click on the Save button;
12. Visit a product that contains at least one review and check if the Product Rating block is displayed.
13. Visit a product that does not contain reviews and check if the Product Rating block is hidden.
### Blockified Single Product Template: Show upsells. [#9636](https://github.com/woocommerce/woocommerce-blocks/pull/9636)
1. Edit a product.
2. Add upsells.
3. Open the Site Editor.
4. Edit the Single Product Template.
5. Migrate to the blockified template.
6. Visit the product.
7. Be sure that upsells are visible
### Mini-Cart: Make error notifications non-dismissable [#9578](https://github.com/woocommerce/woocommerce-blocks/pull/9578)
1. In the frontend, add a product to your cart.
2. In `wp-admin`, edit that product and set it out of stock.
3. Open a page with the Mini Cart, select to open the drawer.
4. Ensure the error notice appears: "[Product name] is out of stock and cannot be purchased. Please remove it from your cart." and is non-dismissable.
### Fix Cambodian postcode validation [#9597](https://github.com/woocommerce/woocommerce-blocks/pull/9597)
1. Add a product to the cart and go to the checkout page.
2. Select Cambodia country as country.
3. Enter a 5-digit postcode.
4. Verify that the postcode fails the validation.
5. Enter a 6-digit postcode.
6. Verify that the postcode passes the validation.
7. Select United Kingdom (UK) as country.
8. Verify that the postcode `AA9A 9AA` passes the validation.
9. Verify that the postcode `9999 999` fails the validation.
10. Verify that it's not possible to have spaces before the postcode, .e.g. ` AA9A 9AA`.
11. Verify that lowercase letters, e.g. `aa9A 9aa`, are automatically converted to uppercase letters, e.g. `AA9A 9AA`.
### Product Rating block: Hide rating when the product has no reviews [#9556](https://github.com/woocommerce/woocommerce-blocks/pull/9556)
#### Product Rating block inside Single Product Block with a selected product that contains reviews
On Editor:
| Before | After |
|--------|--------|
| <img width="1239" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/ff7be2fc-0326-4c7f-98d3-669f783a56b4"> | <img width="1239" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/ff7be2fc-0326-4c7f-98d3-669f783a56b4"> |
On Frontend:
| Before | After |
|--------|--------|
| <img width="1238" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/08f725f2-8999-4f66-b4c4-c3bd3f24d5be"> | <img width="1238" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/08f725f2-8999-4f66-b4c4-c3bd3f24d5be"> |
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select any template from the list.
6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
7. In the block library that pops up, you can search for the 'Single Product' block. You can do this by typing 'Single Product' into the search bar at the top of the block library.
8. Click on the 'Single Product' block to add it to the template. You'll be prompted to select a product from your WooCommerce store to feature in the block. Make sure to select a product that contains at least one review.
9. Once you've selected a product, the block will be inserted into your template and will display information about the product you've selected.
10. Within the content area of the Single Product block, click on the '+' button to add a new block.
11. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
12. Once the block is added to the template, make sure the rating stars and reviews count appears for the selected product.
13. On the top-right side, click on the Save button.
14. Visit a product and check if the Product Rating block is displayed with the rating stars and reviews count.
#### Product Rating block inside Single Product Block with a selected product that has NO reviews
On Editor:
| Before | After |
|--------|--------|
| <img width="1223" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/53975777-3f3d-4e79-9619-98f83a42cb6e"> | <img width="1244" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/23df0597-df8d-44c5-8d0e-acd2942504f1"> |
On Frontend:
| Before | After |
|--------|--------|
| <img width="1224" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/6676974c-973c-4087-b2bf-6a6580fea583"> | <img width="1225" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/32c2b66b-1239-400c-974a-bfcf9998d68b"> |
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select any template from the list.
6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
7. In the block library that pops up, you can search for the 'Single Product' block. You can do this by typing 'Single Product' into the search bar at the top of the block library.
8. Click on the 'Single Product' block to add it to the template. You'll be prompted to select a product from your WooCommerce store to feature in the block. Make sure to select a product that contains at least one review.
9. Once you've selected a product, the block will be inserted into your template and will display information about the product you've selected.
10. Within the content area of the Single Product block, click on the '+' button to add a new block.
11. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
12. Once the block is added to the template, make sure the rating stars appears empty and the reviews count is not displayed for the selected product.
13. On the top-right side, click on the Save button.
14. Visit a product and check if the Product Rating block is hidden.
#### Product Rating block inside Related Products Block
On Editor:
| Before | After |
| ------ | ----- |
| <img width="1241" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/8ada29fc-6cc3-468b-89b3-5a291415a023"> | <img width="1258" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/f591756d-02f2-474d-9bfc-a37d06f7d6f4"> |
On Frontend:
| Before | After |
|--------|--------|
| <img width="1254" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/c16a3a8c-ff3f-4d3e-b331-09a68ec00838"> | <img width="1246" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20469356/1e838f85-ae3a-4047-89b8-3fe765c1f3cb"> |
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select any template from the list.
6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
7. In the block library that pops up, you can search for the 'Related Products' block. You can do this by typing 'Related Products' into the search bar at the top of the block library.
8. Click on the 'Related Products' block to add it to the template.
9. Within the content area of the Related Products block, click on the '+' button to add a new block.
10. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
11. Once the block is added to the template, make sure the rating stars appears empty and the reviews count is not displayed for products that has no reviews, but the stars appears filled with the rating for products that contains reviews.
12. On the top-right side, click on the Save button.
13. Visit a product and check if the Product Rating block is hidden for products with no reviews, and is displayed for products with reviews.
### Fix total shipping display info when no shipping method is available [#8819](https://github.com/woocommerce/woocommerce-blocks/pull/8819)
The order of the test cases is important!
### Case 1 (Local pickup enabled and no shipping options available)
1. Enable local pickup with pickup price. For that, go to `WooCommerce -> Settings -> Shipping -> Local pickup`, under `General` Check `Enable local pickup` and `Add a price for customers who choose local pickup`, and save. Then add a price under the `Cost` input.
2. Remove the shipping methods from the WC settings (WooCommerce -> Settings -> Shipping -> Shipping zones)
3. Go to the store and add an item to the cart
4. Go to the Checkout block and select the `Local Pickup` option under the `Shipping Method` section. Ensure the correct shipping information is displayed in the `Order Summary` Block (i.e., The correct price and correct local pickup option)
5. Select `Shipping` under the `Shipping Method` section. Ensure `No shipping options available` is displayed under `shipping` in the `Order Summary` Block
### Case 2 (Local pickup enabled and shipping option(s) available)
1. Add a shipping method in `WooCommerce -> Settings -> Shipping -> Shipping zones`. Ensure the shopper's address is within the shipping zone created.
2. Go to the Checkout block and select the `Local Pickup` option under the `Shipping Method` section. Ensure the correct shipping information is displayed in the `Order Summary` Block (i.e., The correct price and correct local pickup option)
3. Select `Shipping` under the `Shipping Method` section. Ensure the correct shipping information is displayed in the `Order Summary` Block (i.e., The correct price and correct shipping option)
### Case 3 (Local pickup disabled and no default shipping rates)
1. Disable local pickup. For that, go to `WooCommerce -> Settings -> Shipping -> Local pickup`, under `General` uncheck `Enable local pickup` and save.
2. Go to `WooCommerce -> Settings -> General`. Select `No location by default` under `Default customer location`
3. Remove any default(fallback) shipping rates in `WooCommerce -> Settings -> Shipping -> Shipping zones -> Locations not covered by your other zones`
4. Open your site in a private session(incognito mode).
5. Add an item 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 an item 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 4 (With default shipping rates)
1. Add a default(fallback) shipping rate in `WooCommerce -> Settings -> Shipping -> Shipping zones -> Locations not covered by your other zones`
2. Follow steps 4 and 5 from the previous case (i.e., `Case 3`)
3. Go to the cart page, and confirm the shipping calculator is hidden and default shipping rates are visible
4. Follow steps 8 to 11 from the previous case (i.e., `Case 3`)
### Case 5 (Error Notice)
1. Follow steps 3 to 6 from `Case 3`
2. Click on the link, and change the address to a location where shipping rates are unavailable.
3. Confirm that `There are no shipping options available. Please check your shipping address.` error is visible in the text form.
4. Proceed to the Checkout block page, and confirm the `There are no shipping options available. Please check your shipping address` error is visible in the text form under the `Shipping options` section.
Note: Notice will appear for a few seconds until we receive the server's response, even with the valid shipping address, when we change the shipping method.
### Classic Product Template block visible in the inserter [#9573](https://github.com/woocommerce/woocommerce-blocks/pull/9573)
1. Open the Site Editor.
2. Edit the `Single Product` template.
3. Be sure that the `Classic Product Template` is visible.
4. Click on `transform into blocks` button.
5. Open the inserter and search for: `WooCommerce Single Product Template` (for other templates, update the name with the name of the template).
6. Repeat those steps for: `Product Catalog`, `Products by Attribute`, `Products by Category`, `Products by Tag` and `Products Search Results` templates.
## Feature plugin
### Use a portal to render the Drawer close button in order to fix its alignment inside the Mini-Cart Contents block [#9507](https://github.com/woocommerce/woocommerce-blocks/pull/9507)
1. Add the Mini-Cart block to the header of your store.
2. Go to Appearance > Editor > Template parts > Mini-Cart.
3. Select the Mini-Cart Contents block and change its border to something excessively thick (ie: a 30px border).
4. Go to the frontend and open the Mini-Cart drawer.
5. Verify the close button is inside the Mini-Cart drawer area, instead of being on top of the border.
Before | After
--- | ---
![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/8248bc9c-722f-49cd-b3d3-2680975f4683) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/7b805947-ab1a-4530-86bd-83277279a60b)
## Experimental plugin
### Product Collection: Add 'on sale' filter and enhance settings management in product collection block [#9549](https://github.com/woocommerce/woocommerce-blocks/pull/9549)
1. Create a new post
2. Add Product Collection block
3. Verify that the sidebar displays a 'On sale' setting when the Product Collection block is selected.
<img width="281" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/f91284c2-347f-41a8-a164-d70e75d7c96c">
4. Toggle "Show only products on sale"
- Confirm that the change is immediately reflected in the editor & showing only products on sale.
5. Save and publish the post.
- Verify that the same change is reflected on the frontend.
6. Also, verify that in Editor, filters can be reset using Reset/Reset all button:
<img width="284" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/b76fdb4f-fa6e-4c59-8a49-3c605279ad2e">
### Product Collection: Add Taxonomy filters to sidebar settings [#9634](https://github.com/woocommerce/woocommerce-blocks/pull/9634)
1. Create a new post
2. Add Product Collection block
3. With `Product Collection` block selected, check the sidebar for the Taxonomy filter i.e., product categories, tags etc. These will be displayed as shown in images below:
<img width="283" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/2e3afa24-f1f6-4947-b3ca-04d214a0b448">
<img width="283" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/5233c28f-6098-42be-a927-6003c3d050c4">
4. Make sure that you have products with categories and tags. If not, add categories or tags to some products.
5. Now select a product category or tags. After the selection, verify that changes reflect immediately in the Editor view.
6. Save and publish the post. After publishing, you can just navigate to the Frontend and verify that the changes you made in the Editor are accurately reflected.
7. Return to the Editor and validate the `Reset all` functionality of filters:
- Clicking the `Reset all` button resets your selected filters.
- The `Reset all` button can be found as shown in image below:
<img width="279" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/fe6ad8f9-e9f5-4507-822c-8d42a0496ed0">
### Product Collection - Add keyword control to sidebar settings [#9583](https://github.com/woocommerce/woocommerce-blocks/pull/9583)
1. Create a new post
2. Add Product Collection block
3. With the `Product Collection` block selected, check the sidebar for the `Keyword` control. Ensure that it is displayed as shown below:
<img width="285" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/1a75258f-9127-46df-a85d-71d1b3939aa6">
<img width="280" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/9d4e5eb9-4b55-4611-a08c-88eb4292e55f">
5. Add a keyword & changes should immediately reflect in the Editor view.
6. Save and publish the post.
- Navigate to the live post on the Frontend and verify that the changes you made in the Editor are accurately reflected.
7. Go back to the Editor and confirm that the filters can be reset using the `Reset all` button, as shown below:
<img width="279" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/0f7b71ab-19ec-4259-8a9f-2f37a8819552">
### Product Collection: Add `Attributes` filter control to sidebar settings [#9600](https://github.com/woocommerce/woocommerce-blocks/pull/9600)
1. Create a new post
2. Add Product Collection block
3. With the `Product Collection` block selected, inspect the sidebar for the `Product attributes` control. Confirm its appearance and functionalities:
- The control should be displayed as shown in the images below:
<img width="280" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/459ffec4-5276-4a95-a3ca-3e4f6762bea9">
<img width="266" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/a7aac444-d01d-40c1-8e0d-66883d083e4c">
4. Test the `Product attributes` control by selecting any attributes. For example, color -> blue:
- After the selection, verify that changes are immediately visible in the Editor view.
5. Save and publish the post:
- Click on `Publish...` at the top right corner.
- After publishing, navigate to the Frontend and verify that the changes you made in the Editor are accurately reflected.
6. Return to the Editor and validate the `Reset all` functionality of the filters:
- Make sure that clicking the `Reset all` button resets your selected filters.
- The `Reset all` button can be found as shown in the image below:
<img width="270" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/fa14b1c9-3db9-4743-af97-a543b7e9a90f">
7. Test the `Manage attributes` functionality:
- Click on the `Manage attributes` link.
- Verify that this redirects you to the designated page where you can manage product attributes
### Add to Cart with Options block: Prevent page redirection when clicking on Add to Cart button [#9691](https://github.com/woocommerce/woocommerce-blocks/pull/9691)
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select the 'Single Product' template from the list.
6. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
7. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
8. In the block library that pops up, you can search for the 'Single Product' block. You can do this by typing 'Single Product' into the search bar at the top of the block library.
9. Click on the 'Single Product' block to add it to the template. You'll be prompted to select a product from your WooCommerce store to feature in the block. Make sure to select a product that contains at least one review.
10. Once you've selected a product, the block will be inserted into your template and will display information about the product you've selected.
11. On the top-right side, click on the Save button.
12. Visit a product and click on the Add To Cart button of the Single Product block that you just added.
13. Make sure the page is not redirect to another URL and that the Cart is updated with the clicked product.
### Product Collection - Add Inherit query from template control [#9485](https://github.com/woocommerce/woocommerce-blocks/pull/9485)
#### Testing with Product Archive templates
1. Open the Editor and navigate to the "Product Search Results"
2. Replace the existing 'Classic Template' block with the 'Product Collection' block.
3. After the 'Product Collection' block is successfully inserted, ensure that the 'Inherit query from template' option is enabled by default.
4. Save the changes.
5. Navigate to the frontend of your website. You can emulate a search for "shirt" by visiting the URL "/shop?s=shirt". Confirm that the search query `shirt` effectively displays related products.
6. Head back to the Editor.
7. In the 'Product Collection' block, deactivate the 'Inherit query from template' option.
8. Subsequently, you should observe various settings and filters available in the inspector controls. Modify these filters and settings as required and validate immediately that the changes are visible within the Editor.
9. Save your modifications and return to the frontend of your website.
10. Ensure that the adjustments made to the 'Product Collection' block within the Editor are accurately displayed on the frontend of your website.
#### Testing in Post
1. Create a new post
2. Add Product Collection block to the post
3. With the 'Product Collection' block selected, open the Inspector Controls (located in the right sidebar). Confirm that the option `inherit query from template` does not appear in the list of options. This is because it's relevant only for Product Archive pages and should not be visible in this context.
### Product Collection: Add stock status filter [#9580](https://github.com/woocommerce/woocommerce-blocks/pull/9580)
1. Create a new post
2. Add Product Collection block
3. With the `Product Collection` block selected, check the sidebar for the `Stock status` control. Ensure that it is displayed as shown below:
<img width="267" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/a84b4dcf-caf6-4292-8636-de2f1a139365">
4. Test the functionality of the stock status filter by modifying its selection. Observe that the changes should immediately reflect in the Editor view. For instance, if `On backorder` is the selected option, only products with the `On backorder` status should be visible in the Editor.
5. Save and publish the post.
- Navigate to the live post on the Frontend and verify that the changes you made in the Editor are accurately reflected.
6. Go back to the Editor and confirm that the filters can be reset using the `Reset` or `Reset all` button, as shown below:
<img width="279" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/16707866/dbea8bfc-2d6c-4ece-9236-4b8bf176f5e3">

1
plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md
View File

@ -149,6 +149,7 @@ Every release includes specific testing instructions for new features and bug fi
- [10.2.1](./1021.md)
- [10.2.2](./1022.md)
- [10.3.0](./1030.md)
- [10.4.0](./1040.md)
<!-- FEEDBACK -->
---