"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireDefault(require("react"));
var _color = _interopRequireDefault(require("color"));
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _unit = require("../../utils/test-utils/unit");
var _Swatches = _interopRequireDefault(require("../Swatches"));
var _ColorPicker = _interopRequireDefault(require("../../ColorPicker"));
var _SwatchesPrivateUni = require("./Swatches.private.uni.driver");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Swatches/test/Swatches.spec.jsx",
  _this = void 0;
describe('Swatches', function () {
  var render = (0, _unit.createRendererWithUniDriver)(_SwatchesPrivateUni.swatchesPrivateDriverFactory);
  afterEach(function () {
    (0, _unit.cleanup)();
  });
  it('should render swatches', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
    var _render, driver;
    return _regenerator["default"].wrap(function _callee$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          _render = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
            colors: ['#fff', '#000'],
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 22,
              columnNumber: 31
            }
          })), driver = _render.driver;
          _context.t0 = expect;
          _context.next = 4;
          return driver.exists();
        case 4:
          _context.t1 = _context.sent;
          (0, _context.t0)(_context.t1).toBe(true);
          _context.t2 = expect;
          _context.next = 9;
          return driver.getSwatchCount();
        case 9:
          _context.t3 = _context.sent;
          (0, _context.t2)(_context.t3).toEqual(2);
        case 11:
        case "end":
          return _context.stop();
      }
    }, _callee);
  })));
  it('should call callback with color', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
    var onClick, _render2, driver, swatch;
    return _regenerator["default"].wrap(function _callee2$(_context2) {
      while (1) switch (_context2.prev = _context2.next) {
        case 0:
          onClick = vi.fn();
          _render2 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
            onClick: onClick,
            colors: ['#ffffff', '#000000'],
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 32,
              columnNumber: 7
            }
          })), driver = _render2.driver;
          _context2.next = 4;
          return driver.getSwatch(1);
        case 4:
          swatch = _context2.sent;
          _context2.next = 7;
          return swatch.click();
        case 7:
          expect(onClick).toHaveBeenCalledWith('#000000');
        case 8:
        case "end":
          return _context2.stop();
      }
    }, _callee2);
  })));
  it('should indicate selected color', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
    var _render3, driver;
    return _regenerator["default"].wrap(function _callee3$(_context3) {
      while (1) switch (_context3.prev = _context3.next) {
        case 0:
          _render3 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
            selected: "#000000",
            colors: ['#ffffff', '#000000'],
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 44,
              columnNumber: 7
            }
          })), driver = _render3.driver;
          _context3.t0 = expect;
          _context3.next = 4;
          return driver.isSwatchSelectedAt(0);
        case 4:
          _context3.t1 = _context3.sent;
          (0, _context3.t0)(_context3.t1).toBe(false);
          _context3.t2 = expect;
          _context3.next = 9;
          return driver.isSwatchSelectedAt(1);
        case 9:
          _context3.t3 = _context3.sent;
          (0, _context3.t2)(_context3.t3).toBe(true);
        case 11:
        case "end":
          return _context3.stop();
      }
    }, _callee3);
  })));
  it('should remove duplicate colors', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
    var _render4, driver;
    return _regenerator["default"].wrap(function _callee4$(_context4) {
      while (1) switch (_context4.prev = _context4.next) {
        case 0:
          _render4 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
            colors: ['red', '#FF0000', 'rgb(255, 0, 0)'],
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 53,
              columnNumber: 7
            }
          })), driver = _render4.driver;
          _context4.t0 = expect;
          _context4.next = 4;
          return driver.getSwatchCount();
        case 4:
          _context4.t1 = _context4.sent;
          (0, _context4.t0)(_context4.t1).toEqual(1);
        case 6:
        case "end":
          return _context4.stop();
      }
    }, _callee4);
  })));
  describe('No Color', function () {
    it('should add no color option if prop given', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
      var _render5, driver, emptySwatch;
      return _regenerator["default"].wrap(function _callee5$(_context5) {
        while (1) switch (_context5.prev = _context5.next) {
          case 0:
            _render5 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showClear: true,
              colors: ['#000000'],
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 61,
                columnNumber: 33
              }
            })), driver = _render5.driver;
            _context5.next = 3;
            return driver.getEmptySwatch();
          case 3:
            emptySwatch = _context5.sent;
            _context5.t0 = expect;
            _context5.next = 7;
            return emptySwatch.exists();
          case 7:
            _context5.t1 = _context5.sent;
            (0, _context5.t0)(_context5.t1).toBe(true);
          case 9:
          case "end":
            return _context5.stop();
        }
      }, _callee5);
    })));
    it('should return empty string if clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
      var onClick, _render6, driver;
      return _regenerator["default"].wrap(function _callee6$(_context6) {
        while (1) switch (_context6.prev = _context6.next) {
          case 0:
            onClick = vi.fn();
            _render6 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showClear: true,
              onClick: onClick,
              colors: ['#000000'],
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 72,
                columnNumber: 9
              }
            })), driver = _render6.driver;
            _context6.next = 4;
            return driver.clickEmptySwatch();
          case 4:
            expect(onClick).toHaveBeenCalledWith('');
          case 5:
          case "end":
            return _context6.stop();
        }
      }, _callee6);
    })));
    it('should be selected if selected prop is not passed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
      var _render7, driver;
      return _regenerator["default"].wrap(function _callee7$(_context7) {
        while (1) switch (_context7.prev = _context7.next) {
          case 0:
            _render7 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showClear: true,
              colors: ['#000000'],
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 81,
                columnNumber: 33
              }
            })), driver = _render7.driver;
            _context7.t0 = expect;
            _context7.next = 4;
            return driver.isEmptySwatchSelected();
          case 4:
            _context7.t1 = _context7.sent;
            (0, _context7.t0)(_context7.t1).toBe(true);
          case 6:
          case "end":
            return _context7.stop();
        }
      }, _callee7);
    })));
    it('should not add tooltip if showClearMessage is not given', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
      var _render8, driver, emptySwatchTooltip;
      return _regenerator["default"].wrap(function _callee8$(_context8) {
        while (1) switch (_context8.prev = _context8.next) {
          case 0:
            _render8 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showClear: true,
              colors: ['#000000'],
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 87,
                columnNumber: 33
              }
            })), driver = _render8.driver;
            _context8.next = 3;
            return driver.getEmptySwatchTooltip();
          case 3:
            emptySwatchTooltip = _context8.sent;
            _context8.t0 = expect;
            _context8.next = 7;
            return emptySwatchTooltip.tooltipExists();
          case 7:
            _context8.t1 = _context8.sent;
            (0, _context8.t0)(_context8.t1).toBe(false);
          case 9:
          case "end":
            return _context8.stop();
        }
      }, _callee8);
    })));
    it('should accept showClearMessage and show in tooltip', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9() {
      var message, _render9, driver, emptySwatchTooltip;
      return _regenerator["default"].wrap(function _callee9$(_context9) {
        while (1) switch (_context9.prev = _context9.next) {
          case 0:
            message = 'no color selected';
            _render9 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showClear: true,
              showClearMessage: message,
              colors: ['#000000'],
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 98,
                columnNumber: 9
              }
            })), driver = _render9.driver;
            _context9.next = 4;
            return driver.getEmptySwatchTooltip();
          case 4:
            emptySwatchTooltip = _context9.sent;
            _context9.t0 = expect;
            _context9.next = 8;
            return emptySwatchTooltip.getTooltipText();
          case 8:
            _context9.t1 = _context9.sent;
            (0, _context9.t0)(_context9.t1).toBe(message);
          case 10:
          case "end":
            return _context9.stop();
        }
      }, _callee9);
    })));
  });
  describe('renderColorPicker', function () {
    it('should use default ColorPicker when renderColorPicker is not provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee0() {
      var _render0, driver, addButton, colorPicker;
      return _regenerator["default"].wrap(function _callee0$(_context0) {
        while (1) switch (_context0.prev = _context0.next) {
          case 0:
            _render0 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showAddButton: true,
              onAdd: vi.fn(),
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 109,
                columnNumber: 33
              }
            })), driver = _render0.driver;
            _context0.next = 3;
            return driver.getAddButton();
          case 3:
            addButton = _context0.sent;
            _context0.next = 6;
            return addButton.click();
          case 6:
            _context0.next = 8;
            return driver.getColorPicker();
          case 8:
            colorPicker = _context0.sent;
            expect(colorPicker).toBeTruthy();
          case 10:
          case "end":
            return _context0.stop();
        }
      }, _callee0);
    })));
    it('should call setColor when custom picker changes color', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee1() {
      var user, onChange, CustomPicker, _render1, driver, addButton;
      return _regenerator["default"].wrap(function _callee1$(_context1) {
        while (1) switch (_context1.prev = _context1.next) {
          case 0:
            user = _userEvent["default"].setup();
            onChange = vi.fn();
            CustomPicker = function CustomPicker(_ref10) {
              var setColor = _ref10.setColor;
              return /*#__PURE__*/_react["default"].createElement("button", {
                onClick: function onClick() {
                  return setColor((0, _color["default"])('#FF0000'));
                },
                __self: _this,
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 123,
                  columnNumber: 11
                }
              }, "Custom Picker");
            };
            _render1 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showAddButton: true,
              renderColorPicker: function renderColorPicker(_ref11) {
                var setColor = _ref11.setColor;
                return /*#__PURE__*/_react["default"].createElement(CustomPicker, {
                  setColor: setColor,
                  __self: _this,
                  __source: {
                    fileName: _jsxFileName,
                    lineNumber: 132,
                    columnNumber: 13
                  }
                });
              },
              onChange: onChange,
              onAdd: vi.fn(),
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 129,
                columnNumber: 9
              }
            })), driver = _render1.driver;
            _context1.next = 6;
            return driver.getAddButton();
          case 6:
            addButton = _context1.sent;
            _context1.next = 9;
            return addButton.click();
          case 9:
            _context1.next = 11;
            return user.click(_unit.screen.getByText('Custom Picker'));
          case 11:
            expect(onChange).toHaveBeenCalledWith('#FF0000');
          case 12:
          case "end":
            return _context1.stop();
        }
      }, _callee1);
    })));
    it('should trigger onAdd when confirm is called', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee10() {
      var user, onAdd, CustomPicker, _render10, driver, addButton;
      return _regenerator["default"].wrap(function _callee10$(_context10) {
        while (1) switch (_context10.prev = _context10.next) {
          case 0:
            user = _userEvent["default"].setup();
            onAdd = vi.fn();
            CustomPicker = function CustomPicker(_ref13) {
              var confirm = _ref13.confirm,
                setColor = _ref13.setColor;
              return /*#__PURE__*/_react["default"].createElement("button", {
                onClick: function onClick() {
                  setColor((0, _color["default"])('#00FF00'));
                  setTimeout(function () {
                    confirm();
                  }, 0);
                },
                __self: _this,
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 151,
                  columnNumber: 11
                }
              }, "Custom Picker");
            };
            _render10 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showAddButton: true,
              renderColorPicker: function renderColorPicker(_ref14) {
                var confirm = _ref14.confirm,
                  setColor = _ref14.setColor;
                return /*#__PURE__*/_react["default"].createElement(CustomPicker, {
                  confirm: confirm,
                  setColor: setColor,
                  __self: _this,
                  __source: {
                    fileName: _jsxFileName,
                    lineNumber: 168,
                    columnNumber: 13
                  }
                });
              },
              onAdd: onAdd,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 165,
                columnNumber: 9
              }
            })), driver = _render10.driver;
            _context10.next = 6;
            return driver.getAddButton();
          case 6:
            addButton = _context10.sent;
            _context10.next = 9;
            return addButton.click();
          case 9:
            _context10.next = 11;
            return user.click(_unit.screen.getByText('Custom Picker'));
          case 11:
            expect(onAdd).toHaveBeenCalledWith('#00FF00');
          case 12:
          case "end":
            return _context10.stop();
        }
      }, _callee10);
    })));
    it('should call cancel callback and close popover when cancel is called', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee11() {
      var user, onCancel, CustomPicker, _render11, driver, addButton;
      return _regenerator["default"].wrap(function _callee11$(_context11) {
        while (1) switch (_context11.prev = _context11.next) {
          case 0:
            user = _userEvent["default"].setup();
            onCancel = vi.fn();
            CustomPicker = function CustomPicker(_ref16) {
              var cancel = _ref16.cancel;
              return /*#__PURE__*/_react["default"].createElement("button", {
                onClick: function onClick() {
                  cancel();
                },
                __self: _this,
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 186,
                  columnNumber: 11
                }
              }, "Custom Picker");
            };
            _render11 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showAddButton: true,
              renderColorPicker: function renderColorPicker(_ref17) {
                var cancel = _ref17.cancel;
                return /*#__PURE__*/_react["default"].createElement(CustomPicker, {
                  cancel: cancel,
                  __self: _this,
                  __source: {
                    fileName: _jsxFileName,
                    lineNumber: 199,
                    columnNumber: 46
                  }
                });
              },
              onCancel: onCancel,
              onAdd: vi.fn(),
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 197,
                columnNumber: 9
              }
            })), driver = _render11.driver;
            _context11.next = 6;
            return driver.getAddButton();
          case 6:
            addButton = _context11.sent;
            _context11.next = 9;
            return addButton.click();
          case 9:
            _context11.next = 11;
            return user.click(_unit.screen.getByText('Custom Picker'));
          case 11:
            expect(onCancel).toHaveBeenCalled();
            _context11.t0 = expect;
            _context11.next = 15;
            return driver.isColorPickerShown();
          case 15:
            _context11.t1 = _context11.sent;
            (0, _context11.t0)(_context11.t1).toBe(false);
          case 17:
          case "end":
            return _context11.stop();
        }
      }, _callee11);
    })));
    it('should provide currentColor to render prop', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee12() {
      var user, receivedColor, CustomPicker, _render12, driver, addButton;
      return _regenerator["default"].wrap(function _callee12$(_context12) {
        while (1) switch (_context12.prev = _context12.next) {
          case 0:
            user = _userEvent["default"].setup();
            receivedColor = null;
            CustomPicker = function CustomPicker(_ref19) {
              var currentColor = _ref19.currentColor,
                setColor = _ref19.setColor;
              receivedColor = currentColor;
              return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
                onClick: function onClick() {
                  setColor((0, _color["default"])('#00FF00'));
                },
                __self: _this,
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 220,
                  columnNumber: 13
                }
              }, "Set Color"), /*#__PURE__*/_react["default"].createElement("div", {
                __self: _this,
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 227,
                  columnNumber: 13
                }
              }, "Picker"));
            };
            _render12 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showAddButton: true,
              value: "",
              renderColorPicker: function renderColorPicker(_ref20) {
                var currentColor = _ref20.currentColor,
                  setColor = _ref20.setColor;
                return /*#__PURE__*/_react["default"].createElement(CustomPicker, {
                  currentColor: currentColor,
                  setColor: setColor,
                  __self: _this,
                  __source: {
                    fileName: _jsxFileName,
                    lineNumber: 237,
                    columnNumber: 13
                  }
                });
              },
              onAdd: vi.fn(),
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 233,
                columnNumber: 9
              }
            })), driver = _render12.driver;
            _context12.next = 6;
            return driver.getAddButton();
          case 6:
            addButton = _context12.sent;
            _context12.next = 9;
            return addButton.click();
          case 9:
            _context12.next = 11;
            return user.click(_unit.screen.getByText('Set Color'));
          case 11:
            expect(receivedColor).toEqual((0, _color["default"])('#00FF00'));
          case 12:
          case "end":
            return _context12.stop();
        }
      }, _callee12);
    })));
    it('should allow using ColorPicker with custom props via renderColorPicker', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee13() {
      var _render13, driver, addButton, colorPicker;
      return _regenerator["default"].wrap(function _callee13$(_context13) {
        while (1) switch (_context13.prev = _context13.next) {
          case 0:
            _render13 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              showAddButton: true,
              renderColorPicker: function renderColorPicker(_ref22) {
                var cancel = _ref22.cancel,
                  confirm = _ref22.confirm,
                  setColor = _ref22.setColor,
                  currentColor = _ref22.currentColor;
                return /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
                  dataHook: "test-color-picker",
                  value: currentColor,
                  showInput: true,
                  showConverter: true,
                  onCancel: cancel,
                  onConfirm: confirm,
                  onChange: setColor,
                  __self: _this,
                  __source: {
                    fileName: _jsxFileName,
                    lineNumber: 255,
                    columnNumber: 13
                  }
                });
              },
              onAdd: vi.fn(),
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 252,
                columnNumber: 9
              }
            })), driver = _render13.driver;
            _context13.next = 3;
            return driver.getAddButton();
          case 3:
            addButton = _context13.sent;
            _context13.next = 6;
            return addButton.click();
          case 6:
            _context13.next = 8;
            return driver.getColorPicker('test-color-picker');
          case 8:
            colorPicker = _context13.sent;
            _context13.t0 = expect;
            _context13.next = 12;
            return colorPicker.hasConverter();
          case 12:
            _context13.t1 = _context13.sent;
            (0, _context13.t0)(_context13.t1).toBe(true);
          case 14:
          case "end":
            return _context13.stop();
        }
      }, _callee13);
    })));
  });
  describe('Add color button', function () {
    it('should be rendered when showAddButton props is true', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee14() {
      var _render14, driver;
      return _regenerator["default"].wrap(function _callee14$(_context14) {
        while (1) switch (_context14.prev = _context14.next) {
          case 0:
            _render14 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 280,
                columnNumber: 9
              }
            })), driver = _render14.driver;
            _context14.t0 = expect;
            _context14.next = 4;
            return driver.addButtonExists();
          case 4:
            _context14.t1 = _context14.sent;
            (0, _context14.t0)(_context14.t1).toBe(false);
          case 6:
          case "end":
            return _context14.stop();
        }
      }, _callee14);
    })));
    it('should not show color picker initially', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee15() {
      var _render15, driver;
      return _regenerator["default"].wrap(function _callee15$(_context15) {
        while (1) switch (_context15.prev = _context15.next) {
          case 0:
            _render15 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 288,
                columnNumber: 9
              }
            })), driver = _render15.driver;
            _context15.t0 = expect;
            _context15.next = 4;
            return driver.isColorPickerShown();
          case 4:
            _context15.t1 = _context15.sent;
            (0, _context15.t0)(_context15.t1).toBe(false);
          case 6:
          case "end":
            return _context15.stop();
        }
      }, _callee15);
    })));
    it('should show color picker on add button click', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee16() {
      var _render16, driver, addButton;
      return _regenerator["default"].wrap(function _callee16$(_context16) {
        while (1) switch (_context16.prev = _context16.next) {
          case 0:
            _render16 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 296,
                columnNumber: 9
              }
            })), driver = _render16.driver;
            _context16.next = 3;
            return driver.getAddButton();
          case 3:
            addButton = _context16.sent;
            _context16.next = 6;
            return addButton.click();
          case 6:
            _context16.t0 = expect;
            _context16.next = 9;
            return driver.isColorPickerShown();
          case 9:
            _context16.t1 = _context16.sent;
            (0, _context16.t0)(_context16.t1).toBe(true);
          case 11:
          case "end":
            return _context16.stop();
        }
      }, _callee16);
    })));
    it('should not submit form on add button click', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee17() {
      var onSubmit, _render17, driver, addButton;
      return _regenerator["default"].wrap(function _callee17$(_context17) {
        while (1) switch (_context17.prev = _context17.next) {
          case 0:
            onSubmit = vi.fn();
            _render17 = render(/*#__PURE__*/_react["default"].createElement("form", {
              onSubmit: onSubmit,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 309,
                columnNumber: 9
              }
            }, /*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 310,
                columnNumber: 11
              }
            }))), driver = _render17.driver;
            _context17.next = 4;
            return driver.getAddButton();
          case 4:
            addButton = _context17.sent;
            _context17.next = 7;
            return addButton.click();
          case 7:
            expect(onSubmit).not.toHaveBeenCalled();
          case 8:
          case "end":
            return _context17.stop();
        }
      }, _callee17);
    })));
    it('should not call onAdd callback when no color is selected in color picker', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee18() {
      var onAdd, _render18, driver, addButton, colorpicker;
      return _regenerator["default"].wrap(function _callee18$(_context18) {
        while (1) switch (_context18.prev = _context18.next) {
          case 0:
            onAdd = vi.fn();
            _render18 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              onAdd: onAdd,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 323,
                columnNumber: 9
              }
            })), driver = _render18.driver;
            _context18.next = 4;
            return driver.getAddButton();
          case 4:
            addButton = _context18.sent;
            _context18.next = 7;
            return addButton.click();
          case 7:
            _context18.next = 9;
            return driver.getColorPicker();
          case 9:
            colorpicker = _context18.sent;
            _context18.next = 12;
            return colorpicker.confirm();
          case 12:
            expect(onAdd).not.toHaveBeenCalled();
          case 13:
          case "end":
            return _context18.stop();
        }
      }, _callee18);
    })));
    it('should call onAdd callback when selecting a color in color picker', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee19() {
      var addSpy, _render19, driver, addButton, colorpicker;
      return _regenerator["default"].wrap(function _callee19$(_context19) {
        while (1) switch (_context19.prev = _context19.next) {
          case 0:
            addSpy = vi.fn();
            _render19 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              onAdd: addSpy,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 338,
                columnNumber: 9
              }
            })), driver = _render19.driver;
            _context19.next = 4;
            return driver.getAddButton();
          case 4:
            addButton = _context19.sent;
            _context19.next = 7;
            return addButton.click();
          case 7:
            _context19.next = 9;
            return driver.getColorPicker();
          case 9:
            colorpicker = _context19.sent;
            _context19.next = 12;
            return colorpicker.selectBlackColor();
          case 12:
            _context19.next = 14;
            return colorpicker.confirm();
          case 14:
            expect(addSpy).toHaveBeenCalledTimes(1);
            expect(addSpy).toHaveBeenCalledWith('#000000');
          case 16:
          case "end":
            return _context19.stop();
        }
      }, _callee19);
    })));
    it('should call onChange callback when change color in color picker', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee20() {
      var changeSpy, _render20, driver, addButton, colorpicker;
      return _regenerator["default"].wrap(function _callee20$(_context20) {
        while (1) switch (_context20.prev = _context20.next) {
          case 0:
            changeSpy = vi.fn();
            _render20 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              onChange: changeSpy,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 355,
                columnNumber: 9
              }
            })), driver = _render20.driver;
            _context20.next = 4;
            return driver.getAddButton();
          case 4:
            addButton = _context20.sent;
            _context20.next = 7;
            return addButton.click();
          case 7:
            _context20.next = 9;
            return driver.getColorPicker();
          case 9:
            colorpicker = _context20.sent;
            _context20.next = 12;
            return colorpicker.selectBlackColor();
          case 12:
            expect(changeSpy).toHaveBeenCalledTimes(1);
            expect(changeSpy).toHaveBeenCalledWith('#000000');
          case 14:
          case "end":
            return _context20.stop();
        }
      }, _callee20);
    })));
    it('should call onCancel callback when cancel button clicked in color picker', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee21() {
      var cancelSpy, _render21, driver, addButton, colorpicker;
      return _regenerator["default"].wrap(function _callee21$(_context21) {
        while (1) switch (_context21.prev = _context21.next) {
          case 0:
            cancelSpy = vi.fn();
            _render21 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              onCancel: cancelSpy,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 371,
                columnNumber: 9
              }
            })), driver = _render21.driver;
            _context21.next = 4;
            return driver.getAddButton();
          case 4:
            addButton = _context21.sent;
            _context21.next = 7;
            return addButton.click();
          case 7:
            _context21.next = 9;
            return driver.getColorPicker();
          case 9:
            colorpicker = _context21.sent;
            _context21.next = 12;
            return colorpicker.clickCancelButton();
          case 12:
            expect(cancelSpy).toHaveBeenCalledTimes(1);
            expect(cancelSpy).toHaveBeenCalledWith();
          case 14:
          case "end":
            return _context21.stop();
        }
      }, _callee21);
    })));
    it('should call onCancel callback when closed color picker by clicking outside', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee22() {
      var cancelSpy, _render22, driver, addButton;
      return _regenerator["default"].wrap(function _callee22$(_context22) {
        while (1) switch (_context22.prev = _context22.next) {
          case 0:
            cancelSpy = vi.fn();
            _render22 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              onCancel: cancelSpy,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 387,
                columnNumber: 9
              }
            })), driver = _render22.driver;
            _context22.next = 4;
            return driver.getAddButton();
          case 4:
            addButton = _context22.sent;
            _context22.next = 7;
            return addButton.click();
          case 7:
            _context22.next = 9;
            return driver.clickOutsideColorPicker();
          case 9:
            expect(cancelSpy).toHaveBeenCalledTimes(1);
            expect(cancelSpy).toHaveBeenCalledWith();
          case 11:
          case "end":
            return _context22.stop();
        }
      }, _callee22);
    })));
    it('should close color picker when clicking cancel button', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee23() {
      var addSpy, _render23, driver, addButton, colorpicker;
      return _regenerator["default"].wrap(function _callee23$(_context23) {
        while (1) switch (_context23.prev = _context23.next) {
          case 0:
            addSpy = vi.fn();
            _render23 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              onAdd: addSpy,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 401,
                columnNumber: 9
              }
            })), driver = _render23.driver;
            _context23.next = 4;
            return driver.getAddButton();
          case 4:
            addButton = _context23.sent;
            _context23.next = 7;
            return addButton.click();
          case 7:
            _context23.next = 9;
            return driver.getColorPicker();
          case 9:
            colorpicker = _context23.sent;
            _context23.next = 12;
            return colorpicker.selectBlackColor();
          case 12:
            _context23.next = 14;
            return colorpicker.cancel();
          case 14:
            expect(addSpy).not.toHaveBeenCalled();
            _context23.t0 = expect;
            _context23.next = 18;
            return driver.isColorPickerShown();
          case 18:
            _context23.t1 = _context23.sent;
            (0, _context23.t0)(_context23.t1).toBe(false);
          case 20:
          case "end":
            return _context23.stop();
        }
      }, _callee23);
    })));
    it('should accept showClearMessage and show in tooltip', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee24() {
      var message, _render24, driver, addButton;
      return _regenerator["default"].wrap(function _callee24$(_context24) {
        while (1) switch (_context24.prev = _context24.next) {
          case 0:
            message = 'no color selected';
            _render24 = render(/*#__PURE__*/_react["default"].createElement(_Swatches["default"], {
              colors: ['#000000'],
              showAddButton: true,
              addButtonMessage: message,
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 419,
                columnNumber: 9
              }
            })), driver = _render24.driver;
            _context24.next = 4;
            return driver.getAddButton();
          case 4:
            addButton = _context24.sent;
            _context24.t0 = expect;
            _context24.next = 8;
            return addButton.getTooltipText();
          case 8:
            _context24.t1 = _context24.sent;
            (0, _context24.t0)(_context24.t1).toBe(message);
          case 10:
          case "end":
            return _context24.stop();
        }
      }, _callee24);
    })));
  });
});