@object-ui/react 0.5.0 → 3.0.0

package/src/__tests__/useNavigationOverlay.test.ts

@@ -0,0 +1,416 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useNavigationOverlay } from '../hooks/useNavigationOverlay';
+import type { NavigationConfig } from '../hooks/useNavigationOverlay';
+
+// Mock window.open
+const mockWindowOpen = vi.fn();
+Object.defineProperty(window, 'open', { value: mockWindowOpen, writable: true });
+
+describe('useNavigationOverlay', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ============================================================
+  // Default behavior (no navigation config)
+  // ============================================================
+
+  describe('default behavior (no config)', () => {
+    it('should call onNavigate with record ID when no navigation config', () => {
+      const onNavigate = vi.fn();
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          objectName: 'contacts',
+          onNavigate,
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '123', name: 'Test' });
+      });
+
+      expect(onNavigate).toHaveBeenCalledWith('123', 'view');
+      expect(result.current.isOpen).toBe(false);
+    });
+
+    it('should use id field when _id is not present', () => {
+      const onNavigate = vi.fn();
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          objectName: 'contacts',
+          onNavigate,
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ id: '456', name: 'Test' });
+      });
+
+      expect(onNavigate).toHaveBeenCalledWith('456', 'view');
+    });
+
+    it('should do nothing when no onNavigate and no navigation config', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({ objectName: 'contacts' })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(result.current.isOpen).toBe(false);
+    });
+  });
+
+  // ============================================================
+  // onRowClick priority
+  // ============================================================
+
+  describe('onRowClick priority', () => {
+    it('should call onRowClick instead of navigation when provided', () => {
+      const onRowClick = vi.fn();
+      const onNavigate = vi.fn();
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'drawer' },
+          objectName: 'contacts',
+          onNavigate,
+          onRowClick,
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(onRowClick).toHaveBeenCalledWith({ _id: '123' });
+      expect(onNavigate).not.toHaveBeenCalled();
+      expect(result.current.isOpen).toBe(false);
+    });
+  });
+
+  // ============================================================
+  // mode: 'none'
+  // ============================================================
+
+  describe('mode: none', () => {
+    it('should do nothing when mode is none', () => {
+      const onNavigate = vi.fn();
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'none' },
+          objectName: 'contacts',
+          onNavigate,
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(onNavigate).not.toHaveBeenCalled();
+      expect(result.current.isOpen).toBe(false);
+    });
+
+    it('should do nothing when preventNavigation is true', () => {
+      const onNavigate = vi.fn();
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'page', preventNavigation: true },
+          objectName: 'contacts',
+          onNavigate,
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(onNavigate).not.toHaveBeenCalled();
+    });
+  });
+
+  // ============================================================
+  // mode: 'page'
+  // ============================================================
+
+  describe('mode: page', () => {
+    it('should call onNavigate for page mode', () => {
+      const onNavigate = vi.fn();
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'page' },
+          objectName: 'contacts',
+          onNavigate,
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: 'abc' });
+      });
+
+      expect(onNavigate).toHaveBeenCalledWith('abc', 'view');
+      expect(result.current.isOpen).toBe(false);
+    });
+  });
+
+  // ============================================================
+  // mode: 'new_window'
+  // ============================================================
+
+  describe('mode: new_window', () => {
+    it('should open a new window for new_window mode', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'new_window' },
+          objectName: 'contacts',
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith('/contacts/123', '_blank');
+      expect(result.current.isOpen).toBe(false);
+    });
+
+    it('should open a new window when openNewTab is true regardless of mode', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'page', openNewTab: true },
+          objectName: 'users',
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ id: '456' });
+      });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith('/users/456', '_blank');
+    });
+  });
+
+  // ============================================================
+  // mode: 'drawer'
+  // ============================================================
+
+  describe('mode: drawer', () => {
+    it('should open overlay for drawer mode', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'drawer' },
+          objectName: 'contacts',
+        })
+      );
+
+      expect(result.current.isOpen).toBe(false);
+      expect(result.current.isOverlay).toBe(true);
+      expect(result.current.mode).toBe('drawer');
+
+      act(() => {
+        result.current.handleClick({ _id: '123', name: 'John' });
+      });
+
+      expect(result.current.isOpen).toBe(true);
+      expect(result.current.selectedRecord).toEqual({ _id: '123', name: 'John' });
+    });
+
+    it('should close the overlay', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'drawer' },
+          objectName: 'contacts',
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+      expect(result.current.isOpen).toBe(true);
+
+      act(() => {
+        result.current.close();
+      });
+      expect(result.current.isOpen).toBe(false);
+      expect(result.current.selectedRecord).toBe(null);
+    });
+
+    it('should expose width from config', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'drawer', width: '600px' },
+          objectName: 'contacts',
+        })
+      );
+
+      expect(result.current.width).toBe('600px');
+    });
+  });
+
+  // ============================================================
+  // mode: 'modal'
+  // ============================================================
+
+  describe('mode: modal', () => {
+    it('should open overlay for modal mode', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'modal' },
+          objectName: 'contacts',
+        })
+      );
+
+      expect(result.current.isOverlay).toBe(true);
+      expect(result.current.mode).toBe('modal');
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(result.current.isOpen).toBe(true);
+    });
+
+    it('should support numeric width', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'modal', width: 800 },
+          objectName: 'contacts',
+        })
+      );
+
+      expect(result.current.width).toBe(800);
+    });
+  });
+
+  // ============================================================
+  // mode: 'split'
+  // ============================================================
+
+  describe('mode: split', () => {
+    it('should open overlay for split mode', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'split' },
+          objectName: 'contacts',
+        })
+      );
+
+      expect(result.current.isOverlay).toBe(true);
+      expect(result.current.mode).toBe('split');
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(result.current.isOpen).toBe(true);
+    });
+  });
+
+  // ============================================================
+  // mode: 'popover'
+  // ============================================================
+
+  describe('mode: popover', () => {
+    it('should open overlay for popover mode', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'popover' },
+          objectName: 'contacts',
+        })
+      );
+
+      expect(result.current.isOverlay).toBe(true);
+      expect(result.current.mode).toBe('popover');
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(result.current.isOpen).toBe(true);
+    });
+  });
+
+  // ============================================================
+  // open / close helpers
+  // ============================================================
+
+  describe('open/close helpers', () => {
+    it('should support programmatic open', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'drawer' },
+          objectName: 'contacts',
+        })
+      );
+
+      act(() => {
+        result.current.open({ _id: 'test', name: 'Direct open' });
+      });
+
+      expect(result.current.isOpen).toBe(true);
+      expect(result.current.selectedRecord).toEqual({ _id: 'test', name: 'Direct open' });
+    });
+
+    it('should support setIsOpen for controlled overlay', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'modal' },
+          objectName: 'contacts',
+        })
+      );
+
+      act(() => {
+        result.current.open({ _id: '1' });
+      });
+      expect(result.current.isOpen).toBe(true);
+
+      act(() => {
+        result.current.setIsOpen(false);
+      });
+      expect(result.current.isOpen).toBe(false);
+    });
+  });
+
+  // ============================================================
+  // isOverlay flag
+  // ============================================================
+
+  describe('isOverlay flag', () => {
+    const overlayModes: NavigationConfig['mode'][] = ['drawer', 'modal', 'split', 'popover'];
+    const nonOverlayModes: NavigationConfig['mode'][] = ['page', 'new_window', 'none'];
+
+    overlayModes.forEach((mode) => {
+      it(`should be true for mode: ${mode}`, () => {
+        const { result } = renderHook(() =>
+          useNavigationOverlay({
+            navigation: { mode },
+            objectName: 'test',
+          })
+        );
+        expect(result.current.isOverlay).toBe(true);
+      });
+    });
+
+    nonOverlayModes.forEach((mode) => {
+      it(`should be false for mode: ${mode}`, () => {
+        const { result } = renderHook(() =>
+          useNavigationOverlay({
+            navigation: { mode },
+            objectName: 'test',
+          })
+        );
+        expect(result.current.isOverlay).toBe(false);
+      });
+    });
+  });
+});

package/src/__tests__/useOffline.test.ts

@@ -0,0 +1,198 @@
+/**
+ * ObjectUI — useOffline Tests
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useOffline } from '../hooks/useOffline';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const QUEUE_KEY = 'objectui-offline-queue';
+
+function mockOnlineStatus(online: boolean) {
+  Object.defineProperty(navigator, 'onLine', {
+    value: online,
+    configurable: true,
+    writable: true,
+  });
+}
+
+function triggerOnline() {
+  mockOnlineStatus(true);
+  window.dispatchEvent(new Event('online'));
+}
+
+function triggerOffline() {
+  mockOnlineStatus(false);
+  window.dispatchEvent(new Event('offline'));
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('useOffline', () => {
+  beforeEach(() => {
+    mockOnlineStatus(true);
+    localStorage.removeItem(QUEUE_KEY);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should default to online with empty queue', () => {
+    const { result } = renderHook(() => useOffline());
+    expect(result.current.isOnline).toBe(true);
+    expect(result.current.enabled).toBe(true);
+    expect(result.current.syncState).toBe('idle');
+    expect(result.current.pendingCount).toBe(0);
+    expect(result.current.showIndicator).toBe(false);
+    expect(result.current.strategy).toBe('network_first');
+  });
+
+  it('should detect offline status', () => {
+    const { result } = renderHook(() => useOffline());
+    expect(result.current.isOnline).toBe(true);
+
+    act(() => {
+      triggerOffline();
+    });
+
+    expect(result.current.isOnline).toBe(false);
+    expect(result.current.showIndicator).toBe(true);
+  });
+
+  it('should detect coming back online', () => {
+    mockOnlineStatus(false);
+    const { result } = renderHook(() => useOffline());
+    expect(result.current.isOnline).toBe(false);
+
+    act(() => {
+      triggerOnline();
+    });
+
+    expect(result.current.isOnline).toBe(true);
+    expect(result.current.showIndicator).toBe(false);
+  });
+
+  it('should queue mutations', () => {
+    const { result } = renderHook(() => useOffline());
+
+    act(() => {
+      result.current.queueMutation({
+        operation: 'create',
+        resource: 'users',
+        data: { name: 'Alice' },
+      });
+    });
+
+    expect(result.current.pendingCount).toBe(1);
+
+    act(() => {
+      result.current.queueMutation({
+        operation: 'update',
+        resource: 'users',
+        data: { id: '1', name: 'Bob' },
+      });
+    });
+
+    expect(result.current.pendingCount).toBe(2);
+  });
+
+  it('should clear the mutation queue', () => {
+    const { result } = renderHook(() => useOffline());
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'users' });
+      result.current.queueMutation({ operation: 'delete', resource: 'users' });
+    });
+
+    expect(result.current.pendingCount).toBe(2);
+
+    act(() => {
+      result.current.clearQueue();
+    });
+
+    expect(result.current.pendingCount).toBe(0);
+  });
+
+  it('should enforce queueMaxSize', () => {
+    const { result } = renderHook(() => useOffline({ queueMaxSize: 2 }));
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'a' });
+      result.current.queueMutation({ operation: 'create', resource: 'b' });
+      result.current.queueMutation({ operation: 'create', resource: 'c' });
+    });
+
+    expect(result.current.pendingCount).toBe(2);
+  });
+
+  it('should respect custom config values', () => {
+    const { result } = renderHook(() =>
+      useOffline({
+        strategy: 'cache_first',
+        offlineIndicator: false,
+        offlineMessage: 'Custom message',
+      }),
+    );
+
+    expect(result.current.strategy).toBe('cache_first');
+    expect(result.current.offlineMessage).toBe('Custom message');
+
+    act(() => {
+      triggerOffline();
+    });
+
+    // offlineIndicator is false, so showIndicator should be false even when offline
+    expect(result.current.showIndicator).toBe(false);
+  });
+
+  it('should not queue mutations when disabled', () => {
+    const { result } = renderHook(() => useOffline({ enabled: false }));
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'users' });
+    });
+
+    expect(result.current.pendingCount).toBe(0);
+    expect(result.current.enabled).toBe(false);
+  });
+
+  it('should sync mutations', async () => {
+    const { result } = renderHook(() => useOffline());
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'users' });
+    });
+
+    expect(result.current.pendingCount).toBe(1);
+
+    await act(async () => {
+      await result.current.sync();
+    });
+
+    expect(result.current.pendingCount).toBe(0);
+    expect(result.current.syncState).toBe('idle');
+  });
+
+  it('should persist queue to localStorage', () => {
+    const { result } = renderHook(() => useOffline());
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'users' });
+    });
+
+    const stored = JSON.parse(localStorage.getItem(QUEUE_KEY) || '[]');
+    expect(stored).toHaveLength(1);
+    expect(stored[0].resource).toBe('users');
+  });
+});