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

Conversation

mikejolley
Copy link
Member

I'm not sure what other cases are needed so this needs feedback from @wavvves but I've introduced e2e tests to check that each new template exists in the editor, and that the permalink settings save and update the frontend page.

Fixes #9863

Testing

Automated Tests

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

User Facing Testing

e2e tests should pass.

  • Do not include in the Testing Notes

@mikejolley mikejolley self-assigned this Jun 21, 2023
@woocommercebot woocommercebot requested review from a team and tarunvijwani and removed request for a team June 21, 2023 14:48
@github-actions
Copy link
Contributor

github-actions bot commented Jun 21, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9939.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 466
  • Total errors: 2222

⚠️ ⚠️ This PR introduces new TS errors on 8 files:

assets/js/blocks-registry/payment-methods/test/payment-method-config-helper.ts

assets/js/blocks/active-filters/block.tsx

assets/js/blocks/cart-checkout-shared/payment-methods/saved-payment-method-options.js

assets/js/blocks/classic-template/index.tsx

assets/js/blocks/classic-template/test/utils.ts

assets/js/data/payment/utils/check-payment-methods.ts

assets/js/editor-components/template-notice/index.tsx

assets/js/interactivity/components.js

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 21, 2023

Size Change: 0 B

Total Size: 1.18 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.63 kB
build/active-filters-wrapper-frontend.js 7.58 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 12.2 kB
build/all-products.js 40.3 kB
build/all-reviews.js 7.87 kB
build/attribute-filter-frontend.js 23 kB
build/attribute-filter-wrapper-frontend.js 7.73 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.57 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/cart-frontend.js 30 kB
build/cart.js 45.6 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.69 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.76 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.29 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.18 kB
build/checkout-blocks/shipping-method-frontend.js 2.64 kB
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 360 B
build/checkout-frontend.js 31.9 kB
build/checkout.js 46.9 kB
build/customer-account.js 3.19 kB
build/featured-category.js 15.1 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8.04 kB
build/legacy-template.js 8.9 kB
build/mini-cart-component-frontend.js 30.7 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/shopping-button-frontend.js 530 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-contents.js 18.1 kB
build/mini-cart-frontend.js 2.85 kB
build/mini-cart.js 5.92 kB
build/price-filter-frontend.js 14.6 kB
build/price-filter-wrapper-frontend.js 6.77 kB
build/price-filter.js 8.56 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 250 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.52 kB
build/product-add-to-cart.js 8.84 kB
build/product-best-sellers.js 8.36 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 955 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 3.97 kB
build/product-categories.js 2.71 kB
build/product-category.js 9.37 kB
build/product-collection.js 12.3 kB
build/product-image-frontend.js 2.61 kB
build/product-image.js 4.14 kB
build/product-new.js 8.66 kB
build/product-on-sale.js 8.66 kB
build/product-price-frontend.js 204 B
build/product-price.js 1.68 kB
build/product-query.js 11.9 kB
build/product-rating-frontend.js 2.33 kB
build/product-rating.js 1.03 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.79 kB
build/product-sale-badge.js 666 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.83 kB
build/product-sku.js 534 B
build/product-stock-indicator-frontend.js 2.03 kB
build/product-stock-indicator.js 732 B
build/product-summary-frontend.js 2.25 kB
build/product-summary.js 1 kB
build/product-tag.js 9.01 kB
build/product-template.js 3.34 kB
build/product-title-frontend.js 2.21 kB
build/product-title.js 3.66 kB
build/product-top-rated.js 8.92 kB
build/products-by-attribute.js 9.75 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.23 kB
build/rating-filter.js 6.93 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.3 kB
build/reviews-frontend.js 7.17 kB
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 21.7 kB
build/stock-filter-wrapper-frontend.js 6.48 kB
build/stock-filter.js 7.66 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.84 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.19 kB
build/vendors--attribute-filter-wrapper-frontend.js 5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.3 kB
build/wc-blocks-editor-style-rtl.css 6.35 kB
build/wc-blocks-editor-style.css 6.34 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 28 kB
build/wc-blocks-style.css 28 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 65.1 kB
build/wc-blocks.js 3.72 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.6 kB
build/wc-shipping-method-pickup-location.js 30.4 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@mikejolley mikejolley force-pushed the add/e2e-tests-for-checkout-templates branch from 2ac1e60 to 3bace80 Compare June 22, 2023 10:40
@mikejolley mikejolley force-pushed the add/9288_cart-checkout-order-received_fse_templates branch from 43f5a50 to f1a4139 Compare June 26, 2023 13:18
@mikejolley mikejolley force-pushed the add/e2e-tests-for-checkout-templates branch from af9242f to efb2b52 Compare June 26, 2023 13:19
@mikejolley mikejolley requested a review from wavvves June 26, 2023 13:45
@mikejolley
Copy link
Member Author

@wavvves this is probably as good as it will get for now. All new tests for the new template are passing. There are some fails coming from existing playwright tests which I think @gigitux is looking at.

Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

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

There's a lot going on in this PR, and still some eslint errors in some files, were these introduced by a bad merge?

I pointed a few possible test improvements out and maybe one TS improvement.

We should revise uses of page.click with a selector passed in, and instead get the locator first, then .click on that.

Feel free to ping when these have been revised and I'll take another look!

assets/js/atomic/blocks/product-elements/price/edit.tsx Outdated Show resolved Hide resolved
assets/js/atomic/blocks/product-elements/price/index.tsx Outdated Show resolved Hide resolved
assets/js/blocks/reviews/reviews-by-category/block.tsx Outdated Show resolved Hide resolved
assets/js/utils/useThrottle.ts Outdated Show resolved Hide resolved
assets/js/utils/useThrottle.ts Outdated Show resolved Hide resolved
*/
import { Page } from '@playwright/test';

export const addToCart = async ( page: Page ) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Nothing actionable here, but I just pointing out that we could probably add product name as an arg here too. Thinking about when we're on the shop page and we call this, it would fail because of multiple add to cart buttons, so if we add a product name we could call by the button's label:

Add “Beanie” to your basket

tests/e2e-pw/utils/editor/EditorUtils.ts Outdated Show resolved Hide resolved
test.describe( 'Test the order confirmation template', async () => {
test( 'Template can be opened in the site editor', async ( { page } ) => {
await page.goto( '/wp-admin/site-editor.php' );
await page.click( 'text=Templates' );
Copy link
Contributor

Choose a reason for hiding this comment

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

page.click is deprecated the documentation mentions clicking a locator is better.

We could do await page.getByText( 'Templates' ).click() instead. (But it might not work if there are multiple instances of the Templates text on the page, so might need to qualify this locator further).

Copy link
Member Author

Choose a reason for hiding this comment

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

It says "discouraged"—is that the same thing? I've copied usage from other tests and the global-setup file. I'd rather leave it as I'm just trying to get new tests added rather than update our playwright implementation.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah you're right, sorry I misread it as deprecated, I'm so used to seeing that in yellow boxes in documentation 🙈

I am ok with it being left like this for now if updating it is going to delay this PR being merged. I would like to revisit at some point though.

@@ -100,9 +100,9 @@ for ( const { templateTitle, slug, frontendPage } of Object.values(

await page.goto( frontendPage );

const helloWorldText = await page.getByText( 'Hello World' );

expect( helloWorldText ).not.toBeNull();
Copy link
Member Author

@mikejolley mikejolley Jun 27, 2023

Choose a reason for hiding this comment

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

This was a bug! getByText returns arrays

@mikejolley mikejolley requested a review from opr June 27, 2023 10:43
@mikejolley
Copy link
Member Author

There were several failing tests from classic templates. I wasn't able to fix those and I believe its due to a lack of tear down utils causing pages to have unexpected content. To unblock this PR I've commented them out but I imagine they'll need to be reworked cc @gigitux

Locally the remaining tests, and new tests, are passing so this can be re-reviewed now @opr

Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

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

Tests are passing for me locally - just a couple of comments but I think this can be merged after addressing my suggestion about test.skip, I think we should do that. Note, you may need to eslint ignore an error about skipping tests, I think this is OK and expected.

} );

/*
Copy link
Contributor

Choose a reason for hiding this comment

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

What do you think about test.skip here and in other places with commented out tests. Might be more searchable when it comes to finding skipped tests later.

'/wp-admin/admin.php?page=wc-settings&tab=advanced'
);
const cartInput = page.locator(
'tr:has-text("Cart page "):has-text("cart template") input'
Copy link
Contributor

Choose a reason for hiding this comment

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

Just noting that I would love to revisit this and use the provided locators in future. For now this is OK to get tests working.

@mikejolley mikejolley merged commit 6207faf into add/9288_cart-checkout-order-received_fse_templates Jun 28, 2023
@mikejolley mikejolley deleted the add/e2e-tests-for-checkout-templates branch June 28, 2023 12:26
mikejolley added a commit that referenced this pull request Jun 28, 2023
* Merge branch 'trunk' into poc/cart_and_checkout_fse_templates

* Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates

* Resolve merge conflicts

* Add e2e for permalink settings

* Test that templates exist

* Add test to check that templates can be edited

* Add tests to confirm templates can be edited

* Ensure cart has contents before running tests on frontend views

* Commend out problem test

* Make sure search has multiple results

* Remove useThrottle - bad rebase

* Revert changes to docs after rebase

* Revert function call for noReviewsPlaceholder

* Bad rebase

* Reverts

* Remove revertTemplate

* Spacing

* Wait for networkidle after navigation

* Always wait for network

* Use button roles in site editor

* More specific button locator

* Update option comparison

* Fix template content

* Disable failing tests

* Disable failing classic template tests

* Use enterEditMode

* More enterEditMode usage

* enterEditMode

* Use test.skip

* More robust selectors

* Alt iframe selector

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
wavvves added a commit that referenced this pull request Jun 29, 2023
* WIP: dirty attempt to dry run Cart & Checkout templates

* Added Cart and Checkout to the template hierarchies

* Merge branch 'trunk' into poc/cart_and_checkout_fse_templates

* Updated cart & Checkout templates

* Order Received FSE template (#8937)

* Order Received template bootstrap

* typo

* WIP: new block

* add logic here

* Order received classic template

* reverted constants.ts

* Added the post title (buggy)

* Corrected page title

* Updated constants.ts

* Fixed template typo

* removed placeholder for order received block

* add order-received template description

* updated placeholder description

* Formatting fixes

* Template description.

* replaced hardcoded string with OrderReceivedTemplate::SLUG

---------

Co-authored-by: Luigi <gigitux@gmail.com>

* Code formatting (#8350)

* Code formatting

* page_template_hierarchy priority to 1 (#9323)

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

* Migrate Cart and Checkout Pages to the Template Editor when using a FSE theme (#9339)

* Introduce woocommerce_blocks_template_content hook

* Migrate cart and checkout page content to the template editor

* Add redirection from edit page to edit template

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

* Removed header and footer from checkout template. (#9378)

* Removed header and footer from checkout template.

* Removed header and footer from checkout template migration

* Permalink solution for the checkout endpoint/template (#9406)

* Checkout endpoint work

* Move setting field to util

* Include link to edit the template

* Remove todo

* Refactor checkout templates to share logic (#9411)

* Sync endpoints with pages (#9426)

* Switch to page syncing

* Update settings descriptions

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

* Migrate pages to templates once (#9488)

* Migrate content on init, once

* Skip migration if page does not exist

* Put back HTML for header and footer parts

* Fix page redirect due to wrong ID

* fix loading template part

* Removed unnecessary var

* update cart and checkout html templates

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

* Include a notice to redirect user to template editor (#9508)

* Template Placeholder Design for the Order Received Template (#9602)

* Load frontend styles in editor iframe

* Update placeholder to include skeleton and updated icons

* Update classic template configs

* 1px border for .wp-block-woocommerce-classic-template__placeholder-copy

* Show copy on focus

* Sample data

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

* Add simplified header on checkout template (#9607)

* Added simplified header on checkout template

* Moved simplified header to template part

* updated constants.ts

* added template part to checkout.html

* Add missing translation

* frontpage_template_hierarchy no longer needed

* Allow plugin based template parts (#9667)

* Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates

* Synced templates on blockified folder

* Add blockified order-received.html

* removed WooCommerce prefix

* Refactor/rebrand order received template to order confirmation (#9734)

* rebrand order received to order confirmation

* updated descriptions for templates

* updated descriptions for order confirmation placeholder

* Resolve merge conflict

* Resolve merge conflicts

* Resolve more merge conflicts after rebase

* Fix formatting

* Use patterns for localisation (#9883)

* e2e tests for cart and checkout templates (#9939)

* Merge branch 'trunk' into poc/cart_and_checkout_fse_templates

* Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates

* Resolve merge conflicts

* Add e2e for permalink settings

* Test that templates exist

* Add test to check that templates can be edited

* Add tests to confirm templates can be edited

* Ensure cart has contents before running tests on frontend views

* Commend out problem test

* Make sure search has multiple results

* Remove useThrottle - bad rebase

* Revert changes to docs after rebase

* Revert function call for noReviewsPlaceholder

* Bad rebase

* Reverts

* Remove revertTemplate

* Spacing

* Wait for networkidle after navigation

* Always wait for network

* Use button roles in site editor

* More specific button locator

* Update option comparison

* Fix template content

* Disable failing tests

* Disable failing classic template tests

* Use enterEditMode

* More enterEditMode usage

* enterEditMode

* Use test.skip

* More robust selectors

* Alt iframe selector

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

* Skip flakey test

---------

Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
@opr opr added the skip-changelog PRs that you don't want to appear in the changelog. label Jul 4, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
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.

3 participants