Skip to content

Fix data-testid#293

Merged
arhtudormorar merged 5 commits intodevelopmentfrom
tm/fix/data-testid
Jan 20, 2026
Merged

Fix data-testid#293
arhtudormorar merged 5 commits intodevelopmentfrom
tm/fix/data-testid

Conversation

@arhtudormorar
Copy link
Collaborator

@arhtudormorar arhtudormorar commented Jan 20, 2026

PR Title

Normalize data-testid usage across UI components


Summary

This PR standardizes how test IDs are defined and propagated so that:

  • DOM always uses data-testid={...}.
  • Stencil class components expose a dataTestId?: string prop mapped to the data-testid attribute.
  • Common TSX helpers accept 'data-testid' in their props and internally alias to dataTestId.

Key Changes

  • Common TSX components

    • Button, FormatAmount, ValidFormatAmount, InvalidFormatAmount, Trim, ExplorerLink, UnlockButton:
      • Props now use 'data-testid'?: string.
      • Destructure with an internal alias, e.g. {'data-testid': dataTestId}.
      • Render data-testid={dataTestId} on DOM elements.
  • Stencil class components

    • mvx-button, mvx-trim, mvx-explorer-link, mvx-format-amount, mvx-data-with-explorer-link, TransactionAccount, TransactionAccountName, TransactionShards, etc.:
      • Declare @Prop({ attribute: 'data-testid' }) dataTestId?: string where a test id is part of the public API.
      • Forward to children via data-testid={this.dataTestId} (or equivalent).
    • Wrapper/controlled components (UnlockProviderButton, TransactionValue, TransactionHash, TransactionsTable, etc.) now pass data-testid instead of dataTestId to underlying components.
  • Stories & tests

    • Storybook stories:
      • argTypes updated to use 'data-testid' where the prop is configurable (e.g. Trim, DataWithExplorerLink).
      • Example usages updated to pass data-testid="...".
    • Specs:
      • data-with-explorer-link.spec.ts, transaction-account.spec.tsx, transaction-account-name.spec.tsx, transaction-shards.spec.tsx updated to:
        • Use data-testid attributes in HTML/JSX.
        • Assert with [data-testid="..."].
        • Read Stencil class props via component.dataTestId when needed.

Rationale

  • Removes the previous inconsistency between dataTestId and data-testid.
  • Aligns public HTML API with common testing conventions (data-testid).
  • Keeps TypeScript ergonomics on Stencil classes (dataTestId property) while ensuring the HTML attribute is always data-testid.

Testing

  • Build

    • pnpm run build
  • Tests

    • pnpm test
      • Updated specs for:
        • DataWithExplorerLink
        • TransactionAccount
        • TransactionAccountName
        • TransactionShards
      • now pass against the new data-testid behavior. (In sandboxed CI-like environments, EPERM on node_modules can still cause infrastructure-level failures unrelated to these changes.)

Updated all instances of 'dataTestId' to 'data-testid' in various components and their respective TypeScript definitions to ensure consistency and adherence to naming conventions. This change affects components such as ExplorerLink, FormatAmount, Trim, and others, enhancing the overall code quality and maintainability.
@arhtudormorar arhtudormorar merged commit bb174a3 into development Jan 20, 2026
2 checks passed
@arhtudormorar arhtudormorar deleted the tm/fix/data-testid branch January 20, 2026 11:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants