@zohodesk/components 1.0.0-temp-166 → 1.0.0-temp-168

package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -1,212 +0,0 @@
-import React from 'react';
-import TextBoxIcon from '../TextBoxIcon';
-import renderer from 'react-test-renderer'; // children: PropTypes.node,
-// disabled: PropTypes.bool,
-// iconRotated: PropTypes.bool,
-// id: PropTypes.string,
-// inputRef: PropTypes.func,
-// isClear: PropTypes.bool,
-// maxLength: PropTypes.string,
-// name: PropTypes.string,
-// needBorder: PropTypes.bool,
-// onBlur: PropTypes.func,
-// onChange: PropTypes.func,
-// onClear: PropTypes.func,
-// onClick: PropTypes.func,
-// onFocus: PropTypes.func,
-// onKeyDown: PropTypes.func,
-// onKeyUp: PropTypes.func,
-// placeHolder: PropTypes.string,
-// readOnly: PropTypes.bool,
-// size: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-// title: PropTypes.func,
-// type: PropTypes.oneOf(['text', 'password', 'number']),
-// value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-// variant: PropTypes.oneOf(['primary', 'secondary', 'default'])
-
-describe('TextBoxIcon component', () => {
-  it('should display size small', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBoxIcon, {
-      maxLength: "100",
-      placeHolder: "Text Box Icon",
-      size: "small",
-      variant: "default"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display size medium', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(TextBoxIcon, {
-      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(TextBoxIcon, {
-      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(TextBoxIcon, {
-      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(TextBoxIcon, {
-      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(TextBoxIcon, {
-      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(TextBoxIcon, {
-      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(TextBoxIcon, {
-      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(TextBoxIcon, {
-      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(TextBoxIcon, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      value: "Text Box Working"
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon').value.contains('Text Box Working')).toBe(true);
-  });
-  it('should placeHolder propertly entered', () => {
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(TextBoxIcon, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      text: "Text Box Working"
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon').getAttribute('placeholder')).toMatch(/Text Box/);
-  }); // it('Check disabled works', () => {
-  //   let renderedDOM = TestUtils.renderIntoDocument(
-  //     <TextBoxIcon 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(
-  //     <TextBoxIcon 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(TextBoxIcon, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      value: "Text Box Working",
-      onChange: mockfn
-    }));
-    let onChangeEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon');
-    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(TextBoxIcon, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      value: "Text Box Working",
-      onBlur: mockfn
-    }));
-    let onBlurEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon');
-    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(TextBoxIcon, {
-      maxLength: "100",
-      placeHolder: "Text Box",
-      size: "medium",
-      variant: "primary",
-      value: "Text Box Working",
-      onFocus: mockfn
-    }));
-    let onFocusEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon');
-    TestUtils.Simulate.focus(onFocusEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-});

package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap

@@ -1,334 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TextBoxIcon component should display size medium - primary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container medium  primary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size medium - secondary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container medium  secondary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size medium 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container medium  default  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size small - primary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container small  primary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size small - secondary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container small  secondary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size small 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container small  default  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Box Icon"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size xmedium - primary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container xmedium  primary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size xmedium - secondary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container xmedium  secondary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size xmedium 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container xmedium  default  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;