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

# Testing notes and ZIP for release 11.2.0

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


## WooCommerce Core

### Related Products: hide the block outside of Single Product Template and Single Product block [#10978](https://github.com/woocommerce/woocommerce-blocks/pull/10978)

1. Go to Single Product template
2. Try to add "Related Products" and "Product Reviews" blocks
3. **Expected:** they should be available in the inserter and should be added normally
4. Save and go to frontend
5. Verify there's no fatal error

---

1. Go to Product Catalog template
2. Try to add "Related Products" and "Product Reviews" blocks
3. **Expected:** they **should NOT** be available in inserter
4. Add Single Product block
5. Try to add "Related Products" and "Product Reviews" in scope of Single Product block
6. **Expected:** they should be available in the inserter and should be added normally
7. Save and go to frontend
8. Verify there's no fatal error

---

1. Create new post
2. Try to add "Related Products" and "Product Reviews" blocks
3. **Expected:** they **should NOT** be available in inserter
4. Add Single Product block
5. Try to add "Related Products" and "Product Reviews" in scope of Single Product block
6. **Expected:** they **should NOT** be available in inserter


### Blockified Order Confirmation [#10056](https://github.com/woocommerce/woocommerce-blocks/pull/10056)

1. Go to Appearance > Editor > Templates > Order Confirmation
2. Convert the legacy order confirmation block to individual blocks using the "transform into blocks" button. Confirm the new blocks appear.
3. Focus on each new block and confirm there is an appropriate icon, title, description, and style controls for each. Play around with text colours, background colours, and any other options available to ensure changes apply in the editor.
4. Save changes.
6. Go to the store frontend, add some items to the cart, and place an order.
7. Confirm the confirmation page matches the styling you applied and all blocks are present. You can leave this tab open for testing.
8. Edit the order confirmation page again. Remove some blocks, for example headings.
9. Save changes, then refresh the confirmation page on the frontend. Confirm changes have applied.

#### Downloadable Products

1. Add a downloadable product to your cart and complete checkout.
2. The order confirmation page will be shown—no downloads will be visible. Leave this tab open.
3. In a new tab, go to store admin and edit the order you just placed. Change its status to "processing". This will grant access to downloads.
4. Go back to the confirmation page and refresh.
5. Confirm the download section is now visible.

#### Unauthenticated Views

1. Place an order as a logged in admin user. Leave the confirmation page open.
2. Copy the page address.
3. Open up a new incognito browser window, or better yet, using a different browser. Paste the URL from earlier.
4. Confirm no order details are visible—you should only see some text and a login link as follows:

![Screenshot 2023-09-01 at 13 14 39](https://github.com/woocommerce/woocommerce-blocks/assets/90977/51884f8d-1f63-4cf8-ad49-0b2f392a8335)

5. Close all tabs and log out from your store.
6. Place a new order as a guest. Confirm the order confirmation page shows some order details, but hides email address, payment method, and the full billing/shipping address. This is the limited view that guests can see.
7. Leave the confirmation page open. Copy the page address.
8. Open up a new incognito browser window, or better yet, using a different browser. Paste the URL from earlier.
9. You should still see details if within 10 minutes of placing the order.
10. Wait 10 minutes then refresh the page.
11. Confirm you see a message asking you to either login or fill out the form to see order details as follows:

![Screenshot 2023-09-01 at 13 17 39](https://github.com/woocommerce/woocommerce-blocks/assets/90977/ae660b14-f50c-43a0-8bee-5a608296206c)

12. Enter the incorrect email. See a notice rejecting the request "We were unable to verify the email address you provided. Please try again.".
13. Enter the correct email. See limited order details.
14. Edit the URL of the page to remove the order key. For example, `checkout/order-received/1772/?key=wc_order_GAE4XxQ4k7E77` would become `checkout/order-received/1772`
15. You should no longer be able to provide your email and see order details. The key is required. You will see a generic message only.

![Screenshot 2023-09-01 at 13 53 30](https://github.com/woocommerce/woocommerce-blocks/assets/90977/382a608a-ffc0-4529-976f-f2b58822bab9)


### Refactor Cart and Checkout Page Templates [#10773](https://github.com/woocommerce/woocommerce-blocks/pull/10773)

Before testing, take note of the frontend appearance of the cart/checkout pages.

1. Using a **non-block** based theme such as Storefront, ensure your existing cart/checkout is unchanged as a result of testing.
2. Use a **block** based theme such as Twenty Twenty Three
3. Go to Appearance > Editor > Templates, navigate to both `Page: Cart` and `Page: Checkout`. For both, click the three dots in the inspector and "revert customisations". This will remove any existing template customisations or past migration.
4. Visit the cart/checkout pages on the frontend and ensure the page contents matches the actual cart/checkout page content.
5. Edit the contents of the checkout **page**, not the template, either from Admin > Pages or Admin > Appearance > Editor > Pages. After saving, confirm the changes are shown on the frontend.
6. Go to Appearance > Editor > Templates and edit the Page: Checkout template. Edit something in the **template**. Save and confirm the frontend shows your change. When adding content to the template, make sure you're not within **Group > Checkout Page**, as this will save to the page not the template. Insert something after or outside of that group.
7. Go to Appearance > Editor > Templates and edit the Page: Checkout template. Click the three dots in the side bar and "revert customisations". Ensure the frontend shows the same default template again without your changes.
8. Switch to a block based theme with a custom cart/checkout template. For example [FotaWP](https://en-gb.wordpress.org/themes/fotawp/)
9. After activating the theme, view the checkout page. You should see a custom checkout template (this is from the theme).
10. Switch back to Twenty Twenty Three—the previous template will be restored.

### Classic Shortcode Block

1. Delete your main cart and checkout pages
3. Go to WooCommerce > Status > Tools > and use the tool to recreate the default woocommerce pages
4. Now if you go to the newly recreated Cart/Checkout pages you'll see a placeholder block which when focussed/clicked will look something like this (copy may differ):

![Screenshot 2023-09-05 at 13 46 00](https://github.com/woocommerce/woocommerce-blocks/assets/90977/c1008319-4da4-4280-9be1-9935a09ceec3)

5. Ensure you see a shortcode cart/checkout on the frontend still.
6. Go to Appearance > Editor > Templates and then Page: Cart and Page: Checkout. Both should show the placeholder.
7. Go to Appearance > Editor > Pages and then the cart/checkout pages. Both should show the placeholder.
8. Edit the page again. Click the classic shortcode placeholder then click the 'convert to blocks' button. Save and view the frontend. You should now see checkout blocks instead of the page content.
9. Likewise, viewing the Templates + Pages in site editor should show the blocks.

### Page Permalink Management

1. Go to WooCommerce > Settings > Advanced and ensure you see classic dropdowns for Cart and Checkout page selector. Compare this with a non blocks theme installation and ensure there are no differences.
2. Edit Cart and Checkout pages, and changes the titles. Go back to the selectors and ensure it is reflected there.
3. Edit Cart and Checkout pages permalinks. Ensure Cart and Checkout work on the selected URLs.

### Test Page Wrapper on Site Editor

1. Got to Appearance > Editor > Templates > Manage all templates
2. Ensure that customizations are deleted for Cart and Checkout templates (if not click the 3 dots next to the template and delete them)
3. Open the templates for each, then edit content with the page placeholder block. Save.
4. Exit the site editor and open Cart and Checkout pages for each. Ensure you see the changes added in the site editor.
5. Verify the changes are reflected on the Cart and Checkout by performing a test order.

### Developer testing

1. Create a fresh instance of JN with previous version of Woocommerce blocks and save some customisations to your cart/checkout page tenplates.
2. Install and activate the zip file for this release.
3. You should now see only one "Page: Checkout" template, and it should contain the customisations you previously made to checkout.

### Fix: Password Protection not respected on single product template [#10999](https://github.com/woocommerce/woocommerce-blocks/pull/10999)

1. Ensure you are using the Blockified Single Product Template.
2. Create a product with password protection.
3. Visit the Product.
4. Ensure that the password form is added and the other blocks related to the Single Product Template are not visible.

### Checkout Block: Prevent changes in the selected shipping method when new rates are added or removed [#10457](https://github.com/woocommerce/woocommerce-blocks/pull/10457)

1. Enable local pickup.
2. Go to the Checkout block page, and add an address for which you don't have a shipping zone defined without changing the selected shipping method.
3. Confirm local pickup is selected as a shipping method for the address, and shipping is not available for the given address.

<img width="543" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/11503784/f807a8b7-f89c-401b-9aa0-7f696c0fa183">

4. In another tab, open shipping zones and add a new rate to your current zone.
5. Refresh checkout.
6. Confirm local pickup is selected as a shipping method for the address, and shipping is also available for the given address.

<img width="541" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/11503784/82ca5ebc-27a7-4b5b-92a1-0b30478bd5ef">


### Product Collection: Transfer layout options from Toolbar to Inspector controls [#10922](https://github.com/woocommerce/woocommerce-blocks/pull/10922)

#### **Case 1: Normal flow**

1. Create a new post.
2. Add the product collection block.
3. **Verify:** In the sidebar settings, the options for layout should be visible with 'Grid' being the default selection. Refer to this screenshot for guidance:
![image](https://github.com/woocommerce/woocommerce-blocks/assets/16707866/9027d748-bf89-4095-af1b-83f28b601808)
4. **Verify:** The products in the editor should be displayed in a grid view by default. Publish the post and ascertain that the grid view is maintained on the frontend.
5. Change the layout setting to 'Stack'. Ensure that in the editor, products now appear in a single column. Save or update the post and check the frontend to confirm the single column display is applied there as well.

#### **Case 2: Reset button**

1. Create a new post and add the product collection block.
2. Open the sidebar settings and note the absence of a 'RESET' option in the layout menu, indicated in the screenshot:

![image](https://github.com/woocommerce/woocommerce-blocks/assets/16707866/f9ebdb6d-ec73-41e4-a67a-2edde561ca89)

3. Change the layout from 'Grid' to 'Stack'. Open the settings menu again to find the 'RESET' button now visible, as shown here:

![image](https://github.com/woocommerce/woocommerce-blocks/assets/16707866/a378eeb1-3dae-4431-99d8-db3ed6084a74)

4. Verify that clicking the 'RESET' button changes the layout back to 'Grid'. Similarly, clicking the 'Reset all' button should revert the layout to 'Grid'.

### Single Product: Fix the Align setting [#10977](https://github.com/woocommerce/woocommerce-blocks/pull/10977)

1. `Product Hero` pattern to a new page.
2. Change the `Align` to full.
3. Make sure the change is reflected on the front end.

### Update `postcode-validator` to 3.8.15 to validate "new" Taiwanese postcodes [#10924](https://github.com/woocommerce/woocommerce-blocks/pull/10924)

1. Add an item to your cart.
2. Go to the Checkout block.
3. Enter your address and choose Taiwan as the country. Enter a postcode with 5 digits. (`12345`) verify there is no validation error.
4. Enter a postcode with 6 digits (`123456`), verify there is no validation error.
5. Check out successfully using a Taiwanese postcode.

### Hide unexpected bullet point in Product Collection on Storefront [#10945](https://github.com/woocommerce/woocommerce-blocks/pull/10945)

1. Use Storefront theme
2. Create new post
3. Add Product Collection block
4. Make sure there are no bullet points before the products
5. Publish the post and go to frontend
6. Make sure there are no bullet points before the products

| Before | After |
| ------ | ----- |
|<img alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/b7cb7ac7-5f7d-4db0-b5bf-ccd1949eb767">|<img alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/5d3a07a7-3403-47dc-ae5d-a39243c9777b">

### Add custom regex for validating Nicaraguan postal codes [#10928](https://github.com/woocommerce/woocommerce-blocks/pull/10928)

1. Add the Cart block to a test page.
2. Enable the `Shipping calculator` in the Shipping inner block.
3. Add the Checkout block to another test page.
4. Add a test product to the cart via the frontend.
5. Navigate to the test page with the Cart block and click `Change address` in the Shipping section.
6. Select `Nicaragua` as the country and enter a 5-digit postal code (e.g., `13024`).
7. See that that validation passes.
8. Navigate to the test page with the Checkout block.
9. Repeat steps 6-7.
10. Change the postal code to `01234`, and see that the validation fails.
11. Change the postal code to anything other than 5 digits, and see that the validation also fails.


### Add pattern chooser in Product Collection [#10876](https://github.com/woocommerce/woocommerce-blocks/pull/10876)

1. Go to Editor
2. Add Product Collection blocks with different configiurations, e.g.
    - one that inherits query from template
    - one that has "On Sale" filter enabled with limited number of products per page
    - one that shows handpicked products
3. Focus on first Product Collection block you added and click "Choose pattern"
4. Expected: Modal with 4 patterns is displayed
5. Click some pattern
6. Expected: Layout of Product Collection has changed reflecting what you chose, but the query settings are preserved (e.g. enabled inherit query from template or "On Sale" filter)
7. Repeat for other Product Collection blocks.

#### Screencast

<https://github.com/woocommerce/woocommerce-blocks/assets/20098064/edfd2ddc-4cf1-41aa-a375-bbd5201bb603>


### BlockTemplatesController: Check that $attributes['theme'] value isset before operating on it [#10879](https://github.com/woocommerce/woocommerce-blocks/pull/10879)

1. Load WooCommerce template parts in the Site Editor and check they are all there and load as expected.
2. Customize the template parts (e.g. Checkout Header) and check this is reflect on the frontend.
3. Clear the customizations, revisit the frontend and check they are expected.


---

### Should be tested by the development team exclusively

#### Remove order and checkout order endpoints experimental flag [#11022](https://github.com/woocommerce/woocommerce-blocks/pull/11022)

1. Test the [Add an endpoint for getting pay for order orders](https://github.com/woocommerce/woocommerce-blocks/pull/8960) and [checkout order](https://github.com/woocommerce/woocommerce-blocks/pull/10287) endpoints.

#### WooExpress: Fix Checkout and Cart Blocks Editor Crash [#11024](https://github.com/woocommerce/woocommerce-blocks/pull/11024)

You'll need a WooExpress site. You can create one for free from [here](https://woocommerce.com/express/).

To upload Woo Blocks ZIP file, you can either upgrade your WooExpress site or use the CLI.

##### Ensure the block-locking feature is still working

1. Go to `Appearance -> Editor -> Templates -> Checkout` (or Cart)
2. Clear customizations of the Checkout (or Cart) template if necessary and reload the page

<img width="355" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/14235870/9d66bbd7-d62e-418e-87bd-93cec9141ff9">

3. Click on `Edit` to access the template editor

<img width="355" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/14235870/fe676b09-c7fb-495b-8297-05d6f231e87d">

4. Within the Checkout (or Cart) template editor, open the `List View` and try to delete the `Gift Card Form` or the `Gift Card Totals` Blocks. Untick `Prevent removal` under the `Unlock` option:

<img width="500" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/14235870/fa30d66d-007f-4900-8057-46ee338535e8">

<img width="500" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/14235870/94c45576-e74d-4cdf-a623-0a91a85b2462">

5. Ensure the `Gift Card Form` (or `Gift Card Totals`) Block isn't deleted (It's actually being reinserted each time we click on `Delete)`)

##### Test removing the Checkout (or Cart) Blocks in the Editor

1. Try to delete the Checkout (or Cart) Block

<img width="563" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/14235870/4a403b80-f314-4df0-8c13-7d33907f3be0">

2. Ensure the Checkout (or Cart) Block is successfully deleted

#### Store Customization > Schedule an action to update the patterns content whenever the business description is changed [#10956](https://github.com/woocommerce/woocommerce-blocks/pull/10956)

1. Install and activate the `woo-ai` plugin (it is available within the [WooCommerce monorepo](https://github.com/woocommerce/woocommerce), under the plugins directory).
2. From your dashboard, head over to WooCommerce > Settings > Advanced > Features
3. Fill out a description for your business and save

<img width="1044" alt="Screenshot 2023-09-16 at 09 22 29" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/da3e8fc8-9e23-49a8-90ff-06d217192ece">

5. Now head over to Tools > Scheduled Actions
6. Search for the woocommerce_update_patterns_content hook
7. Make sure the action was successfully scheduled:

<img width="1032" alt="Screenshot 2023-09-16 at 09 27 23" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/38efee14-bfc4-486c-8dcc-373963562603">

8. If the status is still Pending when you check, click on Run and ensure it is successfully executed. If the status is already Complete, no action is required as the process already finished successfully.
9. Check your error log and make sure you don't see any PHP errors.

#### Store Customization > Create a new endpoint within Store API for updating patterns with AI-generated content [#10881](https://github.com/woocommerce/woocommerce-blocks/pull/10881)


1. Create a new [JN install](https://jurassic.ninja/) with both Jetpack and Woocommerce installed and activated.

2. In your wp-admin, you should see the following section for Jetpack:

<img width="1803" alt="Screenshot 2023-09-11 at 18 55 38" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/fc804759-f724-4fa2-829d-7bfd441962ec">

3. Click on "Set up Jetpack" and make sure the connection is successful:

<img width="1994" alt="Screenshot 2023-09-11 at 18 58 30" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/661ee4c5-a0ac-40fd-9e5e-835a0e4c1cb7">


4. Using [Postman](https://www.postman.com/) or any other equivalent app, make a POST request to the following endpoint: `wp-json/wc/store/patterns` (e.g. `https://outside-dwelling.jurassic.ninja/wp-json/wc/store/patterns`). Since you are not authenticated, you should get the following error:

<img width="748" alt="Screenshot 2023-09-13 at 16 25 45" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/fee21120-392a-4c7f-abe7-e70a3999ff32">

5. Now, we need to make sure the request works for admin users: you can do so by adding your credentials via Postman directly or, alternatively:

- From your admin screen, click on Tools > Plugin editor:

<img width="337" alt="Screenshot 2023-09-11 at 18 34 23" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/c353bd13-bf00-4bc8-93d6-d827ca99997f">

- Select the WooCommerce Blocks plugin and add the following within your woocommerce-blocks/woocommerce-gutenberg-products-block.php file:

```php
function connect_to_endpoint() {
	update_option( 'woocommerce_blocks_allow_ai_connection', true );

	$request = new WP_REST_Request( 'POST', '/wc/store/patterns' );

	$request->set_param( 'business_description', 'selling art' );

	$response = rest_do_request( $request )->get_data();

	error_log( print_r( $response, true ) );
}

add_action( 'admin_init', 'connect_to_endpoint' );
```

- Now access your JN install via SSH (you can copy the command for access over here:)

<img width="346" alt="Screenshot 2023-09-11 at 18 38 44" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/419f338f-d203-4bec-8f78-4589d5ad3ad2">

- Head over to your wp-content directory and tail the debug.log file. Example:

```terminal
cd /srv/users/user964902c9/apps/{insert-your-jurassic-ninja-username-here}/public/wp-content
tail -f debug.log
```

- Now go back to your browser and refresh the page in the main admin page e.g. `https://your-site.jurassic.ninja/wp-admin`

- Go back to your terminal and confirm that you can see the following response:

<img width="475" alt="Screenshot 2023-09-13 at 16 43 52" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/95917fdf-c55d-457a-a4ed-e3f08a1179d3">