Add regression coverage for ordered on-demand paging

Author: KyleAMathews

packages/db-collection-e2e/src/suites/pagination.suite.ts

@@ -264,6 +264,110 @@ export function createPaginationTestSuite(
         await query2.cleanup()
       })
 
+      it(`should load distinct windows across multiple live queries with multi-column orderBy`, async () => {
+        const config = await getConfig()
+        const usersCollection = config.collections.onDemand.users
+
+        const page1 = createLiveQueryCollection((q) =>
+          q
+            .from({ user: usersCollection })
+            .orderBy(({ user }) => user.isActive, `desc`)
+            .orderBy(({ user }) => user.age, `asc`)
+            .limit(10)
+            .offset(0),
+        )
+
+        const page2 = createLiveQueryCollection((q) =>
+          q
+            .from({ user: usersCollection })
+            .orderBy(({ user }) => user.isActive, `desc`)
+            .orderBy(({ user }) => user.age, `asc`)
+            .limit(10)
+            .offset(10),
+        )
+
+        await page1.preload()
+        await waitForQueryData(page1, { minSize: 10 })
+        await page2.preload()
+        await waitForQueryData(page2, { minSize: 10 })
+
+        const page1Results = Array.from(page1.state.values())
+        const page2Results = Array.from(page2.state.values())
+
+        expect(page1Results).toHaveLength(10)
+        expect(page2Results).toHaveLength(10)
+
+        const page1Ids = new Set(page1Results.map((user) => user.id))
+        for (const user of page2Results) {
+          expect(page1Ids.has(user.id)).toBe(false)
+        }
+
+        for (const page of [page1Results, page2Results]) {
+          for (let i = 1; i < page.length; i++) {
+            const prev = page[i - 1]!
+            const curr = page[i]!
+
+            if (prev.isActive !== curr.isActive) {
+              expect(prev.isActive ? 1 : 0).toBeGreaterThanOrEqual(
+                curr.isActive ? 1 : 0,
+              )
+            } else {
+              expect(prev.age).toBeLessThanOrEqual(curr.age)
+            }
+          }
+        }
+
+        await page1.cleanup()
+        await page2.cleanup()
+      })
+
+      it(`should allow paging a second live query without affecting the first`, async () => {
+        const config = await getConfig()
+        const usersCollection = config.collections.onDemand.users
+
+        const baseQuery = createLiveQueryCollection((q) =>
+          q
+            .from({ user: usersCollection })
+            .orderBy(({ user }) => user.isActive, `desc`)
+            .orderBy(({ user }) => user.age, `asc`)
+            .limit(10)
+            .offset(0),
+        )
+
+        const pagedQuery = createLiveQueryCollection((q) =>
+          q
+            .from({ user: usersCollection })
+            .orderBy(({ user }) => user.isActive, `desc`)
+            .orderBy(({ user }) => user.age, `asc`)
+            .limit(10)
+            .offset(0),
+        )
+
+        await baseQuery.preload()
+        await waitForQueryData(baseQuery, { minSize: 10 })
+        await pagedQuery.preload()
+        await waitForQueryData(pagedQuery, { minSize: 10 })
+
+        const baseIds = new Set(
+          Array.from(baseQuery.state.values()).map((user) => user.id),
+        )
+
+        const moveResult = pagedQuery.utils.setWindow({ offset: 10, limit: 10 })
+        if (moveResult !== true) {
+          await moveResult
+        }
+        await waitForQueryData(pagedQuery, { minSize: 10 })
+
+        const pagedResults = Array.from(pagedQuery.state.values())
+        expect(pagedResults).toHaveLength(10)
+        for (const user of pagedResults) {
+          expect(baseIds.has(user.id)).toBe(false)
+        }
+
+        await baseQuery.cleanup()
+        await pagedQuery.cleanup()
+      })
+
       it(`should handle multi-column orderBy with duplicate values in first column`, async () => {
         const config = await getConfig()
         const usersCollection = config.collections.onDemand.users

packages/db/tests/query/live-query-collection.test.ts

@@ -2120,6 +2120,139 @@ describe(`createLiveQueryCollection`, () => {
         vi.useRealTimers()
       }
     })
+
+    it(`advances offset when async loadSubset fills an initially empty window`, async () => {
+      type Item = { id: number; value: number }
+      const remoteData: Array<Item> = [
+        { id: 1, value: 1 },
+        { id: 2, value: 2 },
+        { id: 3, value: 3 },
+        { id: 4, value: 4 },
+      ]
+      const loadOffsets: Array<number | undefined> = []
+
+      const sourceCollection = createCollection<Item>({
+        id: `offset-advances-async`,
+        getKey: (item) => item.id,
+        syncMode: `on-demand`,
+        startSync: true,
+        autoIndex: `eager`,
+        sync: {
+          sync: ({ begin, write, commit, markReady }) => {
+            markReady()
+            return {
+              loadSubset: (options: LoadSubsetOptions) => {
+                loadOffsets.push(options.offset)
+                return new Promise<void>((resolve) => {
+                  setTimeout(() => {
+                    begin()
+                    const start = options.offset ?? 0
+                    const end = options.limit
+                      ? start + options.limit
+                      : remoteData.length
+                    remoteData.slice(start, end).forEach((item) => {
+                      write({ type: `insert`, value: item })
+                    })
+                    commit()
+                    resolve()
+                  }, 0)
+                })
+              },
+            }
+          },
+        },
+      })
+
+      const liveQuery = createLiveQueryCollection((q) =>
+        q
+          .from({ item: sourceCollection })
+          .orderBy(({ item }) => item.value, `asc`)
+          .limit(2)
+          .offset(0),
+      )
+
+      await liveQuery.preload()
+      expect(liveQuery.toArray.map((item) => item.value)).toEqual([1, 2])
+      expect(loadOffsets[0]).toBe(0)
+
+      const moveResult = liveQuery.utils.setWindow({ offset: 2, limit: 2 })
+      if (moveResult !== true) {
+        await moveResult
+      }
+
+      expect(loadOffsets).toEqual([0, 2])
+      expect(liveQuery.toArray.map((item) => item.value)).toEqual([3, 4])
+    })
+
+    it(`requests new offsets when window moves across identical orderBy values`, async () => {
+      type Item = { id: number; rank: number }
+      const remoteData: Array<Item> = [
+        { id: 1, rank: 1 },
+        { id: 2, rank: 1 },
+        { id: 3, rank: 1 },
+        { id: 4, rank: 1 },
+        { id: 5, rank: 1 },
+        { id: 6, rank: 1 },
+      ]
+      const loadOffsets: Array<number | undefined> = []
+
+      const sourceCollection = createCollection<Item>({
+        id: `offset-moves-constant-orderby`,
+        getKey: (item) => item.id,
+        syncMode: `on-demand`,
+        startSync: true,
+        autoIndex: `eager`,
+        sync: {
+          sync: ({ begin, write, commit, markReady }) => {
+            markReady()
+            return {
+              loadSubset: (options: LoadSubsetOptions) => {
+                loadOffsets.push(options.offset)
+                const start = options.offset ?? 0
+                const end = options.limit
+                  ? start + options.limit
+                  : remoteData.length
+                begin()
+                remoteData.slice(start, end).forEach((item) => {
+                  write({ type: `insert`, value: item })
+                })
+                commit()
+                return true
+              },
+            }
+          },
+        },
+      })
+
+      const liveQuery = createLiveQueryCollection((q) =>
+        q
+          .from({ item: sourceCollection })
+          .orderBy(({ item }) => item.rank, `asc`)
+          .limit(2)
+          .offset(0),
+      )
+
+      await liveQuery.preload()
+      await flushPromises()
+      expect(loadOffsets[0]).toBe(0)
+      expect(liveQuery.toArray.map((item) => item.id)).toEqual([1, 2])
+
+      const moveFirst = liveQuery.utils.setWindow({ offset: 2, limit: 2 })
+      if (moveFirst !== true) {
+        await moveFirst
+      }
+      await flushPromises()
+      expect(loadOffsets).toEqual([0, 2])
+      expect(liveQuery.toArray.map((item) => item.id)).toEqual([3, 4])
+
+      const moveSecond = liveQuery.utils.setWindow({ offset: 4, limit: 2 })
+      if (moveSecond !== true) {
+        await moveSecond
+      }
+      await flushPromises()
+      expect(loadOffsets).toEqual([0, 2, 4])
+      expect(liveQuery.toArray.map((item) => item.id)).toEqual([5, 6])
+    })
   })
 
   describe(`custom getKey with joins error handling`, () => {