@mdxui/terminal 2.0.0

package/src/__tests__/data/reactive.test.ts

@@ -0,0 +1,1010 @@
+/**
+ * @mdxui/terminal Reactive Data Hooks Tests
+ *
+ * Tests for the reactive data hooks (useReactiveData, useReactiveTable,
+ * useReactiveList, useReactiveMetrics, useReactiveCard) that integrate
+ * data components with TanStack DB collections.
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { renderHook, act, waitFor } from '@testing-library/react'
+import * as React from 'react'
+import { z } from 'zod'
+import {
+  createDB,
+  createCollection,
+  DBProvider,
+  useReactiveData,
+  useReactiveTable,
+  useReactiveList,
+  useReactiveMetrics,
+  useReactiveCard,
+} from '../../data'
+import type { DB } from '../../data'
+
+// ============================================================================
+// Test Setup
+// ============================================================================
+
+const UserSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  email: z.string(),
+  role: z.enum(['admin', 'user', 'guest']),
+  age: z.number().optional(),
+  status: z.enum(['active', 'inactive']).default('active'),
+})
+
+type User = z.infer<typeof UserSchema>
+
+const OrderSchema = z.object({
+  id: z.string(),
+  userId: z.string(),
+  total: z.number(),
+  status: z.enum(['pending', 'completed', 'cancelled']),
+  createdAt: z.string(),
+})
+
+type Order = z.infer<typeof OrderSchema>
+
+function createTestDB(): DB {
+  const usersCollection = createCollection<User>({
+    name: 'users',
+    schema: UserSchema,
+    primaryKey: 'id',
+  })
+
+  const ordersCollection = createCollection<Order>({
+    name: 'orders',
+    schema: OrderSchema,
+    primaryKey: 'id',
+  })
+
+  return createDB({
+    collections: [usersCollection, ordersCollection],
+  })
+}
+
+function createWrapper(db: DB) {
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return React.createElement(DBProvider, { db }, children)
+  }
+}
+
+// ============================================================================
+// useReactiveData Tests
+// ============================================================================
+
+describe('useReactiveData', () => {
+  let db: DB
+
+  beforeEach(() => {
+    db = createTestDB()
+  })
+
+  afterEach(async () => {
+    await db.clear()
+    db.close()
+  })
+
+  describe('basic queries', () => {
+    it('returns empty array for empty collection', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({ collection: 'users' }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      expect(result.current.data).toEqual([])
+      expect(result.current.error).toBeUndefined()
+    })
+
+    it('returns data from collection', async () => {
+      await db.collections.users.insert({
+        id: '1',
+        name: 'Alice',
+        email: 'alice@example.com',
+        role: 'admin',
+        status: 'active',
+      })
+
+      const { result } = renderHook(
+        () => useReactiveData<User>({ collection: 'users' }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      expect(result.current.data).toHaveLength(1)
+      expect(result.current.data[0].name).toBe('Alice')
+    })
+
+    it('filters data with where clause', async () => {
+      await db.collections.users.insert({
+        id: '1',
+        name: 'Alice',
+        email: 'alice@example.com',
+        role: 'admin',
+        status: 'active',
+      })
+      await db.collections.users.insert({
+        id: '2',
+        name: 'Bob',
+        email: 'bob@example.com',
+        role: 'user',
+        status: 'active',
+      })
+
+      const { result } = renderHook(
+        () => useReactiveData<User>({
+          collection: 'users',
+          where: { role: 'admin' },
+        }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      expect(result.current.data).toHaveLength(1)
+      expect(result.current.data[0].name).toBe('Alice')
+    })
+
+    it('returns error for non-existent collection', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({ collection: 'nonexistent' }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      expect(result.current.error).toBeDefined()
+      expect(result.current.error?.message).toContain('not found')
+    })
+  })
+
+  describe('reactive updates', () => {
+    it('updates data when collection changes', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({ collection: 'users' }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      expect(result.current.data).toHaveLength(0)
+
+      // Insert data
+      await act(async () => {
+        await db.collections.users.insert({
+          id: '1',
+          name: 'Alice',
+          email: 'alice@example.com',
+          role: 'admin',
+          status: 'active',
+        })
+      })
+
+      await waitFor(() => {
+        expect(result.current.data).toHaveLength(1)
+      })
+
+      expect(result.current.data[0].name).toBe('Alice')
+    })
+
+    it('updates data when document is updated', async () => {
+      await db.collections.users.insert({
+        id: '1',
+        name: 'Alice',
+        email: 'alice@example.com',
+        role: 'admin',
+        status: 'active',
+      })
+
+      const { result } = renderHook(
+        () => useReactiveData<User>({ collection: 'users' }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toHaveLength(1)
+      })
+
+      // Update data
+      await act(async () => {
+        await db.collections.users.update({ id: '1' }, { name: 'Alicia' })
+      })
+
+      await waitFor(() => {
+        expect(result.current.data[0].name).toBe('Alicia')
+      })
+    })
+
+    it('updates data when document is deleted', async () => {
+      await db.collections.users.insert({
+        id: '1',
+        name: 'Alice',
+        email: 'alice@example.com',
+        role: 'admin',
+        status: 'active',
+      })
+
+      const { result } = renderHook(
+        () => useReactiveData<User>({ collection: 'users' }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toHaveLength(1)
+      })
+
+      // Delete data
+      await act(async () => {
+        await db.collections.users.delete({ id: '1' })
+      })
+
+      await waitFor(() => {
+        expect(result.current.data).toHaveLength(0)
+      })
+    })
+  })
+
+  describe('mutations', () => {
+    it('inserts data via mutate.insert', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({ collection: 'users' }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      await act(async () => {
+        await result.current.mutate.insert({
+          id: '1',
+          name: 'Alice',
+          email: 'alice@example.com',
+          role: 'admin',
+          status: 'active',
+        })
+      })
+
+      expect(result.current.data).toHaveLength(1)
+      expect(result.current.data[0].name).toBe('Alice')
+    })
+
+    it('updates data via mutate.update', async () => {
+      await db.collections.users.insert({
+        id: '1',
+        name: 'Alice',
+        email: 'alice@example.com',
+        role: 'admin',
+        status: 'active',
+      })
+
+      const { result } = renderHook(
+        () => useReactiveData<User>({ collection: 'users' }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toHaveLength(1)
+      })
+
+      await act(async () => {
+        await result.current.mutate.update({ id: '1' }, { name: 'Alicia' })
+      })
+
+      await waitFor(() => {
+        expect(result.current.data[0].name).toBe('Alicia')
+      })
+    })
+
+    it('deletes data via mutate.delete', async () => {
+      await db.collections.users.insert({
+        id: '1',
+        name: 'Alice',
+        email: 'alice@example.com',
+        role: 'admin',
+        status: 'active',
+      })
+
+      const { result } = renderHook(
+        () => useReactiveData<User>({ collection: 'users' }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.data).toHaveLength(1)
+      })
+
+      await act(async () => {
+        await result.current.mutate.delete({ id: '1' })
+      })
+
+      await waitFor(() => {
+        expect(result.current.data).toHaveLength(0)
+      })
+    })
+
+    it('performs optimistic insert', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({
+          collection: 'users',
+          optimistic: true,
+        }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      // Optimistic insert - data shows immediately after mutation starts
+      await act(async () => {
+        await result.current.mutate.insert({
+          id: '1',
+          name: 'Alice',
+          email: 'alice@example.com',
+          role: 'admin',
+          status: 'active',
+        })
+      })
+
+      // Data should be updated (optimistically or via subscription)
+      expect(result.current.data).toHaveLength(1)
+      expect(result.current.data[0].name).toBe('Alice')
+    })
+  })
+
+  describe('sorting', () => {
+    beforeEach(async () => {
+      await db.collections.users.insert({
+        id: '1',
+        name: 'Charlie',
+        email: 'charlie@example.com',
+        role: 'user',
+        status: 'active',
+      })
+      await db.collections.users.insert({
+        id: '2',
+        name: 'Alice',
+        email: 'alice@example.com',
+        role: 'admin',
+        status: 'active',
+      })
+      await db.collections.users.insert({
+        id: '3',
+        name: 'Bob',
+        email: 'bob@example.com',
+        role: 'user',
+        status: 'active',
+      })
+    })
+
+    it('sorts data with initial orderBy', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({
+          collection: 'users',
+          orderBy: { name: 'asc' },
+        }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      expect(result.current.data[0].name).toBe('Alice')
+      expect(result.current.data[1].name).toBe('Bob')
+      expect(result.current.data[2].name).toBe('Charlie')
+    })
+
+    it('toggles sort direction with setSort', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({
+          collection: 'users',
+          orderBy: { name: 'asc' },
+        }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      expect(result.current.sort.field).toBe('name')
+      expect(result.current.sort.direction).toBe('asc')
+
+      // Toggle to descending
+      act(() => {
+        result.current.setSort('name')
+      })
+
+      expect(result.current.sort.direction).toBe('desc')
+
+      // Toggle back to ascending
+      act(() => {
+        result.current.setSort('name')
+      })
+
+      expect(result.current.sort.direction).toBe('asc')
+    })
+
+    it('changes sort field with setSort', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({
+          collection: 'users',
+          orderBy: { name: 'asc' },
+        }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      act(() => {
+        result.current.setSort('email')
+      })
+
+      expect(result.current.sort.field).toBe('email')
+      expect(result.current.sort.direction).toBe('asc')
+    })
+  })
+
+  describe('selection', () => {
+    beforeEach(async () => {
+      await db.collections.users.insert({
+        id: '1',
+        name: 'Alice',
+        email: 'alice@example.com',
+        role: 'admin',
+        status: 'active',
+      })
+      await db.collections.users.insert({
+        id: '2',
+        name: 'Bob',
+        email: 'bob@example.com',
+        role: 'user',
+        status: 'active',
+      })
+    })
+
+    it('supports single selection', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({
+          collection: 'users',
+          selectable: 'single',
+        }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      expect(result.current.selection.mode).toBe('single')
+      expect(result.current.selection.selected.size).toBe(0)
+
+      // Select first item
+      act(() => {
+        result.current.toggleSelect('1')
+      })
+
+      expect(result.current.selection.selected.has('1')).toBe(true)
+      expect(result.current.selection.selected.size).toBe(1)
+
+      // Select second item (should replace)
+      act(() => {
+        result.current.toggleSelect('2')
+      })
+
+      expect(result.current.selection.selected.has('2')).toBe(true)
+      expect(result.current.selection.selected.has('1')).toBe(false)
+      expect(result.current.selection.selected.size).toBe(1)
+    })
+
+    it('supports multi selection', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({
+          collection: 'users',
+          selectable: 'multi',
+        }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      expect(result.current.selection.mode).toBe('multi')
+
+      // Select first item
+      act(() => {
+        result.current.toggleSelect('1')
+      })
+
+      expect(result.current.selection.selected.has('1')).toBe(true)
+
+      // Select second item (should add)
+      act(() => {
+        result.current.toggleSelect('2')
+      })
+
+      expect(result.current.selection.selected.has('1')).toBe(true)
+      expect(result.current.selection.selected.has('2')).toBe(true)
+      expect(result.current.selection.selected.size).toBe(2)
+    })
+
+    it('clears selection with clearSelection', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({
+          collection: 'users',
+          selectable: 'multi',
+        }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      act(() => {
+        result.current.toggleSelect('1')
+        result.current.toggleSelect('2')
+      })
+
+      expect(result.current.selection.selected.size).toBe(2)
+
+      act(() => {
+        result.current.clearSelection()
+      })
+
+      expect(result.current.selection.selected.size).toBe(0)
+    })
+
+    it('selects all with selectAll', async () => {
+      const { result } = renderHook(
+        () => useReactiveData<User>({
+          collection: 'users',
+          selectable: 'multi',
+        }),
+        { wrapper: createWrapper(db) }
+      )
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false)
+      })
+
+      act(() => {
+        result.current.selectAll()
+      })
+
+      expect(result.current.selection.selected.size).toBe(2)
+      expect(result.current.selection.selected.has('1')).toBe(true)
+      expect(result.current.selection.selected.has('2')).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// useReactiveTable Tests
+// ============================================================================
+
+describe('useReactiveTable', () => {
+  let db: DB
+
+  beforeEach(() => {
+    db = createTestDB()
+  })
+
+  afterEach(async () => {
+    await db.clear()
+    db.close()
+  })
+
+  it('works as a specialized useReactiveData for tables', async () => {
+    await db.collections.users.insert({
+      id: '1',
+      name: 'Alice',
+      email: 'alice@example.com',
+      role: 'admin',
+      status: 'active',
+    })
+
+    const { result } = renderHook(
+      () => useReactiveTable<User>({
+        collection: 'users',
+        columns: [
+          { key: 'name', header: 'Name', sortable: true },
+          { key: 'email', header: 'Email' },
+        ],
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.data).toHaveLength(1)
+    expect(result.current.data[0].name).toBe('Alice')
+  })
+})
+
+// ============================================================================
+// useReactiveList Tests
+// ============================================================================
+
+describe('useReactiveList', () => {
+  let db: DB
+
+  beforeEach(() => {
+    db = createTestDB()
+  })
+
+  afterEach(async () => {
+    await db.clear()
+    db.close()
+  })
+
+  it('works as a specialized useReactiveData for lists', async () => {
+    await db.collections.users.insert({
+      id: '1',
+      name: 'Alice',
+      email: 'alice@example.com',
+      role: 'admin',
+      status: 'active',
+    })
+
+    const { result } = renderHook(
+      () => useReactiveList<User>({
+        collection: 'users',
+        labelField: 'name',
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.data).toHaveLength(1)
+    expect(result.current.data[0].name).toBe('Alice')
+  })
+})
+
+// ============================================================================
+// useReactiveMetrics Tests
+// ============================================================================
+
+describe('useReactiveMetrics', () => {
+  let db: DB
+
+  beforeEach(() => {
+    db = createTestDB()
+  })
+
+  afterEach(async () => {
+    await db.clear()
+    db.close()
+  })
+
+  it('computes count metric', async () => {
+    await db.collections.orders.insert({
+      id: '1',
+      userId: 'u1',
+      total: 100,
+      status: 'completed',
+      createdAt: new Date().toISOString(),
+    })
+    await db.collections.orders.insert({
+      id: '2',
+      userId: 'u2',
+      total: 200,
+      status: 'completed',
+      createdAt: new Date().toISOString(),
+    })
+
+    const { result } = renderHook(
+      () => useReactiveMetrics<Order>({
+        collection: 'orders',
+        metrics: [
+          {
+            key: 'total-orders',
+            label: 'Total Orders',
+            field: 'id',
+            aggregate: 'count',
+          },
+        ],
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.metrics).toHaveLength(1)
+    expect(result.current.metrics[0].label).toBe('Total Orders')
+    expect(result.current.metrics[0].value).toBe(2)
+  })
+
+  it('computes sum metric', async () => {
+    await db.collections.orders.insert({
+      id: '1',
+      userId: 'u1',
+      total: 100,
+      status: 'completed',
+      createdAt: new Date().toISOString(),
+    })
+    await db.collections.orders.insert({
+      id: '2',
+      userId: 'u2',
+      total: 200,
+      status: 'completed',
+      createdAt: new Date().toISOString(),
+    })
+
+    const { result } = renderHook(
+      () => useReactiveMetrics<Order>({
+        collection: 'orders',
+        metrics: [
+          {
+            key: 'revenue',
+            label: 'Revenue',
+            field: 'total',
+            aggregate: 'sum',
+          },
+        ],
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.metrics[0].label).toBe('Revenue')
+    expect(result.current.metrics[0].value).toBe(300)
+  })
+
+  it('computes avg metric', async () => {
+    await db.collections.orders.insert({
+      id: '1',
+      userId: 'u1',
+      total: 100,
+      status: 'completed',
+      createdAt: new Date().toISOString(),
+    })
+    await db.collections.orders.insert({
+      id: '2',
+      userId: 'u2',
+      total: 200,
+      status: 'completed',
+      createdAt: new Date().toISOString(),
+    })
+
+    const { result } = renderHook(
+      () => useReactiveMetrics<Order>({
+        collection: 'orders',
+        metrics: [
+          {
+            key: 'avg-order',
+            label: 'Avg Order',
+            field: 'total',
+            aggregate: 'avg',
+          },
+        ],
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.metrics[0].label).toBe('Avg Order')
+    expect(result.current.metrics[0].value).toBe(150)
+  })
+
+  it('updates reactively when data changes', async () => {
+    const { result } = renderHook(
+      () => useReactiveMetrics<Order>({
+        collection: 'orders',
+        metrics: [
+          {
+            key: 'total-orders',
+            label: 'Total Orders',
+            field: 'id',
+            aggregate: 'count',
+          },
+        ],
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.metrics[0].value).toBe(0)
+
+    // Add data
+    await act(async () => {
+      await db.collections.orders.insert({
+        id: '1',
+        userId: 'u1',
+        total: 100,
+        status: 'completed',
+        createdAt: new Date().toISOString(),
+      })
+    })
+
+    await waitFor(() => {
+      expect(result.current.metrics[0].value).toBe(1)
+    })
+  })
+
+  it('formats currency values', async () => {
+    await db.collections.orders.insert({
+      id: '1',
+      userId: 'u1',
+      total: 1000,
+      status: 'completed',
+      createdAt: new Date().toISOString(),
+    })
+
+    const { result } = renderHook(
+      () => useReactiveMetrics<Order>({
+        collection: 'orders',
+        metrics: [
+          {
+            key: 'revenue',
+            label: 'Revenue',
+            field: 'total',
+            aggregate: 'sum',
+            format: 'currency',
+          },
+        ],
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.metrics[0].value).toBe('$1,000')
+  })
+})
+
+// ============================================================================
+// useReactiveCard Tests
+// ============================================================================
+
+describe('useReactiveCard', () => {
+  let db: DB
+
+  beforeEach(() => {
+    db = createTestDB()
+  })
+
+  afterEach(async () => {
+    await db.clear()
+    db.close()
+  })
+
+  it('fetches single record', async () => {
+    await db.collections.users.insert({
+      id: '1',
+      name: 'Alice',
+      email: 'alice@example.com',
+      role: 'admin',
+      status: 'active',
+    })
+
+    const { result } = renderHook(
+      () => useReactiveCard<User>({
+        collection: 'users',
+        where: { id: '1' },
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.data).not.toBeNull()
+    expect(result.current.data?.name).toBe('Alice')
+  })
+
+  it('returns null for non-existent record', async () => {
+    const { result } = renderHook(
+      () => useReactiveCard<User>({
+        collection: 'users',
+        where: { id: 'nonexistent' },
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.data).toBeNull()
+  })
+
+  it('updates record via update function', async () => {
+    await db.collections.users.insert({
+      id: '1',
+      name: 'Alice',
+      email: 'alice@example.com',
+      role: 'admin',
+      status: 'active',
+    })
+
+    const { result } = renderHook(
+      () => useReactiveCard<User>({
+        collection: 'users',
+        where: { id: '1' },
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.data?.name).toBe('Alice')
+    })
+
+    await act(async () => {
+      await result.current.update({ name: 'Alicia' })
+    })
+
+    await waitFor(() => {
+      expect(result.current.data?.name).toBe('Alicia')
+    })
+  })
+
+  it('updates reactively when record changes externally', async () => {
+    await db.collections.users.insert({
+      id: '1',
+      name: 'Alice',
+      email: 'alice@example.com',
+      role: 'admin',
+      status: 'active',
+    })
+
+    const { result } = renderHook(
+      () => useReactiveCard<User>({
+        collection: 'users',
+        where: { id: '1' },
+      }),
+      { wrapper: createWrapper(db) }
+    )
+
+    await waitFor(() => {
+      expect(result.current.data?.name).toBe('Alice')
+    })
+
+    // Update externally
+    await act(async () => {
+      await db.collections.users.update({ id: '1' }, { name: 'Updated' })
+    })
+
+    await waitFor(() => {
+      expect(result.current.data?.name).toBe('Updated')
+    })
+  })
+})