"use strict";

var _FloatingLayer = require("@enact/ui/FloatingLayer");
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Button = _interopRequireDefault(require("../../Button"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _TooltipDecorator = _interopRequireDefault(require("../TooltipDecorator"));
var _TooltipLabel = _interopRequireDefault(require("../TooltipLabel"));
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 FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var TooltipButton = (0, _TooltipDecorator["default"])(_Button["default"]);
describe('TooltipDecorator Specs', function () {
  describe('TooltipLabel', function () {
    test('should apply alignment when `centered` and `marquee`', function () {
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel["default"], {
        centered: true,
        marquee: true,
        children: "Label"
      }));
      var expected = 'center';
      var actual = _react.screen.getByText('Label');
      expect(actual).toHaveStyle({
        'text-align': expected
      });
    });
    test('should not apply alignment when `centered` but not `marquee`', function () {
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel["default"], {
        centered: true,
        children: "Label"
      }));
      var unexpected = 'center';
      var actual = _react.screen.getByText('Label');
      expect(actual).not.toHaveStyle({
        'text-align': unexpected
      });
    });
    test('should not apply `text-align: center` style when `centered=false`', function () {
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel["default"], {
        centered: false,
        children: "Label"
      }));
      var expected = 'center';
      var actual = _react.screen.getByText('Label');
      expect(actual).not.toHaveStyle({
        'text-align': expected
      });
    });
  });
  describe('TooltipDecorator', function () {
    beforeEach(function () {
      global.Element.prototype.getBoundingClientRect = jest.fn(function () {
        return {
          width: 501,
          height: 501,
          top: 99,
          left: 99,
          bottom: 0,
          right: 0
        };
      });
    });
    test('should render component into FloatingLayer if open', function () {
      var tooltipText = 'This is a tooltip';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
          "data-testid": "floatingLayer",
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
            children: tooltipText
          })
        })
      }));
      var expected = tooltipText;
      var actual = _react.screen.getByTestId('floatingLayer');
      expect(actual).toHaveTextContent(expected);
    });
    test('should not render component into FloatingLayer if not open', function () {
      var tooltipText = 'This is a tooltip';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
          "data-testid": "floatingLayer",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
            children: tooltipText
          })
        })
      }));
      var actual = _react.screen.queryByText(tooltipText);
      expect(actual).toBeNull();
    });
    test('should have `above` class when `direction=above`', function () {
      var tooltipText = 'This is a tooltip';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
            "data-testid": "tooltip",
            direction: "above",
            children: tooltipText
          })
        })
      }));
      var expected = 'above';
      var actual = _react.screen.getByTestId('tooltip');
      expect(actual).toHaveClass(expected);
    });
    test('should have `below` class when `direction=below`', function () {
      var tooltipText = 'This is a tooltip';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
            "data-testid": "tooltip",
            direction: "below",
            children: tooltipText
          })
        })
      }));
      var expected = 'below';
      var actual = _react.screen.getByTestId('tooltip');
      expect(actual).toHaveClass(expected);
    });
    test('should have `left` class when `direction=left`', function () {
      var tooltipText = 'This is a tooltip';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
            "data-testid": "tooltip",
            direction: "left",
            children: tooltipText
          })
        })
      }));
      var expected = 'left';
      var actual = _react.screen.getByTestId('tooltip');
      expect(actual).toHaveClass(expected);
    });
    test('should have `right` class when `direction=right`', function () {
      var tooltipText = 'This is a tooltip';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
            "data-testid": "tooltip",
            direction: "right",
            children: tooltipText
          })
        })
      }));
      var expected = 'right';
      var actual = _react.screen.getByTestId('tooltip');
      expect(actual).toHaveClass(expected);
    });
    test('should render a tooltip if hovered', /*#__PURE__*/_asyncToGenerator(function* () {
      var tooltipText = 'Tooltip';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
          tooltipDelay: 0,
          tooltipText: tooltipText,
          children: "Label"
        })
      }));
      var button = _react.screen.getByRole('button');
      (0, _react.act)(function () {
        return button.focus();
      });
      _react.fireEvent.mouseOver(button);
      yield (0, _react.waitFor)(function () {
        expect(_react.screen.getByText('Tooltip')).toBeInTheDocument();
      });
    }));
    test('should hide tooltip if not hovered', /*#__PURE__*/_asyncToGenerator(function* () {
      var tooltipText = 'Tooltip';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
          tooltipDelay: 0,
          tooltipText: tooltipText,
          children: "Label"
        })
      }));
      var button = _react.screen.getByRole('button');
      (0, _react.act)(function () {
        return button.focus();
      });
      _react.fireEvent.mouseOver(button);
      yield (0, _react.waitFor)(function () {
        expect(_react.screen.getByText('Tooltip')).toBeInTheDocument();
      });
      (0, _react.act)(function () {
        return button.blur();
      });
      _react.fireEvent.mouseOut(button);
      yield (0, _react.waitFor)(function () {
        expect(_react.screen.queryByText('Tooltip')).not.toBeInTheDocument();
      });
    }));
    test('should render a tooltip if hovered for `tooltipRelative`', /*#__PURE__*/_asyncToGenerator(function* () {
      console.error = jest.fn(); // eslint-disable-line no-console
      var tooltipText = 'Tooltip';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
          tooltipDelay: 0,
          tooltipRelative: true,
          tooltipText: tooltipText,
          children: "Label"
        })
      }));
      var button = _react.screen.getByRole('button');
      (0, _react.act)(function () {
        return button.focus();
      });
      _react.fireEvent.mouseOver(button);
      yield (0, _react.waitFor)(function () {
        expect(_react.screen.getByText('Tooltip')).toBeInTheDocument();
      });
    }));
    describe('Tooltip position', function () {
      test('should have `above` className when tooltipPosition is set to `above`', /*#__PURE__*/_asyncToGenerator(function* () {
        var tooltipText = 'Tooltip';
        (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
            tooltipDelay: 0,
            tooltipPosition: "above",
            tooltipText: tooltipText,
            children: "Label"
          })
        }));
        var button = _react.screen.getByRole('button');
        button.getBoundingClientRect = jest.fn(function () {
          return {
            width: 300,
            height: 300,
            top: 600,
            left: 600,
            bottom: 0,
            right: 0
          };
        });
        (0, _react.act)(function () {
          return button.focus();
        });
        _react.fireEvent.mouseOver(button);
        yield (0, _react.waitFor)(function () {
          var tooltipArrow = _react.screen.getByText('Tooltip').parentElement.parentElement;
          var expected = 'tooltip above';
          expect(tooltipArrow).toHaveClass(expected);
        });
      }));
      test('should have `below` className when tooltipPosition is set to `below`', /*#__PURE__*/_asyncToGenerator(function* () {
        var tooltipText = 'Tooltip';
        (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
            tooltipDelay: 0,
            tooltipPosition: "below",
            tooltipText: tooltipText,
            children: "Label"
          })
        }));
        var button = _react.screen.getByRole('button');
        button.getBoundingClientRect = jest.fn(function () {
          return {
            width: 300,
            height: 300,
            top: 600,
            left: 600,
            bottom: 0,
            right: 0
          };
        });
        (0, _react.act)(function () {
          return button.focus();
        });
        _react.fireEvent.mouseOver(button);
        yield (0, _react.waitFor)(function () {
          var tooltipArrow = _react.screen.getByText('Tooltip').parentElement.parentElement;
          var expected = 'tooltip below';
          expect(tooltipArrow).toHaveClass(expected);
        });
      }));
      test('should have `left middle` className when tooltipPosition is set to `left middle`', /*#__PURE__*/_asyncToGenerator(function* () {
        var tooltipText = 'Tooltip';
        (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
            tooltipDelay: 0,
            tooltipPosition: "left middle",
            tooltipText: tooltipText,
            children: "Label"
          })
        }));
        var button = _react.screen.getByRole('button');
        (0, _react.act)(function () {
          return button.focus();
        });
        _react.fireEvent.mouseOver(button);
        yield (0, _react.waitFor)(function () {
          var tooltipArrow = _react.screen.getByText('Tooltip').parentElement.parentElement;
          var expected = 'tooltip left middleArrow';
          expect(tooltipArrow).toHaveClass(expected);
        });
      }));
      test('should have `right middle` className when tooltipPosition is set to `right middle`', /*#__PURE__*/_asyncToGenerator(function* () {
        var tooltipText = 'Tooltip';
        (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
            tooltipDelay: 0,
            tooltipPosition: "right middle",
            tooltipText: tooltipText,
            children: "Label"
          })
        }));
        var button = _react.screen.getByRole('button');
        (0, _react.act)(function () {
          return button.focus();
        });
        _react.fireEvent.mouseOver(button);
        yield (0, _react.waitFor)(function () {
          var tooltipArrow = _react.screen.getByText('Tooltip').parentElement.parentElement;
          var expected = 'tooltip right middleArrow';
          expect(tooltipArrow).toHaveClass(expected);
        });
      }));
      test('should have `above centerArrow` className when tooltipPosition is set to `left`', /*#__PURE__*/_asyncToGenerator(function* () {
        var tooltipText = 'Tooltip';
        (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
            tooltipDelay: 0,
            tooltipPosition: "left",
            tooltipText: tooltipText,
            children: "Label"
          })
        }));
        var button = _react.screen.getByRole('button');
        button.getBoundingClientRect = jest.fn(function () {
          return {
            width: 300,
            height: 300,
            top: 600,
            left: 600,
            bottom: 0,
            right: 0
          };
        });
        (0, _react.act)(function () {
          return button.focus();
        });
        _react.fireEvent.mouseOver(button);
        yield (0, _react.waitFor)(function () {
          var tooltipArrow = _react.screen.getByText('Tooltip').parentElement.parentElement;
          var expected = 'tooltip above centerArrow';
          expect(tooltipArrow).toHaveClass(expected);
        });
      }));
    });
  });
});