test: add more test cases to useInfiniteList

packages/react-use/src/use-paging-list/index.test.ts

@@ -59,9 +59,11 @@ describe('usePagingList', () => {
     expect(fetcherMock).toHaveBeenCalled()
   })
 
-  it('should update selection state', () => {
+  it('should update selection state', async () => {
     const { result } = renderHook(() => usePagingList({ fetcher: fetcherMock }))
 
+    await act(async () => {}) // wait for initial fetch
+
     act(() => {
       result.current.selection.setSelected([1, 2, 3])
     })
@@ -76,9 +78,7 @@ describe('usePagingList', () => {
 
     expect(result.current.loading).toBe(true)
 
-    await act(async () => {
-      await fetcherMock()
-    })
+    await act(async () => {}) // wait for initial fetch
 
     expect(result.current.loading).toBe(false)
   })
@@ -96,6 +96,8 @@ describe('usePagingList', () => {
       }),
     )
 
+    await act(async () => {}) // wait for initial fetch
+
     expect(fetcherMock).toHaveBeenCalledTimes(1)
 
     await act(async () => {
@@ -105,4 +107,223 @@ describe('usePagingList', () => {
     expect(fetcherMock).toHaveBeenCalledTimes(2)
     expect(onPageSizeChange).toHaveBeenCalledTimes(1)
   })
+
+  it('should handle form reset', async () => {
+    const { result } = renderHook(() =>
+      usePagingList({ fetcher: fetcherMock, form: { initialValue: { name: 'initial' } } }),
+    )
+
+    await act(async () => {}) // wait for initial fetch
+
+    await act(async () => {
+      result.current.form.setValue({ name: 'value' })
+    })
+
+    expect(result.current.form.value).toEqual({ name: 'value' })
+    expect(fetcherMock).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      result.current.form.reset()
+    })
+
+    expect(result.current.form.value).toEqual({ name: 'initial' })
+    expect(fetcherMock).toHaveBeenCalledTimes(2)
+  })
+
+  it('should handle page change', async () => {
+    const { result } = renderHook(() =>
+      usePagingList({
+        fetcher: async (params) => {
+          const res = await fetcherMock()
+          params.setTotal(100)
+          return res
+        },
+        pagination: {
+          pageSize: 20,
+        },
+      }),
+    )
+
+    await act(async () => {}) // wait for initial fetch
+
+    await act(async () => {
+      result.current.pagination.go(2)
+    })
+
+    expect(fetcherMock).toHaveBeenCalledTimes(2)
+  })
+
+  it('should reserve previous data on page change', async () => {
+    fetcherMock.mockResolvedValue([{ id: 1 }, { id: 2 }, { id: 3 }])
+
+    const { result } = renderHook(() =>
+      usePagingList({
+        fetcher: async (params) => {
+          const res = await fetcherMock()
+          params.setTotal(100)
+          return res
+        },
+        pagination: {
+          pageSize: 20,
+        },
+      }),
+    )
+
+    await act(async () => {}) // wait for initial fetch
+
+    act(() => {
+      result.current.selection.select({ id: 1 })
+      result.current.selection.select({ id: 2 })
+    })
+
+    expect(result.current.selection.selected).toEqual([{ id: 1 }, { id: 2 }])
+
+    fetcherMock.mockResolvedValue([{ id: 4 }, { id: 5 }, { id: 6 }])
+
+    act(() => {
+      result.current.pagination.next()
+    })
+
+    act(() => {
+      result.current.selection.select({ id: 4 })
+    })
+
+    expect(result.current.selection.selected).toEqual([{ id: 1 }, { id: 2 }, { id: 4 }])
+
+    fetcherMock.mockResolvedValue([{ id: 4 }, { id: 5 }, { id: 6 }])
+
+    act(() => {
+      result.current.pagination.prev()
+    })
+
+    expect(result.current.selection.selected).toEqual([{ id: 1 }, { id: 2 }, { id: 4 }])
+  })
+
+  it('should handle onReset', async () => {
+    const onReset = vi.fn()
+
+    const { result } = renderHook(() =>
+      usePagingList({
+        fetcher: fetcherMock,
+        form: { onReset },
+      }),
+    )
+
+    await act(async () => {}) // wait for initial fetch
+
+    await act(async () => {
+      result.current.form.reset()
+    })
+
+    expect(onReset).toHaveBeenCalled()
+  })
+
+  it('should handle onSubmit', async () => {
+    const onSubmit = vi.fn()
+
+    const { result } = renderHook(() =>
+      usePagingList({
+        fetcher: fetcherMock,
+        form: { onSubmit },
+      }),
+    )
+
+    await act(async () => {}) // wait for initial fetch
+
+    await act(async () => {
+      result.current.form.submit()
+    })
+
+    expect(onSubmit).toHaveBeenCalled()
+  })
+
+  it('should handle onChange', async () => {
+    const onChange = vi.fn()
+
+    const { result } = renderHook(() =>
+      usePagingList({
+        fetcher: fetcherMock,
+        form: { onChange, initialValue: { name: 'initial' } },
+      }),
+    )
+
+    await act(async () => {}) // wait for initial fetch
+
+    await act(async () => {
+      result.current.form.handleChange({ name: 'newValue' })
+    })
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should handle onPageChange', async () => {
+    const onPageChange = vi.fn()
+
+    const { result } = renderHook(() =>
+      usePagingList({
+        fetcher: async (params) => {
+          const res = await fetcherMock()
+          params.setTotal(100)
+          return res
+        },
+        pagination: { onPageChange },
+      }),
+    )
+
+    await act(async () => {}) // wait for initial fetch
+
+    expect(fetcherMock).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      result.current.pagination.go(2)
+    })
+
+    await act(async () => {})
+
+    expect(fetcherMock).toHaveBeenCalledTimes(2)
+
+    expect(onPageChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('should handle onBefore', async () => {
+    const onBefore = vi.fn()
+
+    const { result } = renderHook(() =>
+      usePagingList({
+        fetcher: fetcherMock,
+        query: { onBefore },
+      }),
+    )
+
+    await act(async () => {}) // wait for initial fetch
+
+    expect(onBefore).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      result.current.form.submit()
+    })
+
+    expect(onBefore).toHaveBeenCalledTimes(2)
+  })
+
+  it('should handle onSuccess', async () => {
+    const onSuccess = vi.fn()
+
+    const { result } = renderHook(() =>
+      usePagingList({
+        fetcher: fetcherMock,
+        query: { onSuccess },
+      }),
+    )
+
+    await act(async () => {}) // wait for initial fetch
+
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      result.current.form.submit()
+    })
+
+    expect(onSuccess).toHaveBeenCalledTimes(2)
+  })
 })

packages/react-use/src/use-paging-list/index.ts

@@ -154,21 +154,14 @@ export function usePagingList<
     },
   })
 
-  const startNewQuery = useStableFn((resetPageSize = false) => {
+  const startNewQuery = useStableFn(() => {
     previousDataRef.current = undefined
     paginationActions.go(1)
 
-    let pageSize = paginationState.pageSize
-
-    if (resetPageSize) {
-      paginationActions.setPageSize(options.pagination?.pageSize ?? 10)
-      pageSize = options.pagination?.pageSize ?? 10
-    }
-
     query.run({
       previousData: previousDataRef.current,
       page: 1,
-      pageSize,
+      pageSize: paginationState.pageSize,
       form: form.value,
       setTotal,
     })
@@ -194,7 +187,7 @@ export function usePagingList<
     },
   })
 
-  const query = useQuery<Fetcher>((options.fetcher ?? (() => {})) as Fetcher, {
+  const query = useQuery<Fetcher>(options?.fetcher as Fetcher, {
     ...options.query,
     initialParams: [
       {