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

package/es/Tag/props/defaultProps.js

@@ -7,6 +7,7 @@ export const defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
+  customAttributes: {},
   a11y: {},
   needEffect: true,
   isReadOnly: false,

package/es/Tag/props/propTypes.js

@@ -26,6 +26,7 @@ export const propTypes = {
     customTagIcon: PropTypes.string,
     customAvatar: PropTypes.string
   }),
+  customAttributes: PropTypes.object,
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
   }),

package/es/TextBox/TextBox.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
-import style from "./TextBox.module.css";
+import style from './TextBox.module.css';
 export default class TextBox extends React.PureComponent {
   constructor(props) {
     super(props);

package/es/TextBox/__tests__/TextBox.spec.js

@@ -0,0 +1,327 @@
+import React from 'react';
+import Textbox from '../Textbox';
+import { render } from "@testing-library/react";
+describe('Textbox component', () => {
+  const type = ['text', 'password', 'number'];
+  const size = ['small', 'xsmall', 'medium', 'xmedium'];
+  const variant = ['primary', 'secondary', 'default', 'light'];
+  const borderColor = ['transparent', 'default'];
+  test('Should be render with the basic set of default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(type)('Should render type  - %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      name: "TextboxName"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render id', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      id: "TextboxId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render maxLength in number', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      maxLength: "11"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render maxLength in string', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      maxLength: "Ten"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render placeholder', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      placeHolder: "TextBoxPlaceHolder"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render size  - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true and needEffect is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      isReadOnly: true,
+      needEffect: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true and needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      isReadOnly: true,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is false and needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      isReadOnly: false,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true and needEffect is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      isDisabled: true,
+      needEffect: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true and needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      isDisabled: true,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is false and needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      isDisabled: false,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(variant)('Should render Varient - %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      variant: variant
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needBorder is false  ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render value in number', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      value: 20
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render value in string', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      value: "Tewnty"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needReadOnlyStyle is false and isReadOnly true ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      needReadOnlyStyle: false,
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needReadOnlyStyle is false  ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      needReadOnlyStyle: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needReadOnlyStyle is true and isReadOnly true  ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      needReadOnlyStyle: true,
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needAppearance is false ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      needAppearance: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isClickable is ture ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      isClickable: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render autofocus false ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      autofocus: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render autofocus true ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      autofocus: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render autoComplete true ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      autoComplete: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render autoComplete false ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      autoComplete: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(borderColor)('Should render borderColor - %s', borderColor => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      borderColor: borderColor
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render htmlId ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      htmlId: "textBoxhtmlId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isFocus is true ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      isFocus: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isScrollPrevent is true ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      isScrollPrevent: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally ariaExpanded,ariaHaspopup,ariaRequired,ariaLabelledby,ariaReadonly,ariaMultiselectable is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      a11y: {
+        ariaLabel: 'textboxAriaLabel',
+        ariaAutocomplete: 'textboxAriaAutocomplete',
+        ariaControls: 'textboxAriaControls',
+        ariaExpanded: true,
+        role: 'TextboxRole',
+        ariaDescribedby: 'textboxAriaDescribedby',
+        ariaHaspopup: true,
+        ariaRequired: true,
+        ariaLabelledby: 'textboxAriaLabelledby',
+        ariaInvalid: true,
+        ariaOwns: 'textboxAriaOwns',
+        ariaActivedescendant: 'textBoxAriaActivedescendant',
+        ariaReadonly: true,
+        ariaMultiselectable: true
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally ariaExpanded,ariaHaspopup,ariaRequired,ariaLabelledby,ariaReadonly,ariaMultiselectable is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      a11y: {
+        ariaLabel: 'textboxAriaLabel',
+        ariaAutocomplete: 'textboxAriaAutocomplete',
+        ariaControls: 'textboxAriaControls',
+        ariaExpanded: false,
+        role: 'TextboxRole',
+        ariaDescribedby: 'textboxAriaDescribedby',
+        ariaHaspopup: false,
+        ariaRequired: false,
+        ariaLabelledby: 'textboxAriaLabelledby',
+        ariaInvalid: false,
+        ariaOwns: 'textboxAriaOwns',
+        ariaActivedescendant: 'textBoxAriaActivedescendant',
+        ariaReadonly: false,
+        ariaMultiselectable: false
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render customClass ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      customClass: "TextBoxCustomClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom Props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textbox, {
+      customProps: {
+        'textbox-props': "true"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});