Merge pull request #292 from multiversx/development

0.1.13

Author: arhtudormorar

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.1.13](https://github.com/multiversx/mx-sdk-dapp-ui/pull/293)] - 2026-01-20
+
+- [Fixed data-testid attributes](https://github.com/multiversx/mx-sdk-dapp-ui/pull/293)
+- [Fixed Button data-testid attribute](https://github.com/multiversx/mx-sdk-dapp-ui/pull/292)
+
 ## [[0.1.12](https://github.com/multiversx/mx-sdk-dapp-ui/pull/291)] - 2026-01-15
 
 - [Fixed issue with sheetDismiss on SidePanelSwiper](https://github.com/multiversx/mx-sdk-dapp-ui/pull/290)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",

src/common/Button/Button.tsx

@@ -5,7 +5,7 @@ import { ButtonSizeEnum, ButtonVariantEnum } from './button.types';
 
 interface ButtonPropsType {
   class?: string;
-  dataTestId?: string;
+  'data-testid'?: string;
   disabled?: boolean;
   size?: `${ButtonSizeEnum}`;
   variant?: `${ButtonVariantEnum}`;
@@ -15,7 +15,7 @@ interface ButtonPropsType {
 export function Button(
   {
     class: className = '',
-    dataTestId = '',
+    'data-testid': dataTestId = '',
     disabled = false,
     size = 'large',
     variant = 'primary',

src/common/ExplorerLink/ExplorerLink.tsx

@@ -10,13 +10,19 @@ const styles = {
 interface ExplorerLinkPropsType {
   class?: string;
   iconClass?: string;
-  dataTestId?: string;
+  'data-testid'?: string;
   link: string;
   hasIcon?: boolean;
 }
 
 export function ExplorerLink(
-  { class: className, iconClass, dataTestId, link, hasIcon }: ExplorerLinkPropsType,
+  { 
+    class: className, 
+    iconClass, 
+    'data-testid': dataTestId,
+    link, 
+    hasIcon
+  }: ExplorerLinkPropsType,
   children?: JSX.Element,
 ) {
   if (!link) {

src/common/FormatAmount/FormatAmount.tsx

@@ -1,8 +1,10 @@
+import { h } from '@stencil/core';
+
 import { InvalidFormatAmount, ValidFormatAmount } from './components';
 
 interface FormatAmountPropsType {
   class?: string;
-  dataTestId?: string;
+  'data-testid'?: string;
   isValid: boolean;
   label?: string;
   labelClass?: string;
@@ -14,7 +16,7 @@ interface FormatAmountPropsType {
 
 export function FormatAmount({
   class: className,
-  dataTestId,
+  'data-testid': dataTestId,
   isValid,
   label,
   labelClass,
@@ -23,16 +25,19 @@ export function FormatAmount({
   valueInteger,
   decimalClass,
 }: FormatAmountPropsType) {
-  return isValid
-    ? ValidFormatAmount({
-        dataTestId,
-        class: className,
-        valueInteger,
-        valueDecimal,
-        decimalClass,
-        showLabel,
-        label,
-        labelClass,
-      })
-    : InvalidFormatAmount({ dataTestId, class: className });
+
+  if (isValid) {
+    return <ValidFormatAmount 
+      data-testid={dataTestId} 
+      class={className} 
+      valueInteger={valueInteger} 
+      valueDecimal={valueDecimal} 
+      decimalClass={decimalClass} 
+      showLabel={showLabel} 
+      label={label} 
+      labelClass={labelClass} 
+    />;
+  }
+
+  return <InvalidFormatAmount data-testid={dataTestId} class={className} />;
 }

src/common/FormatAmount/components/InvalidFormatAmount.tsx

@@ -8,10 +8,13 @@ const styles = {
 
 interface InvalidFormatAmountPropsType {
   class?: string;
-  dataTestId?: string;
+  'data-testid'?: string;
 }
 
-export function InvalidFormatAmount({ dataTestId, class: className }: InvalidFormatAmountPropsType) {
+export function InvalidFormatAmount({
+  'data-testid': dataTestId,
+  class: className,
+}: InvalidFormatAmountPropsType) {
   return (
     <span data-testid={dataTestId ?? DataTestIdsEnum.formatAmountComponent} class={className}>
       <span class={styles.intAmount} data-testid={DataTestIdsEnum.formatAmountInt}>

src/common/FormatAmount/components/ValidFormatAmount.tsx

@@ -12,7 +12,7 @@ const styles = {
 
 interface ValidFormatAmountPropsType {
   class?: string;
-  dataTestId?: string;
+  'data-testid'?: string;
   label?: string;
   labelClass?: string;
   showLabel?: boolean;
@@ -22,7 +22,7 @@ interface ValidFormatAmountPropsType {
 }
 
 export function ValidFormatAmount({
-  dataTestId,
+  'data-testid': dataTestId,
   class: className,
   valueInteger,
   valueDecimal,

src/common/Trim/Trim.tsx

@@ -6,12 +6,16 @@ import { safeWindow } from 'constants/window.constants';
 import styles from './trim.styles';
 
 interface TrimPropsType {
-  dataTestId?: string;
+  'data-testid'?: string;
   class?: string;
   text: string;
 }
 
-export function Trim({ dataTestId = DataTestIdsEnum.trim, class: className, text }: TrimPropsType) {
+export function Trim({
+  'data-testid': dataTestId = DataTestIdsEnum.trim,
+  class: className,
+  text,
+}: TrimPropsType) {
   let fullWidthUntrimmedElementReference: HTMLDivElement;
   let trimElementReference: HTMLDivElement;
   let resizeObserver: ResizeObserver;

src/common/UnlockButton/UnlockButton.tsx

@@ -20,12 +20,19 @@ interface UnlockButtonPropsType {
   label: string;
   iconUrl: string;
   icon?: HTMLElement;
-  dataTestId?: string;
+  'data-testid'?: string;
   type?: IProviderBase['type'];
   class?: string;
 }
 
-export function UnlockButton({ label, iconUrl, icon, dataTestId, type, class: className }: UnlockButtonPropsType) {
+export function UnlockButton({
+  label,
+  iconUrl,
+  icon,
+  'data-testid': dataTestId,
+  type,
+  class: className,
+}: UnlockButtonPropsType) {
   const isExtensionProvider = type === ProviderTypeEnum.extension;
   const isMetaMaskProvider = type === ProviderTypeEnum.metamask;
   const isDetectableProvider = isExtensionProvider || isMetaMaskProvider;

src/components/controlled/format-amount/format-amount.tsx

@@ -7,7 +7,7 @@ import { FormatAmount as FormatAmountComponent } from 'common/FormatAmount/Forma
 })
 export class FormatAmount {
   @Prop() class?: string;
-  @Prop() dataTestId?: string;
+  @Prop({ attribute: 'data-testid' }) dataTestId?: string;
   @Prop() isValid: boolean;
   @Prop() label?: string;
   @Prop() labelClass?: string;
@@ -20,7 +20,7 @@ export class FormatAmount {
     return (
       <FormatAmountComponent
         class={this.class}
-        dataTestId={this.dataTestId}
+        data-testid={this.dataTestId}
         isValid={this.isValid}
         label={this.label}
         labelClass={this.labelClass}