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

Testing notes and ZIP for release 11.0.0

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

WooCommerce Core

Enhancements

Enable Product Collection as a core feature #10524

This PR enables a block that's been developed for a couple of months. Product Collection includes many functionalities and each of the changes at the moment of merging the particular functionalities. I don't think we should test ALL of them again, especially since the testing steps would be unreadable. However, I believe the major paths should be re-tested.

In some cases, I linked PRs. In that case, please refer to the testing scenarios from respective PR:

Major scenarios

Inserting

0. This PR should be tested in production build, so use npm run build:deploy if you test locally. Ignore this step when testing plugin as a whole.
1. Go to Editor
2. Type "Product Collection" and "Products (Beta)"
3. In both cases Product Collection (Beta) should appear in the inserter
4. Try to insert it
5. It should appear correctly in the Editor
6. Save and make sure it displays correctly in the Frontend

Inherit from query template

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.

Filters

1. Add Product Collection and Products (Beta) block side by side
2. Disable "Inherit query from template" in both
3. Set of filters should appear in the Inspector Controls
4. Play around with the filters setting up the same conditions in both cases (be aware Product Collection offers more filters than Products (Beta), so you may not be able to recreate all of the scenarios in Products (Beta) block)
5. Treat Products (Beta) block as a reference - the results in product grid should be the same in both cases. We look for discrepancies between blocks. Keep in mind in some scenarios filters may be mutually exclusive or there may be some existing bugs. If they occur in both blocks, feel free to report it but it's not a blocker to release Product Collection.

Global Styles

1. Add Product Collection and Products (Beta) block side by side
2. Play around with the Global Styles of Product Collection/Products, Product Template and particular Product Elements.
3. As in case of Filters we look for discrepancies between blocks. If there's bug that occur in both blocks, feel free to report it but it's not a blocker to release Product Collection.

Product Elements

1. Make sure you're able to add all of the following blocks in Product Template of Products Collection

• Product Image
• Product Title
• Product Price
• Product SKU
• Product Summary
• Product Rating
• Product Stock Indicator
• On sale badge
• Add to Cart Button

Others - play with it

1. Play with Product Collection as you would as a merchant. Test it, try to break it. Think of stuff we didn't think of and try it out!

Enable manual migration of Products to Product Collection #10655

1. Go to Editor and add at least two Products (Beta) block
2. In one of them disable "Inherit query from template" and apply some advanced filters, for example, "Handpicked products"
3. Focus on either of the Products (Beta) block
4. Expected: There's an Upgrade Notice in Inspector Controls

5. Click "Upgrade to Product Collection"
6. Expected: all Products (Beta) blocks should be replaced with Product Collection blocks preserving the block settings (filters)

Footer Patterns > Ensure the “My Account” text has the same font size as the other texts nearby #10614

Before	After

1. Create a new post
2. Insert the Large Footer, Large Footer Dark, Simple Footer and the Simple Footer Dark patterns
3. Make sure the size of the My Account text is the same when compared with other texts in the footer (as demonstrated in the "After" column in the description of this PR).
4. Publish the post and make sure the patterns are correctly displayed on the FE as well.

Testimonials Single Pattern > Update the image format and content width #10600

Before	After

1. Create a new post
2. Insert the Testimonials Single Pattern
3. Make sure the pattern is correctly displayed in the editor
4. Save the post and head over to the front end: make sure the pattern is correctly displayed both on desktop and mobile view (the layout should match the one demonstrated in the above screenshots in the After column).

Bug Fixes

Fix UI misalignment of Filter by Price in TT1 theme #10732

1. On TT1 theme
2. Create new post
3. Add Filter by Price and Products (Beta) so filter is displayed
4. Make sure it looks like on screenshots (nice UI alignment) and they're functional (change values)
5. Repeat on TT2 and TT3 to make sure they stayed untouched
6. Check on Chrome, Firefox, Safari

Before	After

Make View Cart link displayed below the Add to Cart button #10675

1. Edit Product Catalog template
2. Add Products (Beta) block if it's not there already
3. Save and go to frontend
4. Add a simple product to cart
5. Expected: "View Cart" link appears BELOW the Add to Cart button

Before	After

Store Breadcrumbs block: Fix icon color when block is selected in List View #10652

1. 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.
2. On the left-hand side menu, click on Appearance > Editor > Templates
3. Find and select the 'Single Product' template from the list.
4. 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.
5. On the top-right side, click on the Save button.
6. On the left side, check the List View and select the 'Store Breadcrumbs' block. Make sure the icon changes it's color from a dark color to a white color when the block is selected on the list

Before	After

Dispatch the wc-blocks_render_blocks_frontend event when rendering the empty cart block #10619

1. Add the Cart block and switch to the Empty Cart edit mode.
2. Replace the Newest products block with the All Products block.
3. View the page in the frontend.
4. 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.

Remove client side navigation from Products beta block #10636

1. Create a new post
2. Add Products (Beta) block & publish it
3. On Frontend, verify that
   1. Client-side navigation isn't there anymore i.e. changing the page should also refresh the page
   2. Verify that Product button(Add to cart) still works as expected.

Should be tested by the development team exclusively

Bug Fixes

Refactor block variation registration in product-collection #10701

1. Since the issue was reproducible in Production build, so run npm run build:deploy to create a production build
2. Create a new post.
3. Insert a 'Product Collection' block.
4. Ensure you can include a 'Product Summary' block within it using the block inserter.
5. Upon adding the 'Product Summary' block, publish the post and check that the 'Product Collection' block is displayed accurately on the frontend.

Fix "On sale" badge class #10634

Before	After

1. Checkout to the PR branch and run npm run start.
2. Enable a blocks theme (like TT3).
3. Create a new page or post.
4. Add the Products (Beta), Products Collection, Products by Attribute, Products by Tag, Products by Category, Handpicked products, and All products blocks.
5. Check the Sale badge is shown on the top-right corner of the image on all of them, in the editor, and in the frontend.
6. Go to the classic shop page and check the Sale badge also shows in the top-right corner of the product image.
7. Repeat steps 3 to 6 with Storefront enabled.