@zohodesk/components 1.0.0-temp-107 → 1.0.0-temp-108

package/lib/Textarea/__tests__/Textarea.spec.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _Textarea = _interopRequireDefault(require("../Textarea"));
+var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+describe('Textarea component', function () {
+  it('should display size xsmall', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "xsmall",
+      variant: "default"
+    }));
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size xsmall - primary', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "xsmall",
+      variant: "primary"
+    }));
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size small', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "small",
+      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(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "small",
+      variant: "primary"
+    }));
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size medium', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "medium",
+      variant: "default"
+    }));
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size medium - primary', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "medium",
+      variant: "primary"
+    }));
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size large', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "large",
+      variant: "default"
+    }));
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should display size large - primary', function () {
+    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "large",
+      variant: "primary"
+    }));
+    var tree = ele.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should text propertly entered', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "large",
+      variant: "primary",
+      text: "Text Area Working"
+    }));
+    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').value.contains('Text Area Working')).toBe(true);
+  });
+  it('should placeHolder propertly entered', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "large",
+      variant: "primary",
+      text: "Text Area Working"
+    }));
+    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').getAttribute('placeholder')).toMatch(/Text Area/);
+  });
+  it('Check border applied', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "large",
+      variant: "primary",
+      text: "Text Area Working",
+      needBorder: true
+    }));
+    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').className).toMatch(/needBorder/);
+  });
+  it('Check border removed', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "large",
+      variant: "primary",
+      text: "Text Area Working",
+      needBorder: false
+    }));
+    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').className).toMatch(/noBorder/);
+  });
+  // it('Check disabled works', () => {
+  //   let renderedDOM = TestUtils.renderIntoDocument(
+  //     <Textarea maxLength='100' placeHolder='Text Area' resize='vertical' size='large' variant='primary' text='Text Area Working' disabled needBorder={false} />
+  //   );
+  //   let pass = false;
+  //   let classNames = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').classList;
+  //   Object.keys(classNames)
+  //     .map(className => {
+  //       if (classNames[className] == 'disabled') {
+  //         pass = true;
+  //       }
+  //     });
+  //   expect(
+  //     pass
+  //   ).toBe(true);
+  // });
+  it('Check check onchange works', function () {
+    var mockfn = jest.fn();
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      maxLength: "100",
+      placeHolder: "Text Area",
+      resize: "vertical",
+      size: "large",
+      variant: "primary",
+      text: "Text Area Working",
+      needBorder: false,
+      onChange: mockfn
+    }));
+    var onChangeEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp');
+    TestUtils.Simulate.change(onChangeEle);
+    expect(mockfn.mock.calls.length).toBe(1);
+  });
+});

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

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Textarea component should display size large - primary 1`] = `
+<textarea
+  className="  container large primary needBorder resizeY     effect borderColor_default"
+  data-id="TextareaComp"
+  maxLength="100"
+  onBlur={[Function]}
+  onChange={[Function]}
+  onKeyDown={[Function]}
+  placeholder="Text Area"
+/>
+`;
+
+exports[`Textarea component should display size large 1`] = `
+<textarea
+  className="  container large default needBorder resizeY     effect borderColor_default"
+  data-id="TextareaComp"
+  maxLength="100"
+  onBlur={[Function]}
+  onChange={[Function]}
+  onKeyDown={[Function]}
+  placeholder="Text Area"
+/>
+`;
+
+exports[`Textarea component should display size medium - primary 1`] = `
+<textarea
+  className="  container medium primary needBorder resizeY     effect borderColor_default"
+  data-id="TextareaComp"
+  maxLength="100"
+  onBlur={[Function]}
+  onChange={[Function]}
+  onKeyDown={[Function]}
+  placeholder="Text Area"
+/>
+`;
+
+exports[`Textarea component should display size medium 1`] = `
+<textarea
+  className="  container medium default needBorder resizeY     effect borderColor_default"
+  data-id="TextareaComp"
+  maxLength="100"
+  onBlur={[Function]}
+  onChange={[Function]}
+  onKeyDown={[Function]}
+  placeholder="Text Area"
+/>
+`;
+
+exports[`Textarea component should display size small - primary 1`] = `
+<textarea
+  className="  container small primary needBorder resizeY     effect borderColor_default"
+  data-id="TextareaComp"
+  maxLength="100"
+  onBlur={[Function]}
+  onChange={[Function]}
+  onKeyDown={[Function]}
+  placeholder="Text Area"
+/>
+`;
+
+exports[`Textarea component should display size small 1`] = `
+<textarea
+  className="  container small default needBorder resizeY     effect borderColor_default"
+  data-id="TextareaComp"
+  maxLength="100"
+  onBlur={[Function]}
+  onChange={[Function]}
+  onKeyDown={[Function]}
+  placeholder="Text Area"
+/>
+`;
+
+exports[`Textarea component should display size xsmall - primary 1`] = `
+<textarea
+  className="  container xsmall primary needBorder resizeY     effect borderColor_default"
+  data-id="TextareaComp"
+  maxLength="100"
+  onBlur={[Function]}
+  onChange={[Function]}
+  onKeyDown={[Function]}
+  placeholder="Text Area"
+/>
+`;
+
+exports[`Textarea component should display size xsmall 1`] = `
+<textarea
+  className="  container xsmall default needBorder resizeY     effect borderColor_default"
+  data-id="TextareaComp"
+  maxLength="100"
+  onBlur={[Function]}
+  onChange={[Function]}
+  onKeyDown={[Function]}
+  placeholder="Text Area"
+/>
+`;

package/lib/Textarea/props/defaultProps.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  dataId: 'TextareaComp',
+  needBorder: true,
+  resize: 'none',
+  size: 'small',
+  variant: 'default',
+  needAppearance: true,
+  needReadOnlyStyle: true,
+  borderColor: 'default',
+  needEffect: true,
+  autoFocus: false,
+  customClass: '',
+  a11y: {}
+};
+exports.defaultProps = defaultProps;

package/lib/Textarea/props/propTypes.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var propTypes = {
+  animated: _propTypes["default"].bool,
+  autoFocus: _propTypes["default"].bool,
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  htmlId: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  maxLength: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  needAppearance: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needEffect: _propTypes["default"].bool,
+  needReadOnlyStyle: _propTypes["default"].bool,
+  onBlur: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  placeHolder: _propTypes["default"].string,
+  resize: _propTypes["default"].oneOf(['horizontal', 'vertical', 'both', 'none']),
+  size: _propTypes["default"].oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  text: _propTypes["default"].string,
+  variant: _propTypes["default"].oneOf(['default', 'primary']),
+  customClass: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    ariaLabel: _propTypes["default"].string,
+    ariaLabelledby: _propTypes["default"].string
+  })
+};
+exports.propTypes = propTypes;