Test: Implement Component: Transaction Signing State UI - #545
Merged
Conversation
Closes SwiftChainn#476 Adds 26 component tests for EscrowRelease, the transaction signing modal, covering the rendered text and the icon in every state. EscrowRelease is the component that matches this issue: it drives the signing flow (idle -> confirming -> signing -> releasing -> done), renders a real modal dialog, and swaps a distinct icon per state. It had no test file. TxTracker, the other transaction status surface, is already covered by components/wallet/__tests__/TxTracker.test.tsx. Covered: - idle: summary, enabled action, no status panels, opens the dialog - confirming: accessible dialog, amber warning icon, amount, cancel - signing: wallet-approval copy, spinning icon, aria-busy and disabled - releasing: submitted copy, spinner retained, action stays locked out - done: success copy, green checkmark with no spinner, tx hash, disabled - error path: hook resets to idle so the user can retry; non-locked escrow blocks the action - gating: loading skeleton, disconnected wallet, already-released panel Icons are asserted positively and negatively - the signing panel must show the spinner and must not show the checkmark, and vice versa - so a state rendering the wrong icon fails rather than passing on text alone. The hook and wallet store are mocked at their boundaries. The hook mock is a factory rather than an automock on purpose: automocking loads the real module to derive its shape, and useEscrowRelease imports escrowService, which imports 'stellar-sdk' - not an installed dependency. Mocking at the hook seam keeps this suite runnable today. Verified the icon assertions fail when StatusIcon is made to render the wrong icon for the done step, so they are not passing vacuously.
|
@AdaBebe0 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #476
Re-opening this work — the original branch was deleted by mistake, so this is a fresh branch with the same scope.
What the issue asks for
Which component
features/escrow/components/EscrowRelease.tsx. It is the transaction signing UI: it drives the full flow (idle → confirming → signing → releasing → done), renders a real modal dialog withrole="dialog"/aria-modal, and swaps a distinct icon per state. It had no test file.For the record, the other transaction status surface —
TxTracker— is already covered bycomponents/wallet/__tests__/TxTracker.test.tsx, so I did not duplicate it. If the issue was aimed at a different component, say so and I'll retarget.Coverage — 26 tests
aria-busy, disabledIcons are asserted positively and negatively — the signing panel must show the spinner and must not show the checkmark, and vice versa. A state rendering the wrong icon fails, rather than passing on text alone.
Test approach
The hook and the wallet store are mocked at their boundaries, so this is a pure component test — no network, no wallet, no escrow service.
One deliberate detail: the hook mock is a factory, not an automock. Automocking still loads the real module to derive its shape, and
useEscrowReleaseimportsescrowService, which imports'stellar-sdk'— a package that is not inpackage.jsonand has never been installed.jest.mock('@/hooks/useEscrowRelease')therefore fails with "Cannot find module 'stellar-sdk'". The factory form keeps this suite runnable today, regardless of that unrelated breakage.Verification
pnpm run lint— no new errorstsc --noEmit— no errors in the new fileStatusIconrender the wrong icon for thedonestep fails the icon test, confirming the icon assertions aren't passing vacuouslyNote on CI
CI on this repo is currently red on
mainfor every PR —pnpm run lintexits 1 on 4 pre-existing errors, so Type Check and Test never run. #542 fixes that, and #543 clears 110 of the pre-existing type errors. Neither is related to this PR, but this PR's checks won't go green until #542 lands.