@zohodesk/components 1.0.0-temp-77 → 1.0.0-temp-78

package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon"));
+
+var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// 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', function () {
+  it('should display size small', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Box Icon",
+      size: "small",
+      variant: "default"
+    }));
+
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size medium', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      size: "medium",
+      variant: "default"
+    }));
+
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size xmedium', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      size: "xmedium",
+      variant: "default"
+    }));
+
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size small - primary', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      size: "small",
+      variant: "primary"
+    }));
+
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size medium - primary', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      size: "medium",
+      variant: "primary"
+    }));
+
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size xmedium - primary', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      size: "xmedium",
+      variant: "primary"
+    }));
+
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size small - secondary', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      size: "small",
+      variant: "secondary"
+    }));
+
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size medium - secondary', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      size: "medium",
+      variant: "secondary"
+    }));
+
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size xmedium - secondary', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      size: "xmedium",
+      variant: "secondary"
+    }));
+
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should text propertly entered', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      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', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      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', function () {
+    var mockfn = jest.fn();
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Box",
+      size: "medium",
+      variant: "primary",
+      value: "Text Box Working",
+      onChange: mockfn
+    }));
+    var onChangeEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon');
+    TestUtils.Simulate.change(onChangeEle);
+    expect(mockfn.mock.calls.length).toBe(1);
+  });
+  it('Check onBlur works', function () {
+    var mockfn = jest.fn();
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Box",
+      size: "medium",
+      variant: "primary",
+      value: "Text Box Working",
+      onBlur: mockfn
+    }));
+    var onBlurEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon');
+    TestUtils.Simulate.blur(onBlurEle);
+    expect(mockfn.mock.calls.length).toBe(1);
+  });
+  it('Check onFocus works', function () {
+    var mockfn = jest.fn();
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      maxLength: "100",
+      placeHolder: "Text Box",
+      size: "medium",
+      variant: "primary",
+      value: "Text Box Working",
+      onFocus: mockfn
+    }));
+    var onFocusEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon');
+    TestUtils.Simulate.focus(onFocusEle);
+    expect(mockfn.mock.calls.length).toBe(1);
+  });
+});

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

@@ -0,0 +1,334 @@
+// 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>
+`;