"use strict";

var _pointer = require("@enact/spotlight/src/pointer");
var _FloatingLayer = require("@enact/ui/FloatingLayer");
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _Button = _interopRequireDefault(require("../../Button"));
var _ContextualPopupDecorator = require("../ContextualPopupDecorator");
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 ContextualButton = (0, _ContextualPopupDecorator.ContextualPopupDecorator)(_Button["default"]);
var keyDown = function keyDown(keyCode) {
  return function (picker) {
    return _react.fireEvent.keyDown(picker, {
      keyCode: keyCode
    });
  };
};
var leftKeyDown = keyDown(37);
describe('ContextualPopupDecorator Specs', function () {
  beforeEach(function () {
    global.Element.prototype.getBoundingClientRect = jest.fn(function () {
      return {
        width: 1800,
        height: 1000,
        top: 500,
        left: 500,
        bottom: 0,
        right: 0
      };
    });
  });
  test('should emit onOpen event with type when opening', function () {
    var handleOpen = jest.fn();
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        onOpen: handleOpen,
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var expected = 1;
    var expectedType = {
      type: 'onOpen'
    };
    var actual = handleOpen.mock.calls.length && handleOpen.mock.calls[0][0];
    expect(handleOpen).toHaveBeenCalledTimes(expected);
    expect(actual).toMatchObject(expectedType);
  });
  test('should emit onClose event when clicking on contextual button', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleClose = jest.fn();
    var user = _userEvent["default"].setup();
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        onClose: handleClose,
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualButton = _react.screen.getByRole('button');
    yield user.click(contextualButton);
    expect(handleClose).toHaveBeenCalled();
  }));
  test('should render component into FloatingLayer if open', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = message;
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveTextContent(expected);
  });
  test('should not render into FloatingLayer if not open', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var popup = _react.screen.queryByText(message);
    expect(popup).toBeNull();
  });
  test('should show close button if `showCloseButton` is set to true', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        showCloseButton: true,
        children: "Hello"
      })
    }));
    var button = _react.screen.getAllByRole('button')[1];
    var expected = 'closeButton';
    expect(button).toHaveClass(expected);
  });
  test('should not close popup when clicking outside if noAutoDismiss is true', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleClose = jest.fn();
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      "data-testid": "outsideArea",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        noAutoDismiss: true,
        onClose: handleClose,
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var outsideArea = _react.screen.getByTestId('outsideArea');
    yield user.click(outsideArea);
    expect(handleClose).not.toHaveBeenCalled();
  }));
  test('should have `below` className when direction is set to `below`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "below",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'below';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `below center` className when direction is set to `below center`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "below center",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'below center';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `below left` className when direction is set to `below left`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "below left",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'below left';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `below right` className when direction is set to `below right`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "below right",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'below right';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `right bottom` className when direction is set to `right bottom`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "right bottom",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'right bottom';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `right middle` className when direction is set to `right middle`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "right middle",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'right middle';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `right top` className when direction is set to `right top`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "right top",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'right top';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `above` className when direction is set to `above`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "above",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'above';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `above center` className when direction is set to `above center`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "above center",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'above center';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `above left` className when direction is set to `above left`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "above left",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'above left';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `above right` className when direction is set to `above right`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "above right",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'above right';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `left bottom` className when direction is set to `left bottom`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "left bottom",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'left bottom';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `left middle` className when direction is set to `left middle`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "left middle",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'left middle';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  test('should have `left top` className when direction is set to `left top`', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var message = 'goodbye';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        direction: "left top",
        open: true,
        popupComponent: function popupComponent() {
          return message;
        },
        children: "Hello"
      })
    }));
    var contextualPopup = _react.screen.getByRole('alert');
    var expected = 'left top';
    var actual = contextualPopup.children.item(0);
    expect(actual).toHaveClass(expected);
  });
  describe('with overflow', function () {
    beforeEach(function () {
      global.Element.prototype.getBoundingClientRect = jest.fn(function () {
        return {
          width: 501,
          height: 501,
          top: 0,
          left: 99,
          bottom: 0,
          right: 0
        };
      });
    });
    test('should have `below` className when direction is set to `above` but popup overflows', function () {
      var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
      var message = 'goodbye';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
          direction: "above",
          open: true,
          popupComponent: function popupComponent() {
            return message;
          },
          children: "Hello"
        })
      }));
      var contextualPopup = _react.screen.getByRole('alert');
      var expected = 'below';
      var actual = contextualPopup.children.item(0);
      expect(actual).toHaveClass(expected);
    });
  });
  describe('with rtl', function () {
    test('should have `right` style when `rtl` prop is true and direction is `above left`', function () {
      var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
      var message = 'goodbye';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
          direction: "above left",
          open: true,
          popupComponent: function popupComponent() {
            return message;
          },
          rtl: true,
          children: "Hello"
        })
      }));
      var expected = {
        'right': '480px'
      };
      var actual = _react.screen.getByRole('alert').children[0];
      expect(actual).toHaveStyle(expected);
    });
  });
  test('should set pointerMode to be false when directional key is pressed', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        open: true,
        popupComponent: function popupComponent() {
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
              children: "first"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
              children: "second"
            })]
          });
        },
        children: "Hello"
      })
    }));
    var contextualButton = _react.screen.getByRole('alert');
    leftKeyDown(contextualButton);
    var expected = false;
    var pointerMode = (0, _pointer.getPointerMode)();
    expect(pointerMode).toBe(expected);
  });
  test('should close popup if prop `open` is omitted on rerender', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
          open: true,
          popupComponent: function popupComponent() {
            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
                children: "first"
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
                children: "second"
              })]
            });
          },
          children: "Hello"
        })
      })),
      rerender = _render.rerender;
    var firstRender = _react.screen.getAllByRole('button').length;
    var expectedFirst = 3;
    rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        popupComponent: function popupComponent() {
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
              children: "first"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
              children: "second"
            })]
          });
        },
        children: "Hello"
      })
    }));
    var secondRender = _react.screen.getAllByRole('button').length;
    var expectedSecond = 1;
    expect(firstRender).toBe(expectedFirst);
    expect(secondRender).toBe(expectedSecond);
  });
  test('should open popup if prop `open` is added on rerender', function () {
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
          popupComponent: function popupComponent() {
            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
                children: "first"
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
                children: "second"
              })]
            });
          },
          children: "Hello"
        })
      })),
      rerender = _render2.rerender;
    var firstRender = _react.screen.getAllByRole('button').length;
    var expectedFirst = 1;
    rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        open: true,
        popupComponent: function popupComponent() {
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
              children: "first"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
              children: "second"
            })]
          });
        },
        children: "Hello"
      })
    }));
    var secondRender = _react.screen.getAllByRole('button').length;
    var expectedSecond = 3;
    expect(firstRender).toBe(expectedFirst);
    expect(secondRender).toBe(expectedSecond);
  });
  test('should capture `onKeyDown` event from outside of popup', function () {
    var handleOnKeyDown = jest.fn();
    var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
        onKeyDown: handleOnKeyDown,
        open: true,
        popupComponent: function popupComponent() {
          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
              children: "first"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
              children: "second"
            })]
          });
        },
        children: "Hello"
      })
    }));
    var button = _react.screen.getAllByRole('button')[0];
    leftKeyDown(button);
    expect(handleOnKeyDown).toHaveBeenCalled();
  });
});