Skip to content

Commit 39ea187

Browse files
JOU-amjsJOU-amjs
authored
fix(usepagination): fix that always loading in abortLast=true (#59)
fix(usepagination): fix that always loading in abortLast=true
2 parents b6729bb + f8fd83f commit 39ea187

File tree

6 files changed

+150
-48
lines changed

6 files changed

+150
-48
lines changed

‎package-lock.json

+10-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
"@typescript-eslint/eslint-plugin": "^5.43.0",
4848
"@typescript-eslint/parser": "^5.43.0",
4949
"@vue/vue3-jest": "^29.2.4",
50-
"alova": "^2.16.1",
50+
"alova": "^2.18.2",
5151
"babel-jest": "^29.2.2",
5252
"commitizen": "^4.3.0",
5353
"commitlint": "^17.5.1",

‎packages/scene-react/test/usePagination.spec.tsx

+75-18
Original file line numberDiff line numberDiff line change
@@ -526,8 +526,8 @@ describe('react => usePagination', () => {
526526
let cache = queryCache(getter(page, pageSize));
527527
expect(cache?.list).toStrictEqual([300, ...generateContinuousNumbers(18, 10)]);
528528

529-
// 检查是否重新fetch了后一页的数据
530-
expect(fetchMockFn).toHaveBeenCalledTimes(3);
529+
// insert时不会重新fetch后一页的数据
530+
expect(fetchMockFn).toHaveBeenCalledTimes(2);
531531
cache = queryCache(getter(page + 1, pageSize));
532532
// insert时会将缓存末尾去掉，因此还是剩下10项
533533
expect(cache?.list).toEqual(generateContinuousNumbers(28, 19));
@@ -544,7 +544,7 @@ describe('react => usePagination', () => {
544544
const cache = queryCache(getter(page, pageSize));
545545
expect(cache?.list).toStrictEqual(curData);
546546

547-
expect(fetchMockFn).toHaveBeenCalledTimes(4);
547+
expect(fetchMockFn).toHaveBeenCalledTimes(2); // insert不会触发下一页预加载
548548
});
549549

550550
// 翻到最后一页后，再插入数据不会再去除一条数据
@@ -647,8 +647,8 @@ describe('react => usePagination', () => {
647647
await waitFor(() => {
648648
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify(generateContinuousNumbers(9, 6))); // 有两项被挤到后面一页了
649649
expect(screen.getByRole('total')).toHaveTextContent(total.toString());
650-
// 5次来源分别是：初始化时2次、插入数据时1次（fetch下一页）、翻页时2次
651-
expect(fetchMockFn).toHaveBeenCalledTimes(5);
650+
// 5次来源分别是：初始化时2次、翻页时1次（翻页后上一页数据已有不再fetch）
651+
expect(fetchMockFn).toHaveBeenCalledTimes(3);
652652
});
653653

654654
// 再次返回前一页，移除的数据不应该存在
@@ -1440,14 +1440,14 @@ describe('react => usePagination', () => {
14401440

14411441
// fetch响应后
14421442
await waitFor(() => {
1443-
expect(fetchMockFn).toHaveBeenCalledTimes(5); // 初始化2次 + 删除fetch1次 + 翻页后fetch2次
1443+
expect(fetchMockFn).toHaveBeenCalledTimes(4); // 初始化2次 + 删除fetch重新fetch1次 + 翻页后fetch下一页1次
14441444
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([10, 11, 12, 13]));
14451445
});
14461446

14471447
// 再次返回前一页，移除的数据不应该存在
14481448
fireEvent.click(screen.getByRole('subtractPage'));
14491449
await waitFor(() => {
1450-
expect(fetchMockFn).toHaveBeenCalledTimes(7); // 翻页再fetch2次
1450+
expect(fetchMockFn).toHaveBeenCalledTimes(4); // 前后一页都有缓存，不fetch
14511451
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([4, 7, 8, 9]));
14521452
});
14531453
});
@@ -1574,15 +1574,15 @@ describe('react => usePagination', () => {
15741574
fireEvent.click(screen.getByRole('subtractPage'));
15751575
// 等待fetch完成后检查total是否正确
15761576
await waitFor(() => {
1577-
expect(fetchMockFn).toHaveBeenCalledTimes(4); // 初始化2次、删除后1次、翻到第1页1次（第1页不触发上一页预加载）
1577+
expect(fetchMockFn).toHaveBeenCalledTimes(3); // 初始化2次、删除后1次、翻到第1页无fetch（第1页不触发上一页预加载，且下一页有缓存）
15781578
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([0, 1, 2, 3]));
15791579
expect(screen.getByRole('total')).toHaveTextContent(total.toString());
15801580
});
15811581

15821582
fireEvent.click(screen.getByRole('addPage2'));
15831583
// 等待fetch完成后检查total是否正确
15841584
await waitFor(() => {
1585-
expect(fetchMockFn).toHaveBeenCalledTimes(6); // 再次翻页+2次
1585+
expect(fetchMockFn).toHaveBeenCalledTimes(4); // 再次翻页+1次下一页fetch
15861586
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([10, 11, 12, 13]));
15871587
expect(screen.getByRole('total')).toHaveTextContent(total.toString());
15881588
});
@@ -1593,7 +1593,7 @@ describe('react => usePagination', () => {
15931593
let totalBackup = total;
15941594
total = 200;
15951595
await waitFor(() => {
1596-
expect(fetchMockFn).toHaveBeenCalledTimes(8); // 改变筛选条件（自动重置第initialPage页）+2次
1596+
expect(fetchMockFn).toHaveBeenCalledTimes(6); // 改变筛选条件（自动重置第initialPage页）+2次
15971597
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([104, 105, 106, 107])); // 重置到第initialPage页
15981598
expect(screen.getByRole('total')).toHaveTextContent(total.toString());
15991599
});
@@ -1607,7 +1607,7 @@ describe('react => usePagination', () => {
16071607
return data.filter((i: number) => ![105].includes(i));
16081608
});
16091609
await waitFor(() => {
1610-
expect(fetchMockFn).toHaveBeenCalledTimes(9); // 预加载下一页+1
1610+
expect(fetchMockFn).toHaveBeenCalledTimes(7); // 预加载下一页+1
16111611
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([104, 106, 107, 108]));
16121612
// 再次看total是否正确
16131613
expect(screen.getByRole('total')).toHaveTextContent(total.toString());
@@ -1618,7 +1618,7 @@ describe('react => usePagination', () => {
16181618
fireEvent.click(screen.getByRole('resetMin'));
16191619
total = totalBackup;
16201620
await waitFor(() => {
1621-
expect(fetchMockFn).toHaveBeenCalledTimes(11); // 条件改变（当前第initialPage页）+2
1621+
expect(fetchMockFn).toHaveBeenCalledTimes(8); // 条件重置了，预加载了前一页数（当前第initialPage页）+1
16221622
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([4, 7, 8, 9]));
16231623
expect(screen.getByRole('total')).toHaveTextContent(total.toString());
16241624
});
@@ -1877,7 +1877,7 @@ describe('react => usePagination', () => {
18771877
expect(screen.getByRole('total')).toHaveTextContent(total.toString());
18781878
});
18791879
// method没有设置缓存时，不会触发数据拉取
1880-
expect(fetchMockFn).not.toBeCalled();
1880+
expect(fetchMockFn).not.toHaveBeenCalled();
18811881
});
18821882

18831883
// // 下拉加载更多相关
@@ -2383,7 +2383,7 @@ describe('react => usePagination', () => {
23832383
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([9, 10, 11, 12]));
23842384
expect(screen.getByRole('total')).toHaveTextContent('');
23852385
expect(screen.getByRole('pageCount')).toHaveTextContent('');
2386-
expect(fetchMockFn).toHaveBeenCalledTimes(5);
2386+
expect(fetchMockFn).toHaveBeenCalledTimes(4); // 翻页只预加载下一页
23872387
});
23882388
});
23892389

@@ -2560,13 +2560,13 @@ describe('react => usePagination', () => {
25602560

25612561
fireEvent.click(screen.getByRole('addPage'));
25622562
await waitFor(() => {
2563-
expect(fetchMockFn).toHaveBeenCalledTimes(4);
2563+
expect(fetchMockFn).toHaveBeenCalledTimes(3); // 上一页已有缓存不会再被预加载
25642564
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([100, 1, 2, 3, 4, 5, 6, 7]));
25652565
});
25662566

25672567
fireEvent.click(screen.getByRole('reload1'));
25682568
await waitFor(() => {
2569-
expect(fetchMockFn).toHaveBeenCalledTimes(5);
2569+
expect(fetchMockFn).toHaveBeenCalledTimes(4);
25702570
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([100, 1, 2, 3]));
25712571
});
25722572
});
@@ -2640,8 +2640,8 @@ describe('react => usePagination', () => {
26402640
fireEvent.click(screen.getByRole('addPage'));
26412641
page++;
26422642
await waitFor(() => {
2643-
// 已经到最后一页了，不需要再预加载下一页数据了
2644-
expect(fetchMockFn).toHaveBeenCalledTimes(3);
2643+
// 已经到最后一页了，不需要再预加载下一页数据了，同时上一页也有缓存不会触发预加载
2644+
expect(fetchMockFn).toHaveBeenCalledTimes(2);
26452645
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify(generateContinuousNumbers(9, 4)));
26462646
expect(queryCache(getter(page + 1, pageSize))).toBeUndefined();
26472647
});
@@ -2805,4 +2805,61 @@ describe('react => usePagination', () => {
28052805
expect(completeFn).toHaveBeenCalledTimes(3);
28062806
});
28072807
});
2808+
2809+
test('should use the data of last request when set `abortLast` to true', async () => {
2810+
const alovaInst = createMockAlova();
2811+
const getter = (page: number, pageSize: number, keyword: string) =>
2812+
alovaInst.Get<SearchListResponse>('/list-with-search', {
2813+
params: {
2814+
page,
2815+
pageSize,
2816+
keyword
2817+
}
2818+
});
2819+
2820+
const successFn = jest.fn();
2821+
function Page() {
2822+
const [keyword, setKeyword] = useState('');
2823+
const { data, onSuccess, total } = usePagination((p, ps) => getter(p, ps, keyword), {
2824+
watchingStates: [keyword],
2825+
abortLast: true,
2826+
data: res => res.list
2827+
});
2828+
onSuccess(successFn);
2829+
return (
2830+
<div>
2831+
<span role="total">{total}</span>
2832+
<span role="response">{JSON.stringify(data)}</span>
2833+
<button
2834+
role="setKeyword-bbb"
2835+
onClick={() => setKeyword('bbb')}></button>
2836+
<button
2837+
role="resetKeyword"
2838+
onClick={() => setKeyword('')}></button>
2839+
</div>
2840+
);
2841+
}
2842+
2843+
render((<Page />) as ReactElement<any, any>);
2844+
let currentList = generateContinuousNumbers(9, 0, i => {
2845+
let n = i % 3;
2846+
return {
2847+
id: i,
2848+
word: ['aaa', 'bbb', 'ccc'][n]
2849+
};
2850+
});
2851+
await waitFor(() => {
2852+
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify(currentList));
2853+
expect(screen.getByRole('total')).toHaveTextContent('300');
2854+
});
2855+
2856+
fireEvent.click(screen.getByRole('setKeyword-bbb'));
2857+
await untilCbCalled(setTimeout, 10);
2858+
fireEvent.click(screen.getByRole('resetKeyword'));
2859+
await waitFor(() => {
2860+
expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify(currentList));
2861+
expect(screen.getByRole('total')).toHaveTextContent('300');
2862+
expect(successFn).toHaveBeenCalledTimes(2);
2863+
});
2864+
});
28082865
});

‎packages/scene-vue/test/usePagination.spec.js

+39-9
Original file line numberDiff line numberDiff line change
@@ -258,14 +258,6 @@ describe('vue => usePagination', () => {
258258
cache = queryCache(getter(page.value + 1, pageSize.value));
259259
// insert时会将缓存末尾去掉，因此还是剩下10项
260260
expect(cache.list).toStrictEqual([19, 20, 21, 22, 23, 24, 25, 26, 27, 28]);
261-
await untilCbCalled(setTimeout, 150);
262-
263-
// 检查是否重新fetch了前后一页的数据
264-
cache = queryCache(getter(page.value - 1, pageSize.value));
265-
expect(cache.list).toStrictEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
266-
cache = queryCache(getter(page.value + 1, pageSize.value));
267-
// 重新fetch后还是保持pageSize项数据
268-
expect(cache.list).toStrictEqual([19, 20, 21, 22, 23, 24, 25, 26, 27, 28]);
269261

270262
insert(400);
271263
insert(500, 2);
@@ -279,7 +271,7 @@ describe('vue => usePagination', () => {
279271
const mockFn2 = jest.fn();
280272
onFetchSuccess(mockFn2);
281273
await untilCbCalled(setTimeout, 100);
282-
expect(mockFn2).toHaveBeenCalledTimes(1); // 只会重新预加载下一页数据
274+
expect(mockFn2).not.toHaveBeenCalled(); // 插入时不需要重新加载下一页数据
283275

284276
// 翻到最后一页后，再插入数据不会再去除一条数据
285277
page.value = 31;
@@ -1288,4 +1280,42 @@ describe('vue => usePagination', () => {
12881280
expect(errorFn).toHaveBeenCalledTimes(3);
12891281
expect(completeFn).toHaveBeenCalledTimes(3);
12901282
});
1283+
1284+
test('should use the data of last request when set `abortLast` to true', async () => {
1285+
const alovaInst = createMockAlova();
1286+
const getter = (page, pageSize, keyword) =>
1287+
alovaInst.Get('/list-with-search', {
1288+
params: {
1289+
page,
1290+
pageSize,
1291+
keyword
1292+
}
1293+
});
1294+
const keyword = ref('');
1295+
const { data, onSuccess, total } = usePagination((p, ps) => getter(p, ps, keyword.value), {
1296+
watchingStates: [keyword],
1297+
abortLast: true,
1298+
data: res => res.list
1299+
});
1300+
const successFn = jest.fn();
1301+
onSuccess(successFn);
1302+
let currentList = generateContinuousNumbers(9, 0, i => {
1303+
let n = i % 3;
1304+
return {
1305+
id: i,
1306+
word: ['aaa', 'bbb', 'ccc'][n]
1307+
};
1308+
});
1309+
await untilCbCalled(onSuccess);
1310+
expect(data.value).toStrictEqual(currentList);
1311+
expect(total.value).toBe(300);
1312+
1313+
keyword.value = 'bbb';
1314+
await new Promise(resolve => setTimeout(resolve, 40));
1315+
keyword.value = '';
1316+
await untilCbCalled(onSuccess);
1317+
expect(data.value).toStrictEqual(currentList);
1318+
expect(total.value).toBe(300);
1319+
expect(successFn).toHaveBeenCalledTimes(2);
1320+
});
12911321
});

0 commit comments

Comments
 (0)