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

E2E tests for Product Tag Template and Legacy Block #5888

Merged
merged 40 commits into from
Feb 21, 2022

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Feb 18, 2022

This PR adds E2E tests for the Product Tag Template

Specifically, 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 Tag block template.
  • Should a user load the Product Tag template, the editor will have the “WooCommerce Product Grid Block” Legacy Template block present.
  • Should a user load a product tag page on the frontend, it will render a list of products.
  • Should a user customise the Product Tag 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 Tag template the Site Editor should render these customisations
  • Should a user have a customised Product Tag template, these customisations would be present on the frontend.

Closes #5659


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" -t "Product Tag block template" and npm run test:e2e -- -i "tests/e2e/specs/frontend/legacy-template-blocks.test.js" -t "Product Tag block".
  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

* Add function to wait for Gutenberg canvas
* Add alternative ids
Also:
* refactors the function to add a custom paragraph for later.
* updates obsolete snapshot
…t-archive

# Conflicts:
#	tests/e2e/specs/backend/site-editing-templates.test.js
#	tests/e2e/utils.js
@sunyatasattva sunyatasattva self-assigned this Feb 18, 2022
@sunyatasattva sunyatasattva added focus: FSE Work related to prepare WooCommerce for FSE. focus: template Related to API powering block template functionality in the Site Editor labels Feb 18, 2022
@rubikuserbot rubikuserbot requested review from a team and gigitux and removed request for a team February 18, 2022 01:32
@sunyatasattva sunyatasattva added category: tests skip-changelog PRs that you don't want to appear in the changelog. labels Feb 18, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Feb 18, 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

@tomasztunik
Copy link
Contributor

We have an issue with E2E tests setup - when testing locally tests failed around 404 and not being able to access resource and I can see the same errors here but for some reason the tests are reported as passing.

inspect here -> https://github.com/woocommerce/woocommerce-gutenberg-products-block/runs/5241739163?check_suite_focus=true#step:11:62

@sunyatasattva
Copy link
Contributor Author

I have mentioned it privately, but worth mentioning here too:

Regarding the resource not found error, it does not stop the tests from succeeding and I have not introduced the error. In fact it's there in Gutenberg tests too! In fact they were noticed by @nielslange too about a month ago as he was working on tests (p1643628209016109/1643628203.799889-slack-C02UBB1EPEF).

It's annoying and worth looking into, but not within the scope of this PR.

Base automatically changed from test/5658-fse-product-category to trunk February 21, 2022 11:38
@tomasztunik tomasztunik self-requested a review February 21, 2022 12:19
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.

👌

@github-actions github-actions bot added this to the 7.1.0 milestone Feb 21, 2022
@sunyatasattva sunyatasattva merged commit fb87ac5 into trunk Feb 21, 2022
@sunyatasattva sunyatasattva deleted the test/5659-fse-product-tag branch February 21, 2022 12:26
tarhi-saad pushed a commit that referenced this pull request Feb 26, 2022
Also: 

* Add fixtures for tags
* Teardown both categories and tags when tests are done
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. focus: template Related to API powering block template functionality in the Site Editor 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 Tag block template
2 participants