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

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

"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Scroller = _interopRequireDefault(require("../Scroller"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var focus = function focus(elm) {
  return _react.fireEvent.focus(elm);
};
var keyDownUp = function keyDownUp(keyCode) {
  return function (elm) {
    _react.fireEvent.keyDown(elm, {
      keyCode: keyCode
    });
    return _react.fireEvent.keyUp(elm, {
      keyCode: keyCode
    });
  };
};
var pressEnterKey = keyDownUp(14);
var pressDownKey = keyDownUp(40);
describe('Scroller', function () {
  var contents;
  beforeEach(function () {
    contents = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      children: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt. Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus."]
    });
  });
  afterEach(function () {
    contents = null;
  });
  describe('Scrollbar visibility', function () {
    test('should render both horizontal and vertical scrollbars when \'horizontalScrollbar\' and \'verticalScrollbar\' are "visible"', function () {
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
        horizontalScrollbar: "visible",
        verticalScrollbar: "visible",
        children: contents
      }));
      var verticalScrollbar = _react.screen.getByLabelText('scroll up or down with up down button');
      var horizontalScrollbar = _react.screen.getByLabelText('scroll left or right with left right button');
      expect(verticalScrollbar).toBeInTheDocument();
      expect(horizontalScrollbar).toBeInTheDocument();
    });
    test('should render only vertical scrollbar when \'verticalScrollbar\' is "visible" and \'horizontalScrollbar\' is "hidden"', function () {
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
        horizontalScrollbar: "hidden",
        verticalScrollbar: "visible",
        children: contents
      }));
      var verticalScrollbar = _react.screen.getByLabelText('scroll up or down with up down button');
      var horizontalScrollbar = _react.screen.queryByLabelText('scroll left or right with left right button');
      expect(verticalScrollbar).toBeInTheDocument();
      expect(horizontalScrollbar).toBeNull();
    });
    test('should not render any scrollbar when \'horizontalScrollbar\' and \'verticalScrollbar\' are "hidden"', function () {
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
        horizontalScrollbar: "hidden",
        verticalScrollbar: "hidden",
        children: contents
      }));
      var verticalScrollbar = _react.screen.queryByLabelText('scroll up or down with up down button');
      var horizontalScrollbar = _react.screen.queryByLabelText('scroll left or right with left right button');
      expect(verticalScrollbar).toBeNull();
      expect(horizontalScrollbar).toBeNull();
    });
  });
  describe('focusable Scrollbar', function () {
    test('should have focuable body and thumb when \'focusableScrollbar\' is "byEnter"', function () {
      var id = 'scroller';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
        "data-testid": id,
        focusableScrollbar: "byEnter",
        verticalScrollbar: "visible",
        children: contents
      }));
      var scroller = _react.screen.getByTestId(id);
      var scrollBody = scroller.children.item(0);
      var verticalScrollbar = _react.screen.getByLabelText("scroll up or down with up down button press ok button to read text");
      var expected = "spottable";

      // dispatching key event to increase code coverage
      focus(verticalScrollbar);
      pressDownKey(verticalScrollbar);
      pressEnterKey(verticalScrollbar);
      expect(scrollBody).toHaveClass(expected);
      expect(verticalScrollbar).toHaveClass(expected);
    });
    test('should have focuable scroll thumb when \'focusableScrollbar\' is true', function () {
      var id = 'scroller';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
        "data-testid": id,
        focusableScrollbar: true,
        verticalScrollbar: "visible",
        children: contents
      }));
      var scroller = _react.screen.getByTestId(id);
      var scrollBody = scroller.children.item(0);
      var verticalScrollbar = _react.screen.getByLabelText("scroll up or down with up down button");
      var expected = "spottable";
      expect(scrollBody).not.toHaveClass(expected);
      expect(verticalScrollbar).toHaveClass(expected);
    });
  });
  describe('Scrollbar accessibility', function () {
    test('should set a custom "aria-label" to the scroll thumb in the horizontal scroll bar', function () {
      var label = 'custom button aria label';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
        horizontalScrollbar: "visible",
        horizontalScrollThumbAriaLabel: label,
        verticalScrollbar: "visible",
        children: contents
      }));
      var horizontalScrollbarLabel = _react.screen.getByLabelText(label);
      var horizontalScrollbar = _react.screen.getByLabelText(label).parentElement.parentElement;
      expect(horizontalScrollbarLabel).toBeInTheDocument();
      expect(horizontalScrollbar).toHaveClass('horizontal');
    });
    test('should set a custom "aria-label" to the scroll thumb in the vertical scroll bar', function () {
      var label = 'custom button aria label';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
        horizontalScrollbar: "visible",
        verticalScrollThumbAriaLabel: label,
        verticalScrollbar: "visible",
        children: contents
      }));
      var verticalScrollbarLabel = _react.screen.getByLabelText(label);
      var verticalScrollbar = _react.screen.getByLabelText(label).parentElement.parentElement;
      expect(verticalScrollbarLabel).toBeInTheDocument();
      expect(verticalScrollbar).toHaveClass('vertical');
    });
    test('should set a null string "aria-label" to the scroll thumb in the horizontal scroll bar', function () {
      var label = '';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
        horizontalScrollbar: "visible",
        horizontalScrollThumbAriaLabel: label,
        verticalScrollbar: "visible",
        children: contents
      }));
      var horizontalScrollbarLabel = _react.screen.getByLabelText(label);
      var horizontalScrollbar = _react.screen.getByLabelText(label).parentElement.parentElement;
      expect(horizontalScrollbarLabel).toBeInTheDocument();
      expect(horizontalScrollbar).toHaveClass('horizontal');
    });
    test('should set a null string "aria-label" to the scroll thumb in the vertical scroll bar', function () {
      var label = '';
      (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
        horizontalScrollbar: "visible",
        verticalScrollThumbAriaLabel: label,
        verticalScrollbar: "visible",
        children: contents
      }));
      var verticalScrollbarLabel = _react.screen.getByLabelText(label);
      var verticalScrollbar = _react.screen.getByLabelText(label).parentElement.parentElement;
      expect(verticalScrollbarLabel).toBeInTheDocument();
      expect(verticalScrollbar).toHaveClass('vertical');
    });
  });
});