zarm/es/use-scroll/__tests__/index.test.js

基于 React 的移动端UI库

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { fireEvent, render, waitFor } from '@testing-library/react';
import React, { useRef, useState } from 'react';
import useScroll from '..';

function TestComponent() {
  var container = useRef(null);

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      scrollTop = _useState2[0],
      setScrollTop = _useState2[1];

  var list = new Array(null).fill(null).map(function (_, idx) {
    return /*#__PURE__*/React.createElement("div", {
      key: "".concat(+idx)
    }, "\u7B2C", idx + 1, "\u884C");
  });
  useScroll({
    container: container,
    onScroll: function onScroll(e) {
      setScrollTop(e.target.scrollTop);
    }
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    ref: container,
    style: {
      height: '200px',
      overflowY: 'auto'
    },
    "data-testid": "scroll-container"
  }, list), /*#__PURE__*/React.createElement("div", {
    "data-testid": "scroll-top-value"
  }, scrollTop));
}

describe('useScroll', function () {
  test('should update scroll top of the container twice(invoking on leading and trailing edges)', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var _render, getByTestId;

    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _render = render( /*#__PURE__*/React.createElement(TestComponent, null)), getByTestId = _render.getByTestId;
            expect(getByTestId('scroll-top-value').textContent).toBe('0');
            fireEvent.scroll(getByTestId('scroll-container'), {
              target: {
                scrollTop: 200
              }
            });
            fireEvent.scroll(getByTestId('scroll-container'), {
              target: {
                scrollTop: 201
              }
            });
            fireEvent.scroll(getByTestId('scroll-container'), {
              target: {
                scrollTop: 202
              }
            }); // invoking on the leading edge

            expect(getByTestId('scroll-top-value').textContent).toBe('200');
            _context.next = 8;
            return waitFor(function () {
              // invoking on the trailing edge
              // waiting 200 milliseconds then invoke the throttled scroll event handler
              expect(getByTestId('scroll-top-value').textContent).toBe('202');
            });

          case 8:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));
  test('should update scroll top of the container twice(invoking on leading edge twice)', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
    var _render2, getByTestId;

    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            _render2 = render( /*#__PURE__*/React.createElement(TestComponent, null)), getByTestId = _render2.getByTestId;
            expect(getByTestId('scroll-top-value').textContent).toBe('0'); // invoking on the leading edge

            fireEvent.scroll(getByTestId('scroll-container'), {
              target: {
                scrollTop: 200
              }
            });
            setTimeout(function () {
              // wait for 201 milliseconds, then scroll again. Also invoking on the leading edge
              fireEvent.scroll(getByTestId('scroll-container'), {
                target: {
                  scrollTop: 201
                }
              });
            }, 201);
            expect(getByTestId('scroll-top-value').textContent).toBe('200');
            _context2.next = 7;
            return waitFor(function () {
              expect(getByTestId('scroll-top-value').textContent).toBe('201');
            });

          case 7:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  })));
});