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

# 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="&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041"></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.