Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-blocks/docs/internal-developers/testing/smoke-testing.md

282 lines
11 KiB
Markdown
Raw Blame History

# Smoke Testing <!-- omit in toc -->
## Table of Contents <!-- omit in toc -->
- [Setup](#setup)
- [1. Create a page with all regular and SSR blocks (such as the product grids) setup and configured.](#1-create-a-page-with-all-regular-and-ssr-blocks-such-as-the-product-grids-setup-and-configured)
- [2. Create a page with the All Products Block, and some Filter Blocks, setup to test that functionality in isolation. Using the columns block here too is a good idea to keep things organized.](#2-create-a-page-with-the-all-products-block-and-some-filter-blocks-setup-to-test-that-functionality-in-isolation-using-the-columns-block-here-too-is-a-good-idea-to-keep-things-organized)
- [3. Add the Cart and Checkout block to the relevant WooCommerce pages.](#3-add-the-cart-and-checkout-block-to-the-relevant-woocommerce-pages)
- [Editor Tests](#editor-tests)
- [Frontend Tests](#frontend-tests)
We generally consider smoke testing using this definition [from Wikipedia](<https://href.li/?https://en.wikipedia.org/wiki/Smoke_testing_(software)>):
> **Smoke Testing** is a subset of test cases that cover the most important functionality of a component or system, used to aid assessment of whether the main functions of the software appear to work correctly. It is a set of tests run on each new build of a product to verify that the build is testable before the build is released into the hands of the test team
When testing builds the following things should be tested to ensure critical parts of the Blocks plugin are still functional.
## Setup
To make future testing more efficient, we recommend setting up some Blocks in advance so you can repeat tests on them whenever smoke testing.
### 1. Create a page with all regular and SSR blocks (such as the product grids) setup and configured
<details>
<summary>You can copy and paste the following code into a new page to add all the blocks (click):</summary>
```html
<!-- wp:woocommerce/featured-product {"editMode":false,"productId":15} -->
<!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter">
<a
class="wp-block-button__link"
href="https://ephemeral-aljullu-20200929.atomicsites.blog/product/beanie/"
>Shop now</a
>
</div>
<!-- /wp:button -->
<!-- /wp:woocommerce/featured-product -->
<!-- wp:woocommerce/featured-category {"editMode":false,"categoryId":16} -->
<!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter">
<a
class="wp-block-button__link"
href="https://ephemeral-aljullu-20200929.atomicsites.blog/product-category/clothing/"
>Shop now</a
>
</div>
<!-- /wp:button -->
<!-- /wp:woocommerce/featured-category -->
<!-- wp:woocommerce/handpicked-products {"editMode":false,"products":[15,32,16]} /-->
<!-- wp:woocommerce/product-best-sellers /-->
<!-- wp:woocommerce/product-top-rated /-->
<!-- wp:woocommerce/product-new /-->
<!-- wp:woocommerce/product-on-sale /-->
<!-- wp:woocommerce/product-category {"categories":[16]} /-->
<!-- wp:woocommerce/product-tag /-->
<!-- wp:woocommerce/products-by-attribute {"attributes":[{"id":22,"attr_slug":"pa_color"}],"editMode":false} /-->
<!-- wp:woocommerce/product-categories /-->
<!-- wp:woocommerce/product-categories {"isDropdown":true} /-->
<!-- wp:woocommerce/reviews-by-product {"editMode":false,"productId":15} -->
<div
class="wp-block-woocommerce-reviews-by-product wc-block-reviews-by-product has-image has-name has-date has-rating has-content"
data-image-type="reviewer"
data-orderby="most-recent"
data-reviews-on-page-load="10"
data-reviews-on-load-more="10"
data-show-load-more="true"
data-show-orderby="true"
data-product-id="15"
></div>
<!-- /wp:woocommerce/reviews-by-product -->
<!-- wp:woocommerce/reviews-by-category {"editMode":false,"categoryIds":[16]} -->
<div
class="wp-block-woocommerce-reviews-by-category wc-block-reviews-by-category has-image has-name has-date has-rating has-content has-product-name"
data-image-type="reviewer"
data-orderby="most-recent"
data-reviews-on-page-load="10"
data-reviews-on-load-more="10"
data-show-load-more="true"
data-show-orderby="true"
data-category-ids="16"
></div>
<!-- /wp:woocommerce/reviews-by-category -->
<!-- wp:woocommerce/all-reviews -->
<div
class="wp-block-woocommerce-all-reviews wc-block-all-reviews has-image has-name has-date has-rating has-content has-product-name"
data-image-type="reviewer"
data-orderby="most-recent"
data-reviews-on-page-load="10"
data-reviews-on-load-more="10"
data-show-load-more="true"
data-show-orderby="true"
></div>
<!-- /wp:woocommerce/all-reviews -->
<!-- wp:woocommerce/product-search {"formId":"wc-block-product-search-0"} -->
<div class="wp-block-woocommerce-product-search">
<div class="wc-block-product-search">
<form
role="search"
method="get"
action="https://ephemeral-aljullu-20200929.atomicsites.blog/"
>
<label
for="wc-block-product-search-0"
class="wc-block-product-search__label"
>Search</label
>
<div class="wc-block-product-search__fields">
<input
type="search"
id="wc-block-product-search-0"
class="wc-block-product-search__field"
placeholder="Search products…"
name="s"
/><input
type="hidden"
name="post_type"
value="product"
/><button
type="submit"
class="wc-block-product-search__button"
label="Search"
>
<svg
aria-hidden="true"
role="img"
focusable="false"
class="dashicon dashicons-arrow-right-alt2"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewbox="0 0 20 20"
>
<path d="M6 15l5-5-5-5 1-2 7 7-7 7z"></path>
</svg>
</button>
</div>
</form>
</div>
</div>
<!-- /wp:woocommerce/product-search -->
```
</details>
In the `wp:woocommerce/product-search` substitute the URL used for the `action` attribute to your site URL or the block will not embedd correctly.
### 2. Create a page with the All Products Block, and some Filter Blocks, setup to test that functionality in isolation. Using the columns block here too is a good idea to keep things organized
<details>
<summary>You can copy and paste the following code into a new page to add all the blocks (click):</summary>
```html
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:woocommerce/price-filter -->
<div
class="wp-block-woocommerce-price-filter is-loading"
data-showinputfields="true"
data-showfilterbutton="false"
data-heading="Filter by price"
data-heading-level="3"
>
<span
aria-hidden="true"
class="wc-block-product-categories__placeholder"
></span>
</div>
<!-- /wp:woocommerce/price-filter -->
<!-- wp:woocommerce/attribute-filter {"attributeId":1,"heading":"Filter by Color","displayStyle":"dropdown"} -->
<div
class="wp-block-woocommerce-attribute-filter is-loading"
data-attribute-id="1"
data-show-counts="true"
data-query-type="or"
data-heading="Filter by Color"
data-heading-level="3"
data-display-style="dropdown"
>
<span
aria-hidden="true"
class="wc-block-product-attribute-filter__placeholder"
></span>
</div>
<!-- /wp:woocommerce/attribute-filter -->
<!-- wp:woocommerce/attribute-filter {"attributeId":2,"heading":"Filter by Size"} -->
<div
class="wp-block-woocommerce-attribute-filter is-loading"
data-attribute-id="2"
data-show-counts="true"
data-query-type="or"
data-heading="Filter by Size"
data-heading-level="3"
>
<span
aria-hidden="true"
class="wc-block-product-attribute-filter__placeholder"
></span>
</div>
<!-- /wp:woocommerce/attribute-filter -->
<!-- wp:woocommerce/active-filters -->
<div
class="wp-block-woocommerce-active-filters is-loading"
data-display-style="list"
data-heading="Active filters"
data-heading-level="3"
>
<span
aria-hidden="true"
class="wc-block-active-filters__placeholder"
></span>
</div>
<!-- /wp:woocommerce/active-filters -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%">
<!-- wp:woocommerce/all-products {"columns":3,"rows":3,"alignButtons":false,"contentVisibility":{"orderBy":true},"orderby":"date","layoutConfig":[["woocommerce/product-image"],["woocommerce/product-title"],["woocommerce/product-price"],["woocommerce/product-rating"],["woocommerce/product-button"]]} -->
<div
class="wp-block-woocommerce-all-products wc-block-all-products"
data-attributes='{"alignButtons":false,"columns":3,"contentVisibility":{"orderBy":true},"isPreview":false,"layoutConfig":[["woocommerce/product-image"],["woocommerce/product-title"],["woocommerce/product-price"],["woocommerce/product-rating"],["woocommerce/product-button"]],"orderby":"date","rows":3}'
></div>
<!-- /wp:woocommerce/all-products -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
```
</details>
### 3. Add the Cart and Checkout block to the relevant WooCommerce pages
## Editor Tests
- [ ] Ensure all WooCommerce Blocks are shown in the Block Inserter.
- [ ] Check behaviour of Blocks added to a previous saved page from earlier plugin version
- [ ] Do they look correct?
- [ ] Ensure there are no block invalidation errors for blocks added to a page in a prior version.
- [ ] Can you change options/attributes in the Block inspector?
- [ ] Are changes persisted on save?
- [ ] Is the Browser error console free from errors/notices/warnings?
- [ ] Test inserting various blocks into the editor
- [ ] This can be verified by copying and pasting the code examples above. However, please do also test manually inserting the next three blocks as representative examples for related blocks.
- [ ] All Products Blocks (this is powered by the Store API)
- [ ] Featured Product (this is powered by the REST API)
- [ ] On Sale Products (this is SSR)
- [ ] Is the Browser error console free from errors/notices/warnings after inserting them?
- [ ] Do they persist and continue to display correctly after save/refresh?
## Frontend Tests
- [ ] Do the blocks on your pre-made pages render correctly?
- [ ] Are the blocks with user facing interactions working as expected without errors in the browser console or user facing errors (such as All Products block and filter blocks).
- [ ] Do critical flows for the Cart and Checkout blocks work?
- [ ] Address and shipping calculations
- [ ] Payment with core payment methods
- [ ] Payment with Stripe (extension) and saved payment methods
- [ ] Payment with Express payment methods (Chrome Pay or Apple Pay)
- [ ] Make sure you test with logged in user and in browser incognito mode.
Reference in New Issue View Git Blame Copy Permalink