282 lines
11 KiB
Markdown
282 lines
11 KiB
Markdown
|
# 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-product-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.
|