|
| 1 | +/** |
| 2 | + * Integration test: offline transactions + query collection refresh |
| 3 | + * |
| 4 | + * Verifies that a query-backed collection does not revert to stale server |
| 5 | + * state when coming back online with pending offline transactions. |
| 6 | + */ |
| 7 | + |
| 8 | +import { describe, expect, it, vi } from 'vitest' |
| 9 | +import { createCollection } from '@tanstack/db' |
| 10 | +import { QueryClient } from '@tanstack/query-core' |
| 11 | +import { startOfflineExecutor } from '@tanstack/offline-transactions' |
| 12 | +import { queryCollectionOptions } from '../src/query' |
| 13 | +import type { Collection } from '@tanstack/db' |
| 14 | +import type { |
| 15 | + LeaderElection, |
| 16 | + OfflineConfig, |
| 17 | + OnlineDetector, |
| 18 | + StorageAdapter, |
| 19 | +} from '@tanstack/offline-transactions' |
| 20 | + |
| 21 | +// --- Browser API mocks needed by @tanstack/offline-transactions --- |
| 22 | +// jsdom doesn't provide navigator.locks, which the WebLocksLeader uses. |
| 23 | +// We pass custom implementations (FakeLeaderElection, ManualOnlineDetector, |
| 24 | +// FakeStorageAdapter) so these mocks just prevent initialization errors. |
| 25 | + |
| 26 | +if (!(globalThis.navigator as any)?.locks) { |
| 27 | + Object.defineProperty(globalThis.navigator, `locks`, { |
| 28 | + value: { request: vi.fn().mockResolvedValue(false) }, |
| 29 | + configurable: true, |
| 30 | + }) |
| 31 | +} |
| 32 | + |
| 33 | +// --- Test helpers --- |
| 34 | + |
| 35 | +const flushMicrotasks = () => new Promise((resolve) => setTimeout(resolve, 0)) |
| 36 | + |
| 37 | +class ManualOnlineDetector implements OnlineDetector { |
| 38 | + private listeners = new Set<() => void>() |
| 39 | + private online: boolean |
| 40 | + |
| 41 | + constructor(initialOnline: boolean) { |
| 42 | + this.online = initialOnline |
| 43 | + } |
| 44 | + |
| 45 | + subscribe(callback: () => void): () => void { |
| 46 | + this.listeners.add(callback) |
| 47 | + return () => { |
| 48 | + this.listeners.delete(callback) |
| 49 | + } |
| 50 | + } |
| 51 | + |
| 52 | + notifyOnline(): void { |
| 53 | + for (const listener of this.listeners) { |
| 54 | + listener() |
| 55 | + } |
| 56 | + } |
| 57 | + |
| 58 | + isOnline(): boolean { |
| 59 | + return this.online |
| 60 | + } |
| 61 | + |
| 62 | + setOnline(isOnline: boolean): void { |
| 63 | + this.online = isOnline |
| 64 | + if (isOnline) { |
| 65 | + this.notifyOnline() |
| 66 | + } |
| 67 | + } |
| 68 | + |
| 69 | + dispose(): void { |
| 70 | + this.listeners.clear() |
| 71 | + } |
| 72 | +} |
| 73 | + |
| 74 | +class FakeStorageAdapter implements StorageAdapter { |
| 75 | + private store = new Map<string, string>() |
| 76 | + |
| 77 | + get(key: string): Promise<string | null> { |
| 78 | + return Promise.resolve(this.store.has(key) ? this.store.get(key)! : null) |
| 79 | + } |
| 80 | + |
| 81 | + set(key: string, value: string): Promise<void> { |
| 82 | + this.store.set(key, value) |
| 83 | + return Promise.resolve() |
| 84 | + } |
| 85 | + |
| 86 | + delete(key: string): Promise<void> { |
| 87 | + this.store.delete(key) |
| 88 | + return Promise.resolve() |
| 89 | + } |
| 90 | + |
| 91 | + keys(): Promise<Array<string>> { |
| 92 | + return Promise.resolve(Array.from(this.store.keys())) |
| 93 | + } |
| 94 | + |
| 95 | + clear(): Promise<void> { |
| 96 | + this.store.clear() |
| 97 | + return Promise.resolve() |
| 98 | + } |
| 99 | +} |
| 100 | + |
| 101 | +class FakeLeaderElection implements LeaderElection { |
| 102 | + private listeners = new Set<(isLeader: boolean) => void>() |
| 103 | + private leader = true |
| 104 | + |
| 105 | + requestLeadership(): Promise<boolean> { |
| 106 | + this.notify(this.leader) |
| 107 | + return Promise.resolve(this.leader) |
| 108 | + } |
| 109 | + |
| 110 | + releaseLeadership(): void { |
| 111 | + this.leader = false |
| 112 | + this.notify(false) |
| 113 | + } |
| 114 | + |
| 115 | + isLeader(): boolean { |
| 116 | + return this.leader |
| 117 | + } |
| 118 | + |
| 119 | + onLeadershipChange(callback: (isLeader: boolean) => void): () => void { |
| 120 | + this.listeners.add(callback) |
| 121 | + return () => { |
| 122 | + this.listeners.delete(callback) |
| 123 | + } |
| 124 | + } |
| 125 | + |
| 126 | + private notify(isLeader: boolean): void { |
| 127 | + for (const listener of this.listeners) { |
| 128 | + listener(isLeader) |
| 129 | + } |
| 130 | + } |
| 131 | +} |
| 132 | + |
| 133 | +// --- Test item type --- |
| 134 | + |
| 135 | +interface TestItem { |
| 136 | + id: string |
| 137 | + value: string |
| 138 | +} |
| 139 | + |
| 140 | +type OfflineMutationParams = Parameters<OfflineConfig[`mutationFns`][string]>[0] |
| 141 | + |
| 142 | +// --- Tests --- |
| 143 | + |
| 144 | +describe(`offline transactions + query collection refresh`, () => { |
| 145 | + it(`should not revert optimistic state when query refetches before pending offline transactions complete`, async () => { |
| 146 | + // This test verifies that when a user goes offline, queues a mutation, |
| 147 | + // and comes back online, the collection does not temporarily lose the |
| 148 | + // optimistic insert. In a query-backed collection, data flows through |
| 149 | + // query refetches (queryFn), not directly from the mutation function. |
| 150 | + // When refetchOnReconnect fires before the offline transaction reaches |
| 151 | + // the server, the refetch returns stale data. The optimistic state |
| 152 | + // should remain visible until the transaction completes and a fresh |
| 153 | + // refetch confirms the data. |
| 154 | + |
| 155 | + const onlineDetector = new ManualOnlineDetector(false) // Start offline |
| 156 | + const storage = new FakeStorageAdapter() |
| 157 | + |
| 158 | + // --- Mock server state --- |
| 159 | + const serverItems: Array<TestItem> = [ |
| 160 | + { id: `item-1`, value: `server-data` }, |
| 161 | + ] |
| 162 | + |
| 163 | + // Control when the mutation fn resolves |
| 164 | + let resolveMutation: (() => void) | null = null |
| 165 | + |
| 166 | + const queryClient = new QueryClient({ |
| 167 | + defaultOptions: { |
| 168 | + queries: { |
| 169 | + staleTime: 0, |
| 170 | + retry: false, |
| 171 | + }, |
| 172 | + }, |
| 173 | + }) |
| 174 | + |
| 175 | + // queryFn reads from serverItems (simulating a real API GET endpoint) |
| 176 | + const queryFn = vi.fn().mockImplementation(() => { |
| 177 | + return Promise.resolve([...serverItems]) |
| 178 | + }) |
| 179 | + |
| 180 | + // Create the query-backed collection |
| 181 | + const collection = createCollection( |
| 182 | + queryCollectionOptions({ |
| 183 | + id: `offline-refresh-test`, |
| 184 | + queryClient, |
| 185 | + queryKey: [`offline-refresh-test`], |
| 186 | + queryFn, |
| 187 | + getKey: (item: TestItem) => item.id, |
| 188 | + startSync: true, |
| 189 | + }), |
| 190 | + ) |
| 191 | + |
| 192 | + // Wait for initial query to populate the collection |
| 193 | + await vi.waitFor(() => { |
| 194 | + expect(queryFn).toHaveBeenCalledTimes(1) |
| 195 | + expect(collection.size).toBe(1) |
| 196 | + }) |
| 197 | + expect(collection.get(`item-1`)?.value).toBe(`server-data`) |
| 198 | + |
| 199 | + // --- Set up offline executor --- |
| 200 | + const mutationFnName = `syncData` |
| 201 | + const offlineConfig: OfflineConfig = { |
| 202 | + collections: { [`offline-refresh-test`]: collection as any }, |
| 203 | + mutationFns: { |
| 204 | + [mutationFnName]: async (params: OfflineMutationParams) => { |
| 205 | + // Block until the test explicitly resolves (simulating slow API POST) |
| 206 | + await new Promise<void>((resolve) => { |
| 207 | + resolveMutation = resolve |
| 208 | + }) |
| 209 | + |
| 210 | + // Update server state (simulating the server processing the mutation) |
| 211 | + for (const mutation of params.transaction.mutations) { |
| 212 | + if (mutation.type === `insert`) { |
| 213 | + serverItems.push(mutation.modified as unknown as TestItem) |
| 214 | + } |
| 215 | + } |
| 216 | + |
| 217 | + return { ok: true } |
| 218 | + }, |
| 219 | + }, |
| 220 | + storage, |
| 221 | + leaderElection: new FakeLeaderElection(), |
| 222 | + onlineDetector, |
| 223 | + } |
| 224 | + |
| 225 | + const executor = startOfflineExecutor(offlineConfig) |
| 226 | + await executor.waitForInit() |
| 227 | + |
| 228 | + // --- Go offline and create an offline mutation --- |
| 229 | + const offlineTx = executor.createOfflineTransaction({ |
| 230 | + mutationFnName, |
| 231 | + autoCommit: false, |
| 232 | + }) |
| 233 | + |
| 234 | + offlineTx.mutate(() => { |
| 235 | + ;(collection as Collection<TestItem, string, any>).insert({ |
| 236 | + id: `item-2`, |
| 237 | + value: `offline-insert`, |
| 238 | + }) |
| 239 | + }) |
| 240 | + |
| 241 | + // Commit while offline: persists to outbox, mutation fn NOT called yet |
| 242 | + const commitPromise = offlineTx.commit() |
| 243 | + await flushMicrotasks() |
| 244 | + |
| 245 | + // Verify: item-2 is visible through optimistic state |
| 246 | + expect(collection.get(`item-2`)?.value).toBe(`offline-insert`) |
| 247 | + expect(collection.get(`item-1`)?.value).toBe(`server-data`) |
| 248 | + |
| 249 | + // --- Come online --- |
| 250 | + // This triggers both: |
| 251 | + // 1. The offline executor replaying pending transactions (mutationFn called) |
| 252 | + // 2. TanStack Query potentially refetching (refetchOnReconnect default) |
| 253 | + onlineDetector.setOnline(true) |
| 254 | + await flushMicrotasks() |
| 255 | + |
| 256 | + // Trigger a query refetch that returns stale server state. |
| 257 | + // The server doesn't have item-2 yet (the mutation is still in progress). |
| 258 | + // This simulates what refetchOnReconnect would do. |
| 259 | + await collection.utils.refetch() |
| 260 | + |
| 261 | + // The refetch returned stale data (only item-1), but item-2 should |
| 262 | + // still be visible because the offline transaction is still pending |
| 263 | + // and the optimistic state should cover the gap. |
| 264 | + expect(collection.get(`item-2`)?.value).toBe(`offline-insert`) |
| 265 | + |
| 266 | + // --- Complete the mutation (server processes it) --- |
| 267 | + expect(resolveMutation).not.toBeNull() |
| 268 | + resolveMutation!() |
| 269 | + |
| 270 | + // Wait for the transaction to fully complete |
| 271 | + await commitPromise |
| 272 | + |
| 273 | + // After the transaction completes, item-2 should remain visible. |
| 274 | + // |
| 275 | + // Without the fix: the stale refetch overwrote syncedData with only |
| 276 | + // item-1, the optimistic state was cleaned up, and item-2 is gone |
| 277 | + // permanently (no fresh refetch is triggered). |
| 278 | + // |
| 279 | + // With the fix: the stale refetch was skipped (barrier), and a fresh |
| 280 | + // refetch is triggered once the barrier resolves. The fresh refetch |
| 281 | + // includes item-2 because the server now has it. We use waitFor to |
| 282 | + // allow the barrier-triggered refetch to complete. |
| 283 | + await vi.waitFor( |
| 284 | + () => { |
| 285 | + expect(collection.get(`item-2`)?.value).toBe(`offline-insert`) |
| 286 | + }, |
| 287 | + { timeout: 1000 }, |
| 288 | + ) |
| 289 | + |
| 290 | + executor.dispose() |
| 291 | + queryClient.clear() |
| 292 | + }) |
| 293 | +}) |
![autofix-ci[bot]](https://avatars.githubusercontent.com/in/243519?v=4&size=40){kind=avatar}
0 commit comments