"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _ColorPicker = _interopRequireDefault(require("../ColorPicker"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
var activate = function activate(slider) {
  return _react.fireEvent.keyUp(slider, {
    keyCode: 13
  });
};
var keyDown = function keyDown(keyCode) {
  return function (slider) {
    return _react.fireEvent.keyDown(slider, {
      keyCode: keyCode
    });
  };
};
var leftKeyDown = keyDown(37);
var rightKeyDown = keyDown(39);
describe('ColorPicker', function () {
  test('should have transitionContainer with `right` class when `direction` is set to  `left`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      direction: "left",
      open: true,
      children: []
    }));
    var actual = _react.screen.getAllByRole('button')[0].nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
    var expected = 'right';
    expect(actual).toHaveClass(expected);
  });
  test('should have transitionContainer with `down` class when `direction` is set to  `up`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      direction: "up",
      open: true,
      children: []
    }));
    var actual = _react.screen.getAllByRole('button')[0].nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
    var expected = 'down';
    expect(actual).toHaveClass(expected);
  });
  test('should have transitionContainer with `up` class when `direction` is set to  `down`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      direction: "down",
      open: true,
      children: []
    }));
    var actual = _react.screen.getAllByRole('button')[0].nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
    var expected = 'up';
    expect(actual).toHaveClass(expected);
  });
  test('should change value when selecting a different color', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleChange = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      onChange: handleChange,
      value: "pink",
      children: ['red', 'blue', 'yellow', 'pink']
    }));

    // First extend color picker
    yield user.click(_react.screen.getAllByRole('button')[0]);
    // Now click on blue color
    yield user.click(_react.screen.getByLabelText('blue'));
    var expected = 'blue';
    var actual = handleChange.mock.calls[0][0].value;
    expect(actual).toBe(expected);
  }));
  test('should change backgroundColor of swatchButton when selecting a different color', /*#__PURE__*/_asyncToGenerator(function* () {
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      children: ['red', 'blue', 'yellow', 'pink']
    }));

    // First extend color picker
    yield user.click(_react.screen.getAllByRole('button')[0]);
    // Now click on blue color
    yield user.click(_react.screen.getByLabelText('blue'));
    var expected = 'blue';
    var actual = _react.screen.getAllByRole('button')[0].children[1].children[0];
    expect(actual).toHaveClass('colorSwatch');
    expect(actual).toHaveStyle({
      'background-color': expected
    });
  }));
  test('should emit an onChange event when changing hue', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleChange = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      onChange: handleChange,
      value: "pink",
      children: ['red', 'blue', 'yellow', 'pink']
    }));

    // First extend color picker
    yield user.click(_react.screen.getAllByRole('button')[0]);
    // Click on the "More" button
    yield user.click(_react.screen.getByLabelText('More'));
    // Focus slider and move it with right key
    activate(_react.screen.getAllByRole('slider')[0]);
    rightKeyDown(_react.screen.getAllByRole('slider')[0]);
    var expected = 1;
    expect(handleChange).toHaveBeenCalledTimes(expected);
  }));
  test('should emit an onChange event when changing saturation', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleChange = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      onChange: handleChange,
      value: "pink",
      children: ['red', 'blue', 'yellow', 'pink']
    }));

    // First extend color picker
    yield user.click(_react.screen.getAllByRole('button')[0]);
    // Click on the "More" button
    yield user.click(_react.screen.getByLabelText('More'));
    // Focus slider and move it with left key
    activate(_react.screen.getAllByRole('slider')[1]);
    leftKeyDown(_react.screen.getAllByRole('slider')[1]);
    var expected = 1;
    expect(handleChange).toHaveBeenCalledTimes(expected);
  }));
  test('should emit an onChange event when changing lightness', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleChange = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      onChange: handleChange,
      value: "pink",
      children: ['red', 'blue', 'yellow', 'pink']
    }));

    // First extend color picker
    yield user.click(_react.screen.getAllByRole('button')[0]);
    // Click on the "More" button
    yield user.click(_react.screen.getByLabelText('More'));
    // Focus slider and move it with right key
    activate(_react.screen.getAllByRole('slider')[2]);
    rightKeyDown(_react.screen.getAllByRole('slider')[2]);
    var expected = 1;
    expect(handleChange).toHaveBeenCalledTimes(expected);
  }));
  test('should close palette on second click on primary swatchButton', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleChange = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      onChange: handleChange,
      value: "pink",
      children: ['red', 'blue', 'yellow', 'pink']
    }));

    // Extend color picker
    yield user.click(_react.screen.getAllByRole('button')[0]);
    var actual = _react.screen.getAllByRole('button')[0].nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
    var expected = 'shown';
    expect(actual).toHaveClass(expected);

    // Hide color picker
    yield user.click(_react.screen.getAllByRole('button')[0]);
    expect(actual).not.toHaveClass(expected);
  }));
  test('should not extend palette when disabled', function () {
    var handleChange = jest.fn();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
      disabled: true,
      onChange: handleChange,
      value: "pink",
      children: ['red', 'blue', 'yellow', 'pink']
    }));

    // Extend color picker
    _userEvent["default"].click(_react.screen.getAllByRole('button')[0]);

    // Query for the color palette
    var colorPalette = _react.screen.queryByRole('group');
    expect(colorPalette).toBeNull();
  });
});