zarm/lib/use-in-viewport/__tests__/index.test.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

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

var _index = _interopRequireDefault(require("../index"));

var targetEl = document.createElement('div');
document.body.appendChild(targetEl);
var mockIntersectionObserver = jest.fn().mockReturnValue({
  observe: function observe() {
    return null;
  },
  disconnect: function disconnect() {
    return null;
  }
});
window.IntersectionObserver = mockIntersectionObserver;
describe('useInViewport', function () {
  it('should work when target is in viewport', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
    var _renderHook, result, calls, _calls, onChange, _result$current, inViewport;

    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _renderHook = (0, _reactHooks.renderHook)(function () {
              return (0, _index.default)(targetEl);
            }), result = _renderHook.result;
            calls = mockIntersectionObserver.mock.calls;
            _calls = (0, _slicedToArray2.default)(calls[calls.length - 1], 1), onChange = _calls[0];
            (0, _reactHooks.act)(function () {
              onChange([{
                targetEl: targetEl,
                isIntersecting: true
              }]);
            });
            _result$current = (0, _slicedToArray2.default)(result.current, 1), inViewport = _result$current[0];
            expect(inViewport).toBeTruthy();

          case 6:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));
  it('should not work when target is null', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
    var observe;
    return _regenerator.default.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            observe = jest.fn();
            mockIntersectionObserver.mockReturnValue({
              observe: observe,
              disconnect: function disconnect() {
                return null;
              }
            });
            (0, _reactHooks.renderHook)(function () {
              return (0, _index.default)(null);
            });
            expect(observe).toHaveBeenCalledTimes(0);

          case 4:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  })));
  it('should disconnect when unmount', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
    var disconnect, _renderHook2, unmount;

    return _regenerator.default.wrap(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            disconnect = jest.fn();
            mockIntersectionObserver.mockReturnValue({
              observe: function observe() {
                return null;
              },
              disconnect: disconnect
            });
            _renderHook2 = (0, _reactHooks.renderHook)(function () {
              return (0, _index.default)(targetEl);
            }), unmount = _renderHook2.unmount;
            unmount();
            expect(disconnect).toBeCalled();

          case 5:
          case "end":
            return _context3.stop();
        }
      }
    }, _callee3);
  })));
});