@elissaioskon/scrollable-list/dist/components/tests/index.test.js

Scroll to an element within a list easily 😃

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@testing-library/react");

var _ = require("../..");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/* eslint-disable-next-line react/prop-types */
var ListContainer = function ListContainer(_ref) {
  var children = _ref.children;
  return _react["default"].createElement("div", {
    style: {
      height: '300px',
      overflow: 'auto'
    }
  }, children);
};
/* eslint-disable-next-line react/prop-types */


var ListItem = function ListItem(_ref2) {
  var children = _ref2.children;
  return _react["default"].createElement("div", {
    style: {
      height: '150px'
    }
  }, children);
};

var items = [0, 1, 2, 3, 4, 5, 6, 7];

var App = _react["default"].forwardRef(function (props, ref) {
  return _react["default"].createElement(_.ScrollView, {
    ref: ref
  }, _react["default"].createElement(ListContainer, null, items.map(function (item) {
    return _react["default"].createElement(_.ScrollableElement, {
      index: item,
      key: item
    }, _react["default"].createElement(ListItem, null, "Item:", item));
  })));
});

describe('Scrollable-list library', function () {
  // ScrollIntoView is not implemented in JSdom so we need to mock it.
  window.HTMLElement.prototype.scrollIntoView = jest.fn();
  it('should scroll to appropriate list item and should call cb when scroll.toIndex is called', function () {
    var scrollViewRef = _react["default"].createRef();

    var cb = jest.fn();
    var indexToScroll = 2;
    (0, _react2.render)(_react["default"].createElement(App, {
      ref: scrollViewRef
    }));
    scrollViewRef.current.scroll.toIndex(indexToScroll, cb);
    expect(scrollViewRef.current.registeredElements[indexToScroll].scrollIntoView).toHaveBeenCalledTimes(1);
    expect(cb).toHaveBeenNthCalledWith(1, indexToScroll);
  });
  it('should scroll to next list item and should call cb when scroll.toNextItem is called', function () {
    var scrollViewRef = _react["default"].createRef();

    var cb = jest.fn();
    (0, _react2.render)(_react["default"].createElement(App, {
      ref: scrollViewRef
    }));
    scrollViewRef.current.scroll.toNextItem(0, cb);
    expect(scrollViewRef.current.registeredElements[1].scrollIntoView).toHaveBeenCalledTimes(1);
    expect(cb).toHaveBeenNthCalledWith(1, 1);
  });
  it("should not scroll when scroll.toNextItem is called with first argument the last item's index", function () {
    var scrollViewRef = _react["default"].createRef();

    var cb = jest.fn();
    (0, _react2.render)(_react["default"].createElement(App, {
      ref: scrollViewRef
    }));
    var lastElementIndex = items.length - 1;
    scrollViewRef.current.scroll.toNextItem(lastElementIndex, cb);
    expect(scrollViewRef.current.registeredElements[lastElementIndex].scrollIntoView).not.toHaveBeenCalled();
    expect(cb).not.toHaveBeenCalled();
  });
  it('should scroll to previous list item and should not call cb when scroll.toNextItem is called', function () {
    var scrollViewRef = _react["default"].createRef();

    var cb = jest.fn();
    (0, _react2.render)(_react["default"].createElement(App, {
      ref: scrollViewRef
    }));
    scrollViewRef.current.scroll.toPreviousItem(1, cb);
    expect(scrollViewRef.current.registeredElements[0].scrollIntoView).toHaveBeenCalledTimes(1);
    expect(cb).toHaveBeenNthCalledWith(1, 0);
  });
  it('should not scroll and should not call cb when scroll.toPreviousItem is called with first argument 0', function () {
    var scrollViewRef = _react["default"].createRef();

    var cb = jest.fn();
    (0, _react2.render)(_react["default"].createElement(App, {
      ref: scrollViewRef
    }));
    scrollViewRef.current.scroll.toPreviousItem(0, cb);
    expect(scrollViewRef.current.registeredElements[0].scrollIntoView).not.toHaveBeenCalled();
    expect(cb).not.toHaveBeenCalled();
  });
});