Skip to content

Conversation

mgascam
Copy link
Contributor

@mgascam mgascam commented Sep 4, 2025

Fixes #WOOPMNT-5307

Changes proposed in this Pull Request

This PR introduces a loading state that helps to fix a race condition in the disputes E2E tests. In the "Save for later" flow, the description is changed from "Beanie" to "my product description" and saved. However, when the dispute is revisited later, the form incorrectly shows the old value ("Beanie") instead of the updated one. Run logs

  1) [chromium] › tests/e2e/specs/wcpay/merchant/merchant-disputes-respond.spec.ts:527:6 › Disputes > Respond to a dispute › Save a dispute challenge without submitting evidence › Select product type and fill description 

    Error: Timed out 20000ms waiting for expect(locator).toHaveValue(expected)

    Locator: getByLabel('PRODUCT DESCRIPTION')
    Expected string: "my product description"
    Received string: "Beanie"
    Call log:
      - expect.toHaveValue with timeout 20000ms
      - waiting for getByLabel('PRODUCT DESCRIPTION')
        24 × locator resolved to <textarea rows="4" id="inspector-textarea-control-0" class="components-textarea-control__input css-1x3y2gc e1w5nnrk0">Beanie</textarea>
           - unexpected value "Beanie"


      589 | 				await expect(
      590 | 					merchantPage.getByLabel( 'PRODUCT DESCRIPTION' )
    > 591 | 				).toHaveValue( 'my product description' );
          | 				  ^
      592 | 			}
      593 | 		);
      594 |
        at /home/runner/work/woocommerce-payments/woocommerce-payments/tests/e2e/specs/wcpay/merchant/merchant-disputes-respond.spec.ts:591:7
        at /home/runner/work/woocommerce-payments/woocommerce-payments/tests/e2e/specs/wcpay/merchant/merchant-disputes-respond.spec.ts:573:3

Introducing the initial loading state removes the UI race that caused flakiness and also improves the perceived performance and UX flow.

Here's a screen recording of the new spinner in action:

Screen.Recording.2025-09-08.at.17.15.49.mov

Testing instructions

  • E2E tests should pass

Manual tests of the flow should work as expected:

  1. As as shopper, checkout a product paying with a disputes test card i.e: 4000000000002685
  2. As a merchant, navigate to Payments > Disputes and locate the generated dispute. Click it to enter the details.
  3. In the details page, click the Challenge dispute button
  4. Check that the spinner appears while the dispute details are loaded.
  5. In the challenge dispute form, edit the Product Description ie: "My product description"
  6. Click Save for later
  7. Repeat steps 2-3
  8. In the challenge dispute form, ensure the Description shows your edited description i.e. "My product description"

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@botwoo
Copy link
Collaborator

botwoo commented Sep 4, 2025

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 11037 or branch name dev/woopmnt-5249-disputes-ui in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: 58411c5
  • Build time: 2025-09-09 15:19:04 UTC

Note: the build is updated when a new commit is pushed to this PR.

Copy link
Contributor

github-actions bot commented Sep 4, 2025

Size Change: +288 B (0%)

Total Size: 871 kB

Filename Size Change
release/woocommerce-payments/dist/index.js 151 kB +288 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.45 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.45 kB
release/woocommerce-payments/assets/css/success.css 1.06 kB
release/woocommerce-payments/assets/css/success.rtl.css 1.06 kB
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.77 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.77 kB
release/woocommerce-payments/dist/blocks-checkout.js 54.3 kB
release/woocommerce-payments/dist/cart-block-rtl.css 113 B
release/woocommerce-payments/dist/cart-block.css 112 B
release/woocommerce-payments/dist/cart-block.js 16.7 kB
release/woocommerce-payments/dist/cart.js 5.27 kB
release/woocommerce-payments/dist/checkout-rtl.css 1.08 kB
release/woocommerce-payments/dist/checkout.css 1.08 kB
release/woocommerce-payments/dist/checkout.js 34.4 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 367 B
release/woocommerce-payments/dist/express-checkout.css 367 B
release/woocommerce-payments/dist/express-checkout.js 16.8 kB
release/woocommerce-payments/dist/frontend-tracks.js 833 B
release/woocommerce-payments/dist/index-rtl.css 21 kB
release/woocommerce-payments/dist/index.css 21 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.82 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 18.2 kB
release/woocommerce-payments/dist/multi-currency.css 3.83 kB
release/woocommerce-payments/dist/multi-currency.js 24.6 kB
release/woocommerce-payments/dist/order-rtl.css 740 B
release/woocommerce-payments/dist/order.css 740 B
release/woocommerce-payments/dist/order.js 21.2 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 484 B
release/woocommerce-payments/dist/plugins-page.css 484 B
release/woocommerce-payments/dist/plugins-page.js 2.64 kB
release/woocommerce-payments/dist/product-details-rtl.css 433 B
release/woocommerce-payments/dist/product-details.css 436 B
release/woocommerce-payments/dist/product-details.js 12.3 kB
release/woocommerce-payments/dist/settings-rtl.css 11.7 kB
release/woocommerce-payments/dist/settings.css 11.6 kB
release/woocommerce-payments/dist/settings.js 140 kB
release/woocommerce-payments/dist/subscription-edit-page.js 703 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 1.98 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 730 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 1.9 kB
release/woocommerce-payments/dist/success.js 6.03 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 3 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 5.68 kB
release/woocommerce-payments/dist/woopay-express-button.js 22.8 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.29 kB
release/woocommerce-payments/dist/woopay.css 4.27 kB
release/woocommerce-payments/dist/woopay.js 70.8 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 625 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.46 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/jetpack-script-data.js 957 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/script-data.js 69 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/babel.config.js 163 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.css 2.47 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.js 14.3 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.rtl.css 2.47 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.css 10.1 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.js 29.7 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.rtl.css 10.1 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 280 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 625 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 333 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 626 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 417 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-users-connection.js 161 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 585 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 215 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 721 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 412 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 625 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.04 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 294 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 408 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.59 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 301 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 746 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 574 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 414 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 543 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.78 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.84 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 545 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.7 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 507 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 358 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 428 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 782 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.09 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.26 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 391 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.04 kB

compressed-size-action

@mgascam
Copy link
Contributor Author

mgascam commented Sep 4, 2025

Closing since this change is needed to stabilize flaky tests in #11036

@mgascam mgascam closed this Sep 4, 2025
@mgascam mgascam deleted the dev/woopmnt-5249-disputes-ui branch September 4, 2025 16:32
@mgascam mgascam restored the dev/woopmnt-5249-disputes-ui branch September 5, 2025 11:54
@mgascam mgascam reopened this Sep 5, 2025
@mgascam
Copy link
Contributor Author

mgascam commented Sep 5, 2025

Re-opening, see comment

@mgascam mgascam changed the base branch from develop to dev/woopmnt-5249-e2e-fixes September 5, 2025 11:56
@mgascam mgascam changed the title [Disputes] Persist user-entered values on revisit [E2E][Disputes] Persist user-entered values on revisit Sep 5, 2025
@mgascam mgascam changed the title [E2E][Disputes] Persist user-entered values on revisit [E2E][Disputes] Show saved description instead of default Sep 5, 2025
@mgascam mgascam marked this pull request as ready for review September 5, 2025 14:20
@mgascam mgascam requested a review from a team September 5, 2025 14:20
@mgascam
Copy link
Contributor Author

mgascam commented Sep 5, 2025

Hi @rtio it would be great if you could review this PR, please see comment for context. Thanks!

@mgascam mgascam requested a review from rtio September 5, 2025 14:25
Copy link
Member

@rtio rtio left a comment

Choose a reason for hiding this comment

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

I tested the changes and they seem to work fine, but I couldn’t actually reproduce the bad behavior in develop. From your comments, it looks like this only happens in E2E tests when d?.evidence isn’t fully loaded yet. Adding the extra complexity to handle that across all fields feels like a heavy workaround. A cleaner alternative might be to show a loading state until the dispute is fully loaded. Thoughts?

@mgascam
Copy link
Contributor Author

mgascam commented Sep 8, 2025

A cleaner alternative might be to show a loading state until the dispute is fully loaded. Thoughts?

Thanks for the review @rtio, I’ll give the loading state approach a try.

Base automatically changed from dev/woopmnt-5249-e2e-fixes to develop September 8, 2025 07:54
@mgascam mgascam force-pushed the dev/woopmnt-5249-disputes-ui branch from d3c1eed to 6c08612 Compare September 8, 2025 11:00
@mgascam mgascam force-pushed the dev/woopmnt-5249-disputes-ui branch from 6c08612 to 4c350a0 Compare September 8, 2025 11:15
@mgascam mgascam changed the title [E2E][Disputes] Show saved description instead of default [Disputes] Introduce a loading state to the “Challenge dispute” (new evidence) flow Sep 8, 2025
@mgascam
Copy link
Contributor Author

mgascam commented Sep 8, 2025

Hi @rtio, I added the loading state as you suggested in this comment, and it’s ready for review.

@lucyneb, it would be great to get your input as well since you were involved in the redesign of the disputes flow. For context: I added a loading state (screen recording attached in the description) to address an issue that surfaced during E2E runs. The tests run so fast that the form state can be unexpected. This wasn’t affecting “real” users, but it’s something we needed to address. In my view, the loading state not only fixes the issue but also improves the UX. Curious to hear your thoughts.

Thanks 🙏

Copy link
Member

@rtio rtio left a comment

Choose a reason for hiding this comment

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

Just tested. Feels like an huge improvement! Thank you for working on that.

@mgascam
Copy link
Contributor Author

mgascam commented Sep 9, 2025

Hi @htdat, I saw the pr: needs author reply label was added. I might be overlooking something, but I don’t see any pending feedback. Could you point me to what needs my attention?

@htdat
Copy link
Member

htdat commented Sep 9, 2025

@mgascam - I thought that you're waiting for feedback from Design :) Feel free to merge, I do not have any further comment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants