additional tests relarted to #370

Author: samwillis

packages/svelte-db/src/useLiveQuery.svelte.ts

@@ -1,4 +1,4 @@
-import { untrack } from "svelte"
+import { flushSync, untrack } from "svelte"
 import { createLiveQueryCollection } from "@tanstack/db"
 import { SvelteMap } from "svelte/reactivity"
 import type {
@@ -315,6 +315,15 @@ export function useLiveQuery(
     // Initialize data array in correct order
     syncDataFromCollection(currentCollection)
 
+    // Listen for the first ready event to catch status transitions
+    // that might not trigger change events (fixes async status transition bug)
+    currentCollection.onFirstReady(() => {
+      // Use flushSync to ensure Svelte reactivity updates properly
+      flushSync(() => {
+        status = currentCollection.status
+      })
+    })
+
     // Subscribe to collection changes with granular updates
     currentUnsubscribe = currentCollection.subscribeChanges(
       (changes: Array<ChangeMessage<any>>) => {

packages/svelte-db/tests/useLiveQuery.svelte.test.ts

@@ -1190,6 +1190,72 @@ describe(`Query Collections`, () => {
         expect(query.isReady).toBe(true)
       })
     })
+
+    it(`should handle status transitions correctly with onFirstReady`, () => {
+      // This test verifies that the onFirstReady callback properly updates status
+      let beginFn: (() => void) | undefined
+      let commitFn: (() => void) | undefined
+      let markReadyFn: (() => void) | undefined
+
+      const collection = createCollection<Person>({
+        id: `onfirstready-test`,
+        getKey: (person: Person) => person.id,
+        startSync: false,
+        sync: {
+          sync: ({ begin, commit, markReady }) => {
+            beginFn = begin
+            commitFn = commit
+            markReadyFn = markReady
+            // Don't sync immediately
+          },
+        },
+        onInsert: () => Promise.resolve(),
+        onUpdate: () => Promise.resolve(),
+        onDelete: () => Promise.resolve(),
+      })
+
+      cleanup = $effect.root(() => {
+        const query = useLiveQuery((q) =>
+          q
+            .from({ collection })
+            .where(({ collection: c }) => gt(c.age, 30))
+            .select(({ collection: c }) => ({
+              id: c.id,
+              name: c.name,
+            }))
+        )
+
+        // Initially should be loading
+        expect(query.isLoading).toBe(true)
+        expect(query.isReady).toBe(false)
+
+        // Start sync manually
+        collection.preload()
+
+        // Trigger the first commit to make collection ready
+        if (beginFn && commitFn && markReadyFn) {
+          beginFn()
+          commitFn()
+          markReadyFn()
+        }
+
+        // Insert data
+        collection.insert({
+          id: `1`,
+          name: `John Doe`,
+          age: 35,
+          email: `[email protected]`,
+          isActive: true,
+          team: `team1`,
+        })
+
+        // Wait for the status to transition correctly
+        flushSync()
+        expect(query.isLoading).toBe(false)
+        expect(query.isReady).toBe(true)
+        expect(query.status).toBe(`ready`)
+      })
+    })
   })
 
   it(`should accept config object with pre-built QueryBuilder instance`, async () => {

packages/vue-db/src/useLiveQuery.ts

@@ -1,6 +1,7 @@
 import {
   computed,
   getCurrentInstance,
+  nextTick,
   onUnmounted,
   reactive,
   ref,
@@ -298,6 +299,15 @@ export function useLiveQuery(
     // Initialize data array in correct order
     syncDataFromCollection(currentCollection)
 
+    // Listen for the first ready event to catch status transitions
+    // that might not trigger change events (fixes async status transition bug)
+    currentCollection.onFirstReady(() => {
+      // Use nextTick to ensure Vue reactivity updates properly
+      nextTick(() => {
+        status.value = currentCollection.status
+      })
+    })
+
     // Subscribe to collection changes with granular updates
     currentUnsubscribe = currentCollection.subscribeChanges(
       (changes: Array<ChangeMessage<any>>) => {

packages/vue-db/tests/useLiveQuery.test.ts

@@ -1258,6 +1258,142 @@ describe(`Query Collections`, () => {
       minAge.value = 25
       await waitFor(() => expect(isReady.value).toBe(true))
     })
+
+    it(`should handle async status transitions correctly`, async () => {
+      let beginFn: (() => void) | undefined
+      let commitFn: (() => void) | undefined
+      let markReadyFn: (() => void) | undefined
+
+      const collection = createCollection<Person>({
+        id: `async-status-transition-test`,
+        getKey: (person: Person) => person.id,
+        startSync: false,
+        sync: {
+          sync: ({ begin, commit, markReady }) => {
+            beginFn = begin
+            commitFn = commit
+            markReadyFn = markReady
+            // Don't sync immediately
+          },
+        },
+        onInsert: () => Promise.resolve(),
+        onUpdate: () => Promise.resolve(),
+        onDelete: () => Promise.resolve(),
+      })
+
+      const { isLoading, isReady, status } = useLiveQuery((q) =>
+        q
+          .from({ collection })
+          .where(({ collection: c }) => gt(c.age, 30))
+          .select(({ collection: c }) => ({
+            id: c.id,
+            name: c.name,
+          }))
+      )
+
+      // Initially should be loading
+      expect(isLoading.value).toBe(true)
+      expect(isReady.value).toBe(false)
+      expect(status.value).toBe(`loading`)
+
+      // Start sync manually
+      collection.preload()
+
+      // Trigger the first commit to make collection ready
+      if (beginFn && commitFn && markReadyFn) {
+        beginFn()
+        commitFn()
+        // Simulate async delay before marking ready
+        await new Promise((resolve) => setTimeout(resolve, 10))
+        markReadyFn()
+      }
+
+      // Insert data
+      collection.insert({
+        id: `1`,
+        name: `John Doe`,
+        age: 35,
+        email: `[email protected]`,
+        isActive: true,
+        team: `team1`,
+      })
+
+      // Wait for the status to transition correctly
+      await waitFor(() => {
+        expect(isLoading.value).toBe(false)
+        expect(isReady.value).toBe(true)
+        expect(status.value).toBe(`ready`)
+      })
+    })
+
+    it(`should handle status transitions without change events`, async () => {
+      // This test reproduces the bug where status gets stuck in 'initialCommit'
+      // when the collection status changes without triggering change events
+      let beginFn: (() => void) | undefined
+      let commitFn: (() => void) | undefined
+      let markReadyFn: (() => void) | undefined
+
+      const collection = createCollection<Person>({
+        id: `status-stuck-test`,
+        getKey: (person: Person) => person.id,
+        startSync: false,
+        sync: {
+          sync: ({ begin, commit, markReady }) => {
+            beginFn = begin
+            commitFn = commit
+            markReadyFn = markReady
+            // Don't sync immediately
+          },
+        },
+        onInsert: () => Promise.resolve(),
+        onUpdate: () => Promise.resolve(),
+        onDelete: () => Promise.resolve(),
+      })
+
+      const { isLoading, isReady, status } = useLiveQuery((q) =>
+        q
+          .from({ collection })
+          .where(({ collection: c }) => gt(c.age, 30))
+          .select(({ collection: c }) => ({
+            id: c.id,
+            name: c.name,
+          }))
+      )
+
+      // Initially should be loading
+      expect(isLoading.value).toBe(true)
+      expect(isReady.value).toBe(false)
+
+      // Start sync manually
+      collection.preload()
+
+      // Trigger the first commit to make collection ready
+      if (beginFn && commitFn && markReadyFn) {
+        beginFn()
+        commitFn()
+        // Simulate async delay before marking ready
+        await new Promise((resolve) => setTimeout(resolve, 10))
+        markReadyFn()
+      }
+
+      // Insert data
+      collection.insert({
+        id: `1`,
+        name: `John Doe`,
+        age: 35,
+        email: `[email protected]`,
+        isActive: true,
+        team: `team1`,
+      })
+
+      // Wait for the status to transition correctly
+      // This should work even if no change events are fired
+      await waitFor(() => {
+        expect(isLoading.value).toBe(false)
+        expect(isReady.value).toBe(true)
+        expect(status.value).toBe(`ready`)
+      })
+    })
   })
 
   it(`should accept config object with pre-built QueryBuilder instance`, async () => {