@zohodesk/dot 1.0.0-temp-188.1 → 1.0.0-temp-191

package/es/v1/errorstate/Inconvenience/Inconvenience.js

@@ -52,7 +52,8 @@ export default function Inconvenience(props) {
     customClass: {
       customButton: style.errorBtn
     },
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    dataId: `${dataId}_button`
   }) : null));
 }
 Inconvenience.propTypes = propTypes;

package/es/v1/errorstate/UnableToProcessRequest/UnableToProcessRequest.js

@@ -52,7 +52,8 @@ export default function UnableToProcessRequest(props) {
     customClass: {
       customButton: style.errorBtn
     },
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    dataId: `${dataId}_button`
   }) : null));
 }
 UnableToProcessRequest.propTypes = propTypes;

package/es/v1/errorstate/UrlNotFound/UrlNotFound.js

@@ -52,7 +52,8 @@ export default function UrlNotFound(props) {
     customClass: {
       customButton: style.errorBtn
     },
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    dataId: `${dataId}_button`
   }) : null));
 }
 UrlNotFound.propTypes = propTypes;

package/es/v1/errorstate/WillBeRightBack/WillBeRightBack.js

@@ -52,7 +52,8 @@ export default function WillBeRightBack(props) {
     customClass: {
       customButton: style.errorBtn
     },
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    dataId: `${dataId}_button`
   }) : null));
 }
 WillBeRightBack.propTypes = propTypes;

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -198,6 +198,7 @@ function StatusDropdown(props) {
       isResponsivePadding: true,
       needFocusScope: true,
       onClose: handleTogglePopup,
+      dataId: `${dataId}_dropbox`,
       customProps: {
         focusScopeProps: {
           searchValue: searchString,
@@ -224,7 +225,8 @@ function StatusDropdown(props) {
         role: 'combobox',
         ariaActivedescendant: isPopupReady ? value : '',
         ariaOwns: ariaTitleId
-      }
+      },
+      dataId: `${dataId}_search`
     })) : null, title && optionsList.length != 0 && /*#__PURE__*/React.createElement(Box, {
       className: style.title
     }, /*#__PURE__*/React.createElement(DropDownHeading, {

package/es/v1/lookup/header/ViewDropDown/ViewDropDown.js

@@ -69,7 +69,8 @@ class DropDown extends SelectComponent {
       searchBoxSize,
       searchBoxVariant,
       searchBoxPlaceHolder,
-      maxLength
+      maxLength,
+      dataId
     } = this.props;
     const {
       hoverIndex,
@@ -80,7 +81,9 @@ class DropDown extends SelectComponent {
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     return /*#__PURE__*/React.createElement("div", {
-      className: style.container
+      className: style.container,
+      "data-id": dataId,
+      "data-test-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
       onClick: this.togglePopup,
       ref: getTargetRef
@@ -110,7 +113,8 @@ class DropDown extends SelectComponent {
         animationStyle: animationStyle,
         size: "large",
         alignBox: "row",
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        dataId: `${dataId}_dropbox`
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
@@ -121,13 +125,15 @@ class DropDown extends SelectComponent {
         size: searchBoxSize,
         variant: searchBoxVariant,
         placeHolder: searchBoxPlaceHolder,
-        maxLength: maxLength
+        maxLength: maxLength,
+        dataId: `${dataId}_search`
       })) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         eleRef: this.suggestionContainerRef,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : ''
       }, suggestions.length ? /*#__PURE__*/React.createElement("div", {
-        className: style.listItemContainer
+        className: style.listItemContainer,
+        "data-id": `${dataId}_Options`
       }, suggestions.map(function () {
         let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         let index = arguments.length > 1 ? arguments[1] : undefined;

package/es/v1/lookup/header/ViewDropDown/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   needLocalSearch: true,
   needSearch: true,
   textField: 'text',
-  valueField: 'id'
+  valueField: 'id',
+  dataId: 'ViewDropDown'
 };

package/es/v1/lookup/header/ViewDropDown/props/propTypes.js

@@ -5,6 +5,7 @@ export const propTypes = {
   searchBoxPlaceHolder: PropTypes.string,
   searchEmptyMessage: PropTypes.string,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  dataId: PropTypes.string,
 
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,

package/es/v1/setup/header/Search/Search.js

@@ -13,7 +13,8 @@ export default function Search(props) {
     onKeyPress,
     onFocus,
     onBlur,
-    customClass
+    customClass,
+    dataId
   } = props;
   let [isFocus, setIsFocus] = useState(false);
   let [resetValue] = useState(value || '');
@@ -32,7 +33,9 @@ export default function Search(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
+    className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`,
+    "data-id": `${dataId}_search`,
+    "data-test-id": `${dataId}_search`
   }, /*#__PURE__*/React.createElement(TextBox, {
     placeHolder: placeHolder,
     customClass: style.input,
@@ -45,7 +48,9 @@ export default function Search(props) {
     onBlur: handleBlur
   }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
     className: style.icon,
-    onClick: handleBlur
+    onClick: handleBlur,
+    "data-id": `${dataId}_clear`,
+    "data-test-id": `${dataId}_clear`
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ZD-close",
     size: "19"

package/es/v1/setup/header/Search/props/defaultProps.js

@@ -1,5 +1,6 @@
 export const defaultProps = {
   placeHolder: 'Search',
   maxLength: 150,
-  customClass: ''
+  customClass: '',
+  dataId: 'search'
 };

package/es/v1/setup/header/Search/props/propTypes.js

@@ -7,5 +7,6 @@ export const propTypes = {
   onFocus: PropTypes.func,
   onKeyPress: PropTypes.func,
   placeHolder: PropTypes.string,
-  value: PropTypes.string
+  value: PropTypes.string,
+  dataId: PropTypes.string
 };

package/es/version2/errorstate/Inconvenience/Inconvenience.js

@@ -58,7 +58,8 @@ export default class Inconvenience extends React.Component {
       customClass: {
         customButton: style.errorBtn
       },
-      onClick: onButtonClick
+      onClick: onButtonClick,
+      dataId: `${dataId}_button`
     }) : null));
   }
 

package/es/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest.js

@@ -58,7 +58,8 @@ export default class UnableToProcessRequest extends React.Component {
       customClass: {
         customButton: style.errorBtn
       },
-      onClick: onButtonClick
+      onClick: onButtonClick,
+      dataId: `${dataId}_button`
     }) : null));
   }
 

package/es/version2/errorstate/UrlNotFound/UrlNotFound.js

@@ -58,7 +58,8 @@ export default class UrlNotFound extends React.Component {
       customClass: {
         customButton: style.errorBtn
       },
-      onClick: onButtonClick
+      onClick: onButtonClick,
+      dataId: `${dataId}_button`
     }) : null));
   }
 

package/es/version2/errorstate/WillBeRightBack/WillBeRightBack.js

@@ -58,7 +58,8 @@ export default class WillBeRightBack extends React.Component {
       customClass: {
         customButton: style.errorBtn
       },
-      onClick: onButtonClick
+      onClick: onButtonClick,
+      dataId: `${dataId}_button`
     }) : null));
   }
 

package/lib/ActionButton/ActionButton.js

@@ -122,7 +122,8 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         onMouseEnter: !onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: !onClick ? onHover && this.handleTogglePopup : undefined,
         eleRef: getTargetRef,
-        dataSelectorId: dataSelectorId
+        dataSelectorId: dataSelectorId,
+        dataId: "".concat(dataId, "_actionButton")
       }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -188,7 +189,8 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         getRef: getContainerRef,
         popupGroup: popupGroup,
         needFocusScope: true,
-        onClose: this.handleTogglePopup
+        onClose: this.handleTogglePopup,
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/ActionButton/__tests__/__snapshots__/ActionButton.spec.js.snap

@@ -4,9 +4,9 @@ exports[`ActionButton rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="containerComponent"
+    data-id="actionButton_actionButton"
     data-selector-id="actionButton"
-    data-test-id="containerComponent"
+    data-test-id="actionButton_actionButton"
   >
     <button
       class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"

package/lib/Attachment/Attachment.js

@@ -121,7 +121,8 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
         href: downloadLink,
         className: _AttachmentModule["default"].attachDownload,
         title: downloadTitle,
-        hasReload: true
+        hasReload: true,
+        dataId: "".concat(dataId, "_download")
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-downloadNew",
         iconClass: _AttachmentModule["default"].downIcon

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -298,7 +298,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           dataList = _this$state2.dataList,
           selectedIndex = _this$state2.selectedIndex,
           isZoomed = _this$state2.isZoomed;
-      var maintainZoom = this.props.maintainZoom;
+      var _this$props = this.props,
+          maintainZoom = _this$props.maintainZoom,
+          dataId = _this$props.dataId;
 
       var getImgStyle = function getImgStyle(i) {
         var position;
@@ -342,7 +344,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, (0, _Attachment.isAudioFile)(data.name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("video", {
           autoPlay: true,
           controls: true,
-          className: _AttachmentViewerModule["default"].zoomIn
+          className: _AttachmentViewerModule["default"].zoomIn,
+          "data-id": "".concat(dataId, "_videoPreview"),
+          "data-test-id": "".concat(dataId, "_videoPreview")
         }, /*#__PURE__*/_react["default"].createElement("source", {
           src: data.viewUrl,
           type: "audio/".concat((0, _Attachment.getExtensionFromFileName)(data.name))
@@ -370,11 +374,12 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           selectedIndex = _this$state3.selectedIndex,
           data = _this$state3.data,
           isZoomed = _this$state3.isZoomed;
-      var _this$props = this.props,
-          responsiveId = _this$props.responsiveId,
-          needDownload = _this$props.needDownload,
-          i18nKeys = _this$props.i18nKeys,
-          isActive = _this$props.isActive;
+      var _this$props2 = this.props,
+          responsiveId = _this$props2.responsiveId,
+          needDownload = _this$props2.needDownload,
+          i18nKeys = _this$props2.i18nKeys,
+          isActive = _this$props2.isActive,
+          dataId = _this$props2.dataId;
       var totalLen = data.length;
       var selectedAttachment = data[selectedIndex] || {};
       var selectedImgUrl = selectedAttachment.viewUrl;
@@ -479,7 +484,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           target: "_parent",
           hasReload: true,
           download: true,
-          title: i18nKeys.downloadText
+          title: i18nKeys.downloadText,
+          dataId: "".concat(dataId, "_downloadAttach")
         }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           iconName: "ZD-GN-download",
           className: _AttachmentViewerModule["default"].menuIcon,
@@ -546,13 +552,15 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           dataId: "rightAttachNav",
           isBold: true
         }))))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          className: "".concat(_AttachmentViewerModule["default"].footer, " ").concat(isPViewListOpen && totalLen !== 1 ? _AttachmentViewerModule["default"].footerHeight : _AttachmentViewerModule["default"].footerHide, " ")
+          className: "".concat(_AttachmentViewerModule["default"].footer, " ").concat(isPViewListOpen && totalLen !== 1 ? _AttachmentViewerModule["default"].footerHeight : _AttachmentViewerModule["default"].footerHide, " "),
+          dataId: "".concat(dataId, "_attachPreviewFooter")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "vertical",
           alignBox: "row",
           className: _AttachmentViewerModule["default"].footerHeight
         }, author && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          className: _AttachmentViewerModule["default"].author
+          className: _AttachmentViewerModule["default"].author,
+          dataId: "".concat(dataId, "_authorName")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           alignBox: "row",
           align: "both"

package/lib/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap

@@ -123,6 +123,8 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 >
                   <a
                     class="container  "
+                    data-id="AttachmentViewer_downloadAttach"
+                    data-test-id="AttachmentViewer_downloadAttach"
                     download=""
                     href="https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG"
                     rel="noopener noreferrer"
@@ -274,9 +276,9 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         </div>
         <div
           class="footer footerHeight  shrinkOff"
-          data-id="boxComponent"
+          data-id="AttachmentViewer_attachPreviewFooter"
           data-selector-id="box"
-          data-test-id="boxComponent"
+          data-test-id="AttachmentViewer_attachPreviewFooter"
         >
           <div
             class="footerHeight flex cover rowdir vCenter"

package/lib/AttachmentViewer/props/defaultProps.js

@@ -13,6 +13,7 @@ var AttachmentViewer_defaultProps = {
   needDownload: true,
   i18nKeys: {},
   maintainZoom: false,
-  isActive: false
+  isActive: false,
+  dataId: 'AttachmentViewer'
 };
 exports.AttachmentViewer_defaultProps = AttachmentViewer_defaultProps;

package/lib/AttachmentViewer/props/propTypes.js

@@ -38,6 +38,7 @@ var AttachmentViewer_propTypes = {
   previewObj: _propTypes["default"].object,
   responsiveId: _propTypes["default"].string,
   maintainZoom: _propTypes["default"].bool,
-  isActive: _propTypes["default"].bool
+  isActive: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string
 };
 exports.AttachmentViewer_propTypes = AttachmentViewer_propTypes;

package/lib/ChannelIcon/ChannelIcon.js

@@ -122,6 +122,7 @@ var ChannelIcon = /*#__PURE__*/function (_Component) {
         palette: palette,
         textPalette: textPalette,
         customClass: customTextClass,
+        dataId: dataId,
         needTitle: title,
         title: title
       }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {

package/lib/MessageBanner/MessageBanner.js

@@ -89,10 +89,12 @@ var MessageBanner = /*#__PURE__*/function (_React$Component) {
         href: href,
         onClick: onClick,
         className: _MessageBannerModule["default"].link,
-        target: "_blank"
+        target: "_blank",
+        dataId: "".concat(dataId, "_link")
       }, urlText)))), onClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _MessageBannerModule["default"].close,
-        onClick: onClose
+        className: _MessageBannerModule["default"].ose,
+        onClick: onClose,
+        dataId: "".concat(dataId, "_close")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {

package/lib/alert/AlertHeader/AlertHeader.js

@@ -88,7 +88,8 @@ var AlertHeader = /*#__PURE__*/function (_Component) {
         alignBox: "row",
         className: "".concat(_AlertHeaderModule["default"].container, " ").concat(_AlertHeaderModule["default"][palette]),
         isCover: false,
-        wrap: "wrap"
+        wrap: "wrap",
+        dataId: "".concat(dataId, "_alertHeader")
       }, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _AlertHeaderModule["default"].iconContainer
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {

package/lib/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -4,9 +4,9 @@ exports[`AlertHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="container danger flex rowdir wrap vCenter"
-    data-id="containerComponent"
+    data-id="alertHeader_alertHeader"
     data-selector-id="container"
-    data-test-id="containerComponent"
+    data-test-id="alertHeader_alertHeader"
   >
     <div
       class="iconContainer"

package/lib/avatar/AvatarClose/AvatarClose.js

@@ -65,14 +65,17 @@ var AvatarClose = /*#__PURE__*/function (_React$Component) {
           isClose = _this$props.isClose,
           onClick = _this$props.onClick,
           customProps = _this$props.customProps,
-          dataSelectorId = _this$props.dataSelectorId;
+          dataSelectorId = _this$props.dataSelectorId,
+          dataId = _this$props.dataId;
       var _customProps$AvatarCl = customProps.AvatarCloseProps,
           AvatarCloseProps = _customProps$AvatarCl === void 0 ? {} : _customProps$AvatarCl,
           _customProps$AvatarPr = customProps.AvatarProps,
           AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: _AvatarCloseModule["default"].container,
-        "data-selector-id": dataSelectorId
+        "data-selector-id": dataSelectorId,
+        "data-id": dataId,
+        "data-test-id": dataId
       }, AvatarCloseProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         src: src,
         name: name,
@@ -80,7 +83,9 @@ var AvatarClose = /*#__PURE__*/function (_React$Component) {
         size: size
       }, AvatarProps)), isClose && /*#__PURE__*/_react["default"].createElement("span", {
         className: _AvatarCloseModule["default"].pop,
-        onClick: onClick
+        onClick: onClick,
+        "data-id": "".concat(dataId, "_close"),
+        "data-test-id": "".concat(dataId, "_close")
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: _AvatarCloseModule["default"].icon
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {

package/lib/avatar/AvatarClose/__tests__/__snapshots__/AvatarClose.spec.js.snap

@@ -4,7 +4,9 @@ exports[`AvatarClose rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="container"
+    data-id="avatarClose"
     data-selector-id="avatarClose"
+    data-test-id="avatarClose"
   >
     <div
       class="avatar medium medium circle primary black border   "

package/lib/avatar/AvatarClose/props/defaultProps.js

@@ -8,6 +8,7 @@ var defaultProps = {
   isClose: false,
   size: 'medium',
   customProps: {},
-  dataSelectorId: 'avatarClose'
+  dataSelectorId: 'avatarClose',
+  dataId: 'avatarClose'
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarClose/props/propTypes.js

@@ -20,6 +20,7 @@ var propTypes = {
     AvatarCloseProps: _propTypes["default"].object,
     AvatarProps: _propTypes["default"].object
   }),
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  dataId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -705,7 +705,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               searchValue: searchValue,
               isFetchingOptions: isFetchingOptions
             }
-          }
+          },
+          dataId: "".concat(dataId, "_dropbox")
         }, DropBoxProps, {
           onClose: _this5.handleTogglePopup
         }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -724,6 +725,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           } //search
           // onKeyDown={this.handleKeyDown}
           ,
+          dataId: "".concat(dataId, "_search"),
           a11y: {
             role: 'combobox',
             ariaOwns: ariaTitleId,

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -305,6 +305,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isResponsivePadding: true,
           needFocusScope: true,
           onClose: _this2.handleTogglePopup,
+          dataId: "".concat(dataId, "_dropbox"),
           customProps: {
             focusScopeProps: {
               loadNextOptions: getNextOptions,
@@ -331,7 +332,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
             role: 'combobox',
             ariaActivedescendant: isPopupReady ? value : '',
             ariaOwns: ariaTitleId
-          }
+          },
+          dataId: "".concat(dataId, "_search")
         })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _StatusDropdownModule["default"].title
         }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {

package/lib/lookup/header/ViewDropDown/ViewDropDown.js

@@ -117,7 +117,8 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           searchBoxSize = _this$props.searchBoxSize,
           searchBoxVariant = _this$props.searchBoxVariant,
           searchBoxPlaceHolder = _this$props.searchBoxPlaceHolder,
-          maxLength = _this$props.maxLength;
+          maxLength = _this$props.maxLength,
+          dataId = _this$props.dataId;
       var _this$state = this.state,
           hoverIndex = _this$state.hoverIndex,
           selected = _this$state.selected,
@@ -126,7 +127,9 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           selectedId = _this$state.selectedId;
       var suggestions = this.handleFilterSuggestions();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ViewDropDownModule["default"].container
+        className: _ViewDropDownModule["default"].container,
+        "data-id": dataId,
+        "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         onClick: this.togglePopup,
         ref: getTargetRef
@@ -154,7 +157,8 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           animationStyle: animationStyle,
           size: "large",
           alignBox: "row",
-          isResponsivePadding: true
+          isResponsivePadding: true,
+          dataId: "".concat(dataId, "_dropbox")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card.Card, null, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_DropDownSearch["default"], {
@@ -165,13 +169,15 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           size: searchBoxSize,
           variant: searchBoxVariant,
           placeHolder: searchBoxPlaceHolder,
-          maxLength: maxLength
+          maxLength: maxLength,
+          dataId: "".concat(dataId, "_search")
         })) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           eleRef: _this2.suggestionContainerRef,
           customClass: !tabletMode && dropBoxSize ? _ViewDropDownModule["default"][dropBoxSize] : ''
         }, suggestions.length ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].listItemContainer
+          className: _ViewDropDownModule["default"].listItemContainer,
+          "data-id": "".concat(dataId, "_Options")
         }, suggestions.map(function () {
           var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
           var index = arguments.length > 1 ? arguments[1] : undefined;

package/lib/lookup/header/ViewDropDown/__test__/__snapshots__/ViewDropDown.spec.js.snap

@@ -4,6 +4,8 @@ exports[`ViewDropDown rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="container"
+    data-id="ViewDropDown"
+    data-test-id="ViewDropDown"
   >
     <div>
       <div

package/lib/lookup/header/ViewDropDown/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   needLocalSearch: true,
   needSearch: true,
   textField: 'text',
-  valueField: 'id'
+  valueField: 'id',
+  dataId: 'ViewDropDown'
 };
 exports.defaultProps = defaultProps;

package/lib/lookup/header/ViewDropDown/props/propTypes.js

@@ -15,6 +15,7 @@ var propTypes = {
   searchBoxPlaceHolder: _propTypes["default"].string,
   searchEmptyMessage: _propTypes["default"].string,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  dataId: _propTypes["default"].string,
 
   /**** Popup props ****/
   isPopupOpen: _propTypes["default"].bool,

package/lib/setup/header/Search/Search.js

@@ -89,10 +89,13 @@ var Search = /*#__PURE__*/function (_React$Component) {
           value = _this$props.value,
           onChange = _this$props.onChange,
           onKeyPress = _this$props.onKeyPress,
-          customClass = _this$props.customClass;
+          customClass = _this$props.customClass,
+          dataId = _this$props.dataId;
       var isFocus = this.state.isFocus;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SearchModule["default"].container, " ").concat(isFocus ? _SearchModule["default"].active : '', " ").concat(customClass)
+        className: "".concat(_SearchModule["default"].container, " ").concat(isFocus ? _SearchModule["default"].active : '', " ").concat(customClass),
+        "data-id": "".concat(dataId, "_search"),
+        "data-test-id": "".concat(dataId, "_search")
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         placeHolder: placeHolder,
         customClass: _SearchModule["default"].input,
@@ -105,7 +108,9 @@ var Search = /*#__PURE__*/function (_React$Component) {
         onBlur: this.onBlur
       }), value != '' && value ? /*#__PURE__*/_react["default"].createElement("span", {
         className: _SearchModule["default"].icon,
-        onClick: this.onBlur
+        onClick: this.onBlur,
+        "data-id": "".concat(dataId, "_clear"),
+        "data-test-id": "".concat(dataId, "_clear")
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-close",
         size: "19"