zarm
Version:
基于 React 的移动端UI库
213 lines (191 loc) • 6.69 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useRef } from 'react';
import '@testing-library/jest-dom';
import { fireEvent, render, waitFor, act } from '@testing-library/react';
import Pull from '../index';
import List from '../../list';
var REFRESH_STATE = {
normal: 0,
// 普通
pull: 1,
// 下拉刷新（未满足刷新条件）
drop: 2,
// 释放立即刷新（满足刷新条件）
loading: 3,
// 加载中
success: 4,
// 加载成功
failure: 5 // 加载失败
};
var LOAD_STATE = {
normal: 0,
// 普通
abort: 1,
// 中止
loading: 2,
// 加载中
success: 3,
// 加载成功
failure: 4,
// 加载失败
complete: 5 // 加载完成（无新数据）
};
var getRandomNum = function getRandomNum(min, max) {
var Range = max - min;
var Rand = Math.random();
return min + Math.round(Rand * Range);
};
var fetchData = function fetchData(length, dataSource) {
var newData = dataSource;
var startIndex = newData.length;
for (var i = startIndex; i < startIndex + length; i++) {
newData.push( /*#__PURE__*/React.createElement(List.Item, {
key: +i,
title: "\u7B2C ".concat(i + 1, " \u884C")
}));
}
return newData;
};
describe('Pull', function () {
var App = function App() {
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
dataSource = _React$useState2[0],
setDataSource = _React$useState2[1];
var _React$useState3 = React.useState(REFRESH_STATE.normal),
_React$useState4 = _slicedToArray(_React$useState3, 2),
refreshing = _React$useState4[0],
setRefreshing = _React$useState4[1];
var _React$useState5 = React.useState(LOAD_STATE.normal),
_React$useState6 = _slicedToArray(_React$useState5, 2),
loading = _React$useState6[0],
setLoading = _React$useState6[1];
var count = useRef(0);
var refreshData = function refreshData() {
setRefreshing(REFRESH_STATE.loading);
setTimeout(function () {
if (count.current > 0) {
setRefreshing(REFRESH_STATE.failure);
return;
}
setDataSource(fetchData(20, []));
setRefreshing(REFRESH_STATE.success);
count.current += 1;
}, 2000); // setDataSource(fetchData(20, []));
// setRefreshing(REFRESH_STATE.success);
}; // 模拟加载更多数据
var loadData = function loadData() {
setLoading(LOAD_STATE.loading);
setTimeout(function () {
setDataSource(fetchData(20, []));
setLoading(LOAD_STATE.complete);
}, 2000);
};
React.useEffect(function () {
setDataSource(fetchData(20, []));
}, []);
return /*#__PURE__*/React.createElement(Pull, {
refresh: {
state: refreshing,
handler: refreshData
},
load: {
state: loading,
distance: 200,
handler: loadData
}
}, /*#__PURE__*/React.createElement(List, null, dataSource));
};
it('renders correctly', function () {
var _render = render( /*#__PURE__*/React.createElement(Pull, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
container = _render.container;
expect(container).toMatchSnapshot();
});
it('refreshing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _render2, container, getByText, pull;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
jest.useFakeTimers();
_render2 = render( /*#__PURE__*/React.createElement(App, null)), container = _render2.container, getByText = _render2.getByText;
pull = container.querySelector('.za-pull');
fireEvent.mouseDown(pull, {
pointerId: 15,
clientX: 100,
clientY: 0,
buttons: 1
});
fireEvent.mouseMove(pull, {
pointerId: 15,
clientX: 100,
clientY: 100,
buttons: 1
});
fireEvent.mouseMove(pull, {
pointerId: 15,
clientX: 150,
clientY: 300,
buttons: 1
});
fireEvent.mouseUp(pull, {
pointerId: 15
});
act(function () {
jest.runAllTimers();
});
_context.next = 10;
return waitFor(function () {
expect(getByText('加载成功')).toBeInTheDocument();
});
case 10:
case "end":
return _context.stop();
}
}
}, _callee);
})));
it('loading', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var scrollToSpy, clientHeightSpy, scrollHeightSpy, _render3, getByText;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
jest.useFakeTimers();
scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation(function (_, y) {
window.scrollY = y;
window.pageYOffset = y;
document.documentElement.scrollTop = y;
});
clientHeightSpy = jest.spyOn(document.documentElement, 'clientHeight', 'get').mockImplementation(function () {
return 100;
});
scrollHeightSpy = jest.spyOn(document.body, 'clientHeight', 'get').mockImplementation(function () {
return 1000;
});
_render3 = render( /*#__PURE__*/React.createElement(App, null)), getByText = _render3.getByText;
window.scrollTo(0, 800);
fireEvent.scroll(window, {
scrollY: -100
});
act(function () {
jest.runOnlyPendingTimers();
});
_context2.next = 10;
return waitFor(function () {
expect(getByText('我是有底线的')).toBeInTheDocument();
});
case 10:
scrollToSpy.mockRestore();
scrollHeightSpy.mockRestore();
clientHeightSpy.mockRestore();
case 13:
case "end":
return _context2.stop();
}
}
}, _callee2);
})));
});