Data tesids

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.1.20](https://github.com/multiversx/mx-sdk-dapp-ui/pull/304)] - 2026-02-11
+
+- [Fied `data-testid`s](https://github.com/multiversx/mx-sdk-dapp-ui/pull/303)
+
 ## [[0.1.19](https://github.com/multiversx/mx-sdk-dapp-ui/pull/302)] - 2026-01-29
 
 - [Fix duplicated `data-testid` on `mvx-button` host and inner `<button>`](https://github.com/multiversx/mx-sdk-dapp-ui/pull/302)

package.json

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

src/common/SidePanel/components/SidePanelHeader/SidePanelHeader.tsx

@@ -1,6 +1,7 @@
 import { h } from '@stencil/core';
 import classNames from 'classnames';
 import { Icon } from 'common/Icon';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 // prettier-ignore
 const styles = {
@@ -57,6 +58,7 @@ export function SidePanelHeader({
       <div
         class={{ [styles.sidePanelHeadingRight]: true, [styles.sidePanelHeadingRightVisible]: hasRightButton }}
         onClick={handleRightIconClick}
+        data-testid={DataTestIdsEnum.sidePanelCloseButton}
       >
         {hasRightButton && (rightIcon || <Icon name="close" />)}
       </div>

src/components/visual/button/button.tsx

@@ -20,15 +20,15 @@ export class Button {
   @Prop() size?: `${ButtonSizeEnum}` = 'large';
   @Prop() variant?: `${ButtonVariantEnum}` = 'primary';
 
-  private handleClick = (event: MouseEvent) => {
+  private readonly handleClick = (event: MouseEvent) => {
     this.buttonClick.emit(event);
   };
 
   render() {
     return (
       <ButtonComponent
         class={this.class}
-        data-testid={this.dataTestId}
+        // data-testid={this.internalDataTestId} // This is handled by the `data-testid` prop with `reflect: false`
         disabled={this.disabled}
         size={this.size}
         variant={this.variant}

src/constants/dataTestIds.enum.ts

@@ -82,4 +82,5 @@ export enum DataTestIdsEnum {
   signTransactionsAdvancedDataWrapper = 'signTransactionsAdvancedDataWrapper',
   signTransactionsAdvancedDataText = 'signTransactionsAdvancedDataText',
   signTransactionsAdvancedDataHighlight = 'signTransactionsAdvancedDataHighlight',
+  sidePanelCloseButton = 'side-panel-close-button',
 }