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

# Testing notes and ZIP for release 8.4.0

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

## Feature plugin and package inclusion in WooCommerce

### Update the filter `Apply` buttons to match the new designs. ([6958](https://github.com/woocommerce/woocommerce-blocks/pull/6958))

1. Create a new page and add the `All Products` block and the filter pattern containing all filter blocks.
2. Save it and check the buttons look like the `After` screenshot on the editor and the frontend.

| Before | After |
| ------ | ----- |
|     <img width="664" alt="Screenshot 2022-08-22 at 16 03 13" src="https://user-images.githubusercontent.com/186112/185940267-432c2866-c41a-4fda-8b0d-e6fbd3ef397b.png"> |    <img width="684" alt="Screenshot 2022-08-23 at 10 41 03" src="https://user-images.githubusercontent.com/186112/186113450-1e59dfe5-6619-41e9-8f0c-a2e71a8eedde.png">|

### Update the design of the Filter Products by Attribute block. ([6920](https://github.com/woocommerce/woocommerce-blocks/pull/6920))

1. Add the `Filter by Attribute` block to a page.
2. Check that it looks like the new design in the editor and the front-end.
3. Check that the `Reset` button appears when a checkbox is checked.
4. Edit the page and change the Display Style to dropdown.
5. Check that it looks like the new design in the editor and the front-end (it won't look exactly like the design, check [this conversation](p1660817888642199-slack-C02SGH7JBGS) for more context)

| Before | After |
| ------ | ----- |
| <img width="675" alt="Screenshot 2022-08-19 at 11 36 19" src="https://user-images.githubusercontent.com/186112/185591110-209a3767-9701-4564-978c-c61a6b805ff6.png"> | <img width="691" alt="Screenshot 2022-08-19 at 11 35 10" src="https://user-images.githubusercontent.com/186112/185591165-f1216f4b-b8ee-4af6-9519-ddafb437894e.png"> |
|  <img width="668" alt="Screenshot 2022-08-19 at 11 36 41" src="https://user-images.githubusercontent.com/186112/185591294-dd6d531c-5dfc-471a-ad96-6d7b57b63550.png">|   <img width="673" alt="Screenshot 2022-08-19 at 11 37 15" src="https://user-images.githubusercontent.com/186112/185591322-917c6967-289b-44c8-932f-9b29d84be815.png"> |
| <img width="685" alt="Screenshot 2022-08-19 at 11 38 01" src="https://user-images.githubusercontent.com/186112/185591479-b914d75e-b176-485c-93d0-35ac969fbbae.png"> | <img width="670" alt="Screenshot 2022-08-19 at 11 37 28" src="https://user-images.githubusercontent.com/186112/185591503-b0705eba-58ba-4536-b97f-cff5f1761244.png"> |

### Update the design of the Filter by Attribute block settings panel. ([6912](https://github.com/woocommerce/woocommerce-blocks/pull/6912))

1. Add the `Filter by Attribute` block to a page.
2. Check the copy and the design matches with the new design.
3. Check no regression has happened.

### Terms and conditions, and Privacy policy links open in a new tab by default. ([6908](https://github.com/woocommerce/woocommerce-blocks/pull/6908))

1. Insert Checkout page and save the page.
2. On frontend, click on the terms or privacy links in the checkout block.
3. They should open in a new tab.

### Layout updates to the Active Filters block. ([6905](https://github.com/woocommerce/woocommerce-blocks/pull/6905))

1. Add the Active Filters block alongside some other Filters blocks.
2. Apply some filters to the page.
3. Confirm the layout matches the **After** screenshot above.
4. Confirm the **Remove Filter** buttons for each active filter have a hover state of an alternate shade of grey - also confirm they function as expected.

| Before | After |
| ------ | ----- |
|  <img width="725" alt="CleanShot 2022-08-24 at 09 22 27@2x" src="https://user-images.githubusercontent.com/481776/186429719-de3cb516-467a-4635-b336-64bf63b96f9e.png">  |  <img width="650" alt="CleanShot 2022-08-24 at 09 19 27@2x" src="https://user-images.githubusercontent.com/481776/186429883-6bfe4c9d-d7a4-4caf-a31f-72dbd33f88a7.png">  |
|  |  |
|  <img width="725" alt="CleanShot 2022-08-24 at 09 21 47@2x" src="https://user-images.githubusercontent.com/481776/186430028-2f076c50-d6c9-4931-b5d1-347c844c43d1.png">  |  <img width="650" alt="CleanShot 2022-08-24 at 09 20 16@2x" src="https://user-images.githubusercontent.com/481776/186430096-b2841edf-bbc3-47dc-8f36-7b568e697310.png">  |

### Update the design of the Filter Products by Stock block. ([6883](https://github.com/woocommerce/woocommerce-blocks/pull/6883))

1. Add the Filter by Stock component to a page using the All Products block, and also a block template.
2. Check that the control panel for this block looks like the design (minus Typography)
3. On both the page and the template frontends select a checkbox and observe that it looks as it should do with the design.
4. Check that a "Reset" button appears and clicking this resets the filter again.
5. Now go to your Edit Page & Edit Template pages and enable "'Apply filters' button".
6. On the frontends again, re-select your filter options and check that they are not applied immediately until you click "Apply"
7. Check that when this block is used with the PHP template & the All Products block that regardless of whether the "Apply Filters" button is active, that clicking "Reset" immediately clears the selected filter options

| Before | After |
| ------ | ----- |
|    <img width="509" alt="Screenshot 2022-08-17 at 12 33 57" src="https://user-images.githubusercontent.com/8639742/185108568-1c6875e8-10a1-4070-919d-876c42af8a89.png">    |   <img width="555" alt="Screenshot 2022-08-17 at 12 32 28" src="https://user-images.githubusercontent.com/8639742/185410884-45952fdd-14fe-4784-9ba6-c58c248630ad.png">    |

### Update the design of the Filter Products by Price block. ([6877](https://github.com/woocommerce/woocommerce-blocks/pull/6877))

1. Add `Filter Products by Price` block to a page.
2. Verify that the `Inline input fields` only shows when the `Price Range` is Editable.
3. Toggle Inline input fields, see the block in the editor updates accordingly.
4. Toggle Filter button, see the Reset and Apply button.
5. Add the All Products block then save the page.
6. On the front end, see the new style applied as in the editor.
7. Change the price using the slider then click the Apply button.
8. See the filter works as expected.
9. Click on the Reset button, see the price filter is reset. (Even if the filter button is enabled, clicking on the reset button should reset the filter query).
10. Tested again with PHP templates, ensure no regression.

<img width="1256" alt="image" src="https://user-images.githubusercontent.com/5423135/184097877-5210b4c6-907b-404f-bcf3-c7d83c02a563.png">

### Allow making the Cart/Checkout block page the default one from within the editor. ([6867](https://github.com/woocommerce/woocommerce-blocks/pull/6867))

To test this feature you need the latest trunk of WooCommerce, or WooCommerce 6.9.0. For older versions of WC (pre 6.9.0), the notice would show the old text:

<img width="297" alt="image" src="https://user-images.githubusercontent.com/6165348/184404663-11cac5f1-1729-4782-a39f-ee5f101a78a7.png">

1. Make sure you have a Cart and Checkout pages in WooCommerce -> Settings -> Advanced.
2. Those pages urls can be `/cart` and `/checkout`.
3. Open a new page, give it a title, insert Cart block.
4. Select Cart block, you should see the notice, select an inner block, you should see the notice as well.
5. Click on the notice, it will load for a couple of seconds, once it's green, visit your new page.
6. Make sure it's on the previous url, so `/cart`.
7. Go back to settings, make sure your new page is that value there.
8. Do the same thing for Checkout block.
9. Open a new page, add Cart block, save the page and publish it.
10. Select the block or one of its inner blocks, start the flow again.
11. It should work, confirm that by visiting the frontend.

<video src="https://user-images.githubusercontent.com/6165348/183219991-4b904273-67ef-43e1-94fb-7498531f104f.mov" controls="controls" style="max-width: 730px;">
</video>

### Register product search as a core/search variation when available. ([6191](https://github.com/woocommerce/woocommerce-blocks/pull/6191))

1. Ensure the Gutenberg version is ≥ 13.4 and it is deactivated.
2. With a block theme (2022 for example), add the Product Search block to the header.
3. See the Product Search is the independent block (as it is in `trunk`), not a variation of the Search block. See the block is editable in the editor and working as expected on the front end.
4.  Activate Gutenberg.
5. On the front end, see the block is still working as expected and is still a WC block (notice the classes, and search icon).
6. Edit the header, see the Deprecation notice, and a call to action button to upgrade the search block to search variation.
7. Click on the CTA button to see if the block is converted to WC variation of the core search block.
8. Save and see the block functions flawlessly on the front end.
9. Edit the header again, try adding the Product Search block, only variation is available in the inserter. The legacy can't be found and inserted from the inserter.

<video src="https://user-images.githubusercontent.com/5423135/181692749-8ce8ea51-824a-49c3-97e3-fc1c05130fdb.mov" controls="controls" style="max-width: 730px;">
</video>

### Fixed a bug with a class name deriving from a translatable string. ([6914](https://github.com/woocommerce/woocommerce-blocks/pull/6914))

1. Add an item to your cart that has multiple variants. E.g. Hoodie (Blue, Logo)
2. Go to the Cart Block
3. Inspect the text for one of the variants (e.g. Colour: Blue)
4. Make sure there is a class called `wc-block-components-product-details__item` on the `<li>` element. This should be a child of `<ul className="wc-block-components-product-details">`
5. Change the language of your store
6. Refresh the cart page
7. Repeat steps 3 and 4. You should see the same result.