linear-react-components-ui 1.0.2 → 1.0.3-beta.1

package/lib/inputs/base/base.spec.js

@@ -0,0 +1,690 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _InputTextBase = _interopRequireDefault(require("./InputTextBase"));
+
+var _buttons = _interopRequireDefault(require("../../buttons"));
+
+var _storageMock = _interopRequireWildcard(require("../../../../config/jest/storageMock"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('InputTextBase', function () {
+  var inputTextBase = function inputTextBase(inputTextBaseProps) {
+    return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, inputTextBaseProps, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      customClass: "child-button"
+    }));
+  };
+
+  var setSessionStorageMock = function setSessionStorageMock() {
+    Object.defineProperty(window, 'sessionStorage', {
+      value: (0, _storageMock.default)()
+    });
+  };
+
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)(inputTextBase()),
+        container = _render.container;
+
+    expect(container.firstChild).toHaveClass('input-base-component');
+  });
+  it('should apply value', function () {
+    var value = 'text';
+
+    var _render2 = (0, _react2.render)(inputTextBase({
+      value: value
+    })),
+        container = _render2.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML.value).toBe(value);
+  });
+  it('should apply label', function () {
+    var label = 'teste label';
+
+    var _render3 = (0, _react2.render)(inputTextBase({
+      label: label
+    })),
+        container = _render3.container;
+
+    var labelHTML = container.querySelector('.labelcontainer > .label');
+    expect(labelHTML).toHaveTextContent(label);
+  });
+  it('should apply id', function () {
+    var id = 'testeID';
+
+    var _render4 = (0, _react2.render)(inputTextBase({
+      id: id
+    })),
+        container = _render4.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML.id).toBe(id);
+  });
+  it('prop labelUppercase should add -uppercase css class', function () {
+    var label = 'teste label';
+
+    var _render5 = (0, _react2.render)(inputTextBase({
+      label: label,
+      labelUppercase: true
+    })),
+        container = _render5.container;
+
+    var labelHTML = container.querySelector('.labelcontainer > .label');
+    expect(labelHTML).toHaveClass('-uppercase');
+  });
+  describe('prop type', function () {
+    describe('when receive "textarea" subject', function () {
+      it('should render textarea', function () {
+        var _render6 = (0, _react2.render)(inputTextBase({
+          type: 'textarea'
+        })),
+            container = _render6.container;
+
+        var textAreaHTML = container.querySelector('textarea.textinput');
+        expect(textAreaHTML).toBeInTheDocument();
+        expect(textAreaHTML.type).toBe('textarea');
+      });
+      it('should apply rows', function () {
+        var rows = '12';
+
+        var _render7 = (0, _react2.render)(inputTextBase({
+          rows: rows,
+          type: 'textarea'
+        })),
+            container = _render7.container;
+
+        var textAreaHTML = container.querySelector('textarea.textinput');
+        expect(textAreaHTML.rows).toBe(parseInt(rows, 10));
+      });
+      it('should apply cols', function () {
+        var cols = '12';
+
+        var _render8 = (0, _react2.render)(inputTextBase({
+          cols: cols,
+          type: 'textarea'
+        })),
+            container = _render8.container;
+
+        var textAreaHTML = container.querySelector('textarea.textinput');
+        expect(textAreaHTML.cols).toBe(parseInt(cols, 10));
+      });
+    });
+    describe('when receive "text" subject', function () {
+      it('should render input text', function () {
+        var _render9 = (0, _react2.render)(inputTextBase({
+          type: 'text'
+        })),
+            container = _render9.container;
+
+        var inputHTML = container.querySelector('.textinput');
+        expect(inputHTML).toBeInTheDocument();
+        expect(inputHTML.type).toBe('text');
+      });
+    });
+    describe('when receive "number" subject', function () {
+      it('should render input number', function () {
+        var _render10 = (0, _react2.render)(inputTextBase({
+          type: 'number'
+        })),
+            container = _render10.container;
+
+        var inputHTML = container.querySelector('.textinput');
+        expect(inputHTML).toBeInTheDocument();
+        expect(inputHTML.type).toBe('number');
+      });
+    });
+    describe('when receive "date" subject', function () {
+      it('should render input date', function () {
+        var _render11 = (0, _react2.render)(inputTextBase({
+          type: 'date'
+        })),
+            container = _render11.container;
+
+        var inputHTML = container.querySelector('.textinput');
+        expect(inputHTML).toBeInTheDocument();
+        expect(inputHTML.type).toBe('date');
+      });
+    });
+  });
+  it('prop readOnly should add -readonly css class', function () {
+    var _render12 = (0, _react2.render)(inputTextBase({
+      readOnly: true
+    })),
+        container = _render12.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML).toHaveClass('-readonly');
+  });
+  it('should apply placeHolder', function () {
+    var _render13 = (0, _react2.render)(inputTextBase({
+      placeHolder: 'saas'
+    })),
+        container = _render13.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML.placeholder).toBe('saas');
+  });
+  it('prop disabled should add -disabled css class', function () {
+    var _render14 = (0, _react2.render)(inputTextBase({
+      disabled: true
+    })),
+        container = _render14.container;
+
+    var inputWrapper = container.querySelector('.inputwrapper');
+    expect(inputWrapper).toHaveClass('-disabled');
+  });
+  it('should apply autoFocus', function () {
+    var _render15 = (0, _react2.render)(inputTextBase({
+      autoFocus: true
+    })),
+        container = _render15.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML).toHaveFocus();
+  });
+  it('should apply maxLength', function () {
+    var maxLength = 10;
+
+    var _render16 = (0, _react2.render)(inputTextBase({
+      maxLength: maxLength
+    })),
+        container = _render16.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML.maxLength).toBe(maxLength);
+  });
+  it('should apply name', function () {
+    var name = 'saas';
+
+    var _render17 = (0, _react2.render)(inputTextBase({
+      name: name
+    })),
+        container = _render17.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML.name).toBe(name);
+  });
+  it('prop required should render label with -requiredlabel css class', function () {
+    var label = 'teste label';
+
+    var _render18 = (0, _react2.render)(inputTextBase({
+      label: label,
+      required: true
+    })),
+        container = _render18.container;
+
+    var requiredLabel = container.querySelector('.labelcontainer > .label > .-requiredlabel');
+    expect(requiredLabel).toBeTruthy();
+  });
+  it('prop inputHasFocus should add -focusable css class to inputwrapper', function () {
+    var _render19 = (0, _react2.render)(inputTextBase()),
+        container = _render19.container;
+
+    var inputWrapper = container.querySelector('.inputwrapper');
+    var inputHTML = container.querySelector('.textinput');
+
+    _react2.fireEvent.focus(inputHTML);
+
+    expect(inputWrapper).toHaveClass('-focusable');
+  });
+  it('should apply onFocus', function () {
+    var onFocus = jest.fn();
+
+    var _render20 = (0, _react2.render)(inputTextBase({
+      onFocus: onFocus
+    })),
+        container = _render20.container;
+
+    var inputHTML = container.querySelector('.textinput');
+
+    _react2.fireEvent.focus(inputHTML);
+
+    expect(onFocus).toBeCalled();
+  });
+  it('should apply onBlur', function () {
+    var onBlur = jest.fn();
+
+    var _render21 = (0, _react2.render)(inputTextBase({
+      onBlur: onBlur
+    })),
+        container = _render21.container;
+
+    var inputHTML = container.querySelector('.textinput');
+
+    _react2.fireEvent.blur(inputHTML);
+
+    expect(onBlur).toBeCalled();
+    expect(inputHTML).not.toHaveFocus();
+  });
+  it('should apply onChange', function () {
+    var onChange = jest.fn();
+
+    var _render22 = (0, _react2.render)(inputTextBase({
+      onChange: onChange
+    })),
+        container = _render22.container;
+
+    var inputHTML = container.querySelector('.textinput');
+
+    _react2.fireEvent.change(inputHTML, {
+      target: {
+        value: 'sus'
+      }
+    });
+
+    expect(onChange).toBeCalled();
+    expect(inputHTML.value).toBe('sus');
+  });
+  it('should apply onKeyDown', function () {
+    var onKeyDown = jest.fn();
+
+    var _render23 = (0, _react2.render)(inputTextBase({
+      onKeyDown: onKeyDown
+    })),
+        container = _render23.container;
+
+    var inputHTML = container.querySelector('.textinput');
+
+    _react2.fireEvent.keyDown(inputHTML, {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(onKeyDown).toBeCalled();
+  });
+  it('should apply onKeyPress', function () {
+    var onKeyPress = jest.fn();
+
+    var _render24 = (0, _react2.render)(inputTextBase({
+      onKeyPress: onKeyPress
+    })),
+        container = _render24.container;
+
+    var inputHTML = container.querySelector('.textinput');
+
+    _react2.fireEvent.keyPress(inputHTML, {
+      key: 'Enter',
+      code: 13,
+      charCode: 13
+    });
+
+    expect(onKeyPress).toBeCalled();
+  });
+  describe('prop leftElements should', function () {
+    it('render single component within subject', function () {
+      var leftElements = /*#__PURE__*/_react.default.createElement(_buttons.default, {
+        customClass: "btn1"
+      });
+
+      var _render25 = (0, _react2.render)(inputTextBase({
+        leftElements: leftElements
+      })),
+          container = _render25.container;
+
+      var buttonHTML = container.querySelector('.sidebuttons > .btn1');
+      expect(buttonHTML).toBeTruthy();
+    });
+    it('render multiple components within subject', function () {
+      var leftElements = [/*#__PURE__*/_react.default.createElement(_buttons.default, {
+        customClass: "btnteste",
+        key: "btn_teste1"
+      }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+        customClass: "btnteste",
+        key: "btn_teste2"
+      })];
+
+      var _render26 = (0, _react2.render)(inputTextBase({
+        leftElements: leftElements
+      })),
+          container = _render26.container;
+
+      var buttonHTML = container.querySelectorAll('.sidebuttons > .btnteste');
+      expect(buttonHTML.length).toBe(2);
+    });
+  });
+  describe('prop rightElements should', function () {
+    it('render single component within subject', function () {
+      var rightElements = /*#__PURE__*/_react.default.createElement(_buttons.default, {
+        customClass: "btn1"
+      });
+
+      var _render27 = (0, _react2.render)(inputTextBase({
+        rightElements: rightElements
+      })),
+          container = _render27.container;
+
+      var buttonHTML = container.querySelector('.btn1');
+      expect(buttonHTML).toBeTruthy();
+    });
+    it('render multiple components within subject', function () {
+      var rightElements = [/*#__PURE__*/_react.default.createElement(_buttons.default, {
+        customClass: "btnteste",
+        key: "btn_teste1"
+      }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+        customClass: "btnteste",
+        key: "btn_teste2"
+      })];
+
+      var _render28 = (0, _react2.render)(inputTextBase({
+        rightElements: rightElements
+      })),
+          container = _render28.container;
+
+      var buttonHTML = container.querySelectorAll('.btnteste');
+      expect(buttonHTML.length).toBe(2);
+    });
+  });
+  it('should render children', function () {
+    var _render29 = (0, _react2.render)(inputTextBase()),
+        container = _render29.container;
+
+    var childButton = container.querySelector('.child-button');
+    expect(childButton).toBeTruthy();
+  });
+  it('should apply customClass', function () {
+    var customClass = 'saas';
+
+    var _render30 = (0, _react2.render)(inputTextBase({
+      customClass: customClass
+    })),
+        container = _render30.container;
+
+    expect(container.firstChild).toHaveClass(customClass);
+  });
+  it('should apply customClassForWrapper', function () {
+    var customClassForWrapper = 'saas';
+
+    var _render31 = (0, _react2.render)(inputTextBase({
+      customClassForWrapper: customClassForWrapper
+    })),
+        container = _render31.container;
+
+    var inputWrapper = container.querySelector('.inputwrapper');
+    expect(inputWrapper).toHaveClass(customClassForWrapper);
+  });
+  it('should apply customClassForInputContent', function () {
+    var customClassForInputContent = 'saas';
+
+    var _render32 = (0, _react2.render)(inputTextBase({
+      customClassForInputContent: customClassForInputContent
+    })),
+        container = _render32.container;
+
+    var inputContent = container.querySelector('.inputcontent');
+    expect(inputContent).toHaveClass(customClassForInputContent);
+  });
+  it('should apply customClassForLabel', function () {
+    var customClassForLabel = 'saas';
+
+    var _render33 = (0, _react2.render)(inputTextBase({
+      customClassForLabel: customClassForLabel,
+      label: 'sus'
+    })),
+        container = _render33.container;
+
+    var labelSpan = container.querySelector('.label');
+    expect(labelSpan).toHaveClass(customClassForLabel);
+  });
+  it('should apply customClassForSideButtons', function () {
+    var leftElements = /*#__PURE__*/_react.default.createElement(_buttons.default, {
+      customClass: "btn1"
+    });
+
+    var customClassForSideButtons = 'saas';
+
+    var _render34 = (0, _react2.render)(inputTextBase({
+      leftElements: leftElements,
+      customClassForSideButtons: customClassForSideButtons
+    })),
+        container = _render34.container;
+
+    var sideButtonsContainer = container.querySelector('.sidebuttons');
+    expect(sideButtonsContainer).toHaveClass(customClassForSideButtons);
+  });
+  it('should apply inputRef', function () {
+    var inputRef = /*#__PURE__*/_react.default.createRef();
+
+    (0, _react2.render)(inputTextBase({
+      inputRef: inputRef
+    }));
+    expect(inputRef.current).not.toBeNull();
+  });
+  it('should apply inputBaseRef', function () {
+    var inputBaseRef = /*#__PURE__*/_react.default.createRef();
+
+    (0, _react2.render)(inputTextBase({
+      inputBaseRef: inputBaseRef
+    }));
+    expect(inputBaseRef.current).not.toBeNull();
+  });
+  it('prop hint should render hint', function () {
+    var hint = 'saas';
+
+    var _render35 = (0, _react2.render)(inputTextBase({
+      hint: hint
+    })),
+        container = _render35.container;
+
+    var hintHTML = container.querySelector('.hint');
+    expect(hintHTML).toBeTruthy();
+    expect(hintHTML).toHaveTextContent(hint);
+  });
+  it('should apply textAlign', function () {
+    var textAlign = 'right';
+
+    var _render36 = (0, _react2.render)(inputTextBase({
+      textAlign: textAlign
+    })),
+        container = _render36.container;
+
+    var inputHTML = container.querySelector('.textinput');
+    expect(inputHTML).toHaveClass("text-align-".concat(textAlign));
+  });
+  it('should apply rounded', function () {
+    var _render37 = (0, _react2.render)(inputTextBase({
+      rounded: true
+    })),
+        container = _render37.container;
+
+    var inputWrapper = container.querySelector('.inputwrapper');
+    expect(inputWrapper).toHaveClass('-roundedborders');
+  });
+  it('prop errorMessages should render error messages', function () {
+    var errorMessages = ['teste', 'erros', 'aleatorios'];
+
+    var _render38 = (0, _react2.render)(inputTextBase({
+      errorMessages: errorMessages
+    })),
+        container = _render38.container;
+
+    var errorMessagesHTML = container.querySelector('.errormessages');
+    expect(errorMessagesHTML).toHaveTextContent(errorMessages.join(', '));
+  });
+  describe('prop visible should', function () {
+    it('not render subject when false', function () {
+      var _render39 = (0, _react2.render)(inputTextBase({
+        visible: false
+      })),
+          container = _render39.container;
+
+      expect(container.firstChild).toBeNull();
+    });
+    it('render subject when true', function () {
+      var _render40 = (0, _react2.render)(inputTextBase({
+        visible: true
+      })),
+          container = _render40.container;
+
+      expect(container.firstChild).not.toBeNull();
+    });
+  });
+  it('should apply handlerSetOnDenied', function () {
+    var handlerSetOnDenied = jest.fn();
+    (0, _react2.render)(inputTextBase({
+      handlerSetOnDenied: handlerSetOnDenied
+    }));
+    expect(handlerSetOnDenied).toBeCalled();
+  });
+  describe('prop permissionAttr', function () {
+    describe('when permission granted', function () {
+      it('should render subject', function () {
+        setSessionStorageMock();
+        var permissionAttr = (0, _storageMock.permissionAttrMockAuthorized)('unvisible');
+
+        var _render41 = (0, _react2.render)(inputTextBase({
+          permissionAttr: permissionAttr
+        })),
+            container = _render41.container;
+
+        expect(container.firstChild).not.toBeNull();
+      });
+    });
+    describe('when permission denied', function () {
+      it('onDenied.unvisible option should not render subject', function () {
+        setSessionStorageMock();
+        var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('unvisible');
+
+        var _render42 = (0, _react2.render)(inputTextBase({
+          permissionAttr: permissionAttr
+        })),
+            container = _render42.container;
+
+        expect(container.firstChild).toBeNull();
+      });
+      describe('onDenied.disabled option/disabled prop should', function () {
+        it('disable subject', function () {
+          setSessionStorageMock();
+          var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('disabled');
+          var onChange = jest.fn();
+
+          var _render43 = (0, _react2.render)(inputTextBase({
+            permissionAttr: permissionAttr,
+            onChange: onChange
+          })),
+              container = _render43.container;
+
+          var inputHTML = container.querySelector('.textinput');
+
+          _react2.fireEvent.change(inputHTML, {
+            target: {
+              value: 'sus'
+            }
+          });
+
+          expect(inputHTML.disabled).toBeTruthy();
+          expect(onChange).not.toBeCalled();
+        });
+        it('add -disabled css class', function () {
+          setSessionStorageMock();
+          var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('disabled');
+
+          var _render44 = (0, _react2.render)(inputTextBase({
+            permissionAttr: permissionAttr
+          })),
+              container = _render44.container;
+
+          var inputWrapper = container.querySelector('.inputwrapper');
+          expect(inputWrapper).toHaveClass('-disabled');
+        });
+      });
+      describe('onDenied.readOnly option/readOnly prop should', function () {
+        it('apply readOnly attribute in input', function () {
+          setSessionStorageMock();
+          var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('readOnly');
+
+          var _render45 = (0, _react2.render)(inputTextBase({
+            permissionAttr: permissionAttr
+          })),
+              container = _render45.container;
+
+          var inputHTML = container.querySelector('.textinput');
+          expect(inputHTML.readOnly).toBeTruthy();
+        });
+        it('disable callbacks', function () {
+          setSessionStorageMock();
+          var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('readOnly');
+          var onChange = jest.fn();
+
+          var _render46 = (0, _react2.render)(inputTextBase({
+            permissionAttr: permissionAttr,
+            onChange: onChange
+          })),
+              container = _render46.container;
+
+          var inputHTML = container.querySelector('.textinput');
+
+          _react2.fireEvent.change(inputHTML, {
+            target: {
+              value: 'sus'
+            }
+          });
+
+          expect(onChange).not.toBeCalled();
+        });
+      });
+      describe('onDenied.hideContent should', function () {
+        it('should set input value to blank', function () {
+          setSessionStorageMock();
+          var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('hideContent');
+
+          var _render47 = (0, _react2.render)(inputTextBase({
+            permissionAttr: permissionAttr,
+            value: 'text'
+          })),
+              container = _render47.container;
+
+          var inputHTML = container.querySelector('.textinput');
+          expect(inputHTML.value).toBe('');
+        });
+        it('disable input', function () {
+          setSessionStorageMock();
+          var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('hideContent');
+          var onChange = jest.fn();
+
+          var _render48 = (0, _react2.render)(inputTextBase({
+            permissionAttr: permissionAttr,
+            onChange: onChange
+          })),
+              container = _render48.container;
+
+          var inputHTML = container.querySelector('.textinput');
+
+          _react2.fireEvent.change(inputHTML, {
+            target: {
+              value: 'sus'
+            }
+          });
+
+          expect(onChange).not.toBeCalled();
+          expect(inputHTML.disabled).toBeTruthy();
+        });
+        it('add -disabled css class', function () {
+          setSessionStorageMock();
+          var permissionAttr = (0, _storageMock.permissionAttrMockUnauthorized)('hideContent');
+
+          var _render49 = (0, _react2.render)(inputTextBase({
+            permissionAttr: permissionAttr
+          })),
+              container = _render49.container;
+
+          var inputWrapper = container.querySelector('.inputwrapper');
+          expect(inputWrapper).toHaveClass('-disabled');
+        });
+      });
+    });
+  });
+});

package/lib/inputs/base/helpers.d.ts

@@ -10,6 +10,6 @@ declare const getInputClass: ({ textAlign, readOnly, readOnlyClass }: {
 }) => string;
 declare const getInputWrapperClass: (props: IBaseProps) => string;
 declare const getErrorMessages: (messages: string[]) => JSX.Element;
-declare const getRightElements: (errorMessages: string[], skeletonize: boolean, rightElements?: JSX.Element | JSX.Element[]) => JSX.Element | JSX.Element[] | null;
+declare const getRightElements: (errorMessages: string[], skeletonize: boolean, help?: string, rightElements?: JSX.Element | JSX.Element[]) => JSX.Element | JSX.Element[] | null;
 
 export { getErrorMessages, getInputClass, getInputWrapperClass, getRightElements };