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

Testing notes and ZIP for release 3.2.0

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

Cart & Checkout

Order note

• Go to the Checkout block and check the 'Add a note to your order' checkbox.
• Introduce some text in the text area that appeared.
• Place the order and go to the admin, WooCommerce > Orders and verify the order has the note under Customer provided note.

Autocapitalize address form fields

• Visit the Checkout page with a handheld device with Chrome for Android or iOS Safari.
• Navigate through the input fields in the address form.
• Verify when a field is focused, the keyboard shows capital letters by default according to the settings.

JS-Rendered blocks inside Empty Cart

• Add the Cart block and switch to the Empty Cart edit mode.
• Replace the Newest products block with the All Products block. Feel free to add other JS-rendered blocks like a filter or a Reviews block.
• View the page in the frontend.
• Verify all blocks render correctly when the cart is empty.
• Try adding a product to the cart (so it switches to the Full Cart view) and removing it (so it switches back to the Empty Cart view).
• Verify the blocks still render correctly.

Don't show sale badge if saving are negative

You will need Product Add-ons extension to test this.

• Add a product with a priced add on.
• Add the product to your cart, with the add on enabled.
• See that the price is shown without a negative discount value.

Respect payment gateways order set by merchant

• Set up a few different payment methods.
• Reorder your payment methods how you like in WooCommerce > Settings > Payments, then click Save changes to persist.
• On front end, add stuff to cart and proceed to checkout.
• Payment methods should display using the order you chose.
• Complete a few test purchases to confirm that payment methods are still working and there are no regressions in checkout.
• Also test payment methods that may be hidden based on checkout state, e.g. make COD only available with specific shipping methods.

Show Checkout block in Editor when 'guest checkout' is disabled

• Go to WooCommerce > Settings > Accounts & Privacy and uncheck Allow customers to place orders without an account.
• Edit a page with the Checkout block.
• Verify the whole Checkout block is rendered in the editor, instead of only showing the You must be logged in to checkout. Click here to log in. message.

Remove generic payment methods icons

• Set up Stripe CC (Stripe extension) and Cheque (core) payment methods.
• Set up a page with checkout block, add stuff to cart.
• View checkout and confirm payment method tabs render and function correctly without icons.

Error focus styles for inputs and select

• Go to the Checkout block and press 'Place order` without filling any form detail.
• Tab through the input fields under 'Shipping address' and verify the outline that appears on focus is red in text inputs and selects.
• Repeat the steps above at least with Storefront and Twenty Twenty and with Firefox, Chrome and Safari.

Hide saved payment methods if their gateway is disabled

• Set up checkout block, Stripe CC payment method, check Enable Payment via Saved Cards.
• Complete a purchase with Stripe test card and check the Save payment information to my account for future purchases. checkbox on checkout.
• Go to WooCommerce > Settings > Payments and disable Stripe CC payment method.
• Add new stuff to cart, proceed to checkout.
• Scroll down and verify saved card (e.g. Visa ending in 4242 (expires 02/22)) is not there.

Text overlap with errors and icons

• activate and set up Stripe CC, disable Inline Credit Card Form option.
• Add stuff to cart and proceed to checkout.
• Select stripe credit card payment, don't enter any card details.
• Click Place Order.
• Error messages shouldn't overlap with credit card icons.

Dark mode support for fields and controls

• Test inputs, select, radio, checkbox, quantity selectors, and textarea of Cart and Checkout, they should have light colors and text should be readable.
• Switch the colors of your theme to a dark variation, you can do that in the customizer for storefront or dark mode for TwentyTwenty or TwentySeventeen.
• Switch the blocks to use dark colors in the blocks settings.
• Test inputs, select, radio, checkbox, quantity selectors, and textarea again, make sure nothing is broken and everything is visible.

Use real previews for Cart and Checkout

• Preview the cart and checkout blocks inside the block inserter.
• You should see the actual block, not a white placeholder.
• Make sure the block is not very long and overflowing.
• Make sure the changes didn't leak to the actual block or the editor block, the block should not be cut.

All Products

Broken link for "No Products" placeholder

• In a store with no products (move them to trash).
• Create a new page and add the All Products block.
• Click on the Add new product link and verify it works.

PHP Error notices

• Make sure you have WP_DEBUG set to true.
• Load a page that already contains a product data, so single product or All Products, either in the editor or frontend.
• Make sure no notices are printed to the page, you can check the source code or at the top of the page.

Product Search

Updated styling in Editor

• In the editor, confirm that Product Search input has borders.
• the input should be functional.