Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 165e11c

Browse files
mikejolleymikejolley
committed
testing notes
1 parent 03665a2 commit 165e11c

File tree

2 files changed

+267
-10
lines changed

2 files changed

+267
-10
lines changed

‎docs/internal-developers/testing/releases/1150.md‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
# Testing notes and ZIP for release 11.5.0
2+
3+
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/13266305/woocommerce-gutenberg-products-block.zip)
4+
5+
## Testing Notes
6+
7+
### Fix `Hero Product 3 Split` pattern text content [#11612](https://github.com/woocommerce/woocommerce-blocks/pull/11612)
8+
9+
1. Create a new page or post and insert the `Hero Product 3 Split` pattern.
10+
2. Check there's no duplicated description and every section description makes sense with their title.
11+
12+
### Move `Textarea` to components package [#11384](https://github.com/woocommerce/woocommerce-blocks/pull/11384)
13+
14+
1. Add an item to your cart.
15+
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.
16+
3. Enter text into it and check out.
17+
4. Ensure your note is saved alongside your order.
18+
19+
<img width="529" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/52fa2815-8c37-4cf6-b6fe-1b487fe6eefd">
20+
21+
### Remove authors filter from Product Collection block [#11427](https://github.com/woocommerce/woocommerce-blocks/pull/11427)
22+
23+
1. Go to Editor
24+
2. Add Product Collection block
25+
3. Disable "Inherit query from template"
26+
4. Make sure there's no "Authors" filter available in the Inspector Controls
27+
5. Smoke test the Product Collection in the Editor and Frontend
28+
6. Go to Editor
29+
7. Add Products (Beta) block
30+
8. Disable "Inherit query from template"
31+
9. Add couple of product filters (for example Sale Status and Attributes)
32+
10. Click "Upgrade to Product Collection" in Inspectopr Controls
33+
11. Make sure Product Collection preserved the filters and works correctly after migration
34+
12. Save and check the frontend.
35+
36+
### Move `SortSelect` to components package [#11411](https://github.com/woocommerce/woocommerce-blocks/pull/11411)
37+
38+
1. Set up some reviews on your products (Go to the product on the front end then the Reviews tab)
39+
2. Add the All Reviews and All Products blocks to a page.
40+
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.
41+
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.
42+
43+
### Ensure input is validated when autofilled in Firefox [#11062](https://github.com/woocommerce/woocommerce-blocks/pull/11062)
44+
45+
_Perform these steps both in Firefox and Chrome/Brave/Edge._
46+
47+
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.
48+
2. Enter your details and check out successfully.
49+
3. Repeat again without closing the window, when you load the Checkout block the second time, expand the saved address card.
50+
4. The address details should be auto filled based on your last order.
51+
5. Ensure you can check out without editing the fields.
52+
53+
### Prevent theme button border appearing in opinionated patterns [#11564](https://github.com/woocommerce/woocommerce-blocks/pull/11564)
54+
55+
1. Go to Appearance > Editor > Styles > Blocks > Button and set a border style for Button blocks.
56+
2. Create a page and add the following patterns: _Discount Banner with Image_, _Discount Banner_ and _Product Collection Banner_.
57+
3. Verify the buttons in those patterns have no border.
58+
59+
### Add margin bottom to the `Hero Product 3 Split` pattern [#11573](https://github.com/woocommerce/woocommerce-blocks/pull/11573)
60+
61+
1. Create a new page or post and insert the `Hero Product 3 Split` pattern.
62+
2. Make sure it has a bottom margin of 80px.
63+
64+
### Set explicit margins in the search bar group on the `Large Header` pattern [#11571](https://github.com/woocommerce/woocommerce-blocks/pull/11571)
65+
66+
1. Create a new page or post and insert the `Large Header` pattern.
67+
2. Check the search bar is aligned with the mini-cart button to the right.
68+
69+
### Add aspect ratio to the `Featured Products 5 Columns` pattern [#11570](https://github.com/woocommerce/woocommerce-blocks/pull/11570)
70+
71+
1. Create a new page or post and insert the `Product Collection: Featured Products 5 Columns` pattern.
72+
2. Save and check all the images have the same size.
73+
74+
### Prevent Sale badge overflowing the Product Image in some product grid blocks [#11556](https://github.com/woocommerce/woocommerce-blocks/pull/11556)
75+
76+
1. With Twenty-Twenty Four, add the _On Sale Products_, _All Products_ and _Product Collection_ blocks to a page.
77+
2. Set all of them to _Full Width_.
78+
3. Preview that page in the frontend.
79+
4. Verify the _On Sale_ badge doesn't overflow the image.
80+
5. Do some more smoke testing with other themes to verify there are no regressions (I tested TT1, TT2, TT3, TT4 and Storefront).
81+
82+
### Product Gallery Thumbnails: Add View all overlay [#11087](https://github.com/woocommerce/woocommerce-blocks/pull/11087)
83+
84+
1. With a block theme, open `Appearance > Editor`.
85+
2. Open `Templates > Single Product`.
86+
3. Select `Convert to Blocks` if you are using the Classic Templates.
87+
4. Add the `Product Gallery` block.
88+
5. Ensure the Thumbnails are enabled.
89+
6. Open a product page on the frontend **with multiple product images** (more than `Number of Thumbnails` setting) and test the frontend. Make sure the last thumbnail displays an overlay that opens the Dialog on click.
90+
7. Make sure the overlay displays the correct number of remaining thumbnails.
91+
8. Make sure there are no regressions and the Dialog can still be triggered by clicking the Large Image.
92+
93+
### Footer with 2 Menus Dark pattern: Fix the Site Title color contrast in TT4. [#11484](https://github.com/woocommerce/woocommerce-blocks/pull/11484)
94+
95+
1. Activate the **Twenty Twenty-Four** theme.
96+
2. Create a new page.
97+
3. Add the **Footer with 2 Menus Dark** pattern.
98+
4. Verify that the Site Title is visible and has correct color contrast both in the editor and the frontend.
99+
5. Enable the **Twenty Twenty-Three** theme and repeat all steps to make sure there are no regressions.
100+
101+
### [CYS] Fix `Product Collection 4 Columns` pattern button height [#11553](https://github.com/woocommerce/woocommerce-blocks/pull/11553)
102+
103+
1. Create a new page or post and insert the `Product Collection 4 Columns` pattern.
104+
2. Check the button height looks like the screenshot below.
105+
106+
<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">
107+
108+
### Change the "chessboard" pattern structure to improve mobile view [#11545](https://github.com/woocommerce/woocommerce-blocks/pull/11545)
109+
110+
1. Create a new page or post and insert the `Hero Product Chessboard` pattern.
111+
2. Check it looks good on mobile sizes and looks like the screenshot below.
112+
113+
### `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)
114+
115+
1. Create a new page or post and insert the `Footer with 3 menus`.
116+
2. Check the pattern looks like the after screenshot.
117+
118+
### Ensure that the "Remove Item" link on Cart block has a hover state [#11526](https://github.com/woocommerce/woocommerce-blocks/pull/11526)
119+
120+
1. Create a test page and add a few filters and the Products (beta) block to it.
121+
2. Create another test page and add the Cart block to it.
122+
3. Go to the first test page with the Products (beta) block.
123+
4. Select one of the filters and hover over the `Reset` link.
124+
5. Verify that this PR does not introduce a regression.
125+
6. Add a product to the cart.
126+
7. Go to the second test page with the Cart block.
127+
8. Hover over the "Remove Item" link and verify that it has a hover state.
128+
129+
### Add checkout-header template to the correct area in site editor [#11528](https://github.com/woocommerce/woocommerce-blocks/pull/11528)
130+
131+
1. Go to Appearance > Editor > Patterns
132+
2. Click "headers" under the template parts section
133+
3. Checkout checkout-header is visible
134+
135+
### Move `Title` to components package [#11383](https://github.com/woocommerce/woocommerce-blocks/pull/11383)
136+
137+
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.
138+
2. Open the Checkout page in the page editor. Ensure the form steps show up correctly with the correct titles.
139+
3. Add an item to your cart.
140+
4. Go to the Checkout block, ensure each step on the form has a correctly displaying title.
141+
<img width="493" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/49c3ff6a-11f5-4a3d-b24f-599bb962868e">
142+
143+
5. Ensure the express payments method section has a correctly displayed title.
144+
<img width="471" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/9ea746e2-20e2-4b0f-9f99-07eebb233142">
145+
146+
6. Check out and ensure it works.
147+
148+
### All Products: Add cursor pointer when hovering over pagination items [#11502](https://github.com/woocommerce/woocommerce-blocks/pull/11502)
149+
150+
1. Add the `All Products` block to a page.
151+
2. Scroll down to the pagination of the block.
152+
3. Hover over pagination numbers and arrows and confirm that the cursor changes to `pointer`.
153+
154+
### Comboboxes should match against values before looking at labels [#11410](https://github.com/woocommerce/woocommerce-blocks/pull/11410)
155+
156+
1. In chrome, add a new address for autocompletion. Use a US address with MA as the state.
157+
2. As a guest user, go to checkout. Autocomplete the shipping address section.
158+
3. Ensure that the state field selects massachusetts.
159+
160+
### Improve 'hero product 3 split' pattern [#11414](https://github.com/woocommerce/woocommerce-blocks/pull/11414)
161+
162+
1. Add a new post.
163+
2. Add the `Hero Product 3 split` pattern.
164+
3. Save
165+
4. Visit the post.
166+
5. Ensure that the pattern (desktop and mobile view) [matches the mockup](https://github.com/woocommerce/woocommerce-blocks/assets/4463174/e4ec46d3-6ba7-46d4-9f14-8cb51b2bb4f6)).
167+
168+
### Essential Header Dark pattern: Fix color contrast issues in TT4 [#11480](https://github.com/woocommerce/woocommerce-blocks/pull/11480)
169+
170+
1. Activate the **Twenty Twenty-Four** theme.
171+
2. Create a new page.
172+
3. Add the **Essential Header Dark** pattern.
173+
4. In the `Navigation` block make sure you have some nested items. (Dropdown menu)
174+
5. Verify that the Search button color contrast is correct both in the editor and the frontend.
175+
6. Verify that the dropdown menu links have a correct color contrast in the frontend.
176+
7. Enable the **Twenty Twenty-Three** theme and repeat all steps to make sure there are no regressions.
177+
178+
### Product Collection: Fix the PHP Warning after migrating from Products (Beta) [#11494](https://github.com/woocommerce/woocommerce-blocks/pull/11494)
179+
180+
1. Create a new page or post.
181+
2. Add the `Large Image Product Gallery` pattern.
182+
3. Use the `Upgrade to Product Collection` option in the sidebar and save the page.
183+
4. Ensure there are no warnings in the editor and the front end.
184+
185+
### Remove bullet points and unnecessary padding from `SearchListControl` [#11444](https://github.com/woocommerce/woocommerce-blocks/pull/11444)
186+
187+
1. Add a Single Product, Featured Product and Featured Category to a page.
188+
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).
189+
190+
### Fix products incorrectly marked as discounted [#11386](https://github.com/woocommerce/woocommerce-blocks/pull/11386)
191+
192+
1. Add a discounted item and a regular-priced item to your cart.
193+
2. Go to the Cart Block page. Confirm that the discount label is only visible next to the discounted product.
194+
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.
195+
4. Add the following code snippet using the [Code Snippets](https://wordpress.org/plugins/code-snippets/) plugin:
196+
197+
```PHP
198+
function calc_price( $cart_object ) {
199+
foreach ( $cart_object->get_cart() as $hash => $value ) {
200+
$value['data']->set_price( 50 );
201+
}
202+
}
203+
add_action( 'woocommerce_before_calculate_totals', 'calc_price' );
204+
```
205+
206+
5. Go to the Cart Block page. Confirm that both products reflect the new price (50) and neither displays a discount label.
207+
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.
208+
209+
### Display shipping calculator link for guests shopper [#11442](https://github.com/woocommerce/woocommerce-blocks/pull/11442)
210+
211+
#### Case 1
212+
213+
1. Go to the WooCommerce settings page: `wp-admin/admin.php?page=wc-settings`.
214+
2. Change 'Default customer location' to `No location by default`.
215+
3. Remove any default(fallback) shipping rates.
216+
4. Open your site in a private session(incognito mode).
217+
5. Add some products to the cart.
218+
6. Go to the cart page, and confirm the "Add an address for shipping rates" link is present in the shipping calculator.
219+
7. Click on the link, and confirm it is working as expected.
220+
8. Open your site in a regular session where you're already logged in and have placed an order before.
221+
9. Add some products to the cart.
222+
10. Go to the cart page, confirm the shipping address, and "change address" link present in the shipping calculator.
223+
11. Click on the link, and confirm it is working as expected.
224+
225+
#### Case 2
226+
227+
1. Go to the WooCommerce settings page: `wp-admin/admin.php?page=wc-settings`.
228+
2. Change 'Default customer location' to `No location by default`.
229+
3. Add any default(fallback) shipping rates.
230+
4. Open your site in a private session(incognito mode).
231+
5. Add some products to the cart.
232+
6. Go to the cart page, and confirm the shipping calculator is hidden and default shipping rates are visible
233+
7. Open your site in a regular session where you're already logged in and have placed an order before.
234+
8. Add some products to the cart.
235+
9. Go to the cart page, confirm the shipping address, and "change address" link present in the shipping calculator.
236+
10. Click on the link, and confirm it is working as expected.
237+
238+
#### Case 3
239+
240+
1. Go to the WooCommerce settings page: `wp-admin/admin.php?page=wc-settings`.
241+
2. Change 'Default customer location' to `Shop country/region`.
242+
3. Add the store's address.
243+
4. Add the rates that cover the store's address
244+
5. As a guest/not logged-in user, visit the cart page with some products added already.
245+
6. Confirm the shipping address calculator link to change or add a new address is displayed.
246+
247+
### Add a safe guard that the variable is set before accessing it [#11424](https://github.com/woocommerce/woocommerce-blocks/pull/11424)
248+
249+
1. Go to Editor
250+
2. Add Product Collection block
251+
3. Enter Code Editor mode
252+
4. Find and remove `"shrinkColumns":false"` - it will mimic the case it's undefined
253+
254+
![Mock](https://github.com/woocommerce/woocommerce-blocks/assets/20098064/d7d7af04-fd50-4d9d-abb7-d07e106d82af)
255+
256+
5. Save the page/template and go to frontend
257+
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)
258+
259+
## Testing notes for the development team
260+
261+
### Use the <header> element for the checkout header [#11222](https://github.com/woocommerce/woocommerce-blocks/pull/11222)
262+
263+
1. Install and activate a blocks theme eg TT3/TT4
264+
2. Go to `Appearance` > `Editor` > `Templates` > `Manage All Templates` > `Page: Checkout` ensure none has customizations (or delete them if so), and enter edition mode
265+
3. On `List View` select `Checkout Header`, open `Block` > `Advanced` pane and ensure `HTML ELEMENT` is set to `<header>`
266+
4. Do a test purchase, and on the checkout page verify the header is wrapped in a `<header>` tag

‎docs/internal-developers/testing/releases/README.md‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -185,13 +185,4 @@ Every release includes specific testing instructions for new features and bug fi
185185
- [11.4.1](./1141.md)
186186
- [11.4.2](./1142.md)
187187
- [11.4.3](./1143.md)
188-
189-
<!-- FEEDBACK -->
190-
191-
---
192-
193-
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
194-
195-
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/internal-developers/testing/releases/README.md)
196-
197-
<!-- /FEEDBACK -->
188+
- [11.5.0](./1150.md)

0 commit comments

Comments
 (0)