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

Testing notes and ZIP for release 11.6.0

Zip file for testing: woocommerce-gutenberg-products-block.zip

Testing Notes

Make "Use same address for billing" visible by default #11804

1. Open an incognito/guest session
2. Add some to your cart
3. Go to checkout
4. Confirm that on entry, the "Use same address for billing" checkbox is visible.

Fix the order endpoint tax line items format #11796

1. Test the order endpoint wp-json/wc/store/v1/order/{ORDER_NUMBER}?key={KEY}&billing_email={BILLING_EMAIL}
2. See the tax lines format

Before	After

Continue validating schema after validating nested properties #11792

This requires code, so this should only be tested by developers.

1. Testing code:

Add this to functions.php or the main plugin file:

woocommerce_store_api_register_endpoint_data(
	array(
		'endpoint'        => \Automattic\WooCommerce\StoreApi\Schemas\V1\CheckoutSchema::IDENTIFIER,
		'namespace'       => 'my-extension-test',
		'schema_callback' => function () {
			return [
				'my_field' => array(
					'description' => 'test 1',
					'type'        => 'string',
					'context'     => array( 'view', 'edit' ),
					'default'     => '',
				)
			];
		},
	)
);

woocommerce_store_api_register_endpoint_data(
	array(
		'endpoint'        => \Automattic\WooCommerce\StoreApi\Schemas\V1\CheckoutSchema::IDENTIFIER,
		'namespace'       => 'my-extension-test-2',
		'schema_callback' => function () {
			return [
				'my_field' => array(
					'description' => 'test 2',
					'type'        => 'string',
					'context'     => array( 'view', 'edit' ),
					'required'    => true,
				)
			];
		},
	)
);

This registers 2 additional schemas on the checkout route.

2. Try to place an order. You will get an error notice: extensions > my-extension-test is not of type object.
3. Open console and run this: wp.data.dispatch( 'wc/store/checkout' ).__internalSetExtensionData( 'my-extension-test', { 'my_field': 'test' } ); This adds data for the first schema.
4. Place order again. This time you'll see extensions > my-extension-test-2 is not of type object.. This is what was fixed.
5. Open console and run this: wp.data.dispatch( 'wc/store/checkout' ).__internalSetExtensionData( 'my-extension-test-2', { 'my_field': 'test' } ); This adds data for the second schema.
6. Place order again. It should go through successfully.

Product Collection - New 'No Results' block with default UI #11783

Case 1: Normal

1. Create a new post & add Product Collection block

2. Verify that there is "No results" block, which UI should look like this:

3. Save the post & verify on Frontend that "No results" blocks work as expected:

   • Note: This block will be only visible if there are no products to show on the frontend. You can achieve this by changing the filters in Inspector control such that there are no products to show for those filters. For example, try setting "Stock Status" filter to only "On backorder".

4. There are two links on frontend:

   • store's home: Verify that "store's home" link takes you to the home page of the store.
   • clearing any filters: This functionality is tested in Case 2.

Case 2: Testing clearing any filters link

1. Create a new post.
2. Add filters blocks, i.e. Filter by Price, Filter by Stock, Filter by Attribute, Filter by Rating, etc. You can use a pattern called "Product Filters" which contains all the filters.
3. Add Product Collection block & publish the post
4. Go to frontend:
   • Change all filter block values so that there are no products for selected filters and no results block becomes visible. URL will look something like this: http://store.local/162-2/?filter_stock_status=instock&filter_color=blue%2Cgray&query_type_color=or&min_price=29&max_price=32
   • Click on "clearing any filters" link & verify that it clears all filter values.
   • TO BE TESTED BY DEVELOPERS
     • You can also add some random query variables to URL, for example &random=value & URL will look something like this: http://store.local/162-2/?filter_stock_status=instock&filter_color=blue%2Cgray&query_type_color=or&min_price=29&max_price=32&random=value
       • Verify that clicking on clearing any filters only removes query variables that are related to filters & doesn't remove this random query variable we added.

Case 3: Adding styles to "No results" block

1. Create a new post & add Product Collection block.
2. Select "No results" block & change styles using Inspector control, i.e.:
   • Text, Background & Link color
   • Typography: Font family, appearance, line height, decoration etc.
3. Verify the changes made to these styles are visible on Editor.
4. Publish the post & verify that changes are visible on Frontend as well.

Case 4: Adding/removing blocks

1. Create a new post & add Product Collection block.
2. In “No results” block:
   1. Verify that you can remove existing blocks.
   2. Verify that you can add new blocks to it.
   3. Verify that the above changes are reflected correctly on the frontend.

Here is a quick demo

Move all totals components into components package #11773

1. Install Extra Fees Plugin for WooCommerce

2. Set it up like so and save your changes: (Please choose a product in your store if you don't have "Belt")

3. Set up taxes in your store and ensure some items are taxed.

4. Add these items, and the item with a fee from step 2 to your cart.

5. Go to the Cart block and see your "Extra fee" line.

6. Ensure all the other totals elements appear, e.g. Taxes, Subtotal, Shipping, and Total.

7. Go to the Checkout block and check the same elements appear correctly.

Increase CSS specificity for local pickup address #11772

1. Go to /wp-admin/admin.php?page=wc-settings&tab=shipping&section=pickup_location.
2. Enable local pickup option.
3. Add a pickup location.
4. Create a test page and add the Checkout block to it.
5. Go to the frontend and add a product to the cart.
6. Go to the test page with the Checkout block.
7. Select the shipping method Local Pickup.
8. Verify that the local pickup address is left aligned.

Before:

After:

Fix strings in classic-checkout modal window #11771

1. Install and activate an incompatible extension e.g. helper-plugin-1.zip
2. Edit the checkout page. Ensure its using blocks, if its not, insert the checkout block and refresh
3. In the inspector you should see an incompatible extension notice. Click "Switch to classic checkout"
4. In the modal window, verify the next reads "If you continue, the checkout block will be replaced with the classic experience powered by shortcodes. This means that you may lose:"

Fix hardcoded shop link in "Hero Product 3 Split" pattern #11767

1. Create a new page or post and insert the "Hero Product 3 Split" pattern.
2. Save, go to the front end and make sure the Shop now button takes you to the correct Shop page of your site.

Move Button, StoreNotice and StoreNoticesContainer components into the components package #11766

1. Install the WooCommerce Stripe Payment Gateway
2. Add something to your cart.
3. Visit the Cart & Checkout and make sure all the buttons appear and function as expected.
4. Try to make a payment with a random stripe card (or an known invalid one).
5. You should see a notice appear in the payment section of the checkout.

Refactor default editing state for customer address fields #11765

1. Go to admin and edit the checkout page
2. Switch between "Local Pickup" and "Shipping" in the preview. Ensure fields for shipping address/billing address remain visible.
3. Go to the frontend checkout as a guest user. Fields should start open.
4. Fill out the address fields and refresh the checkout. Fields should condense.
5. Toggle the "Use same address for billing" checkbox. Fields should be open.
6. Fill out the billing address using different data to shipping address then refresh the page. Address should be condensed.

Move Panel to components package #11698

1. Install Multiple Packages for WooCommerce and go to the settings for it (WooCommerce -> Settings) set the grouping option to Individual.

2. Ensure you have a few different shipping methods set up.

3. Add multiple items to your cart.

4. Go to the Cart block, ensure there are panels in the sidebar that can collapse/expand to show shipping options for each product.

   

5. Go to the Checkout block. Shrink your screen to mobile size.

6. Ensure the "Order summary" panel appears and can be collapsed/expanded to show the items in your order.

Closed	Open

Translate Related Products heading in Single Product template #11693

Prerequisites

1. Make sure your store is using DEFAULT blockified template. It may require creating a new store
2. Change your store language to something else than English (e.g. Spanish - Espanol)
3. You may need to update the translations (go to Dashboard -> Updates -> Update translations)

Default template

1. Go to Editor and edit "Single Product" template (Producto individual)
2. Check the Related Products heading is translated and has top and bottom margin

Transform from classic template

1. Go to Editor and edit "Single Product" template (Producto individual)
2. Remove the content and add classic template: "WooCommerce Single Product Block"
3. Focus on it and click "Transform into blocks"
4. Check the Related Products heading is translated and has top and bottom margin

Before	After

Remove author, sticky, parents attributes from the Product Collection block in patterns #11673

1. Go to Editor
2. Add following patterns

• Product Collection 3 Columns
• Product Collection 4 Columns
• Product Collection 5 Columns
• Product Collection: Featured Products 5 Columns
• Product Collection Full Grid
• Product Collection Grid
• Product Collection Rows
• Product Collection Simple Grid
• Product Gallery

3. Make sure they are rendered correctly and there's no errors/warnings
4. Save and go to frontend
5. Make sure they are rendered correctly and there's no errors/warnings

Move TextInput, ValidatedTextInput and ValidationInputError to the @woocommerce/blocks-components package. #11654

1. Ensure your site has coupons enabled and one is added.
2. Add items to your cart and go to the Cart block.
3. Add a coupon to your cart using the "Add a coupon" link in the sidebar. Ensure the textbox to enter the coupon in works OK.
4. Remove the coupon and add another one. This time use an invalid coupon. The textbox should go into an error state with an error message beneath.
5. Do the same on the Checkout block.
6. On the Checkout block, ensure you can enter your address in the text inputs.
7. Ensure the country select works. Choose United States.
8. Ensure the state select works. Choose any state.

Move phone to default fields section instead of being handled inline #11651

1. In the editor, disable the phone number. Make sure it's no longer visible in Checkout and you can place an order without it.
2. Make the phone optional, make sure it's visible but with an optional label, and that you can place an order without filling it.
3. Make the phone required. Make sure the field is visible without the optional label. Make sure you can't place an order without filling that field, and that errors are visible.
4. In the inspector, make sure the field type is tel and not text.
5. When you fill the phone field, and uncheck the "use shipping as billing" checkbox, you should see the same value in the billing one.

Add to Cart with Options block: fix inconsistency between editor and frontend #11614

0. Make sure you are using a block theme.
1. In the editor, go to Appearance > Editor > Templates > Single Product. On the frontend, open the page of any simple product.
2. Verify the Add to Cart form looks the same in both views.
3. Test with WP 6.3 & Gutenberg disabled and WP 6.4 & Gutenberg enabled (you can use this plugin to update to WP 6.4 before it's released).
4. Test with different block themes.

Theme	Before	After
Twenty-Twenty Four
Twenty-Twenty Three
Twenty-Twenty Two

Migration of Product Collection and Product Button blocks to the new store() API #11558

1. Load a template that contains with Product Button blocks
2. Test that it keeps working as exactly as it is working on trunk

Product Button: Remove the hardcoded width and padding #11537

1. Add the 4-Column Product Row pattern to a post or a page.
2. Go to the front end and try re-sizing the viewport.
3. Make sure the buttons are not overflowing.
4. Try adding products to the cart. Make sure there's no odd visual behavior.
5. Go to the Shop page and make sure the buttons look and behave correctly.
6. Try testing with regular, wide and full width.

Before	After

Product Collection: Add support for filtering products by featured status #11522

Case 1: Normal

1. Create a new post & add "Product Collection (Beta)" block to it.

2. In the inspector controls, select the three dots on the filters panel.

   

3. Confirm the visibility of the "Featured" filter.

4. Click "Featured" to add the Featured filter to the Inspector controls. Ensure it matches the screenshot provided:

5. Toggle the button to the ON position and confirm that only featured products are displayed in the Editor.

6. Publish the post and inspect the frontend, verifying that only featured products are visible.

7. Furthermore, confirm that toggling to the OFF position displays all products in both the Editor and frontend.

Case 2: Resetting the value of the Featured filter

1. Follow the steps in Case 1 to add the Featured filter to the Inspector controls.
2. Toggle it to the ON position to display only featured products in the Editor.
3. Verify the ability to reset the filter using both options shown in the screenshot below:

• Click on "Featured" row itself
• Click on "Reset all" button.

Case 3: Ensuring older blocks aren't broken (To be tested by developers only)

1. Switch to the trunk branch.
2. Create a new post and add "Product Collection (Beta)" block.
3. Save and publish the post.
4. Switch to the branch named add/11358-product-collection-featured-products-filter.
5. Verify that everything functions as expected in both the saved post's Editor and frontend.

Fix the Layout for Shipping and Billing Address Forms in the Checkout Block #11486

1. Add a product to the cart
2. Go to the Checkout Block
3. Check the shipping or billing address form fields
4. Set the country to Hungary. Confirm there are no empty spaces in the form and the layout is the same in the classic checkout
5. Set the country to Japan. Confirm the layout is similar to the classic checkout

Before	After

Product Button: always enqueue the store #11858

1. Add Price Filter.
2. Add Product Collection.
3. Go to frontend.
4. Set the price filters in a way that there are no products displayed, for example, slide min price fully to the right.
5. Open the console.
6. Ensure no error is visible.

Fix arguments passed to woocommerce_before_thankyou to mirror core hook #11862

From the issue (requires code):

1. Implement a function that expects an integer for the order ID, attached to the woocommerce_before_thankyou hook.

function test_function_11851( int $order_id ): void {
    printf( 'Hello, this is order %d', $order_id );
}
add_action( 'woocommerce_before_thankyou', 'test_function_11851' );

2. Place an order on the WooCommerce store.
3. Thanks page should show without errors. Should see Hello, this is order X

Validate coupon usage against customer id AND emails #11860

From logged in to logged out

1. Create a new coupon and limit its usage to 1 per customer.
2. Logged in, with an email you remember, place an order using that coupon, it should pass.
3. Logged out, using the same email, try placing an order with that coupon, you should get a top level error "coupon_name" was removed from the cart. Coupon usage limit has been reached.".

User email vs billing email

1. Create a new coupon and limit its usage to 1 per customer.
2. Logged in, with an user email you remember, place an order using that coupon, and a different billing email. It should pass.
3. Logged out, using the same user email (not the billing email), try placing an order with that coupon, you should get a top level error "coupon_name" was removed from the cart. Coupon usage limit has been reached.".

From logged out to logged in

1. Create a new coupon and limit its usage to 1 per customer.
2. Logged out, use the coupon with an email you remember, that email should belong to an existing user.
3. You should be able to place the order fine.
4. Logged in with the user that own that email.
5. Go to checkout, add the coupon, using the same email, try to place the order.
6. You should get a top level error.
7. Change your billing email to something else, add the coupon again.
8. Try to place the order, you should get an error.

General regression testing

1. Create a new coupon and limit its usage to 1 per customer.
2. Logged in, with an email you remember, place an order using that coupon, it should pass.
3. Logged in again, back to checkout, change your email, and try adding the coupon, you should get an inline error that you can't use the coupon.