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

402 lines
18 KiB
Markdown

# Testing notes and ZIP for release 8.7.0
Zip file for
testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/9758323/woocommerce-gutenberg-products-block.zip)
## Feature plugin and package inclusion in WooCommerce
### Improve visual consistency between block links ([7340](https://github.com/woocommerce/woocommerce-blocks/pull/7340))
#### Screenshots
| Before | After |
| ------ | ----- |
| <img width="299" alt="CleanShot 2022-10-07 at 16 02 20@2x" src="https://user-images.githubusercontent.com/20469356/194635589-3c7f80a8-22d2-487d-b800-9b51f586d34e.png"> | <img width="289" alt="CleanShot 2022-10-07 at 16 04 34@2x" src="https://user-images.githubusercontent.com/20469356/194635923-b8cdf40c-60be-4168-ba85-0a21a5dd593d.png"> |
#### User Facing Testing
1. Create a regular page (Pages > Add New) and add the All Product block to it;
2. Add the Active Filters block;
3. Add the Filter By Attribute block;
4. Select an attribute from the Filter By Attribute block and apply it;
5. When the page reloads, check if the "Clear All" button (in the Active Filters block) and the "Reset" button (in
Filter By Attribute block) have the following properties:
> Font size: 14px
> Font weight: normal
> Text decoration: underlined
6. Hover the mouse over the "Clear All" button and the "Reset" button and make sure the text decoration is changed
to `none` (no underline) while the other properties remain the same:
> Font size: 14px
> Font weight: normal
> Text decoration: none
### Update the titles of some inner blocks of the Cart block and remove the lock of the Cross-Sells parent block ([7232](https://github.com/woocommerce/woocommerce-blocks/pull/7232))
#### Screenshots
<table>
<tr>
<td>Before:
<br><br>
![adjust-titles-of-cart-inner-blocks-before](https://user-images.githubusercontent.com/3323310/192443836-aff1f06e-0847-4bf0-bf64-2d7011c19931.jpg)
</td>
<td>After:
<br><br>
![adjust-titles-of-cart-inner-blocks-after](https://user-images.githubusercontent.com/3323310/192443832-55b72f49-e7ec-44ec-94ee-7e1a38525b09.jpg)
</td>
</tr>
</table>
### Testing
#### User Facing Testing
1. Create a test page.
2. Add the Cart block.
3. [Open the List View](https://wordpress.com/go/tutorials/how-to-use-the-list-view-in-the-wordpress-block-editor/).
4. Verify that the following titles are visible:
- Cart Cross-Sells
- Cart Items
- Cart Cross-Sells Products
- Proceed to Checkout
5. Verify that the Cross-Sells parent block does not show a lock.
### Add filter for place order button label ([7154](https://github.com/woocommerce/woocommerce-blocks/pull/7154))
#### User Facing Testing
##### Verify that label filter works
<table>
<tr>
<td valign="top" width="300">
1. Create a test page and add the Checkout block to it.
2. Install and activate the [Simple Custom CSS and JS](https://wordpress.org/plugins/custom-css-js/) plugin.
3. Head over to `/wp-admin/edit.php?post_type=custom-css-js` and add the following JS code snippet:
```js
const label = () => 'Pay now';
const {__experimentalRegisterCheckoutFilters} = window.wc.blocksCheckout;
__experimentalRegisterCheckoutFilters('custom-place-order-button-label', {
placeOrderButtonLabel: label,
});
```
4. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
5. Verify that the button label says `Pay now`.
</td>
<td valign="top" width="250">
<img width="391" alt="Screenshot 2022-09-16 at 10 58 50" src="https://user-images.githubusercontent.com/3323310/190553693-e7404e18-8c84-4a78-8110-654ee27effcd.png">
</td>
</tr>
</table>
##### Verify that payment method label still works
<table>
<tr>
<td valign="top" width="500">
1. Make sure that the code snippet from the previous test is deactivated.
2. Install and activate the [Code Snippets](https://wordpress.org/plugins/code-snippets/) plugin.
3. Head over to `/wp-admin/admin.php?page=snippets` and add the following PHP code snippet:
```php
add_filter( 'woocommerce_should_load_paypal_standard', '__return_true' );
```
4. Head over to `/wp-admin/admin.php?page=wc-settings&tab=checkout&section=paypal` and select the
options `Enable PayPal Standard` and ` Enable PayPal sandbox`.
5. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
6. Select the payment method `PayPal`.
7. Verify that the button label says `Proceed to PayPal`.
</td>
<td valign="top" width="250">
<img width="391" alt="Screenshot 2022-09-16 at 11 01 29" src="https://user-images.githubusercontent.com/3323310/190554024-714e1b8e-bea2-4867-a487-7cca8ff1e324.png">
</td>
</tr>
</table>
##### Verify that default label still works
<table>
<tr>
<td valign="top" width="650">
1. Make sure that the code snippet from the first test is still deactivated.
2. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
3. Select a payment method apart from `PayPal`, e.g. `Credit Card (Stripe)`.
4. Verify that the button label says `Place Order`.
</td>
<td valign="top" width="250">
<img width="391" alt="Screenshot 2022-09-16 at 11 07 51" src="https://user-images.githubusercontent.com/3323310/190554666-83d9b85a-53b8-4864-97d3-135fff87a4cd.png">
</td>
</tr>
</table>
#### Verify that i18n of the default label still works
<table>
<tr>
<td valign="top" width="650">
1. Make sure that the code snippet from the first test is still deactivated.
2. Head over to `/wp-admin/options-general.php` and select `German` as the `Site Language`.
3. Head over to `/wp-admin/update-core.php?force-check=1` and fetch translations.
4. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
5. Select a payment method apart from `PayPal`, e.g. `Credit Card (Stripe)`.
6. Verify that the button label says `Kostenpflichtig bestellen`.
</td>
<td valign="top" width="250">
<img width="394" alt="Screenshot 2022-09-16 at 11 17 21" src="https://user-images.githubusercontent.com/3323310/190555655-05376284-a4f7-429b-872e-4c203009d3c9.png">
</td>
</tr>
</table>
### Exposed data related to the checkout through wordpress/data stores ([6612](https://github.com/woocommerce/woocommerce-blocks/pull/6612))
#### User Facing Testing
The full instructions for testing this PR can be
found [here](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/internal-developers/testing/cart-checkout/data-stores.md)
. At a minimum, we will need to smoke test by trying the
different [stripe failure](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/internal-developers/testing/cart-checkout/data-stores.md#stripe-failures)
modes
### Add simple, large & two menus footer patterns. ([7306](https://github.com/woocommerce/woocommerce-blocks/pull/7306))
#### User Facing Testing
1. In a new page or a template, go to the patterns tab and make sure all 6 patterns appear under the WooCommerce
category dropdown.
2. Insert each one of the footer patterns, save and make sure they all look as expected on the GH discussions.
### Add minimal, large, and essential header patterns ([7292](https://github.com/woocommerce/woocommerce-blocks/pull/7292))
#### User Facing Testing
1. In a new page or a template, go to the patterns tab and make sure all 6 patterns appear under the WooCommerce
category dropdown.
2. Insert each one of the header patterns, save and make sure they all look as expected on the GH discussions.
### Add `showRemoveItemLink` as a new checkout filter to allow extensions to toggle the visibility of the `Remove item` button under each cart line item. ([7242](https://github.com/woocommerce/woocommerce-blocks/pull/7242))
#### User Facing Testing
1. Install [this test plugin](https://github.com/woocommerce/woocommerce-blocks/files/9665640/some-extension-name.zip)
to your site and activate it. It contains a filter to prevent the `Remove item` button showing up for a product
called `Beanie`
2. Add a product named Beanie to your cart.
3. Go to the Cart block.
4. Ensure you cannot see a button to remove it from your cart.
5. View the `docs/third-party-developers/extensibility/checkout-block/available-filters.md` file and ensure it is good,
and the new text we added to describe the filter makes sense.
### Add support for a GT tracking ID for Google Analytics ([7213](https://github.com/woocommerce/woocommerce-blocks/pull/7213))
#### User Facing Testing
1. Install
the [Google Analytics Integration Extension](https://github.com/woocommerce/woocommerce-google-analytics-integration)
2. Set up the extension with a GT-X type ID from your Google Analytics account. Google Analytics account is required to
test this. This can be retrieved by going to the [analytics dashboard](https://analytics.google.com/) and going to a
data stream > Configure Tag Settings, see full
instructions [here](https://support.google.com/tagmanager/answer/12002338#zippy=%2Cset-up-your-google-tag-from-google-analytics-instructions)
![image](https://user-images.githubusercontent.com/11388669/191953041-8593adb6-5dec-403c-9e73-45f6337ddb4b.png)
3. Install [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en) browser extension. It needs to be installed, but do not click it (debug mode should be off).
4. Go to the store and trigger some events using the All Products Block and Cart block. For example an add to cart
event.
5. Google Analytics Debugger should indicate that an event was fired.
6. Instead of the Google Analytics Debugger we can also check the Browser Dev Tools > Network and confirm we see
requests being sent to a URL similar to: `https://region1.google-analytics.com/g/collect` (region could vary)
### Separate filter titles and filter controls by converting filter blocks to use Inner Blocks ([6978](https://github.com/woocommerce/woocommerce-blocks/pull/6978))
#### User Facing Testing
##### Insert new blocks
1. Check out this PR, built.
2. Add a new page, add All Products, Active Filters, Filter by Price, Filter by Attribute, and Filter by Stock blocks to
the page.
3. Check the newly inserted filter blocks, for each block, a wrapper block containing the heading and filter control
blocks were inserted.
4. Try changing block settings and style, and see if they're updated on the front end.
5. See filter blocks work as expected.
##### Upgrade existing blocks
1. Check out `trunk`.
2. Add a new page, add All Products, Active Filters, Filter by Price, Filter by Attribute, and Filter by Stock blocks to
the page.
3. Try changing block settings and style.
4. Check out this PR and build.
5. Edit the page created in step 2nd above.
6. See the upgrade notices for filter blocks as shown
in [this comment](https://github.com/woocommerce/woocommerce-blocks/pull/6978#issuecomment-1252087654).
7. Click the upgrade button, see:
- The block is replaced by a filter wrapper block contain the heading and the filter block control blocks.
- The modified title remains.
8. Save the page, see all filter blocks continue functioning as expected on the front end.
### StoreApi requests will return a `Cart-Token` header that can be used to retrieve the cart from the corresponding session via **GET** `/wc/store/v1/cart`. ([5953](https://github.com/woocommerce/woocommerce-blocks/pull/5953))
#### User Facing Testing
1. Using a REST API client
2. Disabling basic auth
3. Adding something to the cart via POST `/wc/store/v1/cart/add-item`. Note down the value of the `Cart-Token` header.
4. Deleting or disabling cookies before requesting GET `/wc/store/v1/cart`
5. No items
6. Repeat this request with a header called `Cart-Token` and the value you noted earlier.
7. Cart response has items!
### Fixed HTML rendering in description of active payment integrations ([7313](https://github.com/woocommerce/woocommerce-blocks/pull/7313))
#### Screenshots
<table>
<tr>
<td>Before:
<br><br>
![7312-before](https://user-images.githubusercontent.com/3323310/194226310-aef0c678-309d-40dd-bfb7-8a39dff5448e.png)
</td>
<td>After:
<br><br>
![7312-after](https://user-images.githubusercontent.com/3323310/194226296-aadc639f-a01c-417c-92c9-214c014b5ae2.png)
</td>
</tr>
</table>
#### User Facing Testing
1. Install the [WooCommerce Stripe Payment Gateway](https://wordpress.org/plugins/woocommerce-gateway-stripe/).
2. Head over to `/wp-admin/admin.php?page=wc-settings&tab=checkout`.
3. Activate various Stripe payment methods, e.g. Stripe SEPA Direct Debit.
4. Head over to the Checkout block in the editor.
5. Click on the Payments Options inner block.
6. Verify that all descriptions of active payment integrations render HTML.
### Hide the shipping address form from the Checkout when the "Force shipping to the customer billing address" is enabled ([7268](https://github.com/woocommerce/woocommerce-blocks/pull/7268))
| Before | After |
| ------ | ----- |
|![image](https://user-images.githubusercontent.com/11503784/194019850-885528a2-aea6-40c9-bfdc-3f724ad5be80.png)|![image](https://user-images.githubusercontent.com/11503784/194019899-38245040-ca69-4c6e-afd6-671c0cb2595f.png)|
#### User Facing Testing
1. Go to `wp-admin/admin.php?page=wc-settings&tab=shipping&section=options` page.
2. Enable the `Force shipping to the customer billing address` option and save the changes.
3. Go Checkout block, and confirm shipping address form is not visible.
4. Change the billing address, confirm the shipping address in the order summary gets changed and shipping methods are
updated.
### Fixed an error where adding new pages would cause an infinite loop and large amounts of memory use in redux ([7256](https://github.com/woocommerce/woocommerce-blocks/pull/7256))
#### User Facing Testing
1. Open the editor on any page/create a new page.
2. View the console and ensure no errors about `RangeError: Maximum call stack size exceeded` or similar appear.
3. Add the Checkout Block, ensure the editor works and the block is displayed correctly
4. Make a new page and add the Cart block, ensure the editor works and the block is displayed correctly.
5. Do a test order using the Cart and Checkout blocks.
### Ensure error messages containing HTML are shown correctly in the Cart and Checkout blocks ([7231](https://github.com/woocommerce/woocommerce-blocks/pull/7231))
| Before | After |
| ------ | ----- |
|<img width="1006" alt="Screen Shot 2022-09-26 at 12 17 39 PM" src="https://user-images.githubusercontent.com/56378160/192390815-3672e229-1491-4eed-bf71-2deaa3c7e0f8.png">|<img width="763" alt="Screen Shot 2022-09-26 at 12 34 36 PM" src="https://user-images.githubusercontent.com/56378160/192390876-271535a3-502b-4bca-b858-0ca8b56bc641.png">|
#### User Facing Testing
1. Check out branch 1287-gh-Automattic/woopay
2Update the code:
In src/Checkout/PaymentsHandler.php, comment or remove the if around the exception:
```php
// if ( empty( $customer_id ) ) {
$session_data = WooPaySession::UNSANITIZED_get_data();
$blog_checkout_url = esc_url( add_query_arg( 'skip_platform_checkout', 'true', $session_data['store_data']
['blog_checkout_url'] ) );
/* translators: %1$s opening anchor tag with url, %2$s closing anchor tag */
$error_message = __( 'we were unable to process your payment. Please %1$s go back to the merchant store %2$s and
log into WooPay again.', 'woopay' );
$open_tag = '<a href="' . $blog_checkout_url . '">';
$close_tag = '</a>';
throw new InvalidSessionException(
sprintf( $error_message, $open_tag, $close_tag ),
);
// }
```
3. Get a valid checkout_session by checking out with a valid email and filling in the OTP code.
4. Place an order and see the error message
### Prevent locked inner blocks from sometimes displaying twice ([6676](https://github.com/woocommerce/woocommerce-blocks/pull/6676))
| Before | After |
| ------ | ----- |
| <img width="470" alt="image" src="https://user-images.githubusercontent.com/5656702/178464536-972f2ce2-4679-4e7e-9222-1408713154d2.png"> | <img width="479" alt="image" src="https://user-images.githubusercontent.com/5656702/178462926-506778e6-6576-4c7d-b32e-84fbebf6795e.png"> |
#### User Facing Testing
1. Install the [newsletter-test](https://github.com/woocommerce/newsletter-test) plugin to your site
2. Go to the Checkout block in your editor
3. Observe the `I want to receive updates about products and promotions.` checkbox in the customer information block. Ensure it only displays once.
4. Save the page and ensure the newsletter signup block is still only shown once.
5. Visit the block on the front-end and ensure the newsletter signup block only shows once.
### Improve visual consistency between block links. ([7357](https://github.com/woocommerce/woocommerce-blocks/pull/7357))
| Before | After |
| ------ | ----- |
| <img width="299" alt="CleanShot 2022-10-07 at 16 02 20@2x" src="https://user-images.githubusercontent.com/20469356/194635589-3c7f80a8-22d2-487d-b800-9b51f586d34e.png"> | <img width="289" alt="CleanShot 2022-10-07 at 16 04 34@2x" src="https://user-images.githubusercontent.com/20469356/194635923-b8cdf40c-60be-4168-ba85-0a21a5dd593d.png"> |
#### User Facing Testing
1. Create a regular page (Pages > Add New) and add the All Product block to it;
2. Add the Active Filters block;
3. Add the Filter By Attribute block;
4. Select an attribute from the Filter By Attribute block and apply it;
5. When the page reloads, check if the "Clear All" button (in the Active Filters block) and the "Reset" button (in Filter By Attribute block) have the following properties:
> Font size: 14px
> Font weight: normal
> Text decoration: underlined
6. Hover the mouse over the "Clear All" button and the "Reset" button and make sure the text decoration is changed to `none` (no underline) while the other properties remain the same:
> Font size: 14px
> Font weight: normal
> Text decoration: none
### Fix a problem that causes an infinite loop when inserting Cart block in wordpress.com ([7367](https://github.com/woocommerce/woocommerce-blocks/pull/7367))
#### User Facing Testing
1. Get a zip of this plugin (from below) and upload it to a wordpress.com website.
2. Go to the editor and try to insert Cart, it should work.
3. Make sure no block is missing.
<img width="1279" alt="image" src="https://user-images.githubusercontent.com/14235870/195155762-297acdd8-6180-4231-ba9a-5fac07092cc4.png">