@decisiv/ui-components 2.0.1-alpha.97 → 2.0.1

package/lib/components/SearchInput/index.test.js

@@ -0,0 +1,660 @@
+"use strict";
+
+require("jest-styled-components");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// Prevent warnings about missing document methods (createRange, etc.)
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
+beforeAll(function () {
+  var root = document.createElement('div');
+  root.setAttribute('id', 'popovers-root');
+  document.body.appendChild(root);
+});
+
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
+};
+
+var render = function render(ui, options) {
+  return (0, _react2.render)(ui, _objectSpread({}, options, {
+    wrapper: wrapper
+  }));
+};
+
+var onChangeMock = jest.fn();
+var onSearchMock = jest.fn();
+describe('Search input', function () {
+  afterEach(jest.clearAllMocks);
+  it('renders the search input with the TIMES icon HIDDEN when its blank', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock
+            }));
+            _context.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context.sent;
+            expect((0, _react2.within)(searchContainer).getByLabelText('Clear search')).not.toBeVisible();
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders the search input with the TIMES icon VISIBLE when its blank', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Some value",
+              onChange: onChangeMock
+            }));
+            _context2.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context2.sent;
+            expect((0, _react2.within)(searchContainer).getByLabelText('Clear search')).toBeVisible();
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders SEARCH icon for MEDIUM sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "medium"
+            }));
+            _context3.t0 = expect;
+            _context3.next = 4;
+            return container.findByTestId('search-icon');
+
+          case 4:
+            _context3.t1 = _context3.sent;
+            (0, _context3.t0)(_context3.t1).toBeInTheDocument();
+
+          case 6:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('renders search button with the text SEARCH for MEDIUM sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "medium"
+            }));
+            _context4.t0 = expect;
+            _context4.next = 4;
+            return container.findByRole('button');
+
+          case 4:
+            _context4.t1 = _context4.sent;
+            (0, _context4.t0)(_context4.t1).toHaveTextContent('Search');
+
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('does not render the SEARCH icon for SMALL sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "small"
+            }));
+            expect(container.queryByTestId('search-icon')).not.toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('renders search button with the icon SEARCH for SMALL sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+    var container, button;
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "small"
+            }));
+            button = container.getByRole('button');
+            expect(button.querySelector('svg')).toBeInTheDocument();
+
+          case 3:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('renders the search input with the TIMES icon HIDDEN when its disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "some value",
+              onChange: onChangeMock,
+              disabled: true
+            }));
+            _context7.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context7.sent;
+            expect((0, _react2.within)(searchContainer).queryByLabelText('Clear search')).not.toBeInTheDocument();
+
+          case 5:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+  it('calls onChange when a change is triggered', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+    var container, searchInput;
+    return regeneratorRuntime.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              disabled: true
+            }));
+            _context8.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            _context8.next = 5;
+            return _context8.sent.querySelector('input');
+
+          case 5:
+            searchInput = _context8.sent;
+            _context8.next = 8;
+            return _react2.fireEvent.change(searchInput, {
+              target: {
+                value: 'some value'
+              }
+            });
+
+          case 8:
+            expect(onChangeMock).toHaveBeenCalled();
+
+          case 9:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  it('calls onChange with a blank value when clear button is clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee9$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Some value",
+              onChange: onChangeMock
+            }));
+            _context9.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context9.sent;
+            _context9.next = 6;
+            return _react2.fireEvent.click((0, _react2.within)(searchContainer).getByLabelText('Clear search'));
+
+          case 6:
+            expect(onChangeMock).toHaveBeenCalledWith({
+              target: {
+                value: ''
+              }
+            });
+
+          case 7:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee9);
+  })));
+  it('calls onSearch when search button is clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee10$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Searched value",
+              onChange: onChangeMock,
+              onSearch: onSearchMock,
+              size: "medium"
+            }));
+            _context10.t0 = _react2.fireEvent;
+            _context10.next = 4;
+            return container.findByRole('button');
+
+          case 4:
+            _context10.t1 = _context10.sent;
+
+            _context10.t0.click.call(_context10.t0, _context10.t1);
+
+            expect(onSearchMock).toHaveBeenCalledWith('Searched value');
+
+          case 7:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  it('calls onSearch when enter is pressed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
+    var container, searchInput;
+    return regeneratorRuntime.wrap(function _callee11$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Searched value",
+              onChange: onChangeMock,
+              onSearch: onSearchMock,
+              size: "medium"
+            }));
+            _context11.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            _context11.next = 5;
+            return _context11.sent.querySelector('input');
+
+          case 5:
+            searchInput = _context11.sent;
+
+            _react2.fireEvent.keyPress(searchInput, {
+              code: 'Enter',
+              key: 'Enter',
+              charCode: 13
+            });
+
+            expect(onSearchMock).toHaveBeenCalledWith('Searched value');
+
+          case 8:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee11);
+  })));
+  it('renders only the search button as disabled when searchDisabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+    var container, input, button;
+    return regeneratorRuntime.wrap(function _callee12$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "some value",
+              searchDisabled: true
+            }));
+            input = container.getByRole('textbox');
+            button = container.getByRole('button');
+            expect(button).toBeDisabled();
+            expect(input).toBeEnabled();
+
+          case 5:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee12);
+  })));
+  it('does not calls search callback when searchDisabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+    var container, searchInput;
+    return regeneratorRuntime.wrap(function _callee13$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              searchDisabled: true,
+              value: "Searched value",
+              onChange: onChangeMock,
+              onSearch: onSearchMock,
+              size: "medium"
+            }));
+            _context13.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            _context13.next = 5;
+            return _context13.sent.querySelector('input');
+
+          case 5:
+            searchInput = _context13.sent;
+
+            _react2.fireEvent.keyPress(searchInput, {
+              code: 'Enter',
+              key: 'Enter',
+              charCode: 13
+            });
+
+            expect(onSearchMock).not.toHaveBeenCalled();
+
+          case 8:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee13);
+  })));
+  describe('when using the searchOn `change`', function () {
+    var searchOn = 'change';
+    it('renders the search icon when size is "small"', function () {
+      var container = render(_react.default.createElement(_.default, {
+        searchOn: "change",
+        value: "",
+        onChange: onChangeMock,
+        size: "small"
+      }));
+      expect(container.getByTestId('search-icon')).toBeInTheDocument();
+    });
+    it('renders the search icon when size is "medium"', function () {
+      var container = render(_react.default.createElement(_.default, {
+        searchOn: "change",
+        value: "",
+        onChange: onChangeMock,
+        size: "medium"
+      }));
+      expect(container.getByTestId('search-icon')).toBeInTheDocument();
+    });
+    it('does not render the submit search button', function () {
+      var _render = render(_react.default.createElement(_.default, {
+        value: "search value",
+        searchOn: searchOn,
+        onChange: onChangeMock,
+        onSearch: onSearchMock
+      })),
+          queryByRole = _render.queryByRole;
+
+      expect(queryByRole('button')).not.toBeInTheDocument();
+    });
+    it('triggers the onSearch function when changing the value of the component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+      var container, searchInput;
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
+        while (1) {
+          switch (_context14.prev = _context14.next) {
+            case 0:
+              container = render(_react.default.createElement(_.default, {
+                searchOn: searchOn,
+                value: "Searched value",
+                onChange: onChangeMock,
+                onSearch: onSearchMock
+              }));
+              _context14.next = 3;
+              return container.findByTestId('search-container');
+
+            case 3:
+              _context14.next = 5;
+              return _context14.sent.querySelector('input');
+
+            case 5:
+              searchInput = _context14.sent;
+
+              _react2.fireEvent.change(searchInput, {
+                target: {
+                  value: 'some value'
+                }
+              });
+
+              expect(onChangeMock).toHaveBeenCalled();
+
+            case 8:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14);
+    })));
+  });
+  describe('searchBy selector', function () {
+    var searchByOptions = [{
+      id: 'Value 1',
+      label: 'Value 1'
+    }, {
+      id: 'Value 2',
+      label: 'Value 2'
+    }, {
+      id: 'Value 3',
+      label: 'Value 3'
+    }];
+    it('renders list of options', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
+      var _render2, getByLabelText, getByText;
+
+      return regeneratorRuntime.wrap(function _callee15$(_context15) {
+        while (1) {
+          switch (_context15.prev = _context15.next) {
+            case 0:
+              _render2 = render(_react.default.createElement(_.default, {
+                searchByOptions: searchByOptions,
+                searchByLabel: "Search By",
+                searchByName: "search-by",
+                value: "Searched value",
+                onChange: onChangeMock,
+                onSearch: onSearchMock
+              })), getByLabelText = _render2.getByLabelText, getByText = _render2.getByText;
+              expect(getByLabelText('Search By')).toBeInTheDocument();
+
+              _react2.fireEvent.click(getByLabelText('Search By'));
+
+              searchByOptions.forEach(function (_ref17) {
+                var label = _ref17.label;
+                expect(getByText(label)).toBeInTheDocument();
+              });
+
+            case 4:
+            case "end":
+              return _context15.stop();
+          }
+        }
+      }, _callee15);
+    })));
+    it('calls searchBy callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
+      var mockedFn, _render3, getByLabelText, getByText;
+
+      return regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              mockedFn = jest.fn();
+              _render3 = render(_react.default.createElement(_.default, {
+                searchByOptions: searchByOptions,
+                searchByLabel: "Search By",
+                searchByName: "search-by",
+                onSearchByChange: mockedFn,
+                value: "Searched value",
+                onChange: onChangeMock,
+                onSearch: onSearchMock
+              })), getByLabelText = _render3.getByLabelText, getByText = _render3.getByText;
+              expect(getByLabelText('Search By')).toBeInTheDocument();
+
+              _react2.fireEvent.click(getByLabelText('Search By'));
+
+              searchByOptions.forEach(function (_ref19) {
+                var label = _ref19.label;
+                expect(getByText(label)).toBeInTheDocument();
+              });
+
+              _react2.fireEvent.click(getByText(searchByOptions[0].label));
+
+              expect(mockedFn).toHaveBeenCalledWith(searchByOptions[0].label);
+
+            case 7:
+            case "end":
+              return _context16.stop();
+          }
+        }
+      }, _callee16);
+    })));
+    describe('small', function () {
+      it('does not renders label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+        var _render4, queryByText;
+
+        return regeneratorRuntime.wrap(function _callee17$(_context17) {
+          while (1) {
+            switch (_context17.prev = _context17.next) {
+              case 0:
+                _render4 = render(_react.default.createElement(_.default, {
+                  searchByOptions: searchByOptions,
+                  searchByLabel: "Search By",
+                  searchByName: "search-by",
+                  value: "Searched value",
+                  onChange: onChangeMock,
+                  onSearch: onSearchMock,
+                  size: "small"
+                })), queryByText = _render4.queryByText;
+                expect(queryByText('Search By')).not.toBeVisible();
+
+              case 2:
+              case "end":
+                return _context17.stop();
+            }
+          }
+        }, _callee17);
+      })));
+    });
+    describe('warning message', function () {
+      it('renders warning message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
+        var _render5, getByLabelText, getByText;
+
+        return regeneratorRuntime.wrap(function _callee18$(_context18) {
+          while (1) {
+            switch (_context18.prev = _context18.next) {
+              case 0:
+                _render5 = render(_react.default.createElement(_.default, {
+                  searchByOptions: searchByOptions,
+                  searchByLabel: "Search By",
+                  searchByName: "search-by",
+                  value: "Searched value",
+                  onChange: onChangeMock,
+                  onSearch: onSearchMock,
+                  warningMessage: "warning message"
+                })), getByLabelText = _render5.getByLabelText, getByText = _render5.getByText;
+                expect(getByLabelText('Search By')).toBeInTheDocument();
+                expect(getByText('warning message')).toBeInTheDocument();
+
+              case 3:
+              case "end":
+                return _context18.stop();
+            }
+          }
+        }, _callee18);
+      })));
+    });
+    describe('help message', function () {
+      it('renders warning message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+        var _render6, getByLabelText, getByText;
+
+        return regeneratorRuntime.wrap(function _callee19$(_context19) {
+          while (1) {
+            switch (_context19.prev = _context19.next) {
+              case 0:
+                _render6 = render(_react.default.createElement(_.default, {
+                  searchByOptions: searchByOptions,
+                  searchByLabel: "Search By",
+                  searchByName: "search-by",
+                  value: "Searched value",
+                  onChange: onChangeMock,
+                  onSearch: onSearchMock,
+                  warningMessage: "warning message",
+                  helpMessage: "help message",
+                  searchByDefaultValue: "Value 1",
+                  searchByWidth: "100px"
+                })), getByLabelText = _render6.getByLabelText, getByText = _render6.getByText;
+                expect(getByLabelText('Search By')).toBeInTheDocument();
+                expect(getByText('warning message')).toBeInTheDocument();
+                expect(getByText('help message')).toBeInTheDocument();
+
+              case 4:
+              case "end":
+                return _context19.stop();
+            }
+          }
+        }, _callee19);
+      })));
+    });
+  });
+});

package/lib/components/SearchInput/schema.d.ts

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/SearchInput/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAgFxD,eAAe,MAAM,CAAC"}