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

# Testing notes and ZIP for release 2.7.0

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

## Cart and Checkout styles

-   Create pages with the Cart and Checkout blocks.
-   Check the styles of both pages and verify:
    -   The Cart and Checkout headings match the styles inherited from the theme (#2597)
    -   In Checkout, step progress indicators match the heading style and they don't have a background circle (#2649).
        ![Checkout heading styles](https://user-images.githubusercontent.com/3616980/84032118-1e327300-a997-11ea-8c06-363ac2bd78b3.png)
        -   In Checkout, the item quantity badges are visible with dark backgrounds (with Storefront, you can change the background color in Appearance > Customize > Background) (#2619). \
            ![Item quantity badges](https://user-images.githubusercontent.com/3616980/84031988-ed523e00-a996-11ea-8545-339111e31f5f.png)
        -   Try adding the code snippet from the [Cart and Checkout theming](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/theming/cart-and-checkout.md#item-quantity-badge) docs (you can do it via a child theme or directly in the browser devtools) and verify the item quantity badge styles update accordingly.
        -   In general, verify there were no regressions introduced after 2.6.0.
-   The Cart block title should be `Your cart (X items)` (#2615). \
    ![Cart block title](https://user-images.githubusercontent.com/3616980/84032294-66ea2c00-a997-11ea-8d6d-929668cb702b.png)
-   Introduce an invalid credit card number and verify there is enough padding around the validation errors (#2662). \
    ![Credit card validation errors](https://user-images.githubusercontent.com/3616980/84011799-f0d5cd00-a976-11ea-8cb2-a7e7ef38b0b0.png)
-   In the editor, add the Cart block and verify the headings have the proper font size and there is margin between the `Proceed to Checkout` button and the credit card icons -- to get the icons, you need to install the Stripe payment gateway (#2486).

| 2.6.0                                                                                                                           | 2.7.0                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| ![Cart in editor in 2.6.0](https://user-images.githubusercontent.com/3616980/81926566-71a4e180-95e2-11ea-8c43-7a5064831e5b.png) | ![Cart in editor in 2.7.0](https://user-images.githubusercontent.com/3616980/81926959-24753f80-95e3-11ea-8cd4-6374ff3870ce.png) |

### Specific themes

-   [Hello theme](https://elementor.com/hello-theme/):
    -   Verify the text inside the selects is visible on hover (#2647). \
        ![Select in Hello theme](https://user-images.githubusercontent.com/3616980/84032650-f4c61700-a997-11ea-969d-6427d1e221bb.png)
-   Twenty Twenty:
    -   Add the All Products block and the Hand-picked Products block in a page and verify (#2573): - That with the All Products block you can add the On Sale badge and it's correctly aligned in the editor and the frontend (before, it was always shown on top of the image). \
    ![All Products in Twenty Twenty](https://user-images.githubusercontent.com/3616980/83013870-fef22800-a01d-11ea-8ea8-21229285d10a.png)
-   The Hand-picked Products block discounted prices are not underlined. \
    ![Hand-picked Products in Twenty Twenty](https://user-images.githubusercontent.com/3616980/83013599-8e4b0b80-a01d-11ea-88ab-a1537110c4e2.png)
- Go to the Checkout block and verify font sizes look correct (they are inherited from the theme) (#2533).

## Cart and Checkout error flow (#2655)

### Scenario One: initial report fixed

1. On Checkout introduce an invalid card number `4000 0000 0000 0002`.
2. Try to place the order and notice the error `The card was declined`.
3. Replace the credit card number with a valid one (`4242 4242 4242 4242`).
4. Try to place the order again and verify the process works.

### Scenario Two: Trying to break via validation errors

You'll need to be logged in with a user that has saved payment methods.

1. On checkout, select CC payment method and then select a saved payment method again.
2. Leave one of the required fields empty.
3. Submit the checkout which should cause a validation error on the field.
4. Fix the validation error
5. Submit again and checkout should complete using the selected saved payment method.

### Scenario Three: Variation of trying to break via validation errors

1. On checkout, select CC payment method.
2. Fill out cc number that will trigger declined card (`4000 0000 0000 0002`).
3. After server response (with error), clear a required field.
4. Select saved payment method.
5. Submit the checkout -> this should produce a validation error.
6. Fix the field.
7. Submit the checkout and this should result in the purchase completing successfully.

### Scenario Four: Payment with Cheque after failed CC

1. On Checkout, select CC payment method.
2. Fill out cc number that will trigger declined card (`4000 0000 0000 0002`).
3. After server response (with error), select cheque payment method.
4. Submit the checkout and this should result in the purchase completing successfully for the cheque payment method.

## No shipping methods placeholder when they are all disabled (#2543)

> Requires at least WooCommerce 4.3

1. Disable all shipping methods from your store.
2. Edit a page with the _Checkout_ block and verify the 'no shipping methods' placeholder appears.

## Feature flags (#2591)

-   Verify you can't add the Single Product block.

## Single Product page regression (#2648)

-   Go to a product page.
-   Verify you can see the product images as usual. \
    ![Single Product page](https://user-images.githubusercontent.com/3616980/84032892-4f5f7300-a998-11ea-9f2d-f2d0e57860c9.png)

### Product grid inconsistencies (#2428)

-   Update a product so it has a very small image (100px or less).
-   Add the All Products block and a PHP-based product grids block (Hand-picked Products, for example) and verify: - Both of them have the same styles for prices. - Both of them scale up the small image.
    _Hand-picked Products on top, All Products below:_ \
    ![Product grid blocks by default](https://user-images.githubusercontent.com/3616980/83166453-3d1b4480-a10f-11ea-813f-2515b26dedac.png)
-   Add the [code snippets](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/theming/product-grid-270.md#product-grid-blocks-style-update-in-270) from the theming docs to undo the changes and verify: - Hand-picked Products block doesn't scale up the image anymore. - All Products block shows discounted prices in two lines.
    _Hand-picked Products on top, All Products below:_ \
    ![Product grid blocks with the code snippets applied](https://user-images.githubusercontent.com/3616980/83164436-828a4280-a10c-11ea-81c1-b9a62cdf52b5.png)

[![Create Todo list](https://raw.githubusercontent.com/senadir/todo-my-markdown/master/public/github-button.svg?sanitize=true)](https://git-todo.netlify.app/create)

<!-- 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/270.md)

<!-- /FEEDBACK -->