@syncular/client-react 0.0.1-60

package/src/__tests__/SyncProvider.strictmode.test.tsx

@@ -0,0 +1,117 @@
+/**
+ * SyncProvider StrictMode regression tests
+ *
+ * React StrictMode (dev) mounts + unmounts + re-mounts components to surface
+ * unsafe side effects. These tests ensure our SyncProvider lifecycle remains
+ * correct under that behavior.
+ */
+
+import { afterEach, beforeEach, describe, expect, it } from 'bun:test';
+import type { SyncClientDb } from '@syncular/client';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import type { Kysely } from 'kysely';
+import React from 'react';
+import { createSyncularReact } from '../index';
+import {
+  createMockDb,
+  createMockShapeRegistry,
+  createMockTransport,
+} from './test-utils';
+
+const { SyncProvider, useSyncConnection, useSyncStatus } =
+  createSyncularReact<SyncClientDb>();
+
+function StatusText() {
+  const { enabled, isOnline } = useSyncStatus();
+  const text = !enabled ? 'disabled' : isOnline ? 'online' : 'offline';
+  return <div data-testid="status">{text}</div>;
+}
+
+function ConnectionControls() {
+  const { isConnected, disconnect, reconnect } = useSyncConnection();
+  const { isOnline } = useSyncStatus();
+
+  return (
+    <div>
+      <div data-testid="connected">{String(isConnected)}</div>
+      <div data-testid="online">{String(isOnline)}</div>
+      <button type="button" onClick={disconnect}>
+        disconnect
+      </button>
+      <button type="button" onClick={reconnect}>
+        reconnect
+      </button>
+    </div>
+  );
+}
+
+describe('SyncProvider (StrictMode)', () => {
+  let db: Kysely<SyncClientDb>;
+
+  beforeEach(async () => {
+    db = await createMockDb();
+  });
+
+  afterEach(async () => {
+    cleanup();
+    await db.destroy();
+  });
+
+  function renderWithProvider(node: React.ReactNode) {
+    const transport = createMockTransport();
+    const shapes = createMockShapeRegistry();
+
+    return render(
+      <React.StrictMode>
+        <SyncProvider
+          db={db}
+          transport={transport}
+          shapes={shapes}
+          actorId="test-actor"
+          clientId="test-client"
+          subscriptions={[]}
+          pollIntervalMs={999999}
+        >
+          {node}
+        </SyncProvider>
+      </React.StrictMode>
+    );
+  }
+
+  it('autoStart brings provider online under StrictMode', async () => {
+    renderWithProvider(<StatusText />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('status').textContent).toBe('online');
+    });
+  });
+
+  it('disconnect + reconnect works under StrictMode (polling mode)', async () => {
+    renderWithProvider(<ConnectionControls />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('online').textContent).toBe('true');
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'disconnect' }));
+    });
+
+    expect(screen.getByTestId('online').textContent).toBe('false');
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'reconnect' }));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('online').textContent).toBe('true');
+    });
+  });
+});

package/src/__tests__/fingerprint.test.ts

@@ -0,0 +1,181 @@
+/**
+ * Tests for fingerprint utility functions
+ */
+
+import { afterEach, beforeEach, describe, expect, it } from 'bun:test';
+import type { SyncClientDb, SyncEngineConfig } from '@syncular/client';
+import {
+  canFingerprint,
+  computeFingerprint,
+  SyncEngine,
+} from '@syncular/client';
+import type { Kysely } from 'kysely';
+import {
+  createMockDb,
+  createMockShapeRegistry,
+  createMockTransport,
+} from './test-utils';
+
+describe('fingerprint utilities', () => {
+  let db: Kysely<SyncClientDb>;
+  let engine: SyncEngine;
+
+  beforeEach(async () => {
+    db = await createMockDb();
+  });
+
+  afterEach(() => {
+    engine?.destroy();
+  });
+
+  function createEngine(overrides: Partial<SyncEngineConfig> = {}): SyncEngine {
+    const config: SyncEngineConfig = {
+      db,
+      transport: createMockTransport(),
+      shapes: createMockShapeRegistry(),
+      actorId: 'test-actor',
+      clientId: 'test-client',
+      subscriptions: [],
+      ...overrides,
+    };
+    engine = new SyncEngine(config);
+    return engine;
+  }
+
+  describe('canFingerprint', () => {
+    it('should return true for empty array', () => {
+      expect(canFingerprint([])).toBe(true);
+    });
+
+    it('should return true when rows have the default id field', () => {
+      const rows = [
+        { id: '1', name: 'foo' },
+        { id: '2', name: 'bar' },
+      ];
+      expect(canFingerprint(rows)).toBe(true);
+    });
+
+    it('should return true when rows have a custom key field', () => {
+      const rows = [
+        { task_id: '1', name: 'foo' },
+        { task_id: '2', name: 'bar' },
+      ];
+      expect(canFingerprint(rows, 'task_id')).toBe(true);
+    });
+
+    it('should return false when rows lack the key field', () => {
+      const rows = [{ count: 42 }, { count: 100 }];
+      expect(canFingerprint(rows)).toBe(false);
+    });
+
+    it('should return false when rows lack a custom key field', () => {
+      const rows = [{ id: '1', name: 'foo' }];
+      expect(canFingerprint(rows, 'custom_key')).toBe(false);
+    });
+  });
+
+  describe('computeFingerprint', () => {
+    it('should return "0:" for empty array', () => {
+      const engine = createEngine();
+      expect(computeFingerprint([], engine, 'tasks')).toBe('0:');
+    });
+
+    it('should compute fingerprint with row count and ids', () => {
+      const engine = createEngine();
+      const rows = [
+        { id: 'abc', name: 'foo' },
+        { id: 'def', name: 'bar' },
+      ];
+
+      const fingerprint = computeFingerprint(rows, engine, 'tasks');
+
+      // Format: "length:id1@ts1,id2@ts2"
+      // With no mutations, timestamps are 0
+      expect(fingerprint).toBe('2:abc@0,def@0');
+    });
+
+    it('should use custom key field', () => {
+      const engine = createEngine();
+      const rows = [{ task_id: 'xyz', name: 'foo' }];
+
+      const fingerprint = computeFingerprint(rows, engine, 'tasks', 'task_id');
+
+      expect(fingerprint).toBe('1:xyz@0');
+    });
+
+    it('should include mutation timestamps from engine', async () => {
+      const engine = createEngine();
+      await engine.start();
+
+      // Simulate a mutation by calling applyLocalMutation
+      // This requires the shape handler to exist, so we'll test getMutationTimestamp directly
+      const beforeMutation = engine.getMutationTimestamp('tasks', 'abc');
+      expect(beforeMutation).toBe(0);
+
+      // We can't easily test the full mutation flow without proper shape setup,
+      // but we can verify the fingerprint changes when timestamps change
+    });
+
+    it('should handle rows with missing key values gracefully', () => {
+      const engine = createEngine();
+      const rows = [
+        { id: undefined, name: 'foo' },
+        { id: null, name: 'bar' },
+        { id: '', name: 'baz' },
+      ];
+
+      const fingerprint = computeFingerprint(
+        rows as Record<string, unknown>[],
+        engine,
+        'tasks'
+      );
+
+      // undefined/null are converted to empty string via nullish coalescing (??)
+      expect(fingerprint).toBe('3:@0,@0,@0');
+    });
+
+    it('should produce different fingerprints for different row orders', () => {
+      const engine = createEngine();
+      const rows1 = [
+        { id: 'a', name: 'foo' },
+        { id: 'b', name: 'bar' },
+      ];
+      const rows2 = [
+        { id: 'b', name: 'bar' },
+        { id: 'a', name: 'foo' },
+      ];
+
+      const fp1 = computeFingerprint(rows1, engine, 'tasks');
+      const fp2 = computeFingerprint(rows2, engine, 'tasks');
+
+      expect(fp1).not.toBe(fp2);
+    });
+
+    it('should produce different fingerprints for different row counts', () => {
+      const engine = createEngine();
+      const rows1 = [{ id: 'a' }];
+      const rows2 = [{ id: 'a' }, { id: 'b' }];
+
+      const fp1 = computeFingerprint(rows1, engine, 'tasks');
+      const fp2 = computeFingerprint(rows2, engine, 'tasks');
+
+      expect(fp1).toBe('1:a@0');
+      expect(fp2).toBe('2:a@0,b@0');
+      expect(fp1).not.toBe(fp2);
+    });
+  });
+
+  describe('SyncEngine.getMutationTimestamp', () => {
+    it('should return 0 for unknown rows', () => {
+      const engine = createEngine();
+
+      expect(engine.getMutationTimestamp('tasks', 'unknown-id')).toBe(0);
+    });
+
+    it('should return 0 for different tables', () => {
+      const engine = createEngine();
+
+      expect(engine.getMutationTimestamp('other_table', 'some-id')).toBe(0);
+    });
+  });
+});