linear-react-components-ui 1.0.3 → 1.0.4

package/lib/treeview/treeview.spec.js

@@ -0,0 +1,279 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+require("@testing-library/jest-dom");
+
+require("babel-polyfill");
+
+var _ = _interopRequireDefault(require("."));
+
+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 dataMock = {
+  id: 1,
+  titulo: 'SG Linear',
+  codigo: 'SG_Linear',
+  permissoes: [{
+    codigo: 'ACESSO'
+  }, {
+    codigo: 'GRAVAR'
+  }],
+  itens: [{
+    id: 2,
+    titulo: 'Segurança',
+    codigo: 'seguranca',
+    permissoes: [{
+      codigo: 'ACESSO'
+    }, {
+      codigo: 'GRAVAR'
+    }],
+    itens: [{
+      id: 4,
+      titulo: 'Perfis',
+      codigo: 'perfis',
+      itens: [{
+        titulo: 'Editar',
+        codigo: 'Editar',
+        itens: [{
+          titulo: 'Editar permissão ERP',
+          codigo: 'Editar permissão ERP'
+        }]
+      }]
+    }]
+  }, {
+    id: 3,
+    titulo: 'Cadastros',
+    codigo: 'cadastros',
+    permissoes: [{
+      codigo: 'ACESSO'
+    }, {
+      codigo: 'GRAVAR'
+    }],
+    itens: [{
+      id: 5,
+      titulo: 'Empresas',
+      codigo: 'empresas'
+    }]
+  }]
+};
+
+var treeviewRenderMock = function treeviewRenderMock(props) {
+  return /*#__PURE__*/_react2["default"].createElement(_["default"], _extends({
+    data: dataMock,
+    valuePropName: "id",
+    labelPropName: "titulo",
+    parentPropName: "0"
+  }, props));
+};
+
+describe('Treeview', function () {
+  describe('Default', function () {
+    it('should render', function () {
+      var _render = (0, _react.render)(treeviewRenderMock()),
+          container = _render.container;
+
+      expect(container.firstChild).toBeTruthy();
+    });
+    it('should have start node visible', function () {
+      var _render2 = (0, _react.render)(treeviewRenderMock()),
+          queryByText = _render2.queryByText;
+
+      expect(queryByText(dataMock.titulo)).toBeTruthy();
+    });
+    it('should not have second node visible', function () {
+      var _render3 = (0, _react.render)(treeviewRenderMock()),
+          queryByText = _render3.queryByText;
+
+      expect(queryByText(dataMock.itens[0].titulo)).not.toBeTruthy();
+    });
+    it('should open on click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render4, queryByText, getByRole;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render4 = (0, _react.render)(treeviewRenderMock()), queryByText = _render4.queryByText, getByRole = _render4.getByRole;
+
+              _react.fireEvent.click(getByRole('button'));
+
+              _context.next = 4;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].titulo);
+              });
+
+            case 4:
+              expect(queryByText(dataMock.itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[1].titulo)).toBeTruthy();
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('should open all layers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render5, queryByText, getByRole, queryAllByRole;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _render5 = (0, _react.render)(treeviewRenderMock()), queryByText = _render5.queryByText, getByRole = _render5.getByRole, queryAllByRole = _render5.queryAllByRole;
+
+              _react.fireEvent.click(getByRole('button'));
+
+              _context2.next = 4;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].titulo);
+              });
+
+            case 4:
+              _react.fireEvent.click(queryAllByRole('button')[1]);
+
+              _context2.next = 7;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].itens[0].titulo);
+              });
+
+            case 7:
+              _react.fireEvent.click(queryAllByRole('button')[2]);
+
+              _context2.next = 10;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].itens[0].itens[0].titulo);
+              });
+
+            case 10:
+              _react.fireEvent.click(queryAllByRole('button')[3]);
+
+              _context2.next = 13;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].itens[0].itens[0].itens[0].titulo);
+              });
+
+            case 13:
+              _react.fireEvent.click(queryAllByRole('button')[4]);
+
+              _context2.next = 16;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[1].itens[0].titulo);
+              });
+
+            case 16:
+              expect(queryByText(dataMock.itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[0].itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[0].itens[0].itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[0].itens[0].itens[0].itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[1].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[1].itens[0].titulo)).toBeTruthy();
+
+            case 22:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('should render checkbox', function () {
+      var _render6 = (0, _react.render)(treeviewRenderMock({
+        showCheckBox: true
+      })),
+          container = _render6.container;
+
+      expect(container.querySelector('.checkbox-component')).toBeTruthy();
+    });
+    it('should call onSelectedIdsChange callback', function () {
+      var mockCallback = jest.fn(function (x) {
+        return x;
+      });
+
+      var _render7 = (0, _react.render)(treeviewRenderMock({
+        showCheckBox: true,
+        onSelectedIdsChange: mockCallback
+      })),
+          container = _render7.container;
+
+      _react.fireEvent.click(container.querySelector('.checkbox-component'));
+
+      expect(mockCallback.mock.calls.length).toBe(1);
+      expect(mockCallback.mock.calls[0][0]).toStrictEqual([1]);
+    });
+    it('should control checkbox by selectedIds', function () {
+      var _render8 = (0, _react.render)(treeviewRenderMock({
+        showCheckBox: true,
+        selectedIds: [1]
+      })),
+          container = _render8.container;
+
+      expect(container.querySelector('input.checkbox-component')).toBeChecked();
+    });
+    it('should start checkbox unchecked', function () {
+      var _render9 = (0, _react.render)(treeviewRenderMock({
+        showCheckBox: true
+      })),
+          container = _render9.container;
+
+      expect(container.querySelector('input.checkbox-component')).not.toBeChecked();
+    });
+    it('should start nodes open', function () {
+      var _render10 = (0, _react.render)(treeviewRenderMock({
+        startNodesOpened: true
+      })),
+          queryByText = _render10.queryByText;
+
+      expect(queryByText(dataMock.itens[0].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[0].itens[0].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[0].itens[0].itens[0].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[0].itens[0].itens[0].itens[0].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[1].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[1].itens[0].titulo)).toBeTruthy();
+    });
+    it('should apply customClass', function () {
+      var _render11 = (0, _react.render)(treeviewRenderMock({
+        customClass: 'customClass'
+      })),
+          container = _render11.container;
+
+      expect(container.firstChild).toHaveClass('customClass');
+    });
+    it('should apply style', function () {
+      var _render12 = (0, _react.render)(treeviewRenderMock({
+        styleForContainer: {
+          backgroundColor: '#000'
+        }
+      })),
+          container = _render12.container;
+
+      expect(container.querySelector('ul')).toHaveStyle('background-color: #000');
+    });
+    it('should apply idsInLoading', function () {
+      var _render13 = (0, _react.render)(treeviewRenderMock({
+        idsInLoading: [1]
+      })),
+          container = _render13.container;
+
+      var li = container.querySelector('li').firstChild;
+      expect(li.firstChild).toHaveClass('spinnerloading');
+    });
+    it('should apply selectedNodeId', function () {
+      var _render14 = (0, _react.render)(treeviewRenderMock({
+        selectedNodeId: 1
+      })),
+          container = _render14.container;
+
+      var filhosLi = container.querySelector('li').children;
+      expect(filhosLi[1]).toHaveStyle('background-color: rgb(209, 209, 209)');
+    });
+  });
+});

package/lib/uitour/uitour.spec.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+require("@testing-library/jest-dom");
+
+require("babel-polyfill");
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+var _helpers = require("./helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var data = [{
+  id: '1',
+  targetId: 'uitour-teste',
+  title: 'Título',
+  description: 'Lorem ipsum dolor sit <strong>amet</strong> consectetur adipisicing elit.'
+}, {
+  id: '2',
+  targetId: 'uitour-button',
+  title: 'Botão',
+  description: 'Lorem ipsum, dolor sit adipisicing elit. Repellendus, fuga.'
+}];
+var backButtonLabel = 'Voltar';
+var nextButtonLabel = 'Avançar';
+var finishButtonLabel = 'Finalizar';
+
+var UiTourMock = function UiTourMock(_ref) {
+  var onFinish = _ref.onFinish,
+      visible = _ref.visible,
+      showCloseButton = _ref.showCloseButton,
+      showBackButton = _ref.showBackButton;
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h1", {
+    style: {
+      width: 100
+    },
+    id: "uitour-teste"
+  }, "Teste UiTour"), /*#__PURE__*/_react["default"].createElement("button", {
+    id: "uitour-button"
+  }, "Teste button"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    data: data,
+    backButtonLabel: backButtonLabel,
+    nextButtonLabel: nextButtonLabel,
+    finishButtonLabel: finishButtonLabel,
+    onFinish: onFinish,
+    showCloseButton: showCloseButton,
+    showBackButton: showBackButton,
+    visible: visible
+  }));
+};
+
+UiTourMock.propTypes = {
+  onFinish: _propTypes["default"].func,
+  visible: _propTypes["default"].bool,
+  showCloseButton: _propTypes["default"].bool,
+  showBackButton: _propTypes["default"].bool
+};
+UiTourMock.defaultProps = {
+  onFinish: undefined,
+  visible: true,
+  showCloseButton: true,
+  showBackButton: true
+};
+describe('UiTour', function () {
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, null)),
+        container = _render.container;
+
+    var uitourComponent = container.querySelector('.uitour-component');
+    expect(container.firstChild).toContainElement(uitourComponent);
+  });
+  it('should go to next step', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, null)),
+        container = _render2.container;
+
+    var nextButton = container.querySelector('.next-button');
+
+    _react2.fireEvent.click(nextButton);
+
+    expect(container.querySelector('.content .number')).toHaveTextContent('2');
+  });
+  it('should execute callback on finish and close', function () {
+    var mockFinish = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, {
+      onFinish: mockFinish
+    })),
+        container = _render3.container;
+
+    var nextButton = container.querySelector('.next-button');
+
+    _react2.fireEvent.click(nextButton);
+
+    var finishButton = container.querySelector('.finish-button');
+
+    _react2.fireEvent.click(finishButton);
+
+    expect(mockFinish).toHaveBeenCalledTimes(1);
+    expect(container.querySelector('.uitour-component')).not.toBeInTheDocument();
+  });
+  it('should step render aside target position', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, null)),
+        container = _render4.container;
+
+    var targetRect = container.querySelector('#uitour-teste');
+    var targetDimensions = targetRect.getBoundingClientRect();
+    var stepDimensions = container.querySelector('.uitour-component .step');
+    expect(stepDimensions.style.left).toBe("".concat(targetDimensions.left + targetDimensions.width + _helpers.ARROW_WIDTH, "px"));
+    expect(stepDimensions.style.top).toBe("".concat(targetDimensions.top - _helpers.ARROW_HEIGHT, "px"));
+  });
+  it('should render with backButtonLabel', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, null)),
+        getByText = _render5.getByText;
+
+    expect(getByText(backButtonLabel)).toBeInTheDocument();
+  });
+  it('should render with nextButtonLabel', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, null)),
+        getByText = _render6.getByText;
+
+    expect(getByText(nextButtonLabel)).toBeInTheDocument();
+  });
+  it('should render with finishButtonLabel', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, null)),
+        container = _render7.container,
+        getByText = _render7.getByText;
+
+    var nextButton = container.querySelector('.next-button');
+
+    _react2.fireEvent.click(nextButton);
+
+    expect(getByText(finishButtonLabel)).toBeInTheDocument();
+  });
+  it('should render close button', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, null)),
+        container = _render8.container;
+
+    expect(container.querySelector('.close-button')).toBeInTheDocument();
+  });
+  it('should not render close button', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, {
+      showCloseButton: false
+    })),
+        container = _render9.container;
+
+    expect(container.querySelector('.close-button')).not.toBeInTheDocument();
+  });
+  it('should render back button', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, null)),
+        getByText = _render10.getByText;
+
+    expect(getByText(backButtonLabel)).toBeInTheDocument();
+  });
+  it('should not render back button', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, {
+      showBackButton: false
+    })),
+        container = _render11.container;
+
+    expect(container.querySelector('.back-button')).not.toBeInTheDocument();
+  });
+  it('should not visible', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(UiTourMock, {
+      visible: false
+    })),
+        container = _render12.container;
+
+    expect(container.querySelector('.uitour-component')).not.toBeInTheDocument();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",