@enact/ui/FloatingLayer/tests/FloatingLayer-specs.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _FloatingLayer = require("../FloatingLayer");
var _FloatingLayerDecorator = _interopRequireDefault(require("../FloatingLayerDecorator"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe('FloatingLayer Specs', function () {
  var Root = (0, _FloatingLayerDecorator["default"])('div');
  test('should not render if FloatingLayer is not open', function () {
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
        "data-testid": "floatingLayer",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: "Hi"
        })
      })
    }));
    var floatingLayerContainer = _react.screen.queryByTestId('floatingLayer');
    expect(floatingLayerContainer).not.toBeInTheDocument();
  });
  test('should render if FloatingLayer is open', function () {
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
        "data-testid": "floatingLayer",
        open: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: "Hi"
        })
      })
    }));
    var floatingLayerContainer = _react.screen.getByTestId('floatingLayer');
    expect(floatingLayerContainer).toBeInTheDocument();
  });
  test('should fire onOpen event with type when FloatingLayer is open', function () {
    var handleOpen = jest.fn();
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
        onOpen: handleOpen,
        open: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: "Hi"
        })
      })
    }));
    var expected = 1;
    var expectedType = {
      type: 'onOpen'
    };
    var actual = handleOpen.mock.calls.length && handleOpen.mock.calls[0][0];
    expect(handleOpen).toBeCalledTimes(expected);
    expect(actual).toMatchObject(expectedType);
  });
  test('should fire onClose event with type when FloatingLayer is closed', function () {
    var handleClose = jest.fn();
    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
          onClose: handleClose,
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
            children: "Hi"
          })
        })
      })),
      rerender = _render.rerender;
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
        onClose: handleClose,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: "Hi"
        })
      })
    }));
    var expectedType = {
      type: 'onClose'
    };
    var actual = handleClose.mock.calls.length && handleClose.mock.calls[0][0];
    expect(actual).toMatchObject(expectedType);
  });
  test('should fire onDismiss event with type and detail info when FloatingLayer is closed', function () {
    var handleDismiss = jest.fn();
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayer, {
        onDismiss: handleDismiss,
        open: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: "Hi"
        })
      })
    }));
    _react.fireEvent.keyUp(_react.screen.getByText('Hi'), {
      keyCode: 27
    });
    var expectedType = {
      type: 'onDismiss',
      detail: {
        inputType: 'key'
      }
    };
    var actual = handleDismiss.mock.calls.length && handleDismiss.mock.calls[0][0];
    expect(actual).toMatchObject(expectedType);
  });
});