@zohodesk/components 1.1.0 → 1.1.1

package/es/Tab/__tests__/Tab.spec.js

@@ -1,117 +0,0 @@
-import React from 'react';
-import Tab from '../Tab';
-describe('Tab Component', () => {
-  it('Is Contains alpha class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tab, {
-      type: 'alpha',
-      needAppearance: true,
-      getActiveRef: () => {}
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tabAlpha')).toBe(true);
-  });
-  it('Is Contains beta class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tab, {
-      type: 'beta',
-      needAppearance: true,
-      getActiveRef: () => {}
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tabBeta')).toBe(true);
-  });
-  it('Is Contains gamma class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tab, {
-      type: 'gamma',
-      needAppearance: true,
-      getActiveRef: () => {}
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
-  });
-  it('Is Contains delta class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tab, {
-      type: 'delta',
-      needAppearance: true,
-      getActiveRef: () => {}
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tabDelta')).toBe(true);
-  }); // it('Is Contains zeta class', () => {
-  //   const { props, renderedDOM } = setup(Tab, { type: 'zeta', needAppearance: true, getActiveRef: () => { } });
-  //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
-  // });
-  // it('Is Contains special class', () => {
-  //   const { props, renderedDOM } = setup(Tab, { type: 'special', getActiveRef: () => {} });
-  //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('special')).toBe(true);
-  //
-  // });
-
-  it('Is Contains active class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tab, {
-      type: 'alpha',
-      needAppearance: true,
-      id: '0',
-      selectedTab: '0',
-      isActive: true,
-      getActiveRef: () => {}
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('alphaActive')).toBe(true);
-  });
-  it('Is Contains border class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tab, {
-      isActive: true,
-      type: 'alpha',
-      needAppearance: true,
-      needBorder: true,
-      getActiveRef: () => {}
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('alphaActive_border')).toBe(true);
-  });
-  it('Is call onClick', () => {
-    let {
-      renderedDOM,
-      props
-    } = setup(Tab, {
-      id: '2',
-      onClick: jest.fn(),
-      onSelect: jest.fn(),
-      getActiveRef: () => {}
-    });
-    let tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
-    TestUtils.Simulate.click(tabElement, {
-      currentTarget: {
-        offsetLeft: 0,
-        offsetWidth: 0
-      }
-    });
-    expect(props.onClick).toHaveBeenCalled();
-    expect(props.onSelect).toHaveBeenLastCalledWith('2');
-  });
-  it('is render text span', () => {
-    let {
-      renderedDOM,
-      props
-    } = setup(Tab, {
-      type: 'alpha',
-      dataId: 'taskSubtab1',
-      text: 'Tab1',
-      getActiveRef: () => {}
-    });
-    let tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'taskSubtab1_Tab');
-    expect(tabElement.getAttribute('data-id')).toBe('taskSubtab1_Tab');
-  });
-});

package/es/Tab/__tests__/TabContent.spec.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import TabContent from '../TabContent';
-describe('TabContent Component', () => {
-  it('render TabContent', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(TabContent, {
-      children: /*#__PURE__*/React.createElement("div", {
-        "data-id": "tabcontent"
-      }, "Tab Content")
-    });
-    let component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabcontent');
-    expect(component.getAttribute('data-id')).toBe('tabcontent');
-  });
-});

package/es/Tab/__tests__/TabContentWrapper.spec.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import TabContentWrapper from '../TabContentWrapper';
-import TabContent from '../TabContent';
-describe('TabContentWrapper Component', () => {
-  it('is children rendered class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(TabContentWrapper, {
-      selectedTab: '0',
-      children: [/*#__PURE__*/React.createElement(TabContent, {
-        id: '0',
-        key: 0
-      }, /*#__PURE__*/React.createElement("div", {
-        "data-id": "child1"
-      }, " Tab 1")), /*#__PURE__*/React.createElement(TabContent, {
-        id: '1',
-        key: 1
-      }, /*#__PURE__*/React.createElement("div", {
-        "data-id": "child2"
-      }, " Tab 2"))]
-    });
-    let component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'child1');
-    expect(component.getAttribute('data-id')).toBe('child1');
-  });
-  it('is only selected TabContent rendered ', () => {
-    const Tab1 = /*#__PURE__*/React.createElement(TabContent, {
-      id: '0',
-      key: 0
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "not-render",
-      "data-id": "child1"
-    }, ' ', "Tab 1"));
-    const Tab2 = /*#__PURE__*/React.createElement(TabContent, {
-      id: '1',
-      key: 1
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "not-render"
-    }, " Tab 2"), "TabContent 2");
-    const {
-      props,
-      renderedDOM
-    } = setup(TabContentWrapper, {
-      selectedTab: '0',
-      children: [Tab1, Tab2]
-    });
-    let component = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'not-render');
-    expect(component.length).toBe(1);
-  });
-});

package/es/Tab/__tests__/TabWrapper.spec.js

@@ -1,86 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import TabWrapper from '../TabWrapper';
-import Tab from '../Tab';
-import Tabs from '../Tabs';
-describe('TabWrapper Component', () => {
-  it('is Tab rendered', () => {
-    let onSelect = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(TabWrapper, {
-      defaultTab: "0",
-      type: "alpha",
-      onSelect: onSelect
-    }, /*#__PURE__*/React.createElement(Tabs, {
-      isResponsive: false
-    }, /*#__PURE__*/React.createElement(Tab, {
-      key: '0',
-      id: "0"
-    }))));
-    let tabChild = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
-    expect(tabChild.getAttribute('data-id')).toBe('tabMenu_Tab');
-  });
-  it('is onSelect called', () => {
-    let onSelect = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(TabWrapper, {
-      defaultTab: "0",
-      type: "alpha",
-      onSelect: onSelect
-    }, /*#__PURE__*/React.createElement(Tabs, {
-      isResponsive: false
-    }, /*#__PURE__*/React.createElement(Tab, {
-      key: '0',
-      id: "0"
-    }))));
-    let tabChild = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
-    TestUtils.Simulate.click(tabChild, {
-      currentTarget: {
-        offsetLeft: 0,
-        offsetWidth: 0
-      }
-    });
-    expect(onSelect).toHaveBeenCalled();
-  });
-  it('is disable State internally', () => {
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(TabWrapper, {
-      defaultTab: "0",
-      type: "alpha"
-    }, /*#__PURE__*/React.createElement(Tabs, {
-      isResponsive: false
-    }, /*#__PURE__*/React.createElement(Tab, {
-      key: '0',
-      id: "0"
-    }, "One"), /*#__PURE__*/React.createElement(Tab, {
-      key: '1',
-      id: "1"
-    }, "Two"))));
-    expect(renderedDOM.state.selectedTabInternal).toBe('0');
-  });
-  it('change selectedTab id', () => {
-    let node = document.createElement('div');
-    let children = /*#__PURE__*/React.createElement(Tabs, {
-      isResponsive: false
-    }, /*#__PURE__*/React.createElement(Tab, {
-      key: '0',
-      id: "0"
-    }, "One"), /*#__PURE__*/React.createElement(Tab, {
-      key: '1',
-      id: "1"
-    }, "Two"));
-    /*eslint-disable */
-
-    let renderedDOM = ReactDOM.render( /*#__PURE__*/React.createElement(TabWrapper, {
-      defaultTab: '0',
-      type: "alpha",
-      hookToDisableInternalState: true
-    }, children), node);
-    let tab = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
-    expect(tab[0].className.contains('Active')).toBe(true);
-    ReactDOM.render( /*#__PURE__*/React.createElement(TabWrapper, {
-      defaultTab: '1',
-      type: "alpha",
-      hookToDisableInternalState: true
-    }, children), node);
-    expect(tab[0].className.contains('Active')).toBe(false);
-    expect(tab[1].className.contains('Active')).toBe(true);
-  });
-});

package/es/Tab/__tests__/Tabs.spec.js

@@ -1,115 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Tab from '../Tab';
-import Tabs from '../Tabs';
-let defaultProps = {
-  type: 'alpha',
-  selectedTab: '0',
-  children: [/*#__PURE__*/React.createElement("div", {
-    key: 0,
-    "data-id": "customtab"
-  }, "Not tab component")],
-  isResponsive: false
-};
-let tabChildrenProps = {
-  type: 'alpha',
-  isResponsive: false,
-  selectedTab: '0',
-  children: [/*#__PURE__*/React.createElement(Tab, {
-    style: {
-      width: '200px'
-    },
-    key: 0,
-    id: '0'
-  }, "Tab component")]
-};
-describe('Tabs Component', () => {
-  it('is contains alpha class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tabs, {
-      type: 'alpha',
-      isResponsive: false
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('alpha')).toBe(true);
-  });
-  it('is contains special class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tabs, {
-      type: 'special'
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('special')).toBe(true);
-  });
-  it('is contains border class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tabs, {
-      type: 'alpha',
-      needBorder: true
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('border')).toBe(true);
-  });
-  it('is contains padding class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tabs, {
-      type: 'alpha',
-      needPadding: true
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('padding')).toBe(true);
-  });
-  it('is contains custom class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tabs, {
-      type: 'alpha',
-      className: 'customClass'
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('customClass')).toBe(true);
-  });
-  it('did render custom tab', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tabs, defaultProps);
-    let component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'customtab');
-    expect(component.getAttribute('data-id')).toBe('customtab');
-  });
-  it('did render Tab', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tabs, tabChildrenProps);
-    let component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'taskSubtab');
-    expect(component.getAttribute('data-id')).toBe('taskSubtab');
-  });
-  it('move Highlight called', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tabs, Object.assign({}, tabChildrenProps, {
-      isAnimate: true,
-      needTabBorder: true
-    }));
-    let component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'highlight');
-    expect(component.getAttribute('style')).toBe('left: 0; width: 0;');
-  });
-  fit('isResponsive called', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tabs, Object.assign({}, tabChildrenProps, {
-      isAnimate: true,
-      isResponsive: true,
-      needTabBorder: true
-    }));
-    let component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'taskSubtab');
-    expect(component.length).toBe(0);
-  });
-});

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Tag from '../Tag';
-const defaultProps = {};
-describe('Tag component conditions', () => {
-  it('Select Tag', () => {
-    let {
-      props,
-      renderedDOM
-    } = setup(Tag, Object.assign({}, defaultProps, {
-      onSelectTag: jest.fn()
-    }));
-    let component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tag_Tag');
-    TestUtils.Simulate.click(component);
-    expect(props.onSelectTag).toHaveBeenCalled();
-  });
-  it('Remove Tag', () => {
-    let {
-      props,
-      renderedDOM
-    } = setup(Tag, Object.assign({}, defaultProps, {
-      onRemove: jest.fn()
-    }));
-    let component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tag_RemoveTag');
-    TestUtils.Simulate.click(component);
-    expect(props.onRemove).toHaveBeenCalled();
-  });
-});

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

@@ -1,189 +0,0 @@
-import React from 'react';
-import TextBox from '../TextBox';
-import renderer from 'react-test-renderer';
-describe('TextBox component', () => {
-  it('should display size small', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      size: "small",
-      variant: "default"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size medium', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      size: "medium",
-      variant: "default"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size xmedium', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      size: "xmedium",
-      variant: "default"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size small - primary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      size: "small",
-      variant: "primary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size medium - primary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      size: "medium",
-      variant: "primary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size xmedium - primary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      size: "xmedium",
-      variant: "primary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size small - secondary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      size: "small",
-      variant: "secondary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size medium - secondary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      size: "medium",
-      variant: "secondary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size xmedium - secondary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Area",
-      size: "xmedium",
-      variant: "secondary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should text propertly entered', () => {
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      value: "Text Box Working"
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox').value.contains('Text Box Working')).toBe(true);
-  });
-  it('should placeHolder propertly entered', () => {
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      text: "Text Box Working"
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox').getAttribute('placeholder')).toMatch(/Text Box/);
-  }); // it('Check disabled works', () => {
-  //   let renderedDOM = TestUtils.renderIntoDocument(
-  //     <TextBox maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' disabled />
-  //   );
-  //   let pass = false;
-  //   let classNames = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox').classList;
-  //   Object.keys(classNames)
-  //     .map(className => {
-  //       if (classNames[className] == 'disabled') {
-  //         pass = true;
-  //       }
-  //     });
-  //   expect(
-  //     pass
-  //   ).toBe(true);
-  // });
-  // it('Check readOnly works', () => {
-  //   let renderedDOM = TestUtils.renderIntoDocument(
-  //     <TextBox maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' readOnly />
-  //   );
-  //   let pass = false;
-  //   let classNames = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox').classList;
-  //   Object.keys(classNames)
-  //     .map(className => {
-  //       if (classNames[className] == 'pointer') {
-  //         pass = true;
-  //       }
-  //     });
-  //   expect(
-  //     pass
-  //   ).toBe(true);
-  // });
-
-  it('Check onchange works', () => {
-    let mockfn = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      value: "Text Box Working",
-      onChange: mockfn
-    }));
-    let onChangeEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox');
-    TestUtils.Simulate.change(onChangeEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-  it('Check onBlur works', () => {
-    let mockfn = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      value: "Text Box Working",
-      onBlur: mockfn
-    }));
-    let onBlurEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox');
-    TestUtils.Simulate.blur(onBlurEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-  it('Check onFocus works', () => {
-    let mockfn = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(TextBox, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      value: "Text Box Working",
-      onFocus: mockfn
-    }));
-    let onFocusEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox');
-    TestUtils.Simulate.focus(onFocusEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-});