linear-react-components-ui 1.0.3-beta.2 → 1.0.3-beta.3

package/lib/drawer/Drawer.spec.js

@@ -0,0 +1,258 @@
+"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");
+
+require("babel-polyfill");
+
+var _ = _interopRequireWildcard(require("."));
+
+var _icons = _interopRequireDefault(require("../icons"));
+
+var _avatar = _interopRequireDefault(require("../avatar"));
+
+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 }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var drawerMock = function drawerMock(drawerProps, drawerHeaderProps) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    position: "right",
+    customClass: "customMockClass",
+    customClassForContent: "CustomContentMockClass",
+    style: {
+      backgroundColor: '#FFF'
+    },
+    overlay: true
+  }, drawerProps), /*#__PURE__*/_react.default.createElement(_.DrawerHeader, _extends({
+    title: "Header Test",
+    subTitle: "Subtitle test",
+    titleIcon: "user",
+    customClass: "customMockHeaderClass",
+    showCloseButton: true
+  }, drawerHeaderProps)), /*#__PURE__*/_react.default.createElement(_.DrawerContent, {
+    style: {
+      background: '#333',
+      marginTop: 10
+    }
+  }, "DrawerContent", /*#__PURE__*/_react.default.createElement(_avatar.default, null)));
+};
+
+describe('Drawer', function () {
+  describe('Drawer Container', function () {
+    var DrawerTestId = 'drawercontainer-component';
+    var DrawerContentTestId = 'drawercontent';
+    it('should render the drawer component with children', function () {
+      var _render = (0, _react2.render)(drawerMock()),
+          getByTestId = _render.getByTestId;
+
+      expect(getByTestId(DrawerTestId)).toHaveTextContent('DrawerContent');
+    });
+    it('should change the position of Drawer', function () {
+      var _render2 = (0, _react2.render)(drawerMock()),
+          getByTestId = _render2.getByTestId;
+
+      expect(getByTestId(DrawerTestId)).toHaveClass('right');
+    });
+    it('should apply customClass', function () {
+      var _render3 = (0, _react2.render)(drawerMock()),
+          getByTestId = _render3.getByTestId;
+
+      expect(getByTestId(DrawerTestId)).toHaveClass('customMockClass');
+    });
+    it('should apply customClassContent', function () {
+      var _render4 = (0, _react2.render)(drawerMock()),
+          getByTestId = _render4.getByTestId;
+
+      expect(getByTestId(DrawerContentTestId)).toHaveClass('CustomContentMockClass');
+    });
+    it('should apply inline style', function () {
+      var _render5 = (0, _react2.render)(drawerMock()),
+          getByTestId = _render5.getByTestId;
+
+      expect(getByTestId(DrawerTestId)).toHaveStyle('background-color: #FFF');
+    });
+    it('should render overlay over the page', function () {
+      (0, _react2.render)(drawerMock());
+      expect(_react2.screen.getByTestId('drawer-overlay')).toBeInTheDocument();
+    });
+    it('should close the Drawer when press Escape', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var mockHandlerClose, _render6, container;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              mockHandlerClose = jest.fn();
+              _render6 = (0, _react2.render)(drawerMock({
+                handlerClose: mockHandlerClose,
+                closeOnEsc: true
+              })), container = _render6.container;
+
+              _react2.fireEvent.keyUp(container, {
+                key: 'Escape',
+                code: 'Escape',
+                keyCode: 27,
+                charCode: 27
+              });
+
+              expect(mockHandlerClose).toHaveBeenCalled();
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+  });
+  describe('Drawer Header', function () {
+    var CloseButtonTestId = 'header-closebutton';
+    var mockHandlerClose = jest.fn();
+
+    var mockImage = /*#__PURE__*/_react.default.createElement("img", {
+      src: "https://devfront.erplinear.com.br/auth/static/media/auth_bg.96d98c39.jpg",
+      alt: "imagem teste"
+    });
+
+    var DrawerHeaderMock = drawerMock({
+      handlerClose: mockHandlerClose
+    });
+    it('should renders correctly DrawerHeader', function () {
+      var _render7 = (0, _react2.render)(DrawerHeaderMock),
+          getByText = _render7.getByText;
+
+      expect(getByText('Header Test')).toBeInTheDocument();
+    });
+    it('should render titleContent', function () {
+      var _render8 = (0, _react2.render)(drawerMock({}, {
+        titleContent: mockImage
+      })),
+          getByAltText = _render8.getByAltText;
+
+      expect(getByAltText('imagem teste')).toBeInTheDocument();
+    });
+    it('should render titleRightContent', function () {
+      var _render9 = (0, _react2.render)(drawerMock({}, {
+        titleRightContent: mockImage
+      })),
+          getByAltText = _render9.getByAltText;
+
+      expect(getByAltText('imagem teste')).toBeInTheDocument();
+    });
+    it('should render subtitle', function () {
+      var _render10 = (0, _react2.render)(DrawerHeaderMock),
+          getByText = _render10.getByText;
+
+      expect(getByText('Subtitle test')).toBeInTheDocument();
+    });
+    it('should render subTitleContent', function () {
+      var _render11 = (0, _react2.render)(drawerMock({}, {
+        subTitleContent: mockImage
+      })),
+          getByAltText = _render11.getByAltText;
+
+      expect(getByAltText('imagem teste')).toBeInTheDocument();
+    });
+    it('should render title icon', function () {
+      var _render12 = (0, _react2.render)(DrawerHeaderMock),
+          getByTestId = _render12.getByTestId;
+
+      expect(getByTestId('icon-header')).toBeInTheDocument();
+      expect(getByTestId('icon-header')).toHaveClass('icon-header');
+    });
+    it('should render icon', function () {
+      var _render13 = (0, _react2.render)(drawerMock({}, {
+        icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+          name: "user"
+        }),
+        showCloseButton: true
+      })),
+          getByTestId = _render13.getByTestId;
+
+      expect(getByTestId('icon-header')).toBeInTheDocument();
+      expect(getByTestId('icon-header')).toHaveClass('icon-header');
+    });
+    it('should render close button', function () {
+      var _render14 = (0, _react2.render)(DrawerHeaderMock),
+          getByTestId = _render14.getByTestId;
+
+      expect(getByTestId(CloseButtonTestId)).toBeInTheDocument();
+      expect(getByTestId(CloseButtonTestId)).toHaveClass('closebutton');
+    });
+    it('should fire click in close button', function () {
+      var _render15 = (0, _react2.render)(DrawerHeaderMock),
+          getByTestId = _render15.getByTestId;
+
+      _react2.fireEvent.click(getByTestId(CloseButtonTestId));
+
+      expect(mockHandlerClose).toHaveBeenCalledTimes(1);
+    });
+    it('should apply customClass', function () {
+      var _render16 = (0, _react2.render)(DrawerHeaderMock),
+          getByTestId = _render16.getByTestId;
+
+      expect(getByTestId('drawerheader')).toHaveClass('customMockHeaderClass');
+    });
+  });
+  describe('Drawer Content', function () {
+    it('should DrawerContent renders correctly', function () {
+      var _render17 = (0, _react2.render)(drawerMock()),
+          getByText = _render17.getByText,
+          getByTestId = _render17.getByTestId;
+
+      expect(getByText('DrawerContent')).toBeInTheDocument();
+      expect(getByTestId('avatar')).toBeInTheDocument();
+    });
+    it('should apply inline style', function () {
+      var _render18 = (0, _react2.render)(drawerMock()),
+          getByText = _render18.getByText;
+
+      expect(getByText('DrawerContent')).toHaveStyle('background-color: #333; margin-top: 10px;');
+    });
+  });
+  describe('Permissions', function () {
+    var defineStorageMock = function defineStorageMock() {
+      Object.defineProperty(window, 'sessionStorage', {
+        value: (0, _storageMock.default)()
+      });
+    };
+
+    it('should check permission', function () {
+      defineStorageMock();
+
+      var _render19 = (0, _react2.render)(drawerMock({
+        permissionAttr: (0, _storageMock.permissionAttrMockAuthorized)('hideContent')
+      })),
+          container = _render19.container;
+
+      expect(container.querySelector('.no-permission-component')).not.toBeInTheDocument();
+    });
+    it('should render non-permission', function () {
+      defineStorageMock();
+
+      var _render20 = (0, _react2.render)(drawerMock({
+        permissionAttr: (0, _storageMock.permissionAttrMockUnauthorized)('hideContent')
+      })),
+          getByText = _render20.getByText;
+
+      expect(getByText('Acesso Negado')).toBeInTheDocument();
+      expect(getByText('Você não tem permissão para acessar este conteúdo. Consulte o Administrador do sistema!')).toBeInTheDocument();
+    });
+  });
+});

package/lib/drawer/Header.d.ts

@@ -1,7 +1,6 @@
 import { IDrawerHeaderProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
-import '../@types/Position.js';
 
 declare const Header: ({ showCloseButton, title, subTitle, icon, titleIcon, customClass, titleContent, subTitleContent, titleRightContent, }: IDrawerHeaderProps) => JSX.Element;
 

package/lib/drawer/helpers.d.ts

@@ -1,7 +1,6 @@
 import React__default from 'react';
 import { IDrawerContext } from './types.js';
 import '../@types/PermissionAttr.js';
-import '../@types/Position.js';
 
 declare const DrawerContext: React__default.Context<IDrawerContext>;
 

package/lib/drawer/index.d.ts

@@ -3,7 +3,6 @@ export { default as DrawerHeader } from './Header.js';
 export { default as DrawerContent } from './Content.js';
 import 'react';
 import '../@types/PermissionAttr.js';
-import '../@types/Position.js';
 
 declare const _default: (props: IDrawerProps) => JSX.Element;
 

package/lib/drawer/types.d.ts

@@ -1,6 +1,5 @@
 import React__default, { ReactNode, ReactElement } from 'react';
 import { PermissionAttr } from '../@types/PermissionAttr.js';
-import { Position } from '../@types/Position.js';
 
 interface IDrawerProps extends React__default.HTMLAttributes<HTMLDivElement> {
     overlay?: boolean;
@@ -8,7 +7,7 @@ interface IDrawerProps extends React__default.HTMLAttributes<HTMLDivElement> {
     customClass?: string;
     customClassForContent?: string;
     customClassForDrawer?: string;
-    position?: Exclude<Position, 'center'>;
+    position?: string;
     handlerClose?: () => void;
     closeOnEsc?: boolean;
     targetId?: string;

package/lib/dropdown/dropdown.spec.js

@@ -0,0 +1,169 @@
+"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 = require("@testing-library/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+require("babel-polyfill");
+
+var _withDropdown = _interopRequireDefault(require("./withDropdown"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var WhappedComponent = function WhappedComponent(props) {
+  var btnRef = (0, _react2.useRef)(null);
+  return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement("button", {
+    ref: btnRef,
+    onClick: function onClick() {
+      return props.showDropdown();
+    }
+  }, "OPEN"), props.getDropdownPopup(btnRef.current));
+};
+
+var DropdownTest = (0, _withDropdown.default)(WhappedComponent);
+
+var renderDropdownTestMock = function renderDropdownTestMock(props) {
+  return /*#__PURE__*/_react2.default.createElement(DropdownTest, _extends({
+    dropdown: true
+  }, props), /*#__PURE__*/_react2.default.createElement("div", null, "DROP_DOWN_CONTENT"));
+};
+
+describe('withDropdown', function () {
+  describe('Default', function () {
+    it('should render dropdown', function () {
+      var _render = (0, _react.render)(renderDropdownTestMock()),
+          container = _render.container,
+          getByTestId = _render.getByTestId,
+          getByText = _render.getByText;
+
+      _react.fireEvent.click(container.firstChild);
+
+      expect(getByTestId('dropdown-component')).toBeInTheDocument();
+      expect(getByText('DROP_DOWN_CONTENT')).toBeInTheDocument();
+    });
+    it('should apply customClass in dropdown', function () {
+      var _render2 = (0, _react.render)(renderDropdownTestMock({
+        customClassForDropdown: 'customClass'
+      })),
+          container = _render2.container,
+          getByTestId = _render2.getByTestId;
+
+      _react.fireEvent.click(container.firstChild);
+
+      expect(getByTestId('dropdown-component')).toBeInTheDocument();
+      expect(getByTestId('dropdown-component')).toHaveClass('customClass');
+    });
+    it('should control dropdown open with dropdownOpened prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render3, rerender, getByTestId;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render3 = (0, _react.render)(renderDropdownTestMock()), rerender = _render3.rerender, getByTestId = _render3.getByTestId;
+              rerender(renderDropdownTestMock({
+                dropdownOpened: true
+              }));
+              _context.next = 4;
+              return (0, _react.waitFor)(function () {
+                return expect(getByTestId('dropdown-component')).toBeInTheDocument();
+              }, {
+                timeout: 3000
+              });
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('should closeDropdownOnClickOutside', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render4, getByText, queryByTestId;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _render4 = // eslint-disable-next-line max-len
+              (0, _react.render)( /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("a", null, "OUTSIDE_CLICK"), renderDropdownTestMock())), getByText = _render4.getByText, queryByTestId = _render4.queryByTestId;
+
+              _react.fireEvent.click(getByText('OPEN'));
+
+              _context2.next = 4;
+              return (0, _react.waitFor)(function () {
+                return expect(queryByTestId('dropdown-component')).toBeInTheDocument();
+              }, {
+                timeout: 3000
+              });
+
+            case 4:
+              _react.fireEvent.click(getByText('OUTSIDE_CLICK'));
+
+              _context2.next = 7;
+              return (0, _react.waitFor)(function () {
+                return expect(queryByTestId('dropdown-component')).not.toBeInTheDocument();
+              }, {
+                timeout: 3000
+              });
+
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('should not closeDropdownOnClickOutside', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var _render5, getByText, queryByTestId;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              // eslint-disable-next-line function-paren-newline
+              _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("a", null, "OUTSIDE_CLICK"), renderDropdownTestMock({
+                closeDropdownOnClickOutside: false
+              })) // eslint-disable-next-line function-paren-newline
+              ), getByText = _render5.getByText, queryByTestId = _render5.queryByTestId;
+
+              _react.fireEvent.click(getByText('OPEN'));
+
+              _context3.next = 4;
+              return (0, _react.waitFor)(function () {
+                return expect(queryByTestId('dropdown-component')).toBeInTheDocument();
+              }, {
+                timeout: 3000
+              });
+
+            case 4:
+              _react.fireEvent.click(getByText('OUTSIDE_CLICK'));
+
+              _context3.next = 7;
+              return (0, _react.waitFor)(function () {
+                return expect(queryByTestId('dropdown-component')).toBeInTheDocument();
+              }, {
+                timeout: 3000
+              });
+
+            case 7:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+  });
+});