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

# Testing notes and ZIP for release 3.0.0

Zip file: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/4953535/woocommerce-gutenberg-products-block.zip)

**Note: the version showing up for the above file is 2.10.0-dev but it actually is the build for 3.0.0 (version bumps haven't happened yet).**

## Verify Single Product block is not available

-   Verify in this build that the Single Product block is not available

## When included as a package in Woo Core

-   Verify that the Cart and Checkout blocks are not available.
-   Verify that the Single Product block is not available.

## Fix Credit Card Input font size in some themes

### #2668

1. Change your store theme to Twenty Twenty.
2. Go to the Checkout block and select the Credit Card payment method provided by Stripe.
3. Introduce some numbers to Credit Card inputs and verify they have the same font size as the rest of the block.

_Before:_
![image](https://user-images.githubusercontent.com/3616980/87529018-a854b200-c68e-11ea-954f-c1843e0bd341.png)

_After:_
![image](https://user-images.githubusercontent.com/3616980/87527780-e4871300-c68c-11ea-9549-92d59b1a544c.png)

1. Go to Stripe settings and check 'Inline Credit Card Form'.
2. Go back to the Checkout block and notice the card icon is not too small and the label doesn't overlap the card icon.

_Before:_
![image](https://user-images.githubusercontent.com/3616980/87528904-7d6a5e00-c68e-11ea-8a46-689817e0e985.png)

_After:_
![image](https://user-images.githubusercontent.com/3616980/87528730-33817800-c68e-11ea-92ab-e82e9de58d0b.png)

### #2867 and #2868

1. Check the credit card inputs when in a wide viewport and verify 'Expiry Date' and 'CVV/CVC' input fields have the same width.
2. Make the viewport smaller and verify 'CVV/CVC' field gets smaller faster, since it will have fewer characters than 'Expiry Date'.
3. Also notice 'Card Number' doesn't become too narrow.

_Before:_
![image](https://user-images.githubusercontent.com/3616980/87537963-c83ea280-c69b-11ea-89b9-0e3b5427cee9.png)

_After:_
![image](https://user-images.githubusercontent.com/3616980/87537884-a6ddb680-c69b-11ea-8e74-4aa806bd46fa.png)

Bonus points for doing some testing with other themes, changing the default font size of your browser, etc.

## Cash on Delivery Payment method

1. Go to `WooCommerce > Settings > Payments` and configure `Cash on Delivery` payment gateway.
2. Set up cart & checkout pages with blocks.
3. Add stuff to cart, proceed to checkout.
4. Complete purchase with COD and confirm everything's working as expected.
5. COD has options so merchant can limit it to shippable products and / or specific shipping methods. Experiment with these settings and confirm that COD works correctly, and is only available when appropriate.
6. Confirm that all other payment gateways still work correctly.

Bonus points - set up more complicated shipping (multiple packages, different carriers) & orders and confirm that the correct payment methods are available dependent on selected shipping rate.

## Deregister core cart/checkout scripts and styles when rendering the blocks

**Test Empty cart redirects to the Full cart when a product is added:**

1. Go to the cart page without having any product in the cart. Add one from the Block below and verify you are redirected to the `full cart` view.
1. Repeat the step above but before doing that, edit the empty cart template and replace the Newest products block with a shortcode (ie: `[products limit="3" columns="3" visibility="featured" ]`).

Note: It's not possible to test this flow with the All Products block because of #2836.

**Test there are no regressions in the purchase flow:**

1. Do a purchase from start to end with the blocks and verify everything works and the confirmation page appears after payment.
1. Do a purchase with the shortcodes and verify there are no regressions: functionality should work as usual and styles should be loaded.

## Show products on backorder

1. Edit a product and under Inventory set:
   1.1 Manage stock? Checked.
   1.2 Stock quantity: 0.
   1.3 Allow backorders? Allow, but notify customer.
2. Update the product and go to the frontend of the store.
3. Add that product to the cart.
4. Go to the Cart page and verify the Cart block shows the product is on backorder.
5. Proceed to the Checkout page and verify the backorder notification appears in the sidebar.
6. Would be good to verify there are no style regressions with the 'low stock' and 'product sale' badges.

## Lazy Loading Atomic Components

-   Test the All Products block and verify that editing element blocks (the inner blocks that can be added/re-positioned for the rendered grid) on the backend and the behavior of those blocks on the frontend work as expected. The All Products block should work with existing filter blocks as well.
-   Verify adding the All Products block to a new page works as expected with no errors.
-   Verify loading a pre-existing page with the block from an earlier version of the blocks plugin works as expected.

## Remove Dashicon classes

Testing means ensuring there are no visual regressions in the affected blocks:

1. Cart: verify coupon chip close icon looks as it did. \
   ![image](https://user-images.githubusercontent.com/3616980/87140895-816b3a00-c2a2-11ea-95a8-4b2d13ff308e.png)
2. Attribute Filter: set Query Type: AND, Display Style: Dropdown. Then, select a value and check that the cross icon still shows up correct. \
   ![image](https://user-images.githubusercontent.com/3616980/87140925-8cbe6580-c2a2-11ea-84da-24bd67923d0a.png)

## Unify Chip styles

1. Ideally, set your theme background to something different from white so you can verify inputs are still legible.
2. Create a page with the All Products block and the Filter Products by Attribute (set the attributes to Query Type: OR, Display Style: Dropdown) and Active Filters (Display Style: Chips).
3. Filter Products by Attribute:
   3.1. Try adding new filters.
   3.2. Verify chips have the correct styles.
   3.3. Try removing them with the keyboard (backspace or `Del`).
   3.4. Try removing them clicking on the chip name.
4. Active Filters:
   3.1 Verify chips have the correct styles.
5. Catching regressions:
   5.1. Verify there are no regression in the Filter Products by Attribute and the Active Filters blocks with other attribute combinations: verify everything is still working and there are no visual bugs.
   5.2. Verify there are no regressions with the Chips in the Cart: try adding a coupon in the Cart or Checkout blocks and verify it still looks correct.

## Support bank transfer (BACS) payment method in checkout block

1. Visit `WooCommerce > Settings > Payments` and activate & configure bank transfer.
2. On front end, add stuff to cart and proceed to checkout.
3. Select bank transfer payment and complete order.

Confirm that bank details/instructions are displayed in appropriate places (checkout, order received, order emails) and order can be fulfilled as per normal flow for BACS/"manual"/offline payment orders.

Confirm that other payment methods still work correctly.

## Don't load frontend scripts in the editor

1. Create a post with some JS-based blocks (_All Products_ block and filters blocks, for example).
2. Open your browser devtools and switch to the network tab. There, filter by files that contain the string `frontend` in their name.
3. Reload the tab.
4. Verify no file ending with `-frontend.js` was loaded.
5. With an WP version between 5.2.0 and 5.3.0 (ie: 5.2.5) and verify legacy scripts are still being enqueued.

<!-- FEEDBACK -->

---

[We're hiring!](https://woocommerce.com/careers/) Come work with us!

🐞 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/300.md)

<!-- /FEEDBACK -->