@decisiv/ui-components 2.0.1-alpha.20 → 2.0.1-alpha.201

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

@@ -0,0 +1,1001 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+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); }); }; }
+
+var onChange = jest.fn();
+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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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, queryByLabelText;
+
+        return regeneratorRuntime.wrap(function _callee22$(_context22) {
+          while (1) {
+            switch (_context22.prev = _context22.next) {
+              case 0:
+                _render22 = (0, _react2.render)(_react.default.createElement(_.default, {
+                  defaultTags: ['Foo tag'],
+                  label: "My Tag Input",
+                  "aria-label": "My Tag Input",
+                  onChange: onChange
+                })), getByLabelText = _render22.getByLabelText, queryByLabelText = _render22.queryByLabelText;
+
+                _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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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 = (0, _react2.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);
+    })));
+  });
+});