add test that checks that we detect new pages on more rows syncing

Author: samwillis

packages/react-db/tests/useLiveInfiniteQuery.test.tsx

@@ -707,4 +707,90 @@ describe(`useLiveInfiniteQuery`, () => {
       expect(result.current.pageParams).toEqual([100, 101])
     })
   })
+
+  it(`should detect hasNextPage change when new items are synced`, async () => {
+    // Start with exactly 20 items (2 pages)
+    const posts = createMockPosts(20)
+    const collection = createCollection(
+      mockSyncCollectionOptions<Post>({
+        id: `sync-detection-test`,
+        getKey: (post: Post) => post.id,
+        initialData: posts,
+      })
+    )
+
+    const { result } = renderHook(() => {
+      return useLiveInfiniteQuery(
+        (q) =>
+          q
+            .from({ posts: collection })
+            .orderBy(({ posts: p }) => p.createdAt, `desc`),
+        {
+          pageSize: 10,
+          getNextPageParam: (lastPage) =>
+            lastPage.length === 10 ? lastPage.length : undefined,
+        }
+      )
+    })
+
+    await waitFor(() => {
+      expect(result.current.isReady).toBe(true)
+    })
+
+    // Load both pages
+    act(() => {
+      result.current.fetchNextPage()
+    })
+
+    await waitFor(() => {
+      expect(result.current.pages).toHaveLength(2)
+    })
+
+    // Should have no next page (exactly 20 items, 2 full pages, peek returns nothing)
+    expect(result.current.hasNextPage).toBe(false)
+    expect(result.current.data).toHaveLength(20)
+
+    // Add 5 more items to the collection
+    act(() => {
+      collection.utils.begin()
+      for (let i = 0; i < 5; i++) {
+        collection.utils.write({
+          type: `insert`,
+          value: {
+            id: `new-${i}`,
+            title: `New Post ${i}`,
+            content: `Content ${i}`,
+            createdAt: Date.now() + i,
+            category: `tech`,
+          },
+        })
+      }
+      collection.utils.commit()
+    })
+
+    // Should now detect that there's a next page available
+    await waitFor(() => {
+      expect(result.current.hasNextPage).toBe(true)
+    })
+
+    // Data should still be 20 items (we haven't fetched the next page yet)
+    expect(result.current.data).toHaveLength(20)
+    expect(result.current.pages).toHaveLength(2)
+
+    // Fetch the next page
+    act(() => {
+      result.current.fetchNextPage()
+    })
+
+    await waitFor(() => {
+      expect(result.current.pages).toHaveLength(3)
+    })
+
+    // Third page should have the new items
+    expect(result.current.pages[2]).toHaveLength(5)
+    expect(result.current.data).toHaveLength(25)
+
+    // No more pages available now
+    expect(result.current.hasNextPage).toBe(false)
+  })
 })