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

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

"use strict";

var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
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); }); }; }
describe('QuickGuidePanels Specs', function () {
  test('should hide next button on the last view', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
      index: 2,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents2"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "Last!"
      })]
    }));
    var buttons = _react.screen.getAllByRole('button');
    var expected = 2;
    var actual = buttons.length;
    expect(actual).toBe(expected);
    expect(buttons[0]).toHaveAttribute('aria-label', 'Exit Quick Guide');
    expect(buttons[1]).toHaveAttribute('aria-label', 'Previous');
  });
  test('should hide previous button on the first view', /*#__PURE__*/_asyncToGenerator(function* () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
      index: 0,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents2"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "Last!"
      })]
    }));
    var buttons = _react.screen.getAllByRole('button');
    var expected = 2;
    var actual = buttons.length;
    expect(actual).toBe(expected);
    expect(buttons[0]).toHaveAttribute('aria-label', 'Exit Quick Guide');
    expect(buttons[1]).toHaveAttribute('aria-label', 'Next');
  }));
  test('should show next button on the first view', /*#__PURE__*/_asyncToGenerator(function* () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
      index: 0,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents2"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "Last!"
      })]
    }));
    var nextButton = _react.screen.getByLabelText('Next');
    yield (0, _react.waitFor)(function () {
      expect(nextButton).toBeInTheDocument();
    });
  }));
  test('should fire `onWillTransition` with target index and type in pointer mode', /*#__PURE__*/_asyncToGenerator(function* () {
    var spy = jest.fn();
    var index = 0;
    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
        index: index,
        onWillTransition: spy,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
          children: "I gots contents"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
          children: "I gots contents2"
        })]
      })),
      rerender = _render.rerender;
    spy.mockClear();
    index++;
    rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
      index: index,
      onWillTransition: spy,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents2"
      })]
    }));
    var expected = {
      index: index,
      type: 'onWillTransition'
    };
    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
    yield (0, _react.waitFor)(function () {
      expect(actual).toMatchObject(expected);
    });
  }));
  test('should fire `onWillTransition` with target index and type in 5-way mode', /*#__PURE__*/_asyncToGenerator(function* () {
    _spotlight["default"].setPointerMode(false);
    var spy = jest.fn();
    var index = 0;
    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
        index: index,
        onWillTransition: spy,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
          children: "I gots contents"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
          children: "I gots contents2"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
          children: "I gots contents3"
        })]
      })),
      rerender = _render2.rerender;
    spy.mockClear();
    var nextButton = _react.screen.getByLabelText('Next');
    _spotlight["default"].focus(nextButton);
    index++;
    rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
      index: index,
      onWillTransition: spy,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents2"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents3"
      })]
    }));
    var expected = {
      index: index,
      type: 'onWillTransition'
    };
    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
    yield (0, _react.waitFor)(function () {
      expect(actual).toMatchObject(expected);
    });
  }));
  test('should fire `onTransition` with target index and type', /*#__PURE__*/_asyncToGenerator(function* () {
    var spy = jest.fn();
    var index = 0;
    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
        index: index,
        onTransition: spy,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
          children: "I gots contents"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
          children: "I gots contents2"
        })]
      })),
      rerender = _render3.rerender;
    spy.mockClear();
    index++;
    rerender( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
      index: index,
      onTransition: spy,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
        children: "I gots contents2"
      })]
    }));
    var expected = {
      index: index,
      type: 'onTransition'
    };
    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
    yield (0, _react.waitFor)(function () {
      expect(actual).toMatchObject(expected);
    });
  }));
  test('should fire `onNextClick` and `onChange` with type when go to the next panel', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleChange = jest.fn();
    var handleNextClick = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
      index: 1,
      onChange: handleChange,
      onNextClick: handleNextClick,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
    }));
    var nextButton = _react.screen.getByLabelText('Next');
    var expected = {
      type: 'onNextClick'
    };
    yield user.click(nextButton);
    yield (0, _react.waitFor)(function () {
      expect(handleChange).toBeCalledWith({
        index: 2,
        type: 'onChange'
      });
    });
    yield (0, _react.waitFor)(function () {
      var actual = handleNextClick.mock.calls.length && handleNextClick.mock.calls[0][0];
      expect(actual).toMatchObject(expected);
    });
  }));
  test('should fire `onPrevClick` and `onChange` with type when go to the previous panel', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleChange = jest.fn();
    var handlePrevClick = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
      index: 2,
      onChange: handleChange,
      onPrevClick: handlePrevClick,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
    }));
    var prevButton = _react.screen.getByLabelText('Previous');
    var expected = {
      type: 'onPrevClick'
    };
    yield user.click(prevButton);
    yield (0, _react.waitFor)(function () {
      expect(handleChange).toBeCalledWith({
        index: 1,
        type: 'onChange'
      });
    });
    yield (0, _react.waitFor)(function () {
      var actual = handlePrevClick.mock.calls.length && handlePrevClick.mock.calls[0][0];
      expect(actual).toMatchObject(expected);
    });
  }));
  test('should return a ref to the root Panel node', function () {
    var ref = jest.fn();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.QuickGuidePanels, {
      ref: ref,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
    }));
    var expected = 'ARTICLE';
    var actual = ref.mock.calls[0][0].nodeName;
    expect(actual).toBe(expected);
  });
  test('should fire `onClose` when close button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
    var handleClose = jest.fn();
    var user = _userEvent["default"].setup();
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.QuickGuidePanels, {
      onClose: handleClose,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
    }));
    var closeButton = _react.screen.getByLabelText('Exit Quick Guide');
    var expected = {
      type: 'onClose'
    };
    yield user.click(closeButton);
    yield (0, _react.waitFor)(function () {
      var actual = handleClose.mock.calls.length && handleClose.mock.calls[0][0];
      expect(actual).toMatchObject(expected);
    });
  }));
});