Skip to content

Commit 37f07ff

Browse files
razvantomegeaarhtudormorar
razvantomegea
and
arhtudormorar
authored
Added data-testids to sign transactions panel (#175)
* Enhance sign transactions panel with data-testids for improved testing capabilities. Update CHANGELOG for version 0.0.21. * Update version to 0.0.21 in package.json --------- Co-authored-by: Tudor Morar <tudor.morar@multiversx.com>
1 parent e500801 commit 37f07ff

File tree

11 files changed

+1235
-1144
lines changed

11 files changed

+1235
-1144
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [[0.0.21](https://github.com/multiversx/mx-sdk-dapp-ui/pull/177)] - 2025-07-30
11+
12+
- [Added sign transactions panel data-testids](https://github.com/multiversx/mx-sdk-dapp-ui/pull/176)
13+
1014
## [[0.0.20](https://github.com/multiversx/mx-sdk-dapp-ui/pull/175)] - 2025-07-25
1115

1216
- [Added browser detection](https://github.com/multiversx/mx-sdk-dapp-ui/pull/174)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@multiversx/sdk-dapp-ui",
3-
"version": "0.0.20",
3+
"version": "0.0.21",
44
"description": "A library to hold UI components for a dApp on the MultiversX blockchain",
55
"author": "MultiversX",
66
"license": "MIT",

‎src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/components/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, h, Prop } from '@stencil/core';
22
import classNames from 'classnames';
33
import { DecodeMethodEnum } from 'components/functional/sign-transactions-panel/sign-transactions-panel.types';
4+
import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
45

56
const signTransactionsAdvancedDataDecodeClasses: Record<string, string> = {
67
icon: 'mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:relative mvx:h-3! mvx:w-auto!',
@@ -18,8 +19,16 @@ export class SignTransactionsAdvancedDataDecode {
1819

1920
render() {
2021
return (
21-
<div class="sign-transactions-advanced-data-decode">
22-
<div class="sign-transactions-advanced-data-decode-label">{this.currentDecodeMethod}</div>
22+
<div
23+
class="sign-transactions-advanced-data-decode"
24+
data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecode}
25+
>
26+
<div
27+
class="sign-transactions-advanced-data-decode-label"
28+
data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecodeLabel}
29+
>
30+
{this.currentDecodeMethod}
31+
</div>
2332

2433
<mvx-single-angle-down-icon
2534
class={classNames('sign-transactions-advanced-data-decode-icon', {

‎src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.tsx‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, Fragment, h, Prop, State } from '@stencil/core';
22
import { DecodeMethodEnum } from 'components/functional/sign-transactions-panel/sign-transactions-panel.types';
33
import state from 'components/functional/sign-transactions-panel/signTransactionsPanelStore';
4+
import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
45

56
import { getProcessedHighlightedData } from './helpers/getProcessedHighlightedData';
67

@@ -56,7 +57,7 @@ export class SignTransactionsAdvancedData {
5657
const { beforeHighlight, afterHighlight, highlight } = this.computedDisplayData;
5758

5859
return (
59-
<div class="sign-transactions-advanced-data">
60+
<div class="sign-transactions-advanced-data" data-testid={DataTestIdsEnum.signTransactionsAdvancedData}>
6061
<div class="sign-transactions-advanced-data-top">
6162
<div class="sign-transactions-advanced-data-label">Data</div>
6263

@@ -73,11 +74,13 @@ export class SignTransactionsAdvancedData {
7374
>
7475
<div
7576
class="sign-transactions-advanced-data-decode-options"
77+
data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecodeOptions}
7678
onClick={(event: MouseEvent) => event.stopPropagation()}
7779
>
7880
{Object.values(DecodeMethodEnum).map((decodeMethod: DecodeMethodEnum) => (
7981
<div
8082
onClick={() => this.setDecodeMethod(decodeMethod)}
83+
data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecodeOption}
8184
class={{
8285
'sign-transactions-advanced-data-decode-option': true,
8386
'active': decodeMethod === this.decodeMethod,
@@ -94,16 +97,39 @@ export class SignTransactionsAdvancedData {
9497
<div class="sign-transactions-advanced-data-wrapper">
9598
{beforeHighlight || afterHighlight ? (
9699
<Fragment>
97-
{beforeHighlight && <div class="sign-transactions-advanced-data-text">{beforeHighlight}</div>}
100+
{beforeHighlight && (
101+
<div
102+
class="sign-transactions-advanced-data-text"
103+
data-testid={DataTestIdsEnum.signTransactionsAdvancedDataText}
104+
>
105+
{beforeHighlight}
106+
</div>
107+
)}
98108

99-
<div class="sign-transactions-advanced-data-highlight bolded" ref={el => (this.highlightElement = el)}>
109+
<div
110+
class="sign-transactions-advanced-data-highlight bolded"
111+
data-testid={DataTestIdsEnum.signTransactionsAdvancedDataHighlight}
112+
ref={el => (this.highlightElement = el)}
113+
>
100114
{highlight}
101115
</div>
102116

103-
{afterHighlight && <div class="sign-transactions-advanced-data-text">{afterHighlight}</div>}
117+
{afterHighlight && (
118+
<div
119+
class="sign-transactions-advanced-data-text"
120+
data-testid={DataTestIdsEnum.signTransactionsAdvancedDataText}
121+
>
122+
{afterHighlight}
123+
</div>
124+
)}
104125
</Fragment>
105126
) : (
106-
<div class="sign-transactions-advanced-data-highlight">{highlight}</div>
127+
<div
128+
class="sign-transactions-advanced-data-highlight"
129+
data-testid={DataTestIdsEnum.signTransactionsAdvancedDataHighlight}
130+
>
131+
{highlight}
132+
</div>
107133
)}
108134
</div>
109135
</div>

‎src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, h, Prop, State } from '@stencil/core';
2+
import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
23

34
import { DecodeMethodEnum } from '../../sign-transactions-panel.types';
45
import state from '../../signTransactionsPanelStore';
@@ -37,26 +38,27 @@ export class SignTransactionsAdvanced {
3738
} = state;
3839

3940
return (
40-
<div class="advanced-details">
41-
<div class="gas-settings">
41+
<div class="advanced-details" data-testid={DataTestIdsEnum.signTransactionsAdvanced}>
42+
<div class="gas-settings" data-testid={DataTestIdsEnum.signTransactionsAdvancedGasSettings}>
4243
<div class="gas-wrapper">
43-
<div class="gas-header">
44+
<div class="gas-header" data-testid={DataTestIdsEnum.signTransactionsAdvancedGasPrice}>
4445
<span class="gas-price">Gas Price</span>
4546
<span class="gas-price-value">{gasPrice} EGLD</span>
4647
</div>
47-
<div class="gas-speed-selector">
48+
<div class="gas-speed-selector" data-testid={DataTestIdsEnum.signTransactionsAdvancedGasSpeedSelector}>
4849
{ppuOptions.map(ppuOption => (
4950
<button
5051
key={ppuOption.label}
5152
disabled={!needsSigning}
5253
class={`speed-option ${this.pricePerUnitOption === ppuOption.value ? 'active' : ''}`}
54+
data-testid={DataTestIdsEnum.signTransactionsAdvancedSpeedOption}
5355
onClick={() => state.setPpuOption(ppuOption.value)}
5456
>
5557
<span class="speed-text">{ppuOption.label}</span>
5658
</button>
5759
))}
5860
</div>
59-
<div class="gas-limit-row">
61+
<div class="gas-limit-row" data-testid={DataTestIdsEnum.signTransactionsAdvancedGasLimit}>
6062
<span class="gas-limit">Gas Limit</span>
6163
<span class="gas-limit-value">{gasLimit}</span>
6264
</div>

‎src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ export class SignTransactionsFooter {
6161
}
6262

6363
return (
64-
<div class="sign-transactions-footer">
65-
<div class="sign-transactions-footer-buttons">
64+
<div class="sign-transactions-footer" data-testid={DataTestIdsEnum.signTransactionsFooter}>
65+
<div class="sign-transactions-footer-buttons" data-testid={DataTestIdsEnum.signTransactionsFooterButtons}>
6666
<div class="sign-transactions-footer-button-wrapper cancel">
6767
<button
6868
data-testid={isFirstTransaction ? DataTestIdsEnum.signCancelBtn : DataTestIdsEnum.signBackBtn}
@@ -137,17 +137,26 @@ export class SignTransactionsFooter {
137137
</div>
138138
</div>
139139

140-
<div class="sign-transactions-footer-identity">
140+
<div class="sign-transactions-footer-identity" data-testid={DataTestIdsEnum.signTransactionsFooterIdentity}>
141141
<div class="sign-transactions-footer-identity-label">Sign with</div>
142142

143143
{username && (
144-
<div class="sign-transactions-footer-identity-username">
144+
<div
145+
class="sign-transactions-footer-identity-username"
146+
data-testid={DataTestIdsEnum.signTransactionsFooterIdentityUsername}
147+
>
145148
<span class="sign-transactions-footer-identity-username-prefix">@</span>
146149
<span class="sign-transactions-footer-identity-username-text">{username}</span>
147150
</div>
148151
)}
149152

150-
{!username && address && <mvx-trim text={address} class="sign-transactions-footer-identity-address" />}
153+
{!username && address && (
154+
<mvx-trim
155+
text={address}
156+
class="sign-transactions-footer-identity-address"
157+
data-testid={DataTestIdsEnum.signTransactionsFooterIdentityAddress}
158+
/>
159+
)}
151160

152161
<mvx-copy-button
153162
text={username ?? address}

‎src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.tsx‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, h } from '@stencil/core';
22
import classNames from 'classnames';
3+
import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
34

45
import state from '../../signTransactionsPanelStore';
56

@@ -18,17 +19,25 @@ export class SignTransactionsHeader {
1819
const { currentIndex, transactionsCount, origin } = state.commonData;
1920

2021
return (
21-
<div class="sign-transactions-header">
22+
<div class="sign-transactions-header" data-testid={DataTestIdsEnum.signTransactionsHeader}>
2223
{transactionsCount > 1 && (
23-
<div class="sign-transactions-header-pager" onClick={(event: MouseEvent) => event.stopPropagation()}>
24+
<div
25+
class="sign-transactions-header-pager"
26+
data-testid={DataTestIdsEnum.signTransactionsHeaderPager}
27+
onClick={(event: MouseEvent) => event.stopPropagation()}
28+
>
2429
<mvx-single-angle-left-icon
2530
onClick={onBack}
31+
data-testid={DataTestIdsEnum.signTransactionsHeaderPagerPrevBtn}
2632
class={classNames('sign-transactions-header-pager-icon', {
2733
[signTransactionsHeaderClasses.pagerIcon]: true,
2834
disabled: currentIndex === 0,
2935
})}
3036
/>
31-
<div class="sign-transactions-header-pager-text">
37+
<div
38+
class="sign-transactions-header-pager-text"
39+
data-testid={DataTestIdsEnum.signTransactionsHeaderPagerText}
40+
>
3241
<div class="sign-transactions-header-pager-text-label">Transaction</div>
3342
<div class={{ 'sign-transactions-header-pager-text-value': true, 'large': transactionsCount >= 10 }}>
3443
{currentIndex + 1}
@@ -42,6 +51,7 @@ export class SignTransactionsHeader {
4251

4352
<mvx-single-angle-right-icon
4453
onClick={onNext}
54+
data-testid={DataTestIdsEnum.signTransactionsHeaderPagerNextBtn}
4555
class={classNames('sign-transactions-header-pager-icon', {
4656
disabled: currentIndex + 1 === transactionsCount,
4757
[signTransactionsHeaderClasses.pagerIcon]: true,
@@ -50,14 +60,22 @@ export class SignTransactionsHeader {
5060
</div>
5161
)}
5262

53-
<div class={{ 'sign-transactions-header-origin': true, 'centered': transactionsCount <= 1 }}>
63+
<div
64+
class={{ 'sign-transactions-header-origin': true, 'centered': transactionsCount <= 1 }}
65+
data-testid={DataTestIdsEnum.signTransactionsHeaderOrigin}
66+
>
5467
<div class="sign-transactions-header-origin-label">Request from</div>
5568

5669
<div class="sign-transactions-header-origin-image">
5770
<img class="sign-transactions-header-origin-image-icon" src={`${origin}/favicon.ico`} alt="favicon" />
5871
</div>
5972

60-
<span class="sign-transactions-header-origin-name">{origin}</span>
73+
<span
74+
class="sign-transactions-header-origin-name"
75+
data-testid={DataTestIdsEnum.signTransactionsHeaderOriginName}
76+
>
77+
{origin}
78+
</span>
6179
</div>
6280
</div>
6381
);

‎src/components/functional/sign-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
22
import { Component, h, Prop } from '@stencil/core';
3+
import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
34

45
import { handleAmountResize } from '../../helpers';
56

@@ -29,18 +30,18 @@ export class SignTransactionsOverview {
2930

3031
render() {
3132
return (
32-
<div class="overview-container">
33+
<div class="overview-container" data-testid={DataTestIdsEnum.signTransactionsOverview}>
3334
<div class="overview-content">
34-
<div class="detail-row amount-row">
35+
<div class="detail-row amount-row" data-testid={DataTestIdsEnum.signTransactionsOverviewAmountRow}>
3536
<div class="detail-label">{this.isApp ? 'Amount' : 'Send'}</div>
3637
<div class="amount-display">
3738
<div class="amount-value-container">
38-
<div class="amount-value" ref={el => (this.amountValueRef = el)}>
39+
<div class="amount-value" data-testid={DataTestIdsEnum.signTransactionsOverviewAmountValue} ref={el => (this.amountValueRef = el)}>
3940
<span>
4041
{this.amount} {this.identifier}
4142
</span>
4243
</div>
43-
{this.identifier !== 'USD' && <div class="usd-value">{this.usdValue}</div>}
44+
{this.identifier !== 'USD' && <div class="usd-value" data-testid={DataTestIdsEnum.signTransactionsOverviewUsdValue}>{this.usdValue}</div>}
4445
</div>
4546
{this.tokenIconUrl && (
4647
<div class="token-icon">
@@ -59,22 +60,22 @@ export class SignTransactionsOverview {
5960
</div>
6061
</div>
6162

62-
<div class="detail-row interactor-row">
63+
<div class="detail-row interactor-row" data-testid={DataTestIdsEnum.signTransactionsOverviewInteractorRow}>
6364
<div class="detail-label">{this.isApp ? 'App' : 'To'}</div>
6465
<div class="interactor-info">
6566
{this.interactorIconUrl && (
6667
<div class="interactor-icon">
6768
<img src={this.interactorIconUrl} alt={this.interactor} />
6869
</div>
6970
)}
70-
{this.interactor && <mvx-trim class="interactor-name" text={this.interactor}></mvx-trim>}
71+
{this.interactor && <mvx-trim class="interactor-name" data-testid={DataTestIdsEnum.signTransactionsOverviewInteractorName} text={this.interactor}></mvx-trim>}
7172
</div>
7273
</div>
7374

7475
{this.isApp && (
75-
<div class="detail-row action-row">
76+
<div class="detail-row action-row" data-testid={DataTestIdsEnum.signTransactionsOverviewActionRow}>
7677
<div class="detail-label">Action</div>
77-
<div class="action-value">{this.action}</div>
78+
<div class="action-value" data-testid={DataTestIdsEnum.signTransactionsOverviewActionValue}>{this.action}</div>
7879
</div>
7980
)}
8081
</div>
@@ -85,7 +86,7 @@ export class SignTransactionsOverview {
8586
<span class="fee-label">Network Fee</span>
8687
<div class="info-icon"></div>
8788
</div>
88-
<div class="fee-value">{this.networkFee}</div>
89+
<div class="fee-value" data-testid={DataTestIdsEnum.signTransactionsOverviewNetworkFee}>{this.networkFee}</div>
8990
</div>
9091
</div>
9192
</div>

‎src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, h, Method, State } from '@stencil/core';
22
import { ANIMATION_DELAY_PROMISE } from 'components/visual/side-panel/side-panel.constants';
3+
import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
34
import { ConnectionMonitor } from 'utils/ConnectionMonitor';
45
import type { IEventBus } from 'utils/EventBus';
56
import { EventBus } from 'utils/EventBus';
@@ -125,17 +126,20 @@ export class SignTransactionsPanel {
125126
panelTitle="Confirm Transaction"
126127
hasBackButton={false}
127128
>
128-
<div class="sign-transactions-panel">
129+
<div class="sign-transactions-panel" data-testid={DataTestIdsEnum.signTransactionsPanel}>
129130
<mvx-sign-transactions-header />
130131

131-
<div class="sign-transaction-content">
132+
<div class="sign-transaction-content" data-testid={DataTestIdsEnum.signTransactionsPanelContent}>
132133
<div class="sign-transactions-tabs">
133134
{transactionTabs.map(transactionTab => (
134135
<div
135136
class={{ 'sign-transactions-tab': true, 'active': transactionTab === this.activeTab }}
137+
data-testid={DataTestIdsEnum.signTransactionsTab}
136138
onClick={() => this.setActiveTab(transactionTab)}
137139
>
138-
<div class="sign-transactions-tab-text">{transactionTab}</div>
140+
<div class="sign-transactions-tab-text" data-testid={DataTestIdsEnum.signTransactionsTabText}>
141+
{transactionTab}
142+
</div>
139143
</div>
140144
))}
141145
</div>

0 commit comments

Comments
 (0)