@zohodesk/dot 1.0.0-beta.266 → 1.0.0-beta.267

package/README.md

@@ -2,6 +2,10 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.267
+
+- data-test-id attribute added for all element which having data-id attribute to separate customization and automation
+
 # 1.0.0-beta.266
 
 - Variable Replacer Issue Resolved

package/es/AttachmentViewer/AttachmentImage.js

@@ -58,7 +58,8 @@ export default class AttachmentImage extends Component {
     } = this.state;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
       className: `${style.spinLoad}`,
-      "data-id": `${dataId}_loader`
+      "data-id": `${dataId}_loader`,
+      "data-test-id": `${dataId}_loader`
     }, /*#__PURE__*/React.createElement("div", {
       className: style.loader
     })) : null, /*#__PURE__*/React.createElement(Image, {

package/es/AttachmentViewer/AttachmentViewer.js

@@ -354,6 +354,7 @@ export default class AttachmentViewer extends Component {
         className: uptoTablet ? style.mobileMenu : style.menu,
         onClick: this.zoomOut.bind(this, selectedIndex),
         "data-id": "zoomOut",
+        "data-test-id": "zoomOut",
         "data-title": i18nKeys.zoomOutText
       }, /*#__PURE__*/React.createElement(IconButton, {
         iconName: "ZD-GN-zoomOut",
@@ -367,6 +368,7 @@ export default class AttachmentViewer extends Component {
         className: uptoTablet ? style.mobileMenu : style.menu,
         onClick: e => this.zoomIn(e, selectedIndex),
         "data-id": "zoomIn",
+        "data-test-id": "zoomIn",
         "data-title": i18nKeys.zoomInText
       }, /*#__PURE__*/React.createElement(IconButton, {
         iconName: "ZD-GN-zoomIn",
@@ -413,6 +415,7 @@ export default class AttachmentViewer extends Component {
         className: uptoTablet ? style.mobileMenu : style.menu,
         onClick: this.closeAttachmentViewer,
         "data-id": "closeAttach",
+        "data-test-id": "closeAttach",
         "data-title": i18nKeys.closeText
       }, /*#__PURE__*/React.createElement(IconButton, {
         iconName: "ZD-cross",

package/es/ExternalLink/ExternalLink.js

@@ -38,6 +38,7 @@ export default class ExternalLink extends React.Component {
       "data-title": title,
       rel: rel,
       "data-id": dataId,
+      "data-test-id": dataId,
       onClick: onClick
     }, customProps), children);
   }

package/es/FlipCard/FlipCard.js

@@ -80,10 +80,12 @@ export default class FlipCard extends Component {
       className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
       onClick: this.onClick,
       "data-id": ticListContainer,
+      "data-test-id": ticListContainer,
       "data-tour": tourId
     }, /*#__PURE__*/React.createElement("div", {
       className: style.container,
-      "data-id": ticList
+      "data-id": ticList,
+      "data-test-id": ticList
     }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: `${style.front} ${frontClass ? frontClass : ''}`

package/es/Image/Image.js

@@ -21,6 +21,7 @@ export default class Image extends React.Component {
       alt: alt,
       "data-title": title,
       "data-id": dataId,
+      "data-test-id": dataId,
       className: ` ${className} ${isCover ? style.imgFullSize : style.imgMaxFullSize} `,
       onClick: onClick,
       id: htmlId,

package/es/Link/Link.js

@@ -87,7 +87,8 @@ export default class Link extends React.Component {
       className: `${style.container}  ${className ? className : ''}`
     }, option, {
       rel: rel,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, others, {
       onClick: this.onCallBack.bind(this, urlOutput, href)
     }, customProps, {

package/es/Message/Message.js

@@ -77,6 +77,7 @@ export function MessageUI(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: style.message,
     "data-id": `show_${type}_message`,
+    "data-test-id": `show_${type}_message`,
     "data-selector-id": dataSelectorId
   }, /*#__PURE__*/React.createElement("div", {
     className: style.container
@@ -92,6 +93,7 @@ export function MessageUI(props) {
     className: style.text,
     onClick: onClick,
     "data-id": "infoMessage",
+    "data-test-id": "infoMessage",
     dangerouslySetInnerHTML: {
       __html: message
     }
@@ -99,7 +101,8 @@ export function MessageUI(props) {
     className: style.close,
     "data-title": closeTitle,
     onClick: onClose,
-    "data-id": `close_${type}_message`
+    "data-id": `close_${type}_message`,
+    "data-test-id": `close_${type}_message`
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ZD-closee",
     isBold: true,

package/es/PlusIcon/PlusIcon.js

@@ -23,6 +23,7 @@ export default class PlusIcon extends React.Component {
       className: style.container,
       onClick: onClick,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": title
     }, /*#__PURE__*/React.createElement(AvatarIcon, {
       name: iconName,

package/es/ToastMessage/ToastMessage.js

@@ -141,7 +141,8 @@ function ToastMessageUI(props) {
   }, needClose ? /*#__PURE__*/React.createElement("button", {
     className: `${a11yStyle.buttonReset} ${style.closeIcon}`,
     onClick: onClose,
-    "data-id": `${dataId}_closeRight`
+    "data-id": `${dataId}_closeRight`,
+    "data-test-id": `${dataId}_closeRight`
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ZD-close",
     size: "18"

package/es/Upload/Upload.js

@@ -34,6 +34,7 @@ export default class Upload extends React.Component {
       dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(React.Fragment, null, isPreview ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_attachLoading`,
+      "data-test-id": `${dataId}_attachLoading`,
       className: style.loader,
       style: {
         width: `${progressValue}%`
@@ -58,7 +59,8 @@ export default class Upload extends React.Component {
     }, fileSize))), typeof onRemove !== 'undefined' && onRemove != null ? /*#__PURE__*/React.createElement("span", {
       className: style.uploadclose,
       onClick: onRemove,
-      "data-id": `${dataId}_deleteUpload`
+      "data-id": `${dataId}_deleteUpload`,
+      "data-test-id": `${dataId}_deleteUpload`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-close",
       isBold: true

package/es/avatar/AvatarCollision/AvatarCollision.js

@@ -33,6 +33,7 @@ export default class AvatarCollision extends React.Component {
       className: `${style.container} ${isLeft ? style.off : isIdle ? style.idle : style.on}`,
       onClick: onClick,
       "data-id": "collsionPop",
+      "data-test-id": "collsionPop",
       "data-title": title,
       "data-selector-id": dataSelectorId
     }, AvatarCollisionProps), /*#__PURE__*/React.createElement(Avatar, _extends({

package/es/avatar/AvatarThread/AvatarThread.js

@@ -58,6 +58,7 @@ export default class AvatarThread extends React.Component {
       className: `${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${needBackground ? style.threadBg : ''} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`,
       "data-title": iconTitle,
       "data-id": iconTitle === 'Remove Follower' && 'removeFollower',
+      "data-test-id": iconTitle === 'Remove Follower' && 'removeFollower',
       onClick: onIconClick
     }, iconName && /*#__PURE__*/React.createElement("span", {
       className: style.icon

package/es/avatar/AvatarUser/AvatarUser.js

@@ -53,6 +53,7 @@ export default class AvatarUser extends React.Component {
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.container} ${style[size]}`,
       "data-id": dataId || name || iconName,
+      "data-test-id": dataId || name || iconName,
       "data-selector-id": dataSelectorId
     }, AvatarUserProps), iconName ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
       name: iconName,
@@ -77,24 +78,28 @@ export default class AvatarUser extends React.Component {
     }, AvatarProps)), isPaid ? /*#__PURE__*/React.createElement("span", {
       "data-title": paidTitle,
       className: style.paid,
-      "data-id": "paidUser"
+      "data-id": "paidUser",
+      "data-test-id": "paidUser"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-paiduser"
     })) : null, isPortal ? /*#__PURE__*/React.createElement("span", {
       "data-title": portalTitle,
       className: style.portal,
-      "data-id": "portalUser"
+      "data-id": "portalUser",
+      "data-test-id": "portalUser"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-globe1"
     })) : null, isLocked ? /*#__PURE__*/React.createElement("span", {
       "data-title": lockTitle,
       className: style.lock,
-      "data-id": "locked"
+      "data-id": "locked",
+      "data-test-id": "locked"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-lock01"
     })) : null, needDelete ? /*#__PURE__*/React.createElement("span", {
       className: style.delete,
       "data-id": "dltContactPhoto",
+      "data-test-id": "dltContactPhoto",
       onClick: onDelete
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete2",

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -36,6 +36,7 @@ export default class AvatarWithTeam extends React.Component {
     return /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.container} `,
       "data-id": "avatarWithTeamId",
+      "data-test-id": "avatarWithTeamId",
       "data-selector-id": dataSelectorId
     }, AvatarWithTeamProps), isTeam && teamName ? /*#__PURE__*/React.createElement(Avatar, _extends({
       name: name,
@@ -72,6 +73,7 @@ export default class AvatarWithTeam extends React.Component {
     }, Avatar2Props)), teamName ? /*#__PURE__*/React.createElement("span", {
       className: `${style.teamAvatar} ${teamClassName} `,
       "data-id": "teamNameTestId",
+      "data-test-id": "teamNameTestId",
       "data-title": needTitle ? title : undefined
     }, /*#__PURE__*/React.createElement(AvatarTeam, _extends({
       name: teamName,

package/es/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -28,7 +28,8 @@ export default class CommonEmptyState extends Component {
     } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[size]} ${className} ${!isFluid ? style.fluid : ''} ${style[palette]}`,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/React.createElement("div", {
       className: `${style.title} ${titleClass}`
     }, title) : null, description ? /*#__PURE__*/React.createElement("div", {

package/es/emptystate/EditionPage/EditionPage.js

@@ -21,7 +21,8 @@ export default class EditionPage extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       className: style.editionContainer,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
       className: style.svg
     }, /*#__PURE__*/React.createElement(EmptyCrmPotential, null)), /*#__PURE__*/React.createElement("div", {
@@ -33,11 +34,13 @@ export default class EditionPage extends Component {
     }, information ? `${information} ` : null, butttonText ? /*#__PURE__*/React.createElement("span", {
       className: style.button,
       "data-id": `${dataId}_button`,
+      "data-test-id": `${dataId}_button`,
       onClick: onButtonClick
     }, butttonText) : null), children ? /*#__PURE__*/React.createElement("div", {
       className: style.content
     }, children) : null, footerText ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_footerText`,
+      "data-test-id": `${dataId}_footerText`,
       className: style.footer
     }, /*#__PURE__*/React.createElement("div", {
       dangerouslySetInnerHTML: {

package/es/form/fields/FieldContainer/FieldContainer.js

@@ -56,6 +56,7 @@ export default class FieldContainer extends PureComponent {
     }) : null, ePhiStatus ? /*#__PURE__*/React.createElement("span", {
       "data-title": ePhiTitle,
       "data-id": `${dataId}_ePHI`,
+      "data-test-id": `${dataId}_ePHI`,
       className: style.ePhiTag
     }, ePhiText) : null, renderEnd ? renderEnd() : null);
   }

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -151,6 +151,7 @@ export default class TagsMultiSelect extends React.Component {
               ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder ? style.active : ''}` : ''} ${className}`,
       onClick: stopBubbling,
       "data-id": `${dataId}_tagsContainer`,
+      "data-test-id": `${dataId}_tagsContainer`,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",

package/es/form/fields/ValidationMessage/ValidationMessage.js

@@ -28,6 +28,7 @@ export default class ValidationMessage extends React.Component {
       onClick: onClick,
       className: `${type === 'primary' ? style.primary : style.secondary}`,
       "data-id": "errorMsgContainer",
+      "data-test-id": "errorMsgContainer",
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Label, {
       text: text,

package/es/form/layout/Field/Field.js

@@ -15,7 +15,8 @@ export default class Field extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''} ${`fieldWidth_${width}`}`
     }, children)), rowBreak && /*#__PURE__*/React.createElement("div", {

package/es/form/layout/Section/Section.js

@@ -18,12 +18,14 @@ export default class Section extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       "data-id": dataId,
+      "data-test-id": dataId,
       className: containerClass ? containerClass : ''
     }, title && /*#__PURE__*/React.createElement("div", {
       className: titleClass ? titleClass : ''
     }, title), /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
-      "data-id": formName && formName
+      "data-id": formName && formName,
+      "data-test-id": formName && formName
     }, this.props.children));
   }
 

package/es/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -67,7 +67,8 @@ export default class SetupDetailLayout extends React.Component {
       onClick: this.toggleHelpInfo,
       className: style.infoClose,
       "data-title": closeText,
-      "data-id": `${dataId}_close`
+      "data-id": `${dataId}_close`,
+      "data-test-id": `${dataId}_close`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-close"
     }))))), /*#__PURE__*/React.createElement(Box, {
@@ -123,7 +124,8 @@ export class SetupHeader extends Component {
       className: style.backIcon,
       onClick: onBackClick,
       "data-title": backText,
-      "data-id": `${dataId}_back`
+      "data-id": `${dataId}_back`,
+      "data-test-id": `${dataId}_back`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-back"
     })) : null), /*#__PURE__*/React.createElement(Box, {
@@ -153,14 +155,16 @@ export class SetupHeader extends Component {
       className: style.helpInfo,
       onClick: openHelpInfo,
       "data-title": infoText,
-      "data-id": `${dataId}_info`
+      "data-id": `${dataId}_info`,
+      "data-test-id": `${dataId}_info`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-info31"
     }))) : /*#__PURE__*/React.createElement("span", {
       className: `${style.helpInfo} ${style.mr15}`,
       onClick: openHelpInfo,
       "data-title": infoText,
-      "data-id": `${dataId}_info`
+      "data-id": `${dataId}_info`,
+      "data-test-id": `${dataId}_info`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-info31"
     }))) : null));

package/es/list/Icons/AddNewIcon.js

@@ -15,6 +15,7 @@ export default class AddNewIcon extends React.Component {
       onClick: onClick,
       className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-SE-addTickets",

package/es/list/Icons/CompleteIcon.js

@@ -16,6 +16,7 @@ export default class CompleteIcon extends React.Component {
       onClick: onClick,
       className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-checkbox",

package/es/list/Icons/DeleteIcon.js

@@ -16,6 +16,7 @@ export default class DeleteComponent extends React.Component {
       onClick: onClick,
       className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": dataTitle,
       tabIndex: 0
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/list/Icons/EditIcon.js

@@ -16,6 +16,7 @@ export default class EditIcon extends React.Component {
       onClick: onClick,
       className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-edit",

package/es/list/Icons/ReadUnreadIcon.js

@@ -19,6 +19,7 @@ export default class ReadUnreadIcon extends React.Component {
       onClick: onClick,
       className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',

package/es/list/Icons/SmartIcon.js

@@ -15,6 +15,7 @@ export default class SmartIcon extends Component {
       onClick: onClick,
       className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-peek",

package/es/list/ListLayout/ListLayout.js

@@ -41,6 +41,7 @@ export default class ListLayout extends Component {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": dataTitle,
       tabIndex: "0",
       role: role,

package/es/list/SecondaryText/DepartmentText.js

@@ -16,7 +16,8 @@ export default class DepartmentText extends Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.departmentText} ${className ? className : ''}`,
       "data-title": dataTitle,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, text);
   }
 

package/es/list/SecondaryText/PriorityText.js

@@ -18,7 +18,8 @@ export default class PriorityText extends Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.priorityText} ${style[color]} ${className ? className : ''}`,
       "data-title": dataTitle,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, text);
   }
 

package/es/list/SecondaryText/SecondaryText.js

@@ -25,6 +25,7 @@ export default class SecondaryText extends Component {
       className: `${style.secondaryText} ${className ? className : ''}`,
       "data-title": dataTitle,
       "data-id": dataId,
+      "data-test-id": dataId,
       onClick: onClick
     }, SecondaryTextProps), text);
   }

package/es/list/SecondaryText/StatusText.js

@@ -19,7 +19,8 @@ export default class StatusText extends Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.statusText} ${style[color]} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": dataTitle,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, text);
   }
 

package/es/list/SecondaryText/TicketId.js

@@ -31,6 +31,7 @@ export default class TicketId extends Component {
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": dataTitle,
       onClick: !isLink && onClick
     }, TicketIdProps), isLink ? /*#__PURE__*/React.createElement(Link, _extends({

package/es/list/Subject/Subject.js

@@ -42,7 +42,8 @@ export default class Subject extends Component {
     }, LinkProps), children ? children : text) : /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]}`,
       "data-title": text,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, TextProps), text));
   }
 

package/es/list/TagNew/TagNew.js

@@ -18,7 +18,8 @@ export default class TagNew extends Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`,
       onClick: onClick,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, text);
   }
 

package/es/list/UserTime/UserTime.js

@@ -32,6 +32,7 @@ export default class UserTime extends Component {
       className: `${style.container} ${containerClass ? containerClass : ''}`,
       "data-title": title,
       "data-id": dataId,
+      "data-test-id": dataId,
       "aria-label": title,
       tabIndex: "0"
     }, icon && /*#__PURE__*/React.createElement(Box, {

package/es/lookup/EmptyPage/EmptyPage.js

@@ -49,7 +49,8 @@ export default class EmptyPage extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       className: style.container,
-      "data-id": `empty_${type}`
+      "data-id": `empty_${type}`,
+      "data-test-id": `empty_${type}`
     }, this.renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
       className: style.contentDiv
     }, title));

package/es/lookup/Lookup/Lookup.js

@@ -71,7 +71,8 @@ export default class Lookup extends Component {
       "aria-modal": ariaModal,
       id: htmlId,
       className: `${style.box} ${style[`${size}Size`]}`,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, children);
     return /*#__PURE__*/React.createElement(FreezeLayer, {
       align: "horizontal",

package/es/setup/table/Text/Text.js

@@ -34,6 +34,7 @@ export default class Text extends React.Component {
       textComponent = /*#__PURE__*/React.createElement("div", {
         "data-title": title,
         "data-id": dataId,
+        "data-test-id": dataId,
         className: classNameCheck,
         onClick: onClick
       }, text);

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -102,6 +102,7 @@ export function GlobalNotificationUI(props) {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.message} ${type ? style[type] : ''}`,
     "data-id": `show_${type}_message`,
+    "data-test-id": `show_${type}_message`,
     tabIndex: 0,
     "data-selector-id": dataSelectorId
   }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
@@ -121,6 +122,7 @@ export function GlobalNotificationUI(props) {
     className: style.text,
     onClick: onClick,
     "data-id": "infoMessage",
+    "data-test-id": "infoMessage",
     dangerouslySetInnerHTML: {
       __html: message
     }

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -131,7 +131,8 @@ export function DesktopNotificationUI(props) {
     paddingLeftSize: "xmedium"
   }, submitText ? /*#__PURE__*/React.createElement("div", {
     onClick: onClickSubmit,
-    "data-id": `${dataId}_submitButton`
+    "data-id": `${dataId}_submitButton`,
+    "data-test-id": `${dataId}_submitButton`
   }, /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row"

package/lib/AttachmentViewer/AttachmentImage.js

@@ -99,7 +99,8 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
       var isLoading = this.state.isLoading;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_AttachmentViewerModule["default"].spinLoad),
-        "data-id": "".concat(dataId, "_loader")
+        "data-id": "".concat(dataId, "_loader"),
+        "data-test-id": "".concat(dataId, "_loader")
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _AttachmentViewerModule["default"].loader
       })) : null, /*#__PURE__*/_react["default"].createElement(_Image["default"], {

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -430,6 +430,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
           onClick: _this5.zoomOut.bind(_this5, selectedIndex),
           "data-id": "zoomOut",
+          "data-test-id": "zoomOut",
           "data-title": i18nKeys.zoomOutText
         }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           iconName: "ZD-GN-zoomOut",
@@ -445,6 +446,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             return _this5.zoomIn(e, selectedIndex);
           },
           "data-id": "zoomIn",
+          "data-test-id": "zoomIn",
           "data-title": i18nKeys.zoomInText
         }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           iconName: "ZD-GN-zoomIn",
@@ -491,6 +493,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
           onClick: _this5.closeAttachmentViewer,
           "data-id": "closeAttach",
+          "data-test-id": "closeAttach",
           "data-title": i18nKeys.closeText
         }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           iconName: "ZD-cross",

package/lib/ExternalLink/ExternalLink.js

@@ -82,6 +82,7 @@ var ExternalLink = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         rel: rel,
         "data-id": dataId,
+        "data-test-id": dataId,
         onClick: onClick
       }, customProps), children);
     }