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

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

@@ -0,0 +1,1143 @@
+"use strict";
+
+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 _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); }
+
+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; }
+
+var onChange = jest.fn(); // 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;
+});
+
+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
+  }));
+};
+
+afterEach(function () {
+  onChange.mockClear();
+});
+describe('TagInput', function () {
+  it('renders label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, getByText;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = render(_react.default.createElement(_.default, {
+              tags: [],
+              hideLabel: false,
+              label: "My Tag Input",
+              onChange: onChange
+            })), getByText = _render.getByText;
+            expect(getByText(/my tag input/i)).toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders help message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, getByText;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = render(_react.default.createElement(_.default, {
+              tags: [],
+              hideLabel: false,
+              label: "My Tag Input",
+              helpMessage: "My Help Message",
+              onChange: onChange
+            })), getByText = _render2.getByText;
+            expect(getByText(/my help message/i)).toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders warning message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var _render3, getByText;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _render3 = render(_react.default.createElement(_.default, {
+              tags: [],
+              hideLabel: false,
+              label: "My Tag Input",
+              warningMessage: "My Warning Message",
+              onChange: onChange
+            })), getByText = _render3.getByText;
+            expect(getByText(/my warning message/i)).toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  describe('when input is uncontrolled', function () {
+    it('renders default tags', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      var _render4, getByText;
+
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _render4 = render(_react.default.createElement(_.default, {
+                defaultTags: ['Foo tag'],
+                label: "My Tag Input"
+              })), getByText = _render4.getByText;
+              expect(getByText(/Foo tag/i)).toBeInTheDocument();
+
+            case 2:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    })));
+    it('renders tag action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+      var _render5, getByLabelText;
+
+      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _render5 = render(_react.default.createElement(_.default, {
+                defaultTags: ['My tag'],
+                label: "My Tag Input"
+              })), getByLabelText = _render5.getByLabelText;
+              expect(getByLabelText(/remove my tag/i)).toBeInTheDocument();
+
+            case 2:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    })));
+    describe('when typing in input', function () {
+      describe('when hitting Enter', function () {
+        describe('when input has value', function () {
+          describe('when value is unique', function () {
+            it('adds tag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+              var _render6, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee6$(_context6) {
+                while (1) {
+                  switch (_context6.prev = _context6.next) {
+                    case 0:
+                      _render6 = render(_react.default.createElement(_.default, {
+                        defaultTags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input"
+                      })), getByLabelText = _render6.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Bar tag'
+                        }
+                      });
+
+                      _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                        key: 'Enter'
+                      });
+
+                      expect(getByLabelText('Remove Bar tag')).toBeInTheDocument();
+
+                    case 4:
+                    case "end":
+                      return _context6.stop();
+                  }
+                }
+              }, _callee6);
+            })));
+            it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+              var _render7, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee7$(_context7) {
+                while (1) {
+                  switch (_context7.prev = _context7.next) {
+                    case 0:
+                      _render7 = render(_react.default.createElement(_.default, {
+                        defaultTags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getByLabelText = _render7.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Bar tag'
+                        }
+                      });
+
+                      _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                        key: 'Enter'
+                      });
+
+                      expect(onChange).toHaveBeenCalledWith(['Foo tag', 'Bar tag']);
+
+                    case 4:
+                    case "end":
+                      return _context7.stop();
+                  }
+                }
+              }, _callee7);
+            })));
+          });
+          describe('when value is not unique', function () {
+            it('does not add duplicated tag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+              var _render8, getAllByLabelText, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee8$(_context8) {
+                while (1) {
+                  switch (_context8.prev = _context8.next) {
+                    case 0:
+                      _render8 = render(_react.default.createElement(_.default, {
+                        defaultTags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getAllByLabelText = _render8.getAllByLabelText, getByLabelText = _render8.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Foo tag'
+                        }
+                      });
+
+                      _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                        key: 'Enter'
+                      });
+
+                      expect(getAllByLabelText('Remove Foo tag').length).toBe(1);
+
+                    case 4:
+                    case "end":
+                      return _context8.stop();
+                  }
+                }
+              }, _callee8);
+            })));
+            it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+              var _render9, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee9$(_context9) {
+                while (1) {
+                  switch (_context9.prev = _context9.next) {
+                    case 0:
+                      _render9 = render(_react.default.createElement(_.default, {
+                        defaultTags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getByLabelText = _render9.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Foo tag'
+                        }
+                      });
+
+                      _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                        key: 'Enter'
+                      });
+
+                      expect(onChange).not.toHaveBeenCalled();
+
+                    case 4:
+                    case "end":
+                      return _context9.stop();
+                  }
+                }
+              }, _callee9);
+            })));
+          });
+        });
+        describe('when input is blank', function () {
+          it('does not add blank tag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+            var _render10, queryByLabelText, getByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee10$(_context10) {
+              while (1) {
+                switch (_context10.prev = _context10.next) {
+                  case 0:
+                    _render10 = render(_react.default.createElement(_.default, {
+                      defaultTags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input"
+                    })), queryByLabelText = _render10.queryByLabelText, getByLabelText = _render10.getByLabelText;
+
+                    _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                      target: {
+                        value: ' '
+                      }
+                    });
+
+                    _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                      key: 'Enter'
+                    });
+
+                    expect(queryByLabelText('Remove  ')).not.toBeInTheDocument();
+
+                  case 4:
+                  case "end":
+                    return _context10.stop();
+                }
+              }
+            }, _callee10);
+          })));
+          it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
+            var _render11, getByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee11$(_context11) {
+              while (1) {
+                switch (_context11.prev = _context11.next) {
+                  case 0:
+                    _render11 = render(_react.default.createElement(_.default, {
+                      defaultTags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input",
+                      onChange: onChange
+                    })), getByLabelText = _render11.getByLabelText;
+
+                    _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                      target: {
+                        value: ' '
+                      }
+                    });
+
+                    _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                      key: 'Enter'
+                    });
+
+                    expect(onChange).not.toHaveBeenCalled();
+
+                  case 4:
+                  case "end":
+                    return _context11.stop();
+                }
+              }
+            }, _callee11);
+          })));
+        });
+      });
+      describe('when loose focus', function () {
+        describe('when input has value', function () {
+          describe('when value is unique', function () {
+            it('adds tag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+              var _render12, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee12$(_context12) {
+                while (1) {
+                  switch (_context12.prev = _context12.next) {
+                    case 0:
+                      _render12 = render(_react.default.createElement(_.default, {
+                        defaultTags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getByLabelText = _render12.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Bar tag'
+                        }
+                      });
+
+                      _react2.fireEvent.blur(getByLabelText('My Tag Input'));
+
+                      expect(getByLabelText('Remove Bar tag')).toBeInTheDocument();
+
+                    case 4:
+                    case "end":
+                      return _context12.stop();
+                  }
+                }
+              }, _callee12);
+            })));
+            it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+              var _render13, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee13$(_context13) {
+                while (1) {
+                  switch (_context13.prev = _context13.next) {
+                    case 0:
+                      _render13 = render(_react.default.createElement(_.default, {
+                        defaultTags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getByLabelText = _render13.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Bar tag'
+                        }
+                      });
+
+                      _react2.fireEvent.blur(getByLabelText('My Tag Input'));
+
+                      expect(onChange).toHaveBeenCalledWith(['Foo tag', 'Bar tag']);
+
+                    case 4:
+                    case "end":
+                      return _context13.stop();
+                  }
+                }
+              }, _callee13);
+            })));
+          });
+          describe('when value is not unique', function () {
+            it('does not add duplicated tag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+              var _render14, getAllByLabelText, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee14$(_context14) {
+                while (1) {
+                  switch (_context14.prev = _context14.next) {
+                    case 0:
+                      _render14 = render(_react.default.createElement(_.default, {
+                        defaultTags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getAllByLabelText = _render14.getAllByLabelText, getByLabelText = _render14.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Foo tag'
+                        }
+                      });
+
+                      _react2.fireEvent.blur(getByLabelText('My Tag Input'));
+
+                      expect(getAllByLabelText('Remove Foo tag').length).toBe(1);
+
+                    case 4:
+                    case "end":
+                      return _context14.stop();
+                  }
+                }
+              }, _callee14);
+            })));
+            it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
+              var _render15, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee15$(_context15) {
+                while (1) {
+                  switch (_context15.prev = _context15.next) {
+                    case 0:
+                      _render15 = render(_react.default.createElement(_.default, {
+                        defaultTags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getByLabelText = _render15.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Foo tag'
+                        }
+                      });
+
+                      _react2.fireEvent.blur(getByLabelText('My Tag Input'));
+
+                      expect(onChange).not.toHaveBeenCalled();
+
+                    case 4:
+                    case "end":
+                      return _context15.stop();
+                  }
+                }
+              }, _callee15);
+            })));
+          });
+        });
+        describe('when input is blank', function () {
+          it('does not add blank tag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
+            var _render16, queryByLabelText, getByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee16$(_context16) {
+              while (1) {
+                switch (_context16.prev = _context16.next) {
+                  case 0:
+                    _render16 = render(_react.default.createElement(_.default, {
+                      defaultTags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input"
+                    })), queryByLabelText = _render16.queryByLabelText, getByLabelText = _render16.getByLabelText;
+
+                    _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                      target: {
+                        value: ' '
+                      }
+                    });
+
+                    _react2.fireEvent.blur(getByLabelText('My Tag Input'));
+
+                    expect(queryByLabelText('Remove  ')).not.toBeInTheDocument();
+
+                  case 4:
+                  case "end":
+                    return _context16.stop();
+                }
+              }
+            }, _callee16);
+          })));
+          it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+            var _render17, getByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee17$(_context17) {
+              while (1) {
+                switch (_context17.prev = _context17.next) {
+                  case 0:
+                    _render17 = render(_react.default.createElement(_.default, {
+                      defaultTags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input",
+                      onChange: onChange
+                    })), getByLabelText = _render17.getByLabelText;
+
+                    _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                      target: {
+                        value: ' '
+                      }
+                    });
+
+                    _react2.fireEvent.blur(getByLabelText('My Tag Input'));
+
+                    expect(onChange).not.toHaveBeenCalled();
+
+                  case 4:
+                  case "end":
+                    return _context17.stop();
+                }
+              }
+            }, _callee17);
+          })));
+        });
+      });
+      describe('when hitting Backspace', function () {
+        describe('when input has value', function () {
+          it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
+            var _render18, getByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee18$(_context18) {
+              while (1) {
+                switch (_context18.prev = _context18.next) {
+                  case 0:
+                    _render18 = render(_react.default.createElement(_.default, {
+                      defaultTags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input",
+                      onChange: onChange
+                    })), getByLabelText = _render18.getByLabelText;
+
+                    _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                      target: {
+                        value: 'something'
+                      }
+                    });
+
+                    _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                      key: 'Backspace'
+                    });
+
+                    expect(onChange).not.toHaveBeenCalled();
+
+                  case 4:
+                  case "end":
+                    return _context18.stop();
+                }
+              }
+            }, _callee18);
+          })));
+        });
+        describe('when input value is blank', function () {
+          it('removes tag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+            var _render19, getByLabelText, queryByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee19$(_context19) {
+              while (1) {
+                switch (_context19.prev = _context19.next) {
+                  case 0:
+                    _render19 = render(_react.default.createElement(_.default, {
+                      defaultTags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input",
+                      onChange: onChange
+                    })), getByLabelText = _render19.getByLabelText, queryByLabelText = _render19.queryByLabelText;
+
+                    _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                      key: 'Backspace'
+                    });
+
+                    expect(queryByLabelText('Remove Foo tag')).not.toBeInTheDocument();
+
+                  case 3:
+                  case "end":
+                    return _context19.stop();
+                }
+              }
+            }, _callee19);
+          })));
+          it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
+            var _render20, getByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee20$(_context20) {
+              while (1) {
+                switch (_context20.prev = _context20.next) {
+                  case 0:
+                    _render20 = render(_react.default.createElement(_.default, {
+                      defaultTags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input",
+                      onChange: onChange
+                    })), getByLabelText = _render20.getByLabelText;
+
+                    _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                      key: 'Backspace'
+                    });
+
+                    expect(onChange).toHaveBeenCalledWith([]);
+
+                  case 3:
+                  case "end":
+                    return _context20.stop();
+                }
+              }
+            }, _callee20);
+          })));
+        });
+      });
+    });
+    describe("when clicking on tag's action button", function () {
+      it('removes tag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
+        var _render21, getByLabelText, queryByLabelText;
+
+        return regeneratorRuntime.wrap(function _callee21$(_context21) {
+          while (1) {
+            switch (_context21.prev = _context21.next) {
+              case 0:
+                _render21 = render(_react.default.createElement(_.default, {
+                  defaultTags: ['Foo tag'],
+                  label: "My Tag Input",
+                  "aria-label": "My Tag Input",
+                  onChange: onChange
+                })), getByLabelText = _render21.getByLabelText, queryByLabelText = _render21.queryByLabelText;
+
+                _react2.fireEvent.click(getByLabelText('Remove Foo tag'));
+
+                expect(queryByLabelText('Remove Foo tag')).not.toBeInTheDocument();
+
+              case 3:
+              case "end":
+                return _context21.stop();
+            }
+          }
+        }, _callee21);
+      })));
+      it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
+        var _render22, getByLabelText;
+
+        return regeneratorRuntime.wrap(function _callee22$(_context22) {
+          while (1) {
+            switch (_context22.prev = _context22.next) {
+              case 0:
+                _render22 = render(_react.default.createElement(_.default, {
+                  defaultTags: ['Foo tag'],
+                  label: "My Tag Input",
+                  "aria-label": "My Tag Input",
+                  onChange: onChange
+                })), getByLabelText = _render22.getByLabelText;
+
+                _react2.fireEvent.click(getByLabelText('Remove Foo tag'));
+
+                expect(onChange).toHaveBeenCalledWith([]);
+
+              case 3:
+              case "end":
+                return _context22.stop();
+            }
+          }
+        }, _callee22);
+      })));
+    });
+  });
+  describe('when input is controlled', function () {
+    describe('when typing in input', function () {
+      describe('when hitting Enter', function () {
+        describe('when input has value', function () {
+          describe('when value is unique', function () {
+            it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee23() {
+              var _render23, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee23$(_context23) {
+                while (1) {
+                  switch (_context23.prev = _context23.next) {
+                    case 0:
+                      _render23 = render(_react.default.createElement(_.default, {
+                        tags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getByLabelText = _render23.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Bar tag'
+                        }
+                      });
+
+                      _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                        key: 'Enter'
+                      });
+
+                      expect(onChange).toHaveBeenCalledWith(['Foo tag', 'Bar tag']);
+
+                    case 4:
+                    case "end":
+                      return _context23.stop();
+                  }
+                }
+              }, _callee23);
+            })));
+          });
+          describe('when value is not unique', function () {
+            it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24() {
+              var _render24, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee24$(_context24) {
+                while (1) {
+                  switch (_context24.prev = _context24.next) {
+                    case 0:
+                      _render24 = render(_react.default.createElement(_.default, {
+                        tags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getByLabelText = _render24.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Foo tag'
+                        }
+                      });
+
+                      _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                        key: 'Enter'
+                      });
+
+                      expect(onChange).not.toHaveBeenCalled();
+
+                    case 4:
+                    case "end":
+                      return _context24.stop();
+                  }
+                }
+              }, _callee24);
+            })));
+          });
+        });
+        describe('when input is blank', function () {
+          it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee25() {
+            var _render25, getByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee25$(_context25) {
+              while (1) {
+                switch (_context25.prev = _context25.next) {
+                  case 0:
+                    _render25 = render(_react.default.createElement(_.default, {
+                      tags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input",
+                      onChange: onChange
+                    })), getByLabelText = _render25.getByLabelText;
+
+                    _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                      target: {
+                        value: ' '
+                      }
+                    });
+
+                    _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                      key: 'Enter'
+                    });
+
+                    expect(onChange).not.toHaveBeenCalled();
+
+                  case 4:
+                  case "end":
+                    return _context25.stop();
+                }
+              }
+            }, _callee25);
+          })));
+        });
+      });
+      describe('when loose focus', function () {
+        describe('when input has value', function () {
+          describe('when value is unique', function () {
+            it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee26() {
+              var _render26, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee26$(_context26) {
+                while (1) {
+                  switch (_context26.prev = _context26.next) {
+                    case 0:
+                      _render26 = render(_react.default.createElement(_.default, {
+                        tags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getByLabelText = _render26.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Bar tag'
+                        }
+                      });
+
+                      _react2.fireEvent.blur(getByLabelText('My Tag Input'));
+
+                      expect(onChange).toHaveBeenCalledWith(['Foo tag', 'Bar tag']);
+
+                    case 4:
+                    case "end":
+                      return _context26.stop();
+                  }
+                }
+              }, _callee26);
+            })));
+          });
+          describe('when value is not unique', function () {
+            it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27() {
+              var _render27, getByLabelText;
+
+              return regeneratorRuntime.wrap(function _callee27$(_context27) {
+                while (1) {
+                  switch (_context27.prev = _context27.next) {
+                    case 0:
+                      _render27 = render(_react.default.createElement(_.default, {
+                        tags: ['Foo tag'],
+                        label: "My Tag Input",
+                        "aria-label": "My Tag Input",
+                        onChange: onChange
+                      })), getByLabelText = _render27.getByLabelText;
+
+                      _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                        target: {
+                          value: 'Foo tag'
+                        }
+                      });
+
+                      _react2.fireEvent.blur(getByLabelText('My Tag Input'));
+
+                      expect(onChange).not.toHaveBeenCalled();
+
+                    case 4:
+                    case "end":
+                      return _context27.stop();
+                  }
+                }
+              }, _callee27);
+            })));
+          });
+        });
+        describe('when input is blank', function () {
+          it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28() {
+            var _render28, getByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee28$(_context28) {
+              while (1) {
+                switch (_context28.prev = _context28.next) {
+                  case 0:
+                    _render28 = render(_react.default.createElement(_.default, {
+                      tags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input",
+                      onChange: onChange
+                    })), getByLabelText = _render28.getByLabelText;
+
+                    _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                      target: {
+                        value: ' '
+                      }
+                    });
+
+                    _react2.fireEvent.blur(getByLabelText('My Tag Input'));
+
+                    expect(onChange).not.toHaveBeenCalled();
+
+                  case 4:
+                  case "end":
+                    return _context28.stop();
+                }
+              }
+            }, _callee28);
+          })));
+        });
+      });
+      describe('when hitting Backspace', function () {
+        describe('when input has value', function () {
+          it('does not call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee29() {
+            var _render29, getByLabelText;
+
+            return regeneratorRuntime.wrap(function _callee29$(_context29) {
+              while (1) {
+                switch (_context29.prev = _context29.next) {
+                  case 0:
+                    _render29 = render(_react.default.createElement(_.default, {
+                      defaultTags: ['Foo tag'],
+                      label: "My Tag Input",
+                      "aria-label": "My Tag Input",
+                      onChange: onChange
+                    })), getByLabelText = _render29.getByLabelText;
+
+                    _react2.fireEvent.change(getByLabelText('My Tag Input'), {
+                      target: {
+                        value: 'something'
+                      }
+                    });
+
+                    _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                      key: 'Backspace'
+                    });
+
+                    expect(onChange).not.toHaveBeenCalled();
+
+                  case 4:
+                  case "end":
+                    return _context29.stop();
+                }
+              }
+            }, _callee29);
+          })));
+        });
+        describe('when input value is blank', function () {
+          it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30() {
+            return regeneratorRuntime.wrap(function _callee30$(_context30) {
+              while (1) {
+                switch (_context30.prev = _context30.next) {
+                  case 0:
+                  case "end":
+                    return _context30.stop();
+                }
+              }
+            }, _callee30);
+          })));
+        });
+      });
+    });
+    describe("when clicking on tag's action button", function () {
+      it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee31() {
+        var _render30, getByLabelText;
+
+        return regeneratorRuntime.wrap(function _callee31$(_context31) {
+          while (1) {
+            switch (_context31.prev = _context31.next) {
+              case 0:
+                _render30 = render(_react.default.createElement(_.default, {
+                  tags: ['Foo tag'],
+                  label: "My Tag Input",
+                  "aria-label": "My Tag Input",
+                  onChange: onChange
+                })), getByLabelText = _render30.getByLabelText;
+
+                _react2.fireEvent.keyUp(getByLabelText('My Tag Input'), {
+                  key: 'Backspace'
+                });
+
+                expect(onChange).toHaveBeenCalledWith([]);
+
+              case 3:
+              case "end":
+                return _context31.stop();
+            }
+          }
+        }, _callee31);
+      })));
+    });
+  });
+  describe('when input is disabled', function () {
+    it('suppress tag click event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee32() {
+      var _render31, getByLabelText;
+
+      return regeneratorRuntime.wrap(function _callee32$(_context32) {
+        while (1) {
+          switch (_context32.prev = _context32.next) {
+            case 0:
+              _render31 = render(_react.default.createElement(_.default, {
+                tags: ['Foo tag'],
+                label: "My Tag Input",
+                "aria-label": "My Tag Input",
+                onChange: onChange,
+                disabled: true
+              })), getByLabelText = _render31.getByLabelText;
+
+              _react2.fireEvent.click(getByLabelText('Remove Foo tag'));
+
+              expect(onChange).not.toHaveBeenCalled();
+
+            case 3:
+            case "end":
+              return _context32.stop();
+          }
+        }
+      }, _callee32);
+    })));
+  });
+  describe('dropdown', function () {
+    var defaultProps = {
+      label: 'My Tag Input',
+      options: [{
+        label: 'Option1',
+        value: 'Option1',
+        id: 'Option1'
+      }],
+      onChange: jest.fn(),
+      onSelect: jest.fn()
+    };
+    it('toggles the dropdown visibility when the container is clicked', function () {
+      var _render32 = render(_react.default.createElement(_.default, defaultProps)),
+          getByLabelText = _render32.getByLabelText,
+          getByText = _render32.getByText;
+
+      _react2.fireEvent.click(getByLabelText('My Tag Input'));
+
+      expect(getByText('Option1')).toBeInTheDocument();
+    });
+    it('calls onSelect when an option is selected from the dropdown', function () {
+      var onSelectMock = jest.fn();
+
+      var _render33 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onSelect: onSelectMock
+      }))),
+          getByLabelText = _render33.getByLabelText,
+          getByText = _render33.getByText;
+
+      _react2.fireEvent.click(getByLabelText('My Tag Input'));
+
+      expect(getByText('Option1')).toBeInTheDocument();
+
+      _react2.fireEvent.click(getByText('Option1'));
+
+      expect(onSelectMock).toHaveBeenCalledWith(['Option1']);
+    });
+  });
+  describe('maxTags counter', function () {
+    it('renders maxTags counter when showMaxTagsCount is true', function () {
+      var _render34 = render(_react.default.createElement(_.default, {
+        defaultTags: ['Tag1', 'Tag2'],
+        maxTags: 5,
+        showMaxTagsCount: true,
+        label: "My Tag Input"
+      })),
+          getByText = _render34.getByText;
+
+      expect(getByText('2/5')).toBeInTheDocument();
+    });
+    it('does not render maxTags counter when showMaxTagsCount is false', function () {
+      var _render35 = render(_react.default.createElement(_.default, {
+        defaultTags: ['Tag1', 'Tag2'],
+        maxTags: 5,
+        showMaxTagsCount: false,
+        label: "My Tag Input"
+      })),
+          queryByText = _render35.queryByText;
+
+      expect(queryByText('2/5')).not.toBeInTheDocument();
+    });
+    it('renders red counter when maxTags is reached', function () {
+      var _render36 = render(_react.default.createElement(_.default, {
+        defaultTags: ['Tag1', 'Tag2', 'Tag3', 'Tag4'],
+        maxTags: 3,
+        showMaxTagsCount: true,
+        label: "My Tag Input"
+      })),
+          getByText = _render36.getByText;
+
+      expect(getByText('4/3')).toHaveStyle("\n        color: #FF4142;\n      ");
+    });
+  });
+  describe('decorated tags', function () {
+    it('renders tags with specified colors', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee33() {
+      var _render37, getByText;
+
+      return regeneratorRuntime.wrap(function _callee33$(_context33) {
+        while (1) {
+          switch (_context33.prev = _context33.next) {
+            case 0:
+              _render37 = render(_react.default.createElement(_.default, {
+                defaultTags: [{
+                  text: 'Red Tag',
+                  color: 'danger'
+                }, {
+                  text: 'Green Tag',
+                  color: 'fizzyLime',
+                  palette: 'dark'
+                }, 'default tag'],
+                label: "My Tag Input"
+              })), getByText = _render37.getByText;
+              expect(getByText('Red Tag').parentElement.parentElement).toHaveStyle("\n        background-color: #ffdfdf;\n      ");
+              expect(getByText('Green Tag').parentElement.parentElement).toHaveStyle("\n        background-color: #6b7700;\n      ");
+              expect(getByText('default tag').parentElement.parentElement).toHaveStyle("\n        background-color: #d4eefe;\n      ");
+
+            case 4:
+            case "end":
+              return _context33.stop();
+          }
+        }
+      }, _callee33);
+    })));
+  });
+});