@enact/sandstone/FlexiblePopupPanels/tests/FlexiblePopupPanels-specs.js

Large-screen/TV support library for Enact, containing a variety of UI components.

"use strict";

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 _ = require("../");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
describe('FlexiblePopupPanels Specs', function () {
  test('should hide previous and next buttons when there is only one panel', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FlexiblePopupPanels, {
        open: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
      })
    }));
    var actual = _react.screen.queryByRole('button');
    expect(actual).toBeNull();
  });
  test('should show previous and next buttons when there is more than one panel', function () {
    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
          open: true,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
        })
      })),
      unmount = _render.unmount;
    var expected = 2;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should show previous button when using `prevButton` on the only panel', function () {
    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FlexiblePopupPanels, {
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
            prevButton: true
          })
        })
      })),
      unmount = _render2.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should show previous button when using `nextButton` on the only panel', function () {
    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FlexiblePopupPanels, {
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
            nextButton: true
          })
        })
      })),
      unmount = _render3.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should hide previous button on all panels when `prevButtonVisibility` is set to "never"', function () {
    var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
          prevButtonVisibility: "never",
          open: true,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
        })
      })),
      unmount = _render4.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should hide next button on all panels when `nextButtonVisibility` is set to "never"', function () {
    var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
          nextButtonVisibility: "never",
          open: true,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
        })
      })),
      unmount = _render5.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should show previous button on the only panel when `prevButtonVisibility` set to "always"', function () {
    var _render6 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FlexiblePopupPanels, {
          prevButtonVisibility: "always",
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
        })
      })),
      unmount = _render6.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should show next button on the only panel when `nextButtonVisibility` set to "always"', function () {
    var _render7 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FlexiblePopupPanels, {
          nextButtonVisibility: "always",
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
        })
      })),
      unmount = _render7.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should hide previous button on panels that override using `prevButton={false}`', function () {
    var _render8 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
          index: 1,
          open: true,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
            prevButton: false
          })]
        })
      })),
      unmount = _render8.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should hide next button on panels that override using `nextButton={false}`', function () {
    var _render9 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
          index: 0,
          open: true,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
            nextButton: false
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
        })
      })),
      unmount = _render9.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should hide previous button when `prevButtonVisibility` prop is set to always and panel overrides using `prevButton={false}`', function () {
    var _render10 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
          index: 1,
          prevButtonVisibility: "always",
          open: true,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
            prevButton: false
          })]
        })
      })),
      unmount = _render10.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should hide next button when `nextButtonVisibility` prop is set to always and panel overrides using `nextButton={false}`', function () {
    var _render11 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
          index: 0,
          nextButtonVisibility: "always",
          open: true,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
            nextButton: false
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
        })
      })),
      unmount = _render11.unmount;
    var expected = 1;
    var actual = _react.screen.getAllByRole('button').length;
    unmount();
    expect(actual).toBe(expected);
  });
  test('should fire `onNextClick` and `onChange` with each type in it when the next button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleNextClick = jest.fn();
    var handleChange = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
        open: true,
        onNextClick: handleNextClick,
        onChange: handleChange,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
      })
    }));
    yield user.click(_react.screen.getByLabelText('Next'));
    var nextClickExpected = {
      type: 'onNextClick'
    };
    var changeExpected = {
      type: 'onChange'
    };
    yield (0, _react.waitFor)(function () {
      var nextClickActual = handleNextClick.mock.calls.length && handleNextClick.mock.calls[0][0];
      expect(nextClickActual).toMatchObject(nextClickExpected);
    });
    yield (0, _react.waitFor)(function () {
      var changeActual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
      expect(changeActual).toMatchObject(changeExpected);
    });
  }));
  test('should fire `onPrevClick` with type `onPrevClick` when the previous button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
    var handlePrevClick = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
        open: true,
        onPrevClick: handlePrevClick,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
      })
    }));
    yield user.click(_react.screen.getByLabelText('Previous'));
    var expected = {
      type: 'onPrevClick'
    };
    yield (0, _react.waitFor)(function () {
      var actual = handlePrevClick.mock.calls.length && handlePrevClick.mock.calls[0][0];
      expect(actual).toMatchObject(expected);
    });
  }));
  test('should close on back key when on first panel', function () {
    var map = {};
    window.addEventListener = jest.fn(function (event, cb) {
      map[event] = cb;
    });
    var spy = jest.fn();
    var _render12 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FlexiblePopupPanels, {
          index: 0,
          onClose: spy,
          open: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
        })
      })),
      unmount = _render12.unmount;
    map.keyup({
      type: 'keyup',
      currentTarget: window,
      keyCode: 27
    });
    var expectedEvent = {
      type: 'onClose'
    };
    var actualEvent = spy.mock.calls.length && spy.mock.calls[0][0];
    unmount();
    expect(spy).toHaveBeenCalled();
    expect(actualEvent).toMatchObject(expectedEvent);
  });
  test('should go back on back key when not on first panel', function () {
    var map = {};
    window.addEventListener = jest.fn(function (event, cb) {
      map[event] = cb;
    });
    var spy = jest.fn();
    var _render13 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.FlexiblePopupPanels, {
          index: 1,
          onBack: spy,
          open: true,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
        })
      })),
      unmount = _render13.unmount;
    map.keyup({
      type: 'keyup',
      currentTarget: window,
      keyCode: 27
    });
    var expectedEvent = {
      type: 'onBack'
    };
    var actualEvent = spy.mock.calls.length && spy.mock.calls[0][0];
    unmount();
    expect(spy).toHaveBeenCalled();
    expect(actualEvent).toMatchObject(expectedEvent);
  });
  test('should correctly assign the fullHeight class', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FlexiblePopupPanels, {
        "data-testid": "flexiblePopupPanels",
        fullHeight: true,
        open: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
      })
    }));
    var expected = 'fullHeight';
    var actual = _react.screen.getByTestId('flexiblePopupPanels').parentElement.parentElement;
    expect(actual).toHaveClass(expected);
  });
});