142 lines
7.2 KiB
Markdown
142 lines
7.2 KiB
Markdown
# Testing notes and ZIP for release 8.6.0
|
|
|
|
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/9648129/woocommerce-gutenberg-products-block.zip)
|
|
|
|
## Feature plugin and package inclusion in WooCommerce
|
|
|
|
### Allow rendering HTML in shipping package names [7147](https://github.com/woocommerce/woocommerce-blocks/pull/7147)
|
|
|
|
#### Test HTML rendering in shipping package names
|
|
|
|
1. Install the [Multiple Packages for WooCommerce](https://wordpress.org/plugins/multiple-packages-for-woocommerce/) plugin.
|
|
2. Go to `/wp-admin/admin.php?page=wc-settings&tab=multiple_packages`, enable the Multiple Packages for Shipping plugin and select `Product (individual)` for the option `Group By`.
|
|
3. Install the [Code Snippets](https://wordpress.org/plugins/code-snippets/) plugin.
|
|
4. Add the following code snippet to the site:
|
|
|
|
```php
|
|
add_filter( 'woocommerce_shipping_package_name', 'test_package_name', 1, 3 );
|
|
function test_package_name( $title, $index, $package ) {
|
|
return $title . '<br/>test<br/>test2';
|
|
}
|
|
```
|
|
|
|
5. Ensure to have one page with the Cart block and one page with the Checkout block.
|
|
6. Add two products to the cart.
|
|
7. Verify that the page with the Cart block shows the shipping package name with line breaks instead of showing `Shipping method<br/>test<br/>test2`.
|
|
8. Verify that the page with the Checkout block shows the shipping package name with line breaks instead of showing `Shipping method<br/>test<br/>test2`.
|
|
9. Replace the previous code snippet with the following one:
|
|
|
|
```php
|
|
add_filter( 'woocommerce_shipping_package_name', 'test_xss', 1, 3 );
|
|
function test_xss( $title, $index, $package ) {
|
|
return $title . '<br><a href="https://woocommerce.com/" target="_blank">WooCommerce.com<img src=x onerror="javascript:alert('XSS')"></a>';
|
|
}
|
|
```
|
|
|
|
10. Verify that the page with the Cart block and the page with the Checkout block:
|
|
|
|
- do not show an XSS alert.
|
|
- do show the package name and the URL [WooCommerce.com](https://woocommerce.com/) in the next line and that the URL opens in a new tab when being clicked.
|
|
|
|
#### Test reusable sanitise util (only for developer testing)
|
|
|
|
1. Open `assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx` and change
|
|
|
|
```tsx
|
|
<div
|
|
className="wc-block-components-shipping-rates-control__package-title"
|
|
dangerouslySetInnerHTML={ sanitizeHTML( packageData.name ) }
|
|
/>
|
|
```
|
|
|
|
to
|
|
|
|
```tsx
|
|
<div
|
|
className="wc-block-components-shipping-rates-control__package-title"
|
|
dangerouslySetInnerHTML={ sanitizeHTML( packageData.name, {
|
|
tags: [ 'a' ],
|
|
} ) }
|
|
/>
|
|
```
|
|
|
|
2. Run `npm run build` to build the extension again.
|
|
3. Look up the page with the Cart or the Checkout block from the previous test case.
|
|
4. Verify that the URL [WooCommerce.com](https://woocommerce.com/) is still visible, but that it no longer appears in the next line but in the same line.
|
|
|
|
### Revert "Add static class name for product-details (#6914)" [7191](https://github.com/woocommerce/woocommerce-blocks/pull/7191)
|
|
|
|
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__{name of your variant}`
|
|
|
|
### Prevent Express Checkout block from being cut off [7152](https://github.com/woocommerce/woocommerce-blocks/pull/7152)
|
|
|
|
1. Install the [WooCommerce Stripe Payment Gateway](https://wordpress.org/plugins/woocommerce-gateway-stripe/) plugin.
|
|
2. Go to `/wp-admin/admin.php?page=wc-settings&tab=checkout` and activate the payment method `Stripe` so that the Express Payment block becomes visible.
|
|
3. Create a page and add the Checkout block to it.
|
|
4. Select the Checkout block and verify that the Express Payment block is no longer cut off.
|
|
|
|
### Make chevron clickable in Filter by Product block input [7139](https://github.com/woocommerce/woocommerce-blocks/pull/7139)
|
|
|
|
1. Add the `Filter by Attribute` block and the `All Products` block to a page.
|
|
2. Set the `Filter by Attribute` block display to dropdown and allow selecting multiple options.
|
|
3. Play around with the window size and the options you select, and make sure the pills inside the input don't overlap the chevron.
|
|
4. Verify that when you click on the chevron, the options dropdown appear.
|
|
|
|
### Fix: Inner blocks control position for Cart Block [6973](https://github.com/woocommerce/woocommerce-blocks/pull/6973)
|
|
|
|
1. Go to the Cart Block
|
|
2. Click on the fee inner block
|
|
3. Confirm that the controls appear on the correct side
|
|
|
|
### Create Cross-Sells product list [6645](https://github.com/woocommerce/woocommerce-blocks/pull/6645)
|
|
|
|
#### Test editor behaviour when adding Cart block
|
|
|
|
1. Create a test page and add the Cart block to it.
|
|
2. Verify that the Cart block contains the Cart Cross-Sells inner block.
|
|
3. Verify that the Cart Cross-Sells inner block contains the Heading and Cart Cross-Sells products inner blocks.
|
|
4. Select the Cart Cross-Sells products inner block and verify that the number of visible Cross-Sells products can be adjusted in the editor.
|
|
|
|
#### Test editor behaviour after removing Cross-Sells block
|
|
|
|
1. Create a test page and add the Cart block to it.
|
|
2. Verify that the Cart block contains the Cart Cross-Sells inner block.
|
|
3. Delete the Cart Cross-Sells inner block.
|
|
4. Verify that the Cart Cross-Sells inner block can be reinserted.
|
|
|
|
#### Test frontend behaviour if cart items does not have Cross-Sells products
|
|
|
|
1. Visit the frontend.
|
|
2. Add a product to the cart that does not Cross-Sells products.
|
|
3. Go to the Cart page.
|
|
4. Verify that the Cross-Sells product block is not visible.
|
|
|
|
#### Test frontend behaviour if cart items have Cross-Sells products
|
|
|
|
1. Visit the frontend.
|
|
2. Add a product to the cart that has Cross-Sells products.
|
|
3. Go to the Cart page.
|
|
4. Verify that the Cross-Sells product block is visible.
|
|
5. Add one of the Cross-Sells products, which also has Cross-Sells products, to the cart.
|
|
6. Verify that the added Cross-Sells product had been added to the cart and is no longer visible as a Cross-Sells product.
|
|
7. Verify that the Cross-Sells products, of the product that had been added to the cart in step 6., are visible in the Cross-Sells block.
|
|
|
|
#### Test frontend behaviour if cart items have a Cross-Sells product that is out of stock
|
|
|
|
1. Visit the frontend.
|
|
2. Add a product to the cart that has a Cross-Sells product which is out of stock.
|
|
3. Go to the Cart page.
|
|
4. Verify that the Cross-Sells product block is visible.
|
|
5. Verify that the Cross-Sells product, which is out of stock, does not show an `Add to Cart` button, but a `Read More` button, that links to the corresponding product page.
|
|
|
|
#### Test number of visible Cross-Sells products in the frontend
|
|
|
|
1. Ensure that you have one test product which has more than 6 Cross-Sells products.
|
|
2. Open the cart page in the editor and set the number of visible Cross-Sells items to 1.
|
|
3. Go to the frontend and add the test product from step 1 to the cart.
|
|
4. Go to the cart and verify that only 1 Cross-Sells product is visible.
|
|
5. Repeat steps 2 until 4 and set the number of visible Cross-Sells items to 2, 3, 4, 5 & 6.
|