@zohodesk/components 1.0.0-temp-195 → 1.0.0-temp-196

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

@@ -1,48 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Radio eleRef prop is a function 1`] = `
-<DocumentFragment>
-  <div
-    aria-checked="false"
-    aria-readonly="false"
-    class="container  pointer hoverEfffect   inflex rowdir both"
-    data-id="RadioComp"
-    data-selector-id="container"
-    data-test-id="RadioComp"
-    role="radio"
-    tabindex="0"
-  >
-    <div
-      class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <input
-        type="hidden"
-        value=""
-      />
-      <label
-        class="radioLabel pointer"
-      >
-        <svg
-          viewBox="0 0 40 40"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            class="rdBox"
-            cx="20"
-            cy="20"
-            r="19"
-          />
-        </svg>
-      </label>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`Radio rendering ally ariaChecked true 1`] = `
 <DocumentFragment>
   <div
@@ -907,7 +864,68 @@ exports[`Radio rendering size - small 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Radio rendering the Checked is true 1`] = `
+exports[`Radio rendering the Checked is true for palette - danger 1`] = `
+<DocumentFragment>
+  <div
+    aria-checked="false"
+    aria-readonly="false"
+    class="container active pointer hoverEfffect   flex rowdir both"
+    data-id="RadioComp"
+    data-selector-id="container"
+    data-test-id="RadioComp"
+    role="radio"
+    tabindex="0"
+  >
+    <div
+      class="radio  
+            hoverdanger medium filled centerPathdanger  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <input
+        type="hidden"
+        value=""
+      />
+      <label
+        class="radioLabel pointer"
+      >
+        <svg
+          viewBox="0 0 40 40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            class="rdBox"
+            cx="20"
+            cy="20"
+            r="19"
+          />
+        </svg>
+      </label>
+    </div>
+    <div
+      class="text grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <label
+        class="label title medium default font_default
+          dotted cursor  
+              dangerLabel pointer  "
+        data-id="RadioText_label"
+        data-selector-id="label"
+        data-test-id="RadioText_label"
+        data-title="RadioText"
+      >
+        RadioText
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Radio rendering the Checked is true for palette - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
@@ -921,7 +939,7 @@ exports[`Radio rendering the Checked is true 1`] = `
   >
     <div
       class="radio  
-            undefined medium filled undefined  shrinkOff"
+            hoverprimary medium filled centerPathprimary  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -955,7 +973,7 @@ exports[`Radio rendering the Checked is true 1`] = `
       <label
         class="label title medium default font_default
           dotted cursor  
-              undefined pointer  "
+              primaryLabel pointer  "
         data-id="RadioText_label"
         data-selector-id="label"
         data-test-id="RadioText_label"
@@ -1459,7 +1477,68 @@ exports[`Radio rendering the defult props 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Radio rendering the disabled is true 1`] = `
+exports[`Radio rendering the disabled is true for palette - danger 1`] = `
+<DocumentFragment>
+  <div
+    aria-checked="false"
+    aria-readonly="true"
+    class="container  disabled    flex rowdir both"
+    data-id="RadioComp"
+    data-selector-id="container"
+    data-test-id="RadioComp"
+    role="radio"
+    tabindex="-1"
+  >
+    <div
+      class="radio  
+             medium filled centerPathdanger  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <input
+        type="hidden"
+        value=""
+      />
+      <label
+        class="radioLabel disabled"
+      >
+        <svg
+          viewBox="0 0 40 40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            class="rdBox"
+            cx="20"
+            cy="20"
+            r="19"
+          />
+        </svg>
+      </label>
+    </div>
+    <div
+      class="text grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <label
+        class="label title medium default font_default
+          dotted cursor  
+              dangerLabel disabled  "
+        data-id="RadioText_label"
+        data-selector-id="label"
+        data-test-id="RadioText_label"
+        data-title="RadioText"
+      >
+        RadioText
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Radio rendering the disabled is true for palette - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
@@ -1473,7 +1552,7 @@ exports[`Radio rendering the disabled is true 1`] = `
   >
     <div
       class="radio  
-             medium filled undefined  shrinkOff"
+             medium filled centerPathprimary  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1507,7 +1586,7 @@ exports[`Radio rendering the disabled is true 1`] = `
       <label
         class="label title medium default font_default
           dotted cursor  
-              undefined disabled  "
+              primaryLabel disabled  "
         data-id="RadioText_label"
         data-selector-id="label"
         data-test-id="RadioText_label"

package/lib/RippleEffect/__tests__/RippleEffect.spec.js

@@ -40,7 +40,7 @@ describe('RippleEffect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var hoverTypes = ['default', 'border', 'bg', 'test'];
+  var hoverTypes = ['default', 'border', 'bg'];
   test.each(hoverTypes)('rendering hoverType of- %s', function (hoverType) {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
       hoverType: hoverType

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

@@ -30,16 +30,6 @@ exports[`RippleEffect rendering hoverType of- default 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RippleEffect rendering hoverType of- test 1`] = `
-<DocumentFragment>
-  <div
-    class=" effect default border   hoverEffect "
-  >
-    RippleEffect
-  </div>
-</DocumentFragment>
-`;
-
 exports[`RippleEffect rendering isActive is true 1`] = `
 <DocumentFragment>
   <div

package/lib/Select/GroupSelect.js

@@ -420,9 +420,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isReadOnly = _this$props4.isReadOnly;
       var normalizedAllOptions = this.normalizedAllOptions;
 
-      var _extractOptionId = (0, _dropDownUtils.extractOptionId)(id),
-          selected = _extractOptionId.id,
-          groupId = _extractOptionId.groupId;
+      var _ref = (0, _dropDownUtils.extractOptionId)(id) || (0, _dropDownUtils.extractOptionIdFromJson)(id, normalizedAllOptions),
+          selected = _ref.id,
+          groupId = _ref.groupId;
 
       if (!(0, _Common.getIsEmptyValue)(id) && !isReadOnly) {
         onChange && onChange({
@@ -477,8 +477,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "handleSelectFocus",
     value: function handleSelectFocus(e) {
-      var _ref = e || {},
-          target = _ref.target;
+      var _ref2 = e || {},
+          target = _ref2.target;
 
       target && target.setSelectionRange(target, 0);
     }
@@ -608,8 +608,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
     }
   }, {
     key: "responsiveFunc",
-    value: function responsiveFunc(_ref2) {
-      var mediaQueryOR = _ref2.mediaQueryOR;
+    value: function responsiveFunc(_ref3) {
+      var mediaQueryOR = _ref3.mediaQueryOR;
       return {
         tabletMode: mediaQueryOR([{
           maxWidth: 700
@@ -677,9 +677,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           suggestionGroups = _this$handleFilterSug4.suggestionGroups,
           suggestionOptionIds = _this$handleFilterSug4.suggestionOptionIds;
 
-      var _ref3 = normalizedFormatOptions[selectedId] || {},
-          _ref3$value = _ref3.value,
-          selected = _ref3$value === void 0 ? '' : _ref3$value;
+      var _ref4 = normalizedFormatOptions[selectedId] || {},
+          _ref4$value = _ref4.value,
+          selected = _ref4$value === void 0 ? '' : _ref4$value;
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -692,7 +692,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-        ref: getTargetRef
+        ref: getTargetRef,
+        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
       }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         isDisabled: isDisabled,
         iconRotated: isPopupOpen,
@@ -707,7 +709,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         value: selected,
         variant: textBoxVariant,
         needReadOnlyStyle: isReadOnly ? true : false,
-        dataId: dataId,
+        dataId: "".concat(dataId, "_textBox"),
         onKeyPress: this.handleValueInputChange,
         needEffect: isReadOnly || isDisabled ? false : true,
         borderColor: borderColor,
@@ -744,7 +746,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         value: selected,
         variant: textBoxVariant,
         needReadOnlyStyle: isReadOnly ? true : false,
-        dataId: dataId,
+        dataId: "".concat(dataId, "_textBox"),
         onKeyPress: this.handleValueInputChange,
         borderColor: borderColor,
         htmlId: htmlId,
@@ -763,8 +765,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
-      }, function (_ref4) {
-        var tabletMode = _ref4.tabletMode;
+      }, function (_ref5) {
+        var tabletMode = _ref5.tabletMode;
         return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
           animationStyle: animationStyle,
           boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
@@ -776,7 +778,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           needResponsive: needResponsive,
           isPadding: false,
           isResponsivePadding: getFooter ? false : true,
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_suggestionBox")
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
@@ -801,7 +804,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             ariaAutocomplete: 'list',
             ariaDescribedby: ariaErrorId
           },
-          autoComplete: false
+          autoComplete: false,
+          dataId: "".concat(dataId, "_search")
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
@@ -834,7 +838,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               ariaParentRole: 'listbox',
               role: 'option'
-            }
+            },
+            dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,

package/lib/Select/Select.js

@@ -43,8 +43,6 @@ var _Common = require("../utils/Common.js");
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
-var _Config = require("../Provider/Config");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/Select/props/defaultProps.js

@@ -72,6 +72,7 @@ var GroupSelect_defaultProps = {
   dataIdDownIcon: 'downIcon',
   dataIdLoading: 'loading',
   dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  dataId: 'GroupSelect',
   isPopupOpenOnEnter: false,
   borderColor: 'default',
   needTick: true,

package/lib/Tag/Tag.js

@@ -31,6 +31,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -135,6 +137,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           tooltip = _this$props4.tooltip,
           avatarPalette = _this$props4.avatarPalette,
           customClass = _this$props4.customClass,
+          customAttributes = _this$props4.customAttributes,
           a11y = _this$props4.a11y,
           needEffect = _this$props4.needEffect,
           isReadOnly = _this$props4.isReadOnly;
@@ -151,7 +154,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
       var _a11y$clearLabel = a11y.clearLabel,
           clearLabel = _a11y$clearLabel === void 0 ? 'Delete' : _a11y$clearLabel;
       var isDarkPalette = palette === 'dark';
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: "".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag),
         "data-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         "data-test-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
@@ -161,7 +164,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         tabIndex: disabled ? '-1' : '0',
         "aria-labelledby": getAriaId,
         "data-selector-id": dataSelectorId
-      }, hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, customAttributes), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _TagModule["default"].avatar
       }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
         palette: isDarkPalette ? 'info' : avatarPalette,

package/lib/Tag/__tests__/Tag.spec.js

@@ -0,0 +1,252 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
+var _react2 = require("@testing-library/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Tag component', function () {
+  var size = ['small', 'medium'];
+  var palette = ['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink'];
+  var closePalette = ['danger', 'primary'];
+  test('Should be render with the basic set of default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render imageURL and hasAvatar', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      hasAvatar: true,
+      imageURL: "https://www.w3schools.com/images/w3schools_green.jpg"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render text', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      text: "TagTest"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render initial', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      hasAvatar: true,
+      initial: "avatarIntial"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render size  - %s', function (size) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      size: size
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render onRemove - %s', function (size) {
+    var mockOnRemove = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      active: true,
+      size: size,
+      onRemove: mockOnRemove
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render active - %s', function (palette) {
+    size.map(function (sz) {
+      closePalette.map(function (cp) {
+        var mockOnRemove = jest.fn();
+
+        var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          active: true,
+          size: sz,
+          palette: palette,
+          onRemove: mockOnRemove,
+          closePalette: cp
+        })),
+            asFragment = _render7.asFragment;
+
+        expect(asFragment()).toMatchSnapshot();
+      });
+    });
+  });
+  test('Should be render rounded is false', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      rounded: false
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render palette - %s', function (palette) {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      hasAvatar: true,
+      active: true,
+      palette: palette
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render disabled is true', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      disabled: true
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render disabled is false', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      disabled: false
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(closePalette)('Should render closePalette - %s', function (closePalette) {
+    var mockOnRemove = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      active: true,
+      closePalette: closePalette
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render onSelectTag', function () {
+    var mockonSelectTag = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onSelectTag: mockonSelectTag
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render closeTitle', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      closeTitle: "TagCloseTitle"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render dataId when active if false', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      dataId: "TagdataId"
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render dataId when active if true', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      active: true,
+      onRemove: mockOnRemove,
+      dataId: "TagdataId"
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render iconName and iconSize', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      iconName: "ZD-androidd",
+      iconSize: "15"
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render tooltip', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      tooltip: "Tagtooltip"
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render avatarPalette - %s', function (palette) {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      hasAvatar: true,
+      palette: palette,
+      avatarPalette: "primary"
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needEffect is false', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      needEffect: false
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      isReadOnly: true
+    })),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom class', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      iconName: "ZD-androidd",
+      hasAvatar: true,
+      customClass: {
+        customTag: 'customCustomTag',
+        customTagClose: 'customCustomTagClose',
+        customTagIcon: 'customCustomTagIcon',
+        customAvatar: 'customCustomAvatar'
+      }
+    })),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally clearLabel', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      a11y: {
+        clearLabel: 'TagClearLabel'
+      }
+    })),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});