@zohodesk/components 1.3.2 → 1.3.3

package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap

@@ -0,0 +1,341 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover rowdir"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover rowReverse"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TabWrapper rendering the align prop of - vertical 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover rowdir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover colReverse"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabs"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="tab alpha alpha_border alpha_padding flex cover rowdir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="menu  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="tabs_moreIcon"
+              data-test-id="boxComponent"
+            >
+              <button
+                aria-label="MoreTabs"
+                class="buttonReset   flex cover coldir both"
+                data-id="moreTabs"
+                data-selector-id="container"
+                data-test-id="moreTabs"
+                role="link"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-menu    rtl "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="tabContentWrapper"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-labelledby="page1"
+        class="container flex cover coldir"
+        data-id="tabContent_TabContent"
+        data-scroll="true"
+        data-selector-id="tabContent"
+        data-test-id="tabContent_TabContent"
+        role="tabpanel"
+        tabindex="-1"
+      >
+        <div>
+          Page 1 Content
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Tab/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 export const Tab_propTypes = {
   activeClass: PropTypes.string,
-  align: PropTypes.string,
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -101,7 +101,7 @@ export const Tabs_propTypes = {
   targetOffset: PropTypes.object
 };
 export const TabWrapper_propTypes = {
-  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  align: PropTypes.oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
   children: PropTypes.node,
   dataId: PropTypes.string,
   defaultTab: PropTypes.string,

package/es/Tab/utils/tabConfigs.js

@@ -0,0 +1,18 @@
+export const TAB_ALIGN_MAPPING = {
+  vertical: 'column',
+  horizontal: 'row',
+  'vertical-reverse': 'column-reverse',
+  'horizontal-reverse': 'row-reverse'
+};
+export const TAB_DIRECTION_MAPPING = {
+  vertical: 'column',
+  horizontal: 'row',
+  'vertical-reverse': 'column',
+  'horizontal-reverse': 'row'
+};
+export const TAB_POPUP_POSITION_MAPPING = {
+  vertical: 'bottomLeft',
+  horizontal: 'rightTop',
+  'vertical-reverse': 'topLeft',
+  'horizontal-reverse': 'leftTop'
+};

package/es/Tag/__tests__/Tag.spec.js

@@ -1,6 +1,13 @@
 import React from 'react';
+import { render, cleanup } from "@testing-library/react";
+import { setGlobalId } from "../../Provider/IdProvider";
 import Tag from "../Tag";
-import { render } from "@testing-library/react";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 describe('Tag component', () => {
   const size = ['small', 'medium'];
   const palette = ['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink'];

package/es/utils/Common.js

@@ -7,7 +7,7 @@ export const cs = classArr => classArr.filter(name => name).join(' ');
 export const parseDecimal = val => val ? parseFloat(val) : 0;
 export const getTotalDimension = (elem, align) => {
   const style = window.getComputedStyle(elem);
-  return align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
+  return align === 'vertical-reverse' || align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
 };
 export function stopPropagation(e) {
   e && e.stopPropagation && e.stopPropagation();

package/lib/Button/__tests__/Button.spec.js

@@ -6,8 +6,15 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _react2 = require("@testing-library/react");
 
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('Button component', function () {
   test('Should be render with the basic set of default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], null)),
@@ -113,4 +120,137 @@ describe('Button component', function () {
   //     const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
   //     expect(asFragment()).toMatchSnapshot();
   // });
+});
+describe('Button - Unit Testing', function () {
+  test('Should render with text prop', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      text: "Click Me"
+    })),
+        getByText = _render12.getByText;
+
+    expect(getByText('Click Me')).toBeInTheDocument();
+  });
+  test('Should render with children prop', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "Click Me")),
+        getByText = _render13.getByText;
+
+    expect(getByText('Click Me')).toBeInTheDocument();
+  });
+  test('Should apply custom styles from customStyle prop', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      customStyle: {
+        bold: 'customBoldClass'
+      }
+    })),
+        getByRole = _render14.getByRole; // expect(getByRole('button').getAttribute('class')).toContain('customBoldClass');
+
+
+    expect(getByRole('button')).toHaveClass('customBoldClass');
+  });
+  test('Should apply custom classes from customClass prop', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      customClass: {
+        customButton: 'customButtonClass'
+      }
+    })),
+        getByRole = _render15.getByRole;
+
+    expect(getByRole('button')).toHaveClass('customButtonClass');
+  });
+  test('Should be disabled when disabled prop is true', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      disabled: true
+    })),
+        getByRole = _render16.getByRole;
+
+    expect(getByRole('button')).toBeDisabled();
+  });
+  test('Should expose element with getRef prop', function () {
+    var getRef = jest.fn();
+
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      getRef: getRef
+    })),
+        getByRole = _render17.getByRole;
+
+    expect(getRef).toHaveBeenCalledWith(getByRole('button'));
+  });
+  test('Should trigger onClick function', function () {
+    var onClick = jest.fn();
+
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: onClick
+    })),
+        getByRole = _render18.getByRole; // fireEvent.click(getByRole('button'));
+
+
+    _userEvent["default"].click(getByRole('button'));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test('Should not trigger onClick when disabled', function () {
+    var onClick = jest.fn();
+
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      disabled: true,
+      onClick: onClick
+    })),
+        getByRole = _render19.getByRole;
+
+    _userEvent["default"].click(getByRole('button'));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  test('Should render with correct data-id attribute', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      dataId: "testButton"
+    })),
+        getByRole = _render20.getByRole;
+
+    expect(getByRole('button')).toHaveAttribute('data-id', 'testButton');
+  });
+  test('Should render with correct data-selector-id attribute', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      dataSelectorId: "testSelector"
+    })),
+        getByRole = _render21.getByRole;
+
+    expect(getByRole('button')).toHaveAttribute('data-selector-id', 'testSelector');
+  });
+  test('Should render with correct title attribute', function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      title: "Test Title"
+    })),
+        getByRole = _render22.getByRole;
+
+    expect(getByRole('button')).toHaveAttribute('data-title', 'Test Title');
+  });
+  test('Should render with correct id attribute', function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      id: "buttonElement"
+    })),
+        getByRole = _render23.getByRole;
+
+    expect(getByRole('button')).toHaveAttribute('id', 'buttonElement');
+  });
+  test('Should apply a11y props correctly', function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      a11y: {
+        'aria-label': 'test'
+      }
+    })),
+        getByRole = _render24.getByRole;
+
+    expect(getByRole('button')).toHaveAttribute('aria-label', 'test');
+  });
+  test('Should apply customProps correctly', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      customProps: {
+        'data-custom-attr': 'true'
+      }
+    })),
+        getByRole = _render25.getByRole;
+
+    expect(getByRole('button')).toHaveAttribute('data-custom-attr', 'true');
+  });
 });

package/lib/DateTime/__tests__/YearView.spec.js

@@ -11,8 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 describe('YearView', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_YearView["default"], null)),
-        asFragment = _render.asFragment;
+        asFragment = _render.asFragment; // expect(asFragment()).toMatchSnapshot();
 
-    expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js

@@ -4,10 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("../../Provider/IdProvider");
+
 var _AdvancedMultiSelect = _interopRequireDefault(require("../AdvancedMultiSelect"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('AdvancedMultiSelect', function () {
   test('rendering the defult props', function () {
     var mockOnChange = jest.fn();

package/lib/Provider/IdProvider.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getUniqueId = getUniqueId;
 exports.removeGlobalIdPrefix = removeGlobalIdPrefix;
+exports.setGlobalId = setGlobalId;
 exports.setGlobalIdPrefix = setGlobalIdPrefix;
 exports.useUniqueId = useUniqueId;