Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

E2E tests for Product Archive Template and Legacy Block #5748

Merged
merged 23 commits into from
Feb 21, 2022

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Feb 8, 2022

This PR adds E2E tests for the Product Archive Template, and refactors a few things used in the Single Product Template which are useful for other Template tests.

Specifically regarding #5657, it covers the following test cases:

  • Should a user navigate to Site Editor > All Templates with an FSE theme active they should see the WooCommerce provided Product Archive block template.
  • Should a user load the Product Archive template, the editor will have the “WooCommerce Product Grid Block” Legacy Template block present.
  • Should a user load the Shop page on the frontend, it will render a list of products.
  • Should a user customise the Product Archive template and save it. The user should see a "Clear customizations" option on the All Templates view (clearing customisations functionality should be covered by Gutenberg)
  • Should a user load the customised Product Archive template the Site Editor should render these customisations
  • Should a user have a customised Product Archive template, these customisations would be present on the frontend.

Closes #5657


Note that, as opposed to #5722, where I opted not to test the functionality of both the template and the block (I tested only the template-related functionality, see discussion there), here I also tested the frontend part for the block itself, due to the fact that the test was fairly simply and straightforward to write.

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

Manual Testing

How to test the changes in this Pull Request:

  1. Remember to npm i when you pull, as there is a requirement for the newest e2e-test-utils.
  2. Run npm run test:e2e -- -i "tests/e2e/specs/backend/site-editing-templates.test.js" and npm run test:e2e -- -i "tests/e2e/specs/frontend/legacy-template-blocks.test.js".
  3. Assess that the included test cases pass.

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above

@sunyatasattva sunyatasattva added skip-changelog PRs that you don't want to appear in the changelog. category: tests focus: FSE Work related to prepare WooCommerce for FSE. labels Feb 8, 2022
@sunyatasattva sunyatasattva self-assigned this Feb 8, 2022
@rubikuserbot rubikuserbot requested a review from a team February 8, 2022 22:58
@github-actions
Copy link
Contributor

github-actions bot commented Feb 8, 2022

Size Change: 0 B

Total Size: 817 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.27 kB
build/active-filters.js 6.95 kB
build/all-products-frontend.js 18.7 kB
build/all-products.js 34.2 kB
build/all-reviews.js 8.06 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/catego--214e300a.js 151 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.72 kB
build/atomic-block-components/add-to-cart--atomic-block-components/category-list--atomic-block-components--68f6c1c4.js 203 B
build/atomic-block-components/add-to-cart-frontend.js 7 kB
build/atomic-block-components/add-to-cart.js 7.5 kB
build/atomic-block-components/button-frontend.js 1.54 kB
build/atomic-block-components/button.js 2.15 kB
build/atomic-block-components/category-list--atomic-block-components/image--atomic-block-components/ratin--2614069e.js 472 B
build/atomic-block-components/category-list-frontend.js 896 B
build/atomic-block-components/category-list.js 500 B
build/atomic-block-components/image-frontend.js 1.84 kB
build/atomic-block-components/image.js 1.49 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating-frontend.js 1.11 kB
build/atomic-block-components/rating.js 719 B
build/atomic-block-components/sale-badge-frontend.js 1.07 kB
build/atomic-block-components/sale-badge.js 685 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator-frontend.js 1.01 kB
build/atomic-block-components/stock-indicator.js 624 B
build/atomic-block-components/summary-frontend.js 1.31 kB
build/atomic-block-components/summary.js 923 B
build/atomic-block-components/tag-list-frontend.js 895 B
build/atomic-block-components/tag-list.js 499 B
build/atomic-block-components/title-frontend.js 1.28 kB
build/atomic-block-components/title.js 933 B
build/attribute-filter-frontend.js 16.8 kB
build/attribute-filter.js 13 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB
build/cart-blocks/checkout-button-frontend.js 1.15 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/filled-cart-frontend.js 767 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/line-items-frontend.js 5.51 kB
build/cart-blocks/order-summary-frontend.js 8.87 kB
build/cart-blocks/totals-frontend.js 321 B
build/cart-frontend.js 45.5 kB
build/cart.js 43.7 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-frontend.js 887 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.48 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.3 kB
build/checkout-blocks/payment-frontend.js 7.76 kB
build/checkout-blocks/shipping-address-frontend.js 974 B
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 47.7 kB
build/checkout.js 45.2 kB
build/featured-category.js 8.61 kB
build/featured-product.js 9.62 kB
build/handpicked-products.js 7.09 kB
build/legacy-template.js 2.18 kB
build/mini-cart-component-frontend.js 14.4 kB
build/mini-cart-contents.js 3.84 kB
build/mini-cart-frontend.js 1.71 kB
build/mini-cart.js 6.39 kB
build/price-filter-frontend.js 12.6 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.36 kB
build/product-categories.js 3.17 kB
build/product-category.js 8.49 kB
build/product-new.js 7.66 kB
build/product-on-sale.js 7.98 kB
build/product-search.js 2.19 kB
build/product-tag.js 7.81 kB
build/product-top-rated.js 7.9 kB
build/products-by-attribute.js 8.38 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 12.6 kB
build/reviews-frontend.js 7.34 kB
build/single-product-frontend.js 22.1 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.5 kB
build/stock-filter.js 6.58 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.51 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.85 kB
build/wc-blocks-editor-style.css 4.85 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.2 kB
build/wc-blocks-style.css 22.2 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 69.7 kB
build/wc-blocks.js 2.62 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

@tjcafferkey
Copy link
Contributor

tjcafferkey commented Feb 10, 2022

I first got the following error, I solved this locally by upgrading the @wordpress/e2e-test-utils package to the latest version (npm install -D @wordpress/e2e-test-utils@latest). This might be something we need to do as part of this PR and/or update the testing instructions to account for this?

Screenshot 2022-02-10 at 10 15 54

After that, there was 1 failing test but I haven't had a chance to look into why as of yet.

Screenshot 2022-02-10 at 10 15 34

All other tests seemed to pass though 👍🏻

@sunyatasattva sunyatasattva force-pushed the test/5656-fse-single-product branch from e276591 to b90736c Compare February 10, 2022 18:27
@sunyatasattva sunyatasattva force-pushed the test/5657-fse-product-archive branch from fad1760 to c269f64 Compare February 11, 2022 21:48
…t-archive

# Conflicts:
#	tests/e2e/specs/backend/site-editing-templates.test.js
#	tests/e2e/utils.js
Comment on lines 25 to 28
async function addCustomParagraph(
templateSlug,
customText = CUSTOMIZED_STRING
) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we update the name to better reflect that this would visit a template edit view, add a paragraph and save it? visitTemplateAndAddParagraph maybe? Currently when I saw it just by name I thought it just adds it to the current context.

I feel like if action/flow helpers reflect the flow it's easier to read through the tests

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, good point!

Renamed to `visitTemplateAndAddCustomParagraph`
Base automatically changed from test/5656-fse-single-product to trunk February 21, 2022 10:01
Copy link
Contributor

@tomasztunik tomasztunik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

@@ -25,6 +26,7 @@ import { elementExists, getTextContent } from './page-utils';
* @typedef {{ addedBy: string, hasActions: boolean, templateTitle: string }} TemplateTableItem
*/

export const BASE_URL = config.get( 'url' );
export const DEFAULT_TIMEOUT = 30000;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When debugging got stung by having default timeout here and not in config file, had this one override what I've passed via command line and test timeouted for me even though I've disabled timeouts.

For the future I'd consider tapping into config/env values for that but it's just for consideration

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This DEFAULT_TIMEOUT is actually not a jest/puppeteer timeout configuration. This timeout is used in specific functions like waiting for canvas and a few others. This won't override a test case timeout or lack thereof.

@github-actions github-actions bot added this to the 7.1.0 milestone Feb 21, 2022
@sunyatasattva sunyatasattva merged commit 59c2464 into trunk Feb 21, 2022
@sunyatasattva sunyatasattva deleted the test/5657-fse-product-archive branch February 21, 2022 11:01
tarhi-saad pushed a commit that referenced this pull request Feb 26, 2022
Also:
* Refactors the function to add a custom paragraph
* Add front-end test for archive template
* Use WordPress data to guarantee block presence
* Use WordPress data instead of selectors to match blocks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: FSE Work related to prepare WooCommerce for FSE. skip-changelog PRs that you don't want to appear in the changelog.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Store Editing Templates: Add E2E tests for Product Archive block template
3 participants