@syncular/client-react 0.0.1

package/src/__tests__/integration/two-client-sync.test.ts

@@ -0,0 +1,373 @@
+/**
+ * Integration tests for two-client sync
+ *
+ * Tests that two clients with the same user ID can sync data between each other
+ * through a shared server.
+ */
+
+import { afterEach, beforeEach, describe, expect, it } from 'bun:test';
+import { enqueueOutboxCommit } from '@syncular/client';
+import {
+  createTestClient,
+  createTestServer,
+  destroyTestClient,
+  destroyTestServer,
+  type TestClient,
+  type TestServer,
+} from './test-setup';
+
+describe('Two Client Sync', () => {
+  let server: TestServer;
+  let clientA: TestClient;
+  let clientB: TestClient;
+
+  // Both clients use the same userId so they share the same scope
+  const sharedUserId = 'shared-user';
+
+  beforeEach(async () => {
+    server = await createTestServer();
+    clientA = await createTestClient(server, {
+      actorId: sharedUserId,
+      clientId: 'client-a',
+    });
+    clientB = await createTestClient(server, {
+      actorId: sharedUserId,
+      clientId: 'client-b',
+    });
+
+    // Start both engines
+    await clientA.engine.start();
+    await clientB.engine.start();
+  });
+
+  afterEach(async () => {
+    await destroyTestClient(clientA);
+    await destroyTestClient(clientB);
+    await destroyTestServer(server);
+  });
+
+  it('changes from client A appear in client B after sync', async () => {
+    // Client A creates a task via outbox
+    await enqueueOutboxCommit(clientA.db, {
+      operations: [
+        {
+          table: 'tasks',
+          row_id: 'task-1',
+          op: 'upsert',
+          payload: {
+            title: 'Task from Client A',
+            completed: 0,
+            user_id: sharedUserId,
+          },
+          base_version: null,
+        },
+      ],
+    });
+
+    // Sync client A (push to server)
+    await clientA.engine.sync();
+
+    // Sync client B (pull from server)
+    await clientB.engine.sync();
+
+    // Check client B has the task
+    const tasksB = await clientB.db.selectFrom('tasks').selectAll().execute();
+
+    expect(tasksB.length).toBe(1);
+    expect(tasksB[0]!.id).toBe('task-1');
+    expect(tasksB[0]!.title).toBe('Task from Client A');
+  });
+
+  it('changes sync bidirectionally', async () => {
+    // Client A creates task-1
+    await enqueueOutboxCommit(clientA.db, {
+      operations: [
+        {
+          table: 'tasks',
+          row_id: 'task-1',
+          op: 'upsert',
+          payload: {
+            title: 'Task from A',
+            completed: 0,
+            user_id: sharedUserId,
+          },
+          base_version: null,
+        },
+      ],
+    });
+
+    // Client B creates task-2
+    await enqueueOutboxCommit(clientB.db, {
+      operations: [
+        {
+          table: 'tasks',
+          row_id: 'task-2',
+          op: 'upsert',
+          payload: {
+            title: 'Task from B',
+            completed: 1,
+            user_id: sharedUserId,
+          },
+          base_version: null,
+        },
+      ],
+    });
+
+    // Sync both clients
+    await clientA.engine.sync();
+    await clientB.engine.sync();
+    // Sync again to ensure A gets B's changes
+    await clientA.engine.sync();
+
+    // Check both clients have both tasks
+    const tasksA = await clientA.db
+      .selectFrom('tasks')
+      .selectAll()
+      .orderBy('id', 'asc')
+      .execute();
+
+    const tasksB = await clientB.db
+      .selectFrom('tasks')
+      .selectAll()
+      .orderBy('id', 'asc')
+      .execute();
+
+    expect(tasksA.length).toBe(2);
+    expect(tasksB.length).toBe(2);
+
+    expect(tasksA.map((t) => t.id)).toEqual(['task-1', 'task-2']);
+    expect(tasksB.map((t) => t.id)).toEqual(['task-1', 'task-2']);
+  });
+
+  it('offline client queues changes until reconnect', async () => {
+    // Client A goes offline (stop engine)
+    clientA.engine.stop();
+
+    // Client A creates a task while offline
+    await enqueueOutboxCommit(clientA.db, {
+      operations: [
+        {
+          table: 'tasks',
+          row_id: 'offline-task',
+          op: 'upsert',
+          payload: {
+            title: 'Created while offline',
+            completed: 0,
+            user_id: sharedUserId,
+          },
+          base_version: null,
+        },
+      ],
+    });
+
+    // Verify task is in outbox (pending)
+    const outbox = await clientA.db
+      .selectFrom('sync_outbox_commits')
+      .selectAll()
+      .execute();
+    expect(outbox.length).toBe(1);
+    expect(outbox[0]!.status).toBe('pending');
+
+    // Client B syncs - should not see the task
+    await clientB.engine.sync();
+    const tasksBefore = await clientB.db
+      .selectFrom('tasks')
+      .selectAll()
+      .execute();
+    expect(tasksBefore.length).toBe(0);
+
+    // Client A reconnects
+    await clientA.engine.start();
+    await clientA.engine.sync();
+
+    // Now client B syncs and should see the task
+    await clientB.engine.sync();
+    const tasksAfter = await clientB.db
+      .selectFrom('tasks')
+      .selectAll()
+      .execute();
+    expect(tasksAfter.length).toBe(1);
+    expect(tasksAfter[0]!.title).toBe('Created while offline');
+  });
+
+  it('updates to existing tasks sync correctly', async () => {
+    // Client A creates a task
+    await enqueueOutboxCommit(clientA.db, {
+      operations: [
+        {
+          table: 'tasks',
+          row_id: 'task-1',
+          op: 'upsert',
+          payload: {
+            title: 'Original title',
+            completed: 0,
+            user_id: sharedUserId,
+          },
+          base_version: null,
+        },
+      ],
+    });
+    await clientA.engine.sync();
+    await clientB.engine.sync();
+
+    // Verify client B has the task with original title
+    let taskB = await clientB.db
+      .selectFrom('tasks')
+      .where('id', '=', 'task-1')
+      .selectAll()
+      .executeTakeFirst();
+    expect(taskB!.title).toBe('Original title');
+    expect(taskB!.server_version).toBe(1);
+
+    // Client A updates the task
+    await enqueueOutboxCommit(clientA.db, {
+      operations: [
+        {
+          table: 'tasks',
+          row_id: 'task-1',
+          op: 'upsert',
+          payload: {
+            title: 'Updated title',
+            completed: 1,
+            user_id: sharedUserId,
+          },
+          base_version: 1, // Current server version
+        },
+      ],
+    });
+    await clientA.engine.sync();
+    await clientB.engine.sync();
+
+    // Verify client B has the updated task
+    taskB = await clientB.db
+      .selectFrom('tasks')
+      .where('id', '=', 'task-1')
+      .selectAll()
+      .executeTakeFirst();
+    expect(taskB!.title).toBe('Updated title');
+    expect(taskB!.completed).toBe(1);
+    expect(taskB!.server_version).toBe(2);
+  });
+
+  it('deletes sync correctly', async () => {
+    // Client A creates a task
+    await enqueueOutboxCommit(clientA.db, {
+      operations: [
+        {
+          table: 'tasks',
+          row_id: 'task-to-delete',
+          op: 'upsert',
+          payload: {
+            title: 'Will be deleted',
+            completed: 0,
+            user_id: sharedUserId,
+          },
+          base_version: null,
+        },
+      ],
+    });
+    await clientA.engine.sync();
+    await clientB.engine.sync();
+
+    // Verify both clients have the task
+    let countA = await clientA.db
+      .selectFrom('tasks')
+      .select((eb) => eb.fn.count('id').as('count'))
+      .executeTakeFirst();
+    let countB = await clientB.db
+      .selectFrom('tasks')
+      .select((eb) => eb.fn.count('id').as('count'))
+      .executeTakeFirst();
+    expect(Number(countA!.count)).toBe(1);
+    expect(Number(countB!.count)).toBe(1);
+
+    // Client A deletes the task
+    await enqueueOutboxCommit(clientA.db, {
+      operations: [
+        {
+          table: 'tasks',
+          row_id: 'task-to-delete',
+          op: 'delete',
+          payload: {},
+          base_version: 1,
+        },
+      ],
+    });
+    await clientA.engine.sync();
+    await clientB.engine.sync();
+
+    // Verify both clients no longer have the task
+    countA = await clientA.db
+      .selectFrom('tasks')
+      .select((eb) => eb.fn.count('id').as('count'))
+      .executeTakeFirst();
+    countB = await clientB.db
+      .selectFrom('tasks')
+      .select((eb) => eb.fn.count('id').as('count'))
+      .executeTakeFirst();
+    expect(Number(countA!.count)).toBe(0);
+    expect(Number(countB!.count)).toBe(0);
+  });
+
+  it('clients with different user IDs do NOT see each other data', async () => {
+    // Create a third client with a different user ID
+    const clientC = await createTestClient(server, {
+      actorId: 'different-user',
+      clientId: 'client-c',
+    });
+    await clientC.engine.start();
+
+    try {
+      // Client A creates a task (for shared-user scope)
+      await enqueueOutboxCommit(clientA.db, {
+        operations: [
+          {
+            table: 'tasks',
+            row_id: 'task-for-shared-user',
+            op: 'upsert',
+            payload: {
+              title: 'Shared user task',
+              completed: 0,
+              user_id: sharedUserId,
+            },
+            base_version: null,
+          },
+        ],
+      });
+
+      // Client C creates a task (for different-user scope)
+      await enqueueOutboxCommit(clientC.db, {
+        operations: [
+          {
+            table: 'tasks',
+            row_id: 'task-for-different-user',
+            op: 'upsert',
+            payload: {
+              title: 'Different user task',
+              completed: 0,
+              user_id: 'different-user',
+            },
+            base_version: null,
+          },
+        ],
+      });
+
+      // Sync all clients
+      await clientA.engine.sync();
+      await clientB.engine.sync();
+      await clientC.engine.sync();
+
+      // Client B should ONLY see shared-user's task
+      const tasksB = await clientB.db.selectFrom('tasks').selectAll().execute();
+      expect(tasksB.length).toBe(1);
+      expect(tasksB[0]!.title).toBe('Shared user task');
+
+      // Client C should ONLY see different-user's task
+      const tasksC = await clientC.db.selectFrom('tasks').selectAll().execute();
+      expect(tasksC.length).toBe(1);
+      expect(tasksC[0]!.title).toBe('Different user task');
+    } finally {
+      await destroyTestClient(clientC);
+    }
+  });
+});

package/src/__tests__/setup.ts

@@ -0,0 +1,7 @@
+/**
+ * Test setup - configures happy-dom for React testing
+ */
+
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+GlobalRegistrator.register();

package/src/__tests__/test-utils.ts

@@ -0,0 +1,187 @@
+/**
+ * Test utilities for @syncular/client-react
+ */
+
+import type {
+  SyncPullRequest,
+  SyncPullResponse,
+  SyncPushRequest,
+  SyncPushResponse,
+  SyncTransport,
+} from '@syncular/client';
+import { ClientTableRegistry, type SyncClientDb } from '@syncular/client';
+import type { Kysely } from 'kysely';
+
+/**
+ * Create a mock transport for testing
+ */
+export function createMockTransport(
+  options: {
+    pullResponse?: Partial<SyncPullResponse>;
+    pushResponse?: Partial<SyncPushResponse>;
+    onPull?: (request: SyncPullRequest) => void;
+    onPush?: (request: SyncPushRequest) => void;
+  } = {}
+): SyncTransport {
+  return {
+    async pull(request: SyncPullRequest): Promise<SyncPullResponse> {
+      options.onPull?.(request);
+      return {
+        ok: true,
+        subscriptions: [],
+        ...options.pullResponse,
+      };
+    },
+    async push(request: SyncPushRequest): Promise<SyncPushResponse> {
+      options.onPush?.(request);
+      return {
+        ok: true,
+        status: 'applied',
+        results: request.operations.map((_, i) => ({
+          opIndex: i,
+          status: 'applied' as const,
+        })),
+        ...options.pushResponse,
+      };
+    },
+    async fetchSnapshotChunk(): Promise<Uint8Array> {
+      // Return empty gzipped NDJSON (empty array)
+      return new Uint8Array();
+    },
+  };
+}
+
+/**
+ * Create a mock shape registry
+ */
+export function createMockShapeRegistry<
+  DB extends SyncClientDb = SyncClientDb,
+>(): ClientTableRegistry<DB> {
+  return new ClientTableRegistry<DB>();
+}
+
+/**
+ * Create a mock in-memory database for testing
+ */
+export async function createMockDb<
+  DB extends SyncClientDb = SyncClientDb,
+>(): Promise<Kysely<DB>> {
+  // Dynamic import to avoid bundling issues
+  const { Kysely } = await import('kysely');
+  const { BunSqliteDialect } = await import('kysely-bun-sqlite');
+  const { Database } = await import('bun:sqlite');
+
+  const db = new Kysely<DB>({
+    dialect: new BunSqliteDialect({
+      database: new Database(':memory:'),
+    }),
+  });
+
+  // Create sync tables
+  await db.schema
+    .createTable('sync_subscription_state')
+    .ifNotExists()
+    .addColumn('state_id', 'text', (col) => col.notNull())
+    .addColumn('subscription_id', 'text', (col) => col.notNull())
+    .addColumn('shape', 'text', (col) => col.notNull())
+    .addColumn('scopes_json', 'text', (col) => col.notNull())
+    .addColumn('params_json', 'text', (col) => col.notNull())
+    .addColumn('cursor', 'integer', (col) => col.notNull())
+    .addColumn('bootstrap_state_json', 'text')
+    .addColumn('status', 'text', (col) => col.notNull())
+    .addColumn('created_at', 'integer', (col) => col.notNull())
+    .addColumn('updated_at', 'integer', (col) => col.notNull())
+    .addPrimaryKeyConstraint('pk_sync_subscription_state', [
+      'state_id',
+      'subscription_id',
+    ])
+    .execute();
+
+  await db.schema
+    .createTable('sync_outbox_commits')
+    .ifNotExists()
+    .addColumn('id', 'text', (col) => col.primaryKey())
+    .addColumn('client_commit_id', 'text', (col) => col.notNull())
+    .addColumn('status', 'text', (col) => col.notNull())
+    .addColumn('operations_json', 'text', (col) => col.notNull())
+    .addColumn('last_response_json', 'text')
+    .addColumn('error', 'text')
+    .addColumn('created_at', 'integer', (col) => col.notNull())
+    .addColumn('updated_at', 'integer', (col) => col.notNull())
+    .addColumn('attempt_count', 'integer', (col) => col.notNull().defaultTo(0))
+    .addColumn('acked_commit_seq', 'integer')
+    .addColumn('schema_version', 'integer', (col) => col.notNull().defaultTo(1))
+    .execute();
+
+  await db.schema
+    .createTable('sync_conflicts')
+    .ifNotExists()
+    .addColumn('id', 'text', (col) => col.primaryKey())
+    .addColumn('outbox_commit_id', 'text', (col) => col.notNull())
+    .addColumn('client_commit_id', 'text', (col) => col.notNull())
+    .addColumn('op_index', 'integer', (col) => col.notNull())
+    .addColumn('result_status', 'text', (col) => col.notNull())
+    .addColumn('message', 'text', (col) => col.notNull())
+    .addColumn('code', 'text')
+    .addColumn('server_version', 'integer')
+    .addColumn('server_row_json', 'text')
+    .addColumn('created_at', 'integer', (col) => col.notNull())
+    .addColumn('resolved_at', 'integer')
+    .addColumn('resolution', 'text')
+    .execute();
+
+  await db.schema
+    .createTable('sync_blob_cache')
+    .ifNotExists()
+    .addColumn('hash', 'text', (col) => col.primaryKey())
+    .addColumn('size', 'integer', (col) => col.notNull())
+    .addColumn('mime_type', 'text', (col) => col.notNull())
+    .addColumn('body', 'blob', (col) => col.notNull())
+    .addColumn('encrypted', 'integer', (col) => col.notNull())
+    .addColumn('key_id', 'text')
+    .addColumn('cached_at', 'integer', (col) => col.notNull())
+    .addColumn('last_accessed_at', 'integer', (col) => col.notNull())
+    .execute();
+
+  await db.schema
+    .createTable('sync_blob_outbox')
+    .ifNotExists()
+    .addColumn('id', 'integer', (col) => col.primaryKey().autoIncrement())
+    .addColumn('hash', 'text', (col) => col.notNull())
+    .addColumn('size', 'integer', (col) => col.notNull())
+    .addColumn('mime_type', 'text', (col) => col.notNull())
+    .addColumn('body', 'blob', (col) => col.notNull())
+    .addColumn('encrypted', 'integer', (col) => col.notNull())
+    .addColumn('key_id', 'text')
+    .addColumn('status', 'text', (col) => col.notNull())
+    .addColumn('attempt_count', 'integer', (col) => col.notNull())
+    .addColumn('error', 'text')
+    .addColumn('created_at', 'integer', (col) => col.notNull())
+    .addColumn('updated_at', 'integer', (col) => col.notNull())
+    .execute();
+
+  return db;
+}
+
+/**
+ * Wait for a condition to be true
+ */
+export async function waitFor(
+  condition: () => boolean,
+  timeout = 1000
+): Promise<void> {
+  const start = Date.now();
+  while (!condition()) {
+    if (Date.now() - start > timeout) {
+      throw new Error('waitFor timeout');
+    }
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  }
+}
+
+/**
+ * Flush promises
+ */
+export function flushPromises(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}