Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/911.md

277 lines
12 KiB
Markdown
Raw Normal View History

Release: 9.1.1 (https://github.com/woocommerce/woocommerce-blocks/pull/7948) * Empty commit for release pull request * Update the readme file with 9.1.1 release changes * Product Query: Add `Sorted by title` preset. (https://github.com/woocommerce/woocommerce-blocks/pull/7949) * Add `Sort by title` preset. * sorted, thanks @nerrad * Update the readme file with woocommerce/woocommerce-blocks#7949 changes * 9.1.1 Release: Add testing docs * Atomic Block: fix ancestor definition (https://github.com/woocommerce/woocommerce-blocks/pull/7947) * Fix the incorrect layout of Rating and Price in Classic Template and Products block (https://github.com/woocommerce/woocommerce-blocks/pull/7932) * Fix the incorrect layout of Rating and Price in Classic Template There were styles required in Rating Filter that were added globally and influenced the layout of Rating in Products block as well as Classic template. The styles were moved to the Rating Filter block * Add dropdown version of Filter by Stock Status (https://github.com/woocommerce/woocommerce-blocks/pull/7831) * Extend Filter by Stock Editor options with dropdown and single/multiple choice * Add dropdown implementation for Filter by Stock Status * Adjust font-sizes to the rest of the filters * Add tests to Filter by Stock: dropdown and list variants * Change test file extension from .js to .tsx, so it handles types as well * Add E2E test to Filter by Stock checking if display style can be toggled * When typing in Filter by Stock dropdown, handle the space so it highlights the suggestions * Change the name of the filter blocks in the test files * Remove unnecessary waiting step in E2E test for Filter by Stock toMatchElement waits for an element for 30s by itself, hence waitForSelector usage was removed * Improve the STOCK_STATUS_OPTIONS type handling * Extract onDropdownChange function instead of inline arrow function * Fix overlaping dropdown content with the wrapper when Filter by Stock was set to single * Product Query: Add patterns (https://github.com/woocommerce/woocommerce-blocks/pull/7857) * Product Query: First attempt at adding patterns * Product Query: Update patterns and the default block template * Product Query: And new and update existing patterns * Product Query: Adjust layout of the Minimal Product Row pattern * Product Query: Update pattern names * Product Query: Polish spaces between blocks inside the patterns * Product Query patterns: Link product titles and improve spacing between product elements * Product Query patterns: Button font-size update * Product Query patterns: Center the pagination * Product Query patterns: Center the pagination for the default pattern * Product Query patterns: Remove an empty column * Product Query patterns: Remove an empty column from the product list with 1:1 images pattern * Add dropdown version of Filter by Rating (https://github.com/woocommerce/woocommerce-blocks/pull/7771) * Rename the setting section to match Filter by Attribute * Add Display Style toggle to the block settings * Set list as a default value of displayStyle for Filter by Rating * Add dropdown variant of Filter by Rating * Extend the Editor settings with selectType: single or multiple * Adjust the styles of a FormTokenField to other dropdown * Align Editor settings order and wording between Filter by Attribute and Rating * Fix the issue with cut off corners of dropdown borders * Provide translated screen reader messages and placeholder * Revert the label property, which is necessary to display checkbox list * Make classname for Rating component optional and remove styling in Filter by Rating * Cover the case when filter with zero products needs string methods for comparison * Handle Typescript errors and add ts-ignore annotations when necessary * Remove explicit key prop assignment in Rating component * Remove leftover property in type definition * Refactor JSX element extension with custom properties to more robust way with object copy * Filter by rating tests (https://github.com/woocommerce/woocommerce-blocks/pull/7845) * Filter by Rating tests: - List single - List multiple - Dropdown single - Dropdown multiple * Adjust the font-size of Filter by Rating dropdown to the rest of the filters * Fix E2E tests after the Editor settings label has been changed * Improve sorting in Filter by Rating dropdown With this change the order of options is always descending: in the chips, suggestions, active filters and URL * Change the name of the filter blocks in the test files * Prevent single dropdown input to overflow the wrapper The issue is fixed in three filters, hence a new shared styles file is created at the path assets/js/blocks/shared/styles/style.css * Remove the unused styles of active options in Filter by Rating Chosen options in Filter by Rating list have been bolded. That was the only filter that was doing it. Class was removed, but not the styles themselves which became obsolete. Removing the leftover styles then * Change the approach of shared styles to fix the dropdown issue in filters Instead of using direct classes, rewrite it to mixin and include in the filters * Fix the Filter by Rating with Products block The problem was with the Products block, that there was incorrect initial value of product ratings query * Align the logic of getting the filters from URL for Filter by Rating with Filter by Stock Co-authored-by: Luigi Teschio <gigitux@gmail.com> * Product Query - Enable "Inherit Query from template" option (https://github.com/woocommerce/woocommerce-blocks/pull/7641) * Add Inherit Query from template option * Update label * Product Elements: Fix block settings (https://github.com/woocommerce/woocommerce-blocks/pull/7914) * Product Elements: Fix block settings * Rating: Fix inactive star color * Product Rating: Fix color inheritance * StyleAttributesUtils: Fix PHP notices and invalid CSS output (https://github.com/woocommerce/woocommerce-blocks/pull/7909) * StyleAttributesUtils: Fix PHP notices and invalid CSS output. Closes woocommerce/woocommerce-blocks#7899. * StyleAttributesUtils: Fix border radius and width support * StyleAttributesUtils: Fix border radius and border color support * StyleAttributesUtils: Include additional checks to deal with PHP warnings * StyleAttributesUtils: Improve the custom border array check * Update MiniCart.php to fix price total amount on page load prices are including tax (https://github.com/woocommerce/woocommerce-blocks/pull/7832) * Update MiniCart.php Added an update to the '$cart_contents_total' variable on the 'get_cart_price_markup' function if $cart->display_prices_including_tax is active. Currently displaying wrong amount total on page load if items are already in the basket. * Update MiniCart.php Removed white spaces? * Update MiniCart.php Fixed IF statement * Remove whitespace at end of line Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Product Query: implement compatibility with Filter by Rating block (https://github.com/woocommerce/woocommerce-blocks/pull/7792) * Product Query: implement compatibility with Filter by Rating block woocommerce/woocommerce-blocks#7631 Product Query: implement compatibility with Filter by Rating block * address feedback * address feedback * add comment * add new zip file link * add missing class * add testing instructions about woocommerce/woocommerce-blocks#7947 * add new zip file link * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Update docs/internal-developers/testing/releases/911.md Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Bumping version strings to new version. Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com> Co-authored-by: Tung Du <dinhtungdu@gmail.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: kmanijak <karol.manijak@automattic.com> Co-authored-by: Luke O'Regan <oregan.luke@gmail.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2022-12-15 09:02:35 +00:00
# Testing notes and ZIP for release 9.1.1
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/10229928/woocommerce-gutenberg-products-block.zip)
## Feature plugin and package inclusion in WooCommerce
### Product Query: Add patterns ([7857](https://github.com/woocommerce/woocommerce-blocks/pull/7857))
1. Create a new page.
2. Add each pattern and make sure it displays correctly in the editor and frontend.
#### 1. Product gallery
| Figma | Pattern |
|------ | ----- |
|![🔎_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205912301-76889c39-587f-4a6f-abb4-218331f830b2.jpg)|![All_Products_–_ratings-11](https://user-images.githubusercontent.com/905781/207278550-fd3db86e-4e3e-444d-b954-f6034c354c4c.jpg)|
#### 2. 4-Column Product Row
| Figma | Pattern |
|------ | ----- |
| ![🔎_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205916369-36bf1371-1bec-41dd-92d7-e5937f684f81.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207304273-e0dcf9c8-dcee-4851-b93c-d54eec8b1296.jpg)|
#### 3. 3-Column Product Row
| Figma | Pattern |
|------ | ----- |
|![🔎_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205942766-8114ecec-de8c-4e07-8444-7ce7b7cb3b33.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207304719-c2ecc137-755c-4384-aa12-3079948ac736.jpg)|
#### 4. Large Image Product Gallery
| Figma | Pattern |
|------ | ----- |
|![🔎_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205917674-c20a4f27-a4b8-450b-80ba-165097f65001.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207305076-9398bec0-38ac-49b5-bff7-9f5769de0f7c.jpg)|
#### 5. Minimal 5-Column Products Row
| Figma | Pattern |
|------ | ----- |
|![🔎_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205918960-7ea10d36-52ea-40a7-88aa-e88c0ac3053a.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207305645-187e1723-1d1e-48a5-8234-83c3b10a191f.jpg)|
#### 6. 1:1 Image 4-Column Products Row
| Figma | Pattern |
|------ | ----- |
|![🔎_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205920113-b5f876db-7b0c-491c-81f9-134bcebaa0eb.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207306960-fd7f045f-959d-4af2-828d-0107ea6d90eb.jpg)|
#### 7. Product list with full product description
| Figma | Pattern |
|------ | ----- |
|![🔎_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205921050-29eb55e3-af19-46ee-9724-e9e2065b7c4b.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207307754-ba8f2b7e-4a20-4eea-986c-5cfe4626d67d.jpg)|
#### 8. Product list with 1:1 images
| Figma | Pattern |
|------ | ----- |
|![🔎_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205921683-bf32633b-6fcf-4b57-acd2-e95a4effc4f5.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207308331-cef4941a-8b02-49ff-b953-e85f21a64fd1.jpg)|
#### 9. Minimal product list
| Figma | Pattern |
|------ | ----- |
|![🔎_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205922240-73d254af-13a6-4598-acea-dc02253ff139.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207308703-567df6aa-3d08-4a7b-b7cb-fa8dc56c0da9.jpg)|
### Add dropdown version of Filter by Stock Status ([7831](https://github.com/woocommerce/woocommerce-blocks/pull/7831))
Check out [the video above](
https://user-images.githubusercontent.com/20098064/206128900-2cdb4bfe-c131-48d1-b395-8fa3fc07dafc.mov) which will help you go through the testing instructions
Prerequisites:
1. Have at least few products with different stock status: in stock, out of stock, on backorder
2. Go to Editor
3. Add Filters pattern
4. Add All Products
#### Dropdown component - single
1. Change settings of Filter by Stock to: single / dropdown
2. Open dropdown
- **Expected**: dropdown has stock status options to choose from
3. Choose one option
- **Expected**: page refreshes, filter is applied: visible in Active Filters and Products are filtered out
4. Choose other option
- **Expected**: previous filter is replaced by the new one, page refreshes, filter is applied: visible in Active Filters and Products are filtered out
##### Dropdown component - multiple
1. Change settings of Filter by Stock to: multiple / dropdown
2. Open dropdown
- **Expected**: dropdown has stock status options to choose from
3. Choose one option
- **Expected**: page refreshes, filter is applied: visible in Active Filters and Products are filtered out
4. Choose other option
- **Expected**: new filter is added to the new one, page refreshes, both filters ("or") is applied: visible in Active Filters and Products are filtered out
##### List component
1. Change settings of Filter by Stock to: list
2. Repeat the above for both: single and multiple
##### Apply button
1. In the Editor choose multiple Dropdown again and enable "Show 'Apply filters' button" option
2. In the frontend choose stock filters
- **Expected**: filters are not applied until "Apply" button is clicked. Once clicked page refreshes and filters are applied
##### Other scenarios
Try to break it! 😉
### Add dropdown version of Filter by Rating ([7771](https://github.com/woocommerce/woocommerce-blocks/pull/7771))
Check out [the video above](https://user-images.githubusercontent.com/20098064/205309205-b0b69334-541a-42bd-881e-455db517b70e.mov) which will help you go through the testing instructions
Prerequisites:
1. Have at least few products with some ratings
2. Go to Editor
3. Add Filters pattern
4. Add All Products
#### Dropdown component - single
1. Change settings of Filter by Rating to: single / dropdown
2. Open dropdown
- **Expected**: dropdown has rating options to choose from
3. Choose one option
- **Expected**: page refreshes, filter is applied: visible in Active Filters and Products are filtered out
4. Choose other option
- **Expected**: previous filter is replaced by the new one, page refreshes, filter is applied: visible in Active Filters and Products are filtered out
#### Dropdown component - multiple
1. Change settings of Filter by Rating to: multiple / dropdown
2. Open dropdown
- **Expected**: dropdown has rating options to choose from
3. Choose one option
- **Expected**: page refreshes, filter is applied: visible in Active Filters and Products are filtered out
4. Choose other option
- **Expected**: new filter is added to the new one, page refreshes, both filters ("or") is applied: visible in Active Filters and Products are filtered out
#### List component
1. Change settings of Filter by Rating to: list
2. Repeat the above for both: single and multiple
#### Apply button
1. In the Editor choose multiple Dropdown again and enable "Show 'Apply filters' button" option
2. In the frontend choose rating filters
- **Expected**: filters are not applied until "Apply" button is clicked. Once clicked page refreshes and filters are applied
#### Other scenarios
Try to break it! 😉
### Product Query - Enable "Inherit Query from template" option ([7641](https://github.com/woocommerce/woocommerce-blocks/pull/7641))
#### Site Editor
1. Add the Product Query in a template (eg: Product Catalog)
2. Check that the `Inherit Query from template` option is visible.
3. Enable it.
4. Be sure that all the settings that customize the query are hidden.
5. Save.
6. Be sure that the result generated by the Product Query is the same as the classic FSE template (there are E2E tests that check this ).
7. Edit the Product Catalog and disable the `Inherit Query from template` option.
8. Ensure all the settings that customize the query are visible.
#### Post/Page Editor
1. Add the Product Query in a template (eg: Product Catalog)
2. Check that the `Inherit Query from template` option isn't visible.
### Fix the incorrect layout of Rating and Price in Classic Template and Products block ([7932](https://github.com/woocommerce/woocommerce-blocks/pull/7932))
Prerequisites:
- make sure you have at least one product _with_ rating
Steps:
1. Go to the Appearance > Editor and edit the Product Catalog template:
- Filter by Rating
- All Products,
- Products
- Classic Template
2. In the frontend check the above blocks
**Expected:**
| Case | Before | After |
| ------ | ----- | ----- |
| Products block (was: left-aligned Ratings) | <img width="332" alt="image" src="https://user-images.githubusercontent.com/20098064/207349105-62ff7ee4-49d3-4f0e-aa3f-d906f1bf2b3d.png"> | <img width="334" alt="image" src="https://user-images.githubusercontent.com/20098064/207348578-04970b79-cb8d-497d-823b-71d9eaa88bbe.png"> |
| Classic Template (was: inlined Ratings and Price) | <img width="237" alt="image" src="https://user-images.githubusercontent.com/20098064/207349319-f7020e66-4c77-4ea9-a991-151cabd515ac.png"> | <img width="247" alt="image" src="https://user-images.githubusercontent.com/20098064/207348409-4465be9d-529d-49db-a056-e4c3f844a6e6.png"> |
- The layout of product in Products and Classic Template is as on the screenshots above
- The layout of the Filter by Rating and All Products doesn't change
### Product Elements: Fix block settings ([7914](https://github.com/woocommerce/woocommerce-blocks/pull/7914))
1. Create a page and add the **Products (Beta)** block.
2. Add **Add to Cart Button**, **Price** and **Rating** product elements.
3. Customize via block settings:
- **Product Price**: `Color > background`, `Color > text ` and `Typography > appearance`.
- **Product Button**: `Typography > font Weight` and `Dimension > padding`.
- **Product Rating**: `Typography > font Size`, `Dimension > margin`, `Color > text`.
4. Ensure all customizations display correctly both in the editor and the page (frontend).
### StyleAttributesUtils: Fix PHP notices and invalid CSS output ([7909](https://github.com/woocommerce/woocommerce-blocks/pull/7909))
1. Create a page and add the **Products (Beta)** block.
2. Add the **Product Image** and **On-Sale Badge** blocks.
3. Try setting different combinations of the following block settings:
- Border Radius
- Border Width (test also in conjunction with different Border Radius settings)
- Margin
- Padding
Make sure to test in both 'Linked' and 'Unlinked' modes ( one value for all 4 sides, custom values for each side, some sides not set etc. ).
Make sure for any of the scenarios no PHP errors and notices are being generated and the options display correct visual results on the page (frontend).
### Update MiniCart.php to fix price total amount on page load prices are including tax ([7832](https://github.com/woocommerce/woocommerce-blocks/pull/7832))
1. In WooCommerce > Settings check _Enable tax rates and calculations_.
2. In the _Tax_ tab that appears go to _Tax options_ and set _Display prices during cart and checkout_ to _Including tax_.
3. In _Standard rates_, create a tax rate with `Rate %` of `10`.
4. Create a post or page and add the Mini Cart block.
5. In the frontend, hover the Mini Cart block with the mouse and notice the price doesn't update ([before](https://user-images.githubusercontent.com/3616980/206694129-c16fcea4-8ac4-4bd7-a72a-221946c3ef08.webm) and [after](https://user-images.githubusercontent.com/3616980/206694060-eee1cccf-1ebd-435d-995d-23caca715918.webm)).
### Product Query: Add `Sorted by title` preset. ([7949](https://github.com/woocommerce/woocommerce-blocks/pull/7949))
1. Add a new page.
2. Add the Products (Beta) block to the page.
3. See products are ordered by title.
4. Open the sidebar setting.
5. See the Popular Filters setting is expanded by default and the `Sorted by title` is selected.
### Atomic Blocks: fix ancestor definition ([7947](https://github.com/woocommerce/woocommerce-blocks/pull/7947))
1. Go to Editor
2. Add an All Products block
3. Enter the "Edit the layout of each product" mode (click on the pencil icon)
4. Be sure that it is possible to add atomic blocks.