248 lines
14 KiB
Markdown
248 lines
14 KiB
Markdown
# Testing notes and ZIP for release 11.5.0
|
|
|
|
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/13279109/woocommerce-gutenberg-products-block.zip)
|
|
|
|
## Testing Notes
|
|
|
|
### Fix `Hero Product 3 Split` pattern text content [#11612](https://github.com/woocommerce/woocommerce-blocks/pull/11612)
|
|
|
|
1. Create a new page or post and insert the `Hero Product 3 Split` pattern.
|
|
2. Check there's no duplicated description and every section description makes sense with their title.
|
|
|
|
### Move `Textarea` to components package [#11384](https://github.com/woocommerce/woocommerce-blocks/pull/11384)
|
|
|
|
1. Add an item to your cart.
|
|
2. Go to the Checkout block, ensure the order notes section displays correctly, check the option to add a note to your order and ensure that the text area appears.
|
|
3. Enter text into it and check out.
|
|
4. Ensure your note is saved alongside your order.
|
|
|
|
<img width="529" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/52fa2815-8c37-4cf6-b6fe-1b487fe6eefd">
|
|
|
|
### Remove authors filter from Product Collection block [#11427](https://github.com/woocommerce/woocommerce-blocks/pull/11427)
|
|
|
|
1. Go to Editor
|
|
2. Add Product Collection block
|
|
3. Disable "Inherit query from template"
|
|
4. Make sure there's no "Authors" filter available in the Inspector Controls
|
|
5. Smoke test the Product Collection in the Editor and Frontend
|
|
6. Go to Editor
|
|
7. Add Products (Beta) block
|
|
8. Disable "Inherit query from template"
|
|
9. Add couple of product filters (for example Sale Status and Attributes)
|
|
10. Click "Upgrade to Product Collection" in Inspectopr Controls
|
|
11. Make sure Product Collection preserved the filters and works correctly after migration
|
|
12. Save and check the frontend.
|
|
|
|
### Move `SortSelect` to components package [#11411](https://github.com/woocommerce/woocommerce-blocks/pull/11411)
|
|
|
|
1. Set up some reviews on your products (Go to the product on the front end then the Reviews tab)
|
|
2. Add the All Reviews and All Products blocks to a page.
|
|
3. Visit that page and ensure the select box to change the ordering of reviews is visible. Interact with it and ensure the order of the reviews changes.
|
|
4. On the All Products block, ensure the select box to change the ordering of products is visible. Interact with it and ensure the order of products changes.
|
|
|
|
### Ensure input is validated when autofilled in Firefox [#11062](https://github.com/woocommerce/woocommerce-blocks/pull/11062)
|
|
|
|
_Perform these steps both in Firefox and Chrome/Brave/Edge._
|
|
|
|
1. As a guest user (open the site in an incognito/private window), add an item to your cart and go to the Checkout block.
|
|
2. Enter your details and check out successfully.
|
|
3. Repeat again without closing the window, when you load the Checkout block the second time, expand the saved address card.
|
|
4. The address details should be auto filled based on your last order.
|
|
5. Ensure you can check out without editing the fields.
|
|
|
|
### Prevent theme button border appearing in opinionated patterns [#11564](https://github.com/woocommerce/woocommerce-blocks/pull/11564)
|
|
|
|
1. Go to Appearance > Editor > Styles > Blocks > Button and set a border style for Button blocks.
|
|
2. Create a page and add the following patterns: _Discount Banner with Image_, _Discount Banner_ and _Product Collection Banner_.
|
|
3. Verify the buttons in those patterns have no border.
|
|
|
|
### Add margin bottom to the `Hero Product 3 Split` pattern [#11573](https://github.com/woocommerce/woocommerce-blocks/pull/11573)
|
|
|
|
1. Create a new page or post and insert the `Hero Product 3 Split` pattern.
|
|
2. Make sure it has a bottom margin of 80px.
|
|
|
|
### Set explicit margins in the search bar group on the `Large Header` pattern [#11571](https://github.com/woocommerce/woocommerce-blocks/pull/11571)
|
|
|
|
1. Create a new page or post and insert the `Large Header` pattern.
|
|
2. Check the search bar is aligned with the mini-cart button to the right.
|
|
|
|
### Add aspect ratio to the `Featured Products 5 Columns` pattern [#11570](https://github.com/woocommerce/woocommerce-blocks/pull/11570)
|
|
|
|
1. Create a new page or post and insert the `Product Collection: Featured Products 5 Columns` pattern.
|
|
2. Save and check all the images have the same size.
|
|
|
|
### Prevent Sale badge overflowing the Product Image in some product grid blocks [#11556](https://github.com/woocommerce/woocommerce-blocks/pull/11556)
|
|
|
|
1. With Twenty-Twenty Four, add the _On Sale Products_, _All Products_ and _Product Collection_ blocks to a page.
|
|
2. Set all of them to _Full Width_.
|
|
3. Preview that page in the frontend.
|
|
4. Verify the _On Sale_ badge doesn't overflow the image.
|
|
5. Do some more smoke testing with other themes to verify there are no regressions (I tested TT1, TT2, TT3, TT4 and Storefront).
|
|
|
|
### Footer with 2 Menus Dark pattern: Fix the Site Title color contrast in TT4. [#11484](https://github.com/woocommerce/woocommerce-blocks/pull/11484)
|
|
|
|
1. Activate the **Twenty Twenty-Four** theme.
|
|
2. Create a new page.
|
|
3. Add the **Footer with 2 Menus Dark** pattern.
|
|
4. Verify that the Site Title is visible and has correct color contrast both in the editor and the frontend.
|
|
5. Enable the **Twenty Twenty-Three** theme and repeat all steps to make sure there are no regressions.
|
|
|
|
### [CYS] Fix `Product Collection 4 Columns` pattern button height [#11553](https://github.com/woocommerce/woocommerce-blocks/pull/11553)
|
|
|
|
1. Create a new page or post and insert the `Product Collection 4 Columns` pattern.
|
|
2. Check the button height looks like the screenshot below.
|
|
|
|
<img width="241" alt="Screenshot 2023-11-02 at 15 46 32" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/922e0069-6c59-4044-9fb7-cf2e0337a1b9">
|
|
|
|
### Change the "chessboard" pattern structure to improve mobile view [#11545](https://github.com/woocommerce/woocommerce-blocks/pull/11545)
|
|
|
|
1. Create a new page or post and insert the `Hero Product Chessboard` pattern.
|
|
2. Check it looks good on mobile sizes and looks like the screenshot below.
|
|
|
|
### `Footer with 3 menus` pattern: update the spacing in the columns to improve the mobile view [#11544](https://github.com/woocommerce/woocommerce-blocks/pull/11544)
|
|
|
|
1. Create a new page or post and insert the `Footer with 3 menus`.
|
|
2. Check the pattern looks like the after screenshot.
|
|
|
|
### Ensure that the "Remove Item" link on Cart block has a hover state [#11526](https://github.com/woocommerce/woocommerce-blocks/pull/11526)
|
|
|
|
1. Create a test page and add a few filters and the Products (beta) block to it.
|
|
2. Create another test page and add the Cart block to it.
|
|
3. Go to the first test page with the Products (beta) block.
|
|
4. Select one of the filters and hover over the `Reset` link.
|
|
5. Verify that this PR does not introduce a regression.
|
|
6. Add a product to the cart.
|
|
7. Go to the second test page with the Cart block.
|
|
8. Hover over the "Remove Item" link and verify that it has a hover state.
|
|
|
|
### Add checkout-header template to the correct area in site editor [#11528](https://github.com/woocommerce/woocommerce-blocks/pull/11528)
|
|
|
|
1. Go to Appearance > Editor > Patterns
|
|
2. Click "headers" under the template parts section
|
|
3. Checkout checkout-header is visible
|
|
|
|
### Move `Title` to components package [#11383](https://github.com/woocommerce/woocommerce-blocks/pull/11383)
|
|
|
|
1. Set up [WooCommerce Stripe Payment Gateway](https://wordpress.org/plugins/woocommerce-gateway-stripe/) and ensure your site is using HTTPS so express methods from Stripe can show.
|
|
2. Open the Checkout page in the page editor. Ensure the form steps show up correctly with the correct titles.
|
|
3. Add an item to your cart.
|
|
4. Go to the Checkout block, ensure each step on the form has a correctly displaying title.
|
|
<img width="493" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/49c3ff6a-11f5-4a3d-b24f-599bb962868e">
|
|
|
|
5. Ensure the express payments method section has a correctly displayed title.
|
|
<img width="471" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/9ea746e2-20e2-4b0f-9f99-07eebb233142">
|
|
|
|
6. Check out and ensure it works.
|
|
|
|
### All Products: Add cursor pointer when hovering over pagination items [#11502](https://github.com/woocommerce/woocommerce-blocks/pull/11502)
|
|
|
|
1. Add the `All Products` block to a page.
|
|
2. Scroll down to the pagination of the block.
|
|
3. Hover over pagination numbers and arrows and confirm that the cursor changes to `pointer`.
|
|
|
|
### Comboboxes should match against values before looking at labels [#11410](https://github.com/woocommerce/woocommerce-blocks/pull/11410)
|
|
|
|
1. In chrome, add a new address for autocompletion. Use a US address with MA as the state.
|
|
2. As a guest user, go to checkout. Autocomplete the shipping address section.
|
|
3. Ensure that the state field selects massachusetts.
|
|
|
|
### Essential Header Dark pattern: Fix color contrast issues in TT4 [#11480](https://github.com/woocommerce/woocommerce-blocks/pull/11480)
|
|
|
|
1. Activate the **Twenty Twenty-Four** theme.
|
|
2. Create a new page.
|
|
3. Add the **Essential Header Dark** pattern.
|
|
4. In the `Navigation` block make sure you have some nested items. (Dropdown menu)
|
|
5. Verify that the Search button color contrast is correct both in the editor and the frontend.
|
|
6. Verify that the dropdown menu links have a correct color contrast in the frontend.
|
|
7. Enable the **Twenty Twenty-Three** theme and repeat all steps to make sure there are no regressions.
|
|
|
|
### Product Collection: Fix the PHP Warning after migrating from Products (Beta) [#11494](https://github.com/woocommerce/woocommerce-blocks/pull/11494)
|
|
|
|
1. Create a new page or post.
|
|
2. Add the `Large Image Product Gallery` pattern.
|
|
3. Use the `Upgrade to Product Collection` option in the sidebar and save the page.
|
|
4. Ensure there are no warnings in the editor and the front end.
|
|
|
|
### Remove bullet points and unnecessary padding from `SearchListControl` [#11444](https://github.com/woocommerce/woocommerce-blocks/pull/11444)
|
|
|
|
1. Add a Single Product, Featured Product and Featured Category to a page.
|
|
2. Ensure that the list of possible selection is shown as a list without bullet points and extra padding (the bottom border should reach all the way through).
|
|
|
|
### Fix products incorrectly marked as discounted [#11386](https://github.com/woocommerce/woocommerce-blocks/pull/11386)
|
|
|
|
1. Add a discounted item and a regular-priced item to your cart.
|
|
2. Go to the Cart Block page. Confirm that the discount label is only visible next to the discounted product.
|
|
3. Go to the Checkout Block page. Under the `Order Summary` section, confirm that the discount label is only visible next to the discounted product.
|
|
4. Add the following code snippet using the [Code Snippets](https://wordpress.org/plugins/code-snippets/) plugin:
|
|
|
|
```PHP
|
|
function calc_price( $cart_object ) {
|
|
foreach ( $cart_object->get_cart() as $hash => $value ) {
|
|
$value['data']->set_price( 50 );
|
|
}
|
|
}
|
|
add_action( 'woocommerce_before_calculate_totals', 'calc_price' );
|
|
```
|
|
|
|
5. Go to the Cart Block page. Confirm that both products reflect the new price (50) and neither displays a discount label.
|
|
6. Go to the Checkout Block page, under the `Order summary` section, Confirm that both products reflect the new price (50) and neither displays a discount label.
|
|
|
|
### Display shipping calculator link for guests shopper [#11442](https://github.com/woocommerce/woocommerce-blocks/pull/11442)
|
|
|
|
#### Case 1
|
|
|
|
1. Go to the WooCommerce settings page: `wp-admin/admin.php?page=wc-settings`.
|
|
2. Change 'Default customer location' to `No location by default`.
|
|
3. Remove any default(fallback) shipping rates.
|
|
4. Open your site in a private session(incognito mode).
|
|
5. Add some products to the cart.
|
|
6. Go to the cart page, and confirm the "Add an address for shipping rates" link is present in the shipping calculator.
|
|
7. Click on the link, and confirm it is working as expected.
|
|
8. Open your site in a regular session where you're already logged in and have placed an order before.
|
|
9. Add some products to the cart.
|
|
10. Go to the cart page, confirm the shipping address, and "change address" link present in the shipping calculator.
|
|
11. Click on the link, and confirm it is working as expected.
|
|
|
|
#### Case 2
|
|
|
|
1. Go to the WooCommerce settings page: `wp-admin/admin.php?page=wc-settings`.
|
|
2. Change 'Default customer location' to `No location by default`.
|
|
3. Add any default(fallback) shipping rates.
|
|
4. Open your site in a private session(incognito mode).
|
|
5. Add some products to the cart.
|
|
6. Go to the cart page, and confirm the shipping calculator is hidden and default shipping rates are visible
|
|
7. Open your site in a regular session where you're already logged in and have placed an order before.
|
|
8. Add some products to the cart.
|
|
9. Go to the cart page, confirm the shipping address, and "change address" link present in the shipping calculator.
|
|
10. Click on the link, and confirm it is working as expected.
|
|
|
|
#### Case 3
|
|
|
|
1. Go to the WooCommerce settings page: `wp-admin/admin.php?page=wc-settings`.
|
|
2. Change 'Default customer location' to `Shop country/region`.
|
|
3. Add the store's address.
|
|
4. Add the rates that cover the store's address
|
|
5. As a guest/not logged-in user, visit the cart page with some products added already.
|
|
6. Confirm the shipping address calculator link to change or add a new address is displayed.
|
|
|
|
### Add a safe guard that the variable is set before accessing it [#11424](https://github.com/woocommerce/woocommerce-blocks/pull/11424)
|
|
|
|
1. Go to Editor
|
|
2. Add Product Collection block
|
|
3. Enter Code Editor mode
|
|
4. Find and remove `"shrinkColumns":false"` - it will mimic the case it's undefined
|
|
|
|
|
|
|
|
5. Save the page/template and go to frontend
|
|
6. Make sure there's no warning and Product Collection is rendered in non-responsive mode (when you narrow down the screen it will preserve the number of columns and finally collapse to single one for mobile view)
|
|
|
|
## Testing notes for the development team
|
|
|
|
### Use the header element for the checkout header [#11222](https://github.com/woocommerce/woocommerce-blocks/pull/11222)
|
|
|
|
1. Install and activate a blocks theme eg TT3/TT4
|
|
2. Go to `Appearance` > `Editor` > `Templates` > `Manage All Templates` > `Page: Checkout` ensure none has customizations (or delete them if so), and enter edition mode
|
|
3. On `List View` select `Checkout Header`, open `Block` > `Advanced` pane and ensure `HTML ELEMENT` is set to `<header>`
|
|
4. Do a test purchase, and on the checkout page verify the header is wrapped in a `<header>` tag
|