@syncular/client-react 0.0.1-60

package/src/__tests__/hooks/useMutation.test.tsx

@@ -0,0 +1,468 @@
+/**
+ * Tests for useMutation hook
+ *
+ * Covers:
+ * - Fluent API (upsert, delete)
+ * - Legacy mutate interface
+ * - mutateMany for batch operations
+ * - isPending state
+ * - error handling and onError callback
+ * - onSuccess callback
+ * - syncImmediately option
+ * - reset function
+ */
+
+import { beforeEach, describe, expect, it } from 'bun:test';
+import type { SyncClientDb } from '@syncular/client';
+import { act, renderHook } from '@testing-library/react';
+import type { Kysely } from 'kysely';
+import type { ReactNode } from 'react';
+import { createSyncularReact } from '../../index';
+import {
+  createMockDb,
+  createMockShapeRegistry,
+  createMockTransport,
+} from '../test-utils';
+
+interface TestDbTasks {
+  id: string;
+  title: string;
+  completed: number;
+  user_id: string;
+  server_version?: number;
+}
+
+interface TestDb extends SyncClientDb {
+  tasks: TestDbTasks;
+}
+
+const { SyncProvider, useMutation } = createSyncularReact<TestDb>();
+
+describe('useMutation', () => {
+  let db: Kysely<TestDb>;
+
+  beforeEach(async () => {
+    db = await createMockDb<TestDb>();
+
+    await db.schema
+      .createTable('tasks')
+      .ifNotExists()
+      .addColumn('id', 'text', (col) => col.primaryKey())
+      .addColumn('title', 'text', (col) => col.notNull())
+      .addColumn('completed', 'integer', (col) => col.notNull().defaultTo(0))
+      .addColumn('user_id', 'text', (col) => col.notNull())
+      .addColumn('server_version', 'integer', (col) =>
+        col.notNull().defaultTo(0)
+      )
+      .execute();
+  });
+
+  function createWrapper() {
+    const transport = createMockTransport();
+    const shapes = createMockShapeRegistry<TestDb>();
+
+    const Wrapper = ({ children }: { children: ReactNode }) => (
+      <SyncProvider
+        db={db}
+        transport={transport}
+        shapes={shapes}
+        actorId="test-actor"
+        clientId="test-client"
+        subscriptions={[]}
+        pollIntervalMs={999999}
+        autoStart={false}
+      >
+        {children}
+      </SyncProvider>
+    );
+
+    return Wrapper;
+  }
+
+  describe('fluent API', () => {
+    it('mutate.upsert() enqueues an outbox commit', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        const res = await result.current.mutate.upsert('task-1', {
+          title: 'Test Task',
+          completed: 0,
+          user_id: 'test-actor',
+        });
+        expect(res.commitId).toBeTruthy();
+        expect(res.clientCommitId).toBeTruthy();
+      });
+
+      const outbox = await db
+        .selectFrom('sync_outbox_commits')
+        .select(['id', 'operations_json'])
+        .execute();
+      expect(outbox.length).toBe(1);
+
+      const ops = JSON.parse(outbox[0]!.operations_json);
+      expect(ops.length).toBe(1);
+      expect(ops[0].op).toBe('upsert');
+      expect(ops[0].row_id).toBe('task-1');
+    });
+
+    it('mutate.delete() enqueues a delete operation', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.mutate.delete('task-1');
+      });
+
+      const outbox = await db
+        .selectFrom('sync_outbox_commits')
+        .select(['operations_json'])
+        .executeTakeFirstOrThrow();
+
+      const ops = JSON.parse(outbox.operations_json);
+      expect(ops.length).toBe(1);
+      expect(ops[0].op).toBe('delete');
+      expect(ops[0].row_id).toBe('task-1');
+    });
+
+    it('mutate.upsert() supports baseVersion option', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.mutate.upsert(
+          'task-1',
+          { title: 'Updated', completed: 1, user_id: 'test-actor' },
+          { baseVersion: 5 }
+        );
+      });
+
+      const outbox = await db
+        .selectFrom('sync_outbox_commits')
+        .select(['operations_json'])
+        .executeTakeFirstOrThrow();
+
+      const ops = JSON.parse(outbox.operations_json);
+      expect(ops[0].base_version).toBe(5);
+    });
+
+    it('mutate.delete() supports baseVersion option', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.mutate.delete('task-1', { baseVersion: 3 });
+      });
+
+      const outbox = await db
+        .selectFrom('sync_outbox_commits')
+        .select(['operations_json'])
+        .executeTakeFirstOrThrow();
+
+      const ops = JSON.parse(outbox.operations_json);
+      expect(ops[0].base_version).toBe(3);
+    });
+  });
+
+  describe('legacy mutate interface', () => {
+    it('mutate() with MutationInput works', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.mutate({
+          rowId: 'task-legacy',
+          op: 'upsert',
+          payload: { title: 'Legacy', completed: 0, user_id: 'test-actor' },
+        });
+      });
+
+      const outbox = await db
+        .selectFrom('sync_outbox_commits')
+        .select(['operations_json'])
+        .executeTakeFirstOrThrow();
+
+      const ops = JSON.parse(outbox.operations_json);
+      expect(ops[0].row_id).toBe('task-legacy');
+    });
+
+    it('throws when MutationInput.table does not match hook table', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      let thrownError: Error | null = null;
+      await act(async () => {
+        try {
+          await result.current.mutate({
+            // @ts-expect-error - runtime guard for mismatched table
+            table: 'other_table',
+            rowId: 'task-1',
+            op: 'upsert',
+            payload: { title: 'Test' },
+          });
+        } catch (err) {
+          thrownError = err as Error;
+        }
+      });
+
+      expect(thrownError).not.toBeNull();
+      expect(thrownError!.message).toContain(
+        'MutationInput.table must match hook table'
+      );
+    });
+  });
+
+  describe('mutateMany', () => {
+    it('batches multiple operations into a single commit', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.mutateMany([
+          {
+            rowId: 'task-1',
+            op: 'upsert',
+            payload: { title: 'Task 1', completed: 0, user_id: 'test-actor' },
+          },
+          {
+            rowId: 'task-2',
+            op: 'upsert',
+            payload: { title: 'Task 2', completed: 0, user_id: 'test-actor' },
+          },
+          { rowId: 'task-3', op: 'delete' },
+        ]);
+      });
+
+      const outbox = await db
+        .selectFrom('sync_outbox_commits')
+        .select(['operations_json'])
+        .execute();
+
+      expect(outbox.length).toBe(1);
+
+      const ops = JSON.parse(outbox[0]!.operations_json);
+      expect(ops.length).toBe(3);
+      expect(ops[0].op).toBe('upsert');
+      expect(ops[1].op).toBe('upsert');
+      expect(ops[2].op).toBe('delete');
+    });
+  });
+
+  describe('isPending state', () => {
+    it('isPending is false before and after mutation', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      expect(result.current.isPending).toBe(false);
+
+      await act(async () => {
+        await result.current.mutate.upsert('task-1', {
+          title: 'Test',
+          completed: 0,
+          user_id: 'test-actor',
+        });
+      });
+
+      expect(result.current.isPending).toBe(false);
+    });
+
+    it('isPending resets after error', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        try {
+          await result.current.mutate({
+            // @ts-expect-error - runtime guard for mismatched table
+            table: 'wrong',
+            rowId: 'x',
+            op: 'upsert',
+            payload: {},
+          });
+        } catch {
+          // Expected
+        }
+      });
+
+      expect(result.current.isPending).toBe(false);
+    });
+  });
+
+  describe('error handling', () => {
+    it('sets error state on failure', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        try {
+          await result.current.mutate({
+            // @ts-expect-error - runtime guard for mismatched table
+            table: 'wrong',
+            rowId: 'x',
+            op: 'upsert',
+            payload: {},
+          });
+        } catch {
+          // Expected
+        }
+      });
+
+      expect(result.current.error).not.toBeNull();
+      expect(result.current.error?.message).toContain(
+        'MutationInput.table must match'
+      );
+    });
+
+    it('calls onError callback on failure', async () => {
+      let capturedError: Error | null = null;
+
+      const { result } = renderHook(
+        () =>
+          useMutation({
+            table: 'tasks',
+            syncImmediately: false,
+            onError: (err) => {
+              capturedError = err;
+            },
+          }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        try {
+          await result.current.mutate({
+            // @ts-expect-error - runtime guard for mismatched table
+            table: 'wrong',
+            rowId: 'x',
+            op: 'upsert',
+            payload: {},
+          });
+        } catch {
+          // Expected
+        }
+      });
+
+      expect(capturedError).not.toBeNull();
+      expect(capturedError!.message).toContain(
+        'MutationInput.table must match'
+      );
+    });
+
+    it('reset() clears error state', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        try {
+          await result.current.mutate({
+            // @ts-expect-error - runtime guard for mismatched table
+            table: 'wrong',
+            rowId: 'x',
+            op: 'upsert',
+            payload: {},
+          });
+        } catch {
+          // Expected
+        }
+      });
+
+      expect(result.current.error).not.toBeNull();
+
+      act(() => {
+        result.current.reset();
+      });
+
+      expect(result.current.error).toBeNull();
+    });
+  });
+
+  describe('onSuccess callback', () => {
+    it('calls onSuccess after successful mutation', async () => {
+      let successResult: { commitId: string; clientCommitId: string } | null =
+        null;
+
+      const { result } = renderHook(
+        () =>
+          useMutation({
+            table: 'tasks',
+            syncImmediately: false,
+            onSuccess: (res) => {
+              successResult = res;
+            },
+          }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.mutate.upsert('task-1', {
+          title: 'Test',
+          completed: 0,
+          user_id: 'test-actor',
+        });
+      });
+
+      expect(successResult).not.toBeNull();
+      expect(successResult!.commitId).toBeTruthy();
+      expect(successResult!.clientCommitId).toBeTruthy();
+    });
+  });
+
+  describe('syncImmediately option', () => {
+    it('syncImmediately=true triggers sync after mutation (default)', async () => {
+      const { result } = renderHook(() => useMutation({ table: 'tasks' }), {
+        wrapper: createWrapper(),
+      });
+
+      await act(async () => {
+        await result.current.mutate.upsert('task-1', {
+          title: 'Test',
+          completed: 0,
+          user_id: 'test-actor',
+        });
+      });
+
+      // Sync is called in background - we just verify no error is thrown
+      // The actual sync behavior is tested in integration tests
+    });
+
+    it('syncImmediately=false does not trigger sync', async () => {
+      const { result } = renderHook(
+        () => useMutation({ table: 'tasks', syncImmediately: false }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.mutate.upsert('task-1', {
+          title: 'Test',
+          completed: 0,
+          user_id: 'test-actor',
+        });
+      });
+
+      // With syncImmediately=false, no sync is triggered
+      // This is verified by the mock transport not receiving push requests
+    });
+  });
+});