jam-cloud/jam-ui/node_modules/react-scroll/modules/__tests__/scroll-cancellation-test.js

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _reactDom = require('react-dom');

var _testUtils = require('react-dom/test-utils');

var _testUtils2 = _interopRequireDefault(_testUtils);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _expect = require('expect');

var _expect2 = _interopRequireDefault(_expect);

var _assert = require('assert');

var _assert2 = _interopRequireDefault(_assert);

var _animateScroll = require('../mixins/animate-scroll.js');

var _animateScroll2 = _interopRequireDefault(_animateScroll);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* React */


describe('Scroll cancelation', function () {
  var node = document.createElement('div');
  document.body.innerHtml = "";

  document.body.appendChild(node);

  beforeEach(function () {
    (0, _reactDom.unmountComponentAtNode)(node);
    window.scrollTo(0, 0);
  });

  describe("when scrolling is triggered by keydown handlers vertically", function () {
    it("can scroll on keydown multiple times in a row", function (done) {
      var duration = 100;
      var distance = 100;

      var TestComponent = function (_React$Component) {
        _inherits(TestComponent, _React$Component);

        function TestComponent() {
          var _ref;

          var _temp, _this, _ret;

          _classCallCheck(this, TestComponent);

          for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
          }

          return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TestComponent.__proto__ || Object.getPrototypeOf(TestComponent)).call.apply(_ref, [this].concat(args))), _this), _this.handleKeyDown = function () {
            _animateScroll2.default.scrollMore(distance, { smooth: true, duration: duration });
          }, _temp), _possibleConstructorReturn(_this, _ret);
        }

        _createClass(TestComponent, [{
          key: 'render',
          value: function render() {
            return _react2.default.createElement(
              'div',
              null,
              _react2.default.createElement('input', { onKeyDown: this.handleKeyDown }),
              _react2.default.createElement('div', { style: { height: "3000px", width: "100%", background: "repeating-linear-gradient(to bottom, white, black 100px)" } })
            );
          }
        }]);

        return TestComponent;
      }(_react2.default.Component);

      (0, _reactDom.render)(_react2.default.createElement(TestComponent, null), node);

      dispatchDOMKeydownEvent(13, node.querySelector('input'));
      wait(duration * 2, function () {
        (0, _expect2.default)(window.scrollY || window.pageYOffset).toBeGreaterThanOrEqualTo(distance);

        dispatchDOMKeydownEvent(13, node.querySelector('input'));
        wait(duration * 2, function () {
          (0, _expect2.default)(window.scrollY || window.pageYOffset).toBeGreaterThanOrEqualTo(distance * 2);

          dispatchDOMKeydownEvent(13, node.querySelector('input'));
          wait(duration * 2, function () {
            (0, _expect2.default)(window.scrollY || window.pageYOffset).toBeGreaterThanOrEqualTo(distance * 3);
            done();
          });
        });
      });
    });
  });

  describe("when scrolling is triggered by keydown handlers horizontally", function () {
    it("can scroll on keydown multiple times in a row", function (done) {
      var duration = 100;
      var distance = 100;

      var TestComponent = function (_React$Component2) {
        _inherits(TestComponent, _React$Component2);

        function TestComponent() {
          var _ref2;

          var _temp2, _this2, _ret2;

          _classCallCheck(this, TestComponent);

          for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
            args[_key2] = arguments[_key2];
          }

          return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, (_ref2 = TestComponent.__proto__ || Object.getPrototypeOf(TestComponent)).call.apply(_ref2, [this].concat(args))), _this2), _this2.handleKeyDown = function () {
            _animateScroll2.default.scrollMore(distance, { smooth: true, duration: duration, horizontal: true });
          }, _temp2), _possibleConstructorReturn(_this2, _ret2);
        }

        _createClass(TestComponent, [{
          key: 'render',
          value: function render() {
            return _react2.default.createElement(
              'div',
              null,
              _react2.default.createElement('input', { onKeyDown: this.handleKeyDown }),
              _react2.default.createElement('div', { style: { width: "3000px", height: "100%", background: "repeating-linear-gradient(to right, white, black 100px)" } })
            );
          }
        }]);

        return TestComponent;
      }(_react2.default.Component);

      (0, _reactDom.render)(_react2.default.createElement(TestComponent, null), node);

      dispatchDOMKeydownEvent(13, node.querySelector('input'));
      wait(duration * 2, function () {
        (0, _expect2.default)(window.scrollX || window.pageXOffset).toBeGreaterThanOrEqualTo(distance);

        dispatchDOMKeydownEvent(13, node.querySelector('input'));
        wait(duration * 2, function () {
          (0, _expect2.default)(window.scrollX || window.pageXOffset).toBeGreaterThanOrEqualTo(distance * 2);

          dispatchDOMKeydownEvent(13, node.querySelector('input'));
          wait(duration * 2, function () {
            (0, _expect2.default)(window.scrollX || window.pageXOffset).toBeGreaterThanOrEqualTo(distance * 3);
            done();
          });
        });
      });
    });
  });
});

var wait = function wait(ms, cb) {
  setTimeout(cb, ms);
};

var dispatchDOMKeydownEvent = function dispatchDOMKeydownEvent(keyCode, element) {
  var event = document.createEvent("KeyboardEvent");
  var initMethod = typeof event.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
  event[initMethod]("keydown", true, true, window, 0, 0, 0, 0, 0, keyCode);
  element.dispatchEvent(event);
};