@object-ui/react 3.0.2 → 3.1.0

package/src/context/__tests__/useDataScope.test.tsx

@@ -0,0 +1,91 @@
+/**
+ * Tests for useDataScope hook — verifies correct scoping behavior.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import { SchemaRendererProvider, useDataScope } from '../SchemaRendererContext';
+
+describe('useDataScope', () => {
+  it('returns undefined when no path is provided', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SchemaRendererProvider dataSource={{ users: [1, 2, 3] }}>
+        {children}
+      </SchemaRendererProvider>
+    );
+
+    const { result } = renderHook(() => useDataScope(undefined), { wrapper });
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('returns undefined when path is empty string', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SchemaRendererProvider dataSource={{ users: [1, 2, 3] }}>
+        {children}
+      </SchemaRendererProvider>
+    );
+
+    const { result } = renderHook(() => useDataScope(''), { wrapper });
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('returns scoped data when a valid path is given', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SchemaRendererProvider dataSource={{ users: [{ name: 'Alice' }] }}>
+        {children}
+      </SchemaRendererProvider>
+    );
+
+    const { result } = renderHook(() => useDataScope('users'), { wrapper });
+
+    expect(result.current).toEqual([{ name: 'Alice' }]);
+  });
+
+  it('resolves nested paths', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SchemaRendererProvider dataSource={{ app: { settings: { theme: 'dark' } } }}>
+        {children}
+      </SchemaRendererProvider>
+    );
+
+    const { result } = renderHook(() => useDataScope('app.settings.theme'), { wrapper });
+
+    expect(result.current).toBe('dark');
+  });
+
+  it('returns undefined for non-existent path', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SchemaRendererProvider dataSource={{ users: [] }}>
+        {children}
+      </SchemaRendererProvider>
+    );
+
+    const { result } = renderHook(() => useDataScope('nonexistent'), { wrapper });
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('returns undefined when no SchemaRendererProvider is present', () => {
+    const { result } = renderHook(() => useDataScope('users'));
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('does not return the adapter/service object when no path is given', () => {
+    // Simulate the real scenario: dataSource is a service adapter with methods
+    const adapter = { find: () => {}, create: () => {}, update: () => {} };
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SchemaRendererProvider dataSource={adapter}>
+        {children}
+      </SchemaRendererProvider>
+    );
+
+    const { result } = renderHook(() => useDataScope(undefined), { wrapper });
+
+    // Should NOT return the adapter — that would prevent ObjectChart from fetching
+    expect(result.current).toBeUndefined();
+  });
+});

package/src/hooks/__tests__/useActionEngine.test.ts

@@ -0,0 +1,170 @@
+/**
+ * Tests for useActionEngine hook
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useActionEngine } from '../useActionEngine';
+
+describe('useActionEngine', () => {
+  const sampleActions = [
+    {
+      name: 'mark_complete',
+      type: 'script',
+      execute: 'true',
+      locations: ['list_toolbar', 'record_header'],
+      bulkEnabled: true,
+    },
+    {
+      name: 'delete_record',
+      type: 'api',
+      endpoint: '/api/delete',
+      locations: ['record_more'],
+    },
+    {
+      name: 'view_details',
+      type: 'url',
+      target: '/details',
+      locations: ['list_item'],
+    },
+    {
+      name: 'global_search',
+      type: 'script',
+      execute: 'true',
+      locations: ['global_nav'],
+      shortcut: 'ctrl+k',
+    },
+  ];
+
+  describe('getActionsForLocation', () => {
+    it('returns actions for list_toolbar', () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: sampleActions }),
+      );
+
+      const actions = result.current.getActionsForLocation('list_toolbar');
+      expect(actions.length).toBe(1);
+      expect(actions[0].name).toBe('mark_complete');
+    });
+
+    it('returns actions for record_header', () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: sampleActions }),
+      );
+
+      const actions = result.current.getActionsForLocation('record_header');
+      expect(actions.length).toBe(1);
+      expect(actions[0].name).toBe('mark_complete');
+    });
+
+    it('returns actions for record_more', () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: sampleActions }),
+      );
+
+      const actions = result.current.getActionsForLocation('record_more');
+      expect(actions.length).toBe(1);
+      expect(actions[0].name).toBe('delete_record');
+    });
+
+    it('returns empty array for location with no actions', () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: sampleActions }),
+      );
+
+      const actions = result.current.getActionsForLocation('record_related');
+      expect(actions.length).toBe(0);
+    });
+  });
+
+  describe('getBulkActions', () => {
+    it('returns only bulk-enabled actions', () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: sampleActions }),
+      );
+
+      const bulkActions = result.current.getBulkActions();
+      expect(bulkActions.length).toBe(1);
+      expect(bulkActions[0].name).toBe('mark_complete');
+    });
+  });
+
+  describe('executeAction', () => {
+    it('executes a registered action by name', async () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: sampleActions }),
+      );
+
+      let actionResult: any;
+      await act(async () => {
+        actionResult = await result.current.executeAction('mark_complete');
+      });
+
+      expect(actionResult.success).toBe(true);
+    });
+
+    it('returns error for unregistered action', async () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: sampleActions }),
+      );
+
+      let actionResult: any;
+      await act(async () => {
+        actionResult = await result.current.executeAction('nonexistent');
+      });
+
+      expect(actionResult.success).toBe(false);
+      expect(actionResult.error).toContain('not found');
+    });
+  });
+
+  describe('handleShortcut', () => {
+    it('handles registered keyboard shortcut', async () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: sampleActions }),
+      );
+
+      let shortcutResult: any;
+      await act(async () => {
+        shortcutResult = await result.current.handleShortcut('ctrl+k');
+      });
+
+      expect(shortcutResult).not.toBeNull();
+      expect(shortcutResult.success).toBe(true);
+    });
+
+    it('returns null for unregistered shortcut', async () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: sampleActions }),
+      );
+
+      let shortcutResult: any;
+      await act(async () => {
+        shortcutResult = await result.current.handleShortcut('ctrl+z');
+      });
+
+      expect(shortcutResult).toBeNull();
+    });
+  });
+
+  describe('defaults', () => {
+    it('works with no options', () => {
+      const { result } = renderHook(() => useActionEngine());
+
+      expect(result.current.engine).toBeDefined();
+      expect(typeof result.current.getActionsForLocation).toBe('function');
+      expect(typeof result.current.getBulkActions).toBe('function');
+      expect(typeof result.current.executeAction).toBe('function');
+      expect(typeof result.current.handleShortcut).toBe('function');
+    });
+
+    it('works with empty actions array', () => {
+      const { result } = renderHook(() =>
+        useActionEngine({ actions: [] }),
+      );
+
+      const actions = result.current.getActionsForLocation('list_toolbar');
+      expect(actions).toEqual([]);
+    });
+  });
+});

package/src/hooks/__tests__/useCrudShortcuts.test.ts

@@ -0,0 +1,85 @@
+/**
+ * Tests for useCrudShortcuts hook
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useCrudShortcuts } from '../useCrudShortcuts';
+
+describe('useCrudShortcuts', () => {
+  it('renders without error with empty callbacks', () => {
+    expect(() => {
+      renderHook(() => useCrudShortcuts({}));
+    }).not.toThrow();
+  });
+
+  it('renders without error when disabled', () => {
+    expect(() => {
+      renderHook(() => useCrudShortcuts({}, false));
+    }).not.toThrow();
+  });
+
+  it('registers onCreate shortcut', () => {
+    const onCreate = vi.fn();
+    expect(() => {
+      renderHook(() => useCrudShortcuts({ onCreate }));
+    }).not.toThrow();
+  });
+
+  it('registers onEdit shortcut', () => {
+    const onEdit = vi.fn();
+    expect(() => {
+      renderHook(() => useCrudShortcuts({ onEdit }));
+    }).not.toThrow();
+  });
+
+  it('registers onDelete shortcut', () => {
+    const onDelete = vi.fn();
+    expect(() => {
+      renderHook(() => useCrudShortcuts({ onDelete }));
+    }).not.toThrow();
+  });
+
+  it('registers onSave shortcut', () => {
+    const onSave = vi.fn();
+    expect(() => {
+      renderHook(() => useCrudShortcuts({ onSave }));
+    }).not.toThrow();
+  });
+
+  it('registers onDuplicate shortcut', () => {
+    const onDuplicate = vi.fn();
+    expect(() => {
+      renderHook(() => useCrudShortcuts({ onDuplicate }));
+    }).not.toThrow();
+  });
+
+  it('registers onCancel shortcut', () => {
+    const onCancel = vi.fn();
+    expect(() => {
+      renderHook(() => useCrudShortcuts({ onCancel }));
+    }).not.toThrow();
+  });
+
+  it('registers onSearch shortcut', () => {
+    const onSearch = vi.fn();
+    expect(() => {
+      renderHook(() => useCrudShortcuts({ onSearch }));
+    }).not.toThrow();
+  });
+
+  it('registers all shortcuts together', () => {
+    expect(() => {
+      renderHook(() =>
+        useCrudShortcuts({
+          onCreate: vi.fn(),
+          onEdit: vi.fn(),
+          onDelete: vi.fn(),
+          onSave: vi.fn(),
+          onDuplicate: vi.fn(),
+          onCancel: vi.fn(),
+          onSearch: vi.fn(),
+        })
+      );
+    }).not.toThrow();
+  });
+});

package/src/hooks/__tests__/useDebugMode.test.ts

@@ -0,0 +1,83 @@
+/**
+ * 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, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useDebugMode } from '../useDebugMode';
+
+describe('useDebugMode', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('defaults to disabled when no URL params are present', () => {
+    const { result } = renderHook(() => useDebugMode());
+    expect(result.current.enabled).toBe(false);
+    expect(result.current.flags.enabled).toBe(false);
+  });
+
+  it('provides toggle function', () => {
+    const { result } = renderHook(() => useDebugMode());
+    expect(typeof result.current.toggle).toBe('function');
+  });
+
+  it('toggles enabled state on toggle()', () => {
+    const { result } = renderHook(() => useDebugMode());
+    expect(result.current.enabled).toBe(false);
+
+    act(() => {
+      result.current.toggle();
+    });
+    expect(result.current.enabled).toBe(true);
+
+    act(() => {
+      result.current.toggle();
+    });
+    expect(result.current.enabled).toBe(false);
+  });
+
+  it('setEnabled explicitly sets the state', () => {
+    const { result } = renderHook(() => useDebugMode());
+
+    act(() => {
+      result.current.setEnabled(true);
+    });
+    expect(result.current.enabled).toBe(true);
+
+    act(() => {
+      result.current.setEnabled(false);
+    });
+    expect(result.current.enabled).toBe(false);
+  });
+
+  it('responds to Ctrl+Shift+D keyboard shortcut', () => {
+    const { result } = renderHook(() => useDebugMode());
+    expect(result.current.enabled).toBe(false);
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', {
+        key: 'D',
+        ctrlKey: true,
+        shiftKey: true,
+        bubbles: true,
+      });
+      document.dispatchEvent(event);
+    });
+
+    expect(result.current.enabled).toBe(true);
+  });
+
+  it('flags reflect enabled state', () => {
+    const { result } = renderHook(() => useDebugMode());
+
+    act(() => {
+      result.current.setEnabled(true);
+    });
+    expect(result.current.flags.enabled).toBe(true);
+  });
+});

package/src/hooks/__tests__/useFocusTrap.test.ts

@@ -44,4 +44,251 @@ describe('useFocusTrap', () => {
     // Should not throw
     expect(result.current.current).toBeNull();
   });
+
+  it('auto-focuses the first focusable element when enabled', () => {
+    const container = document.createElement('div');
+    const button = document.createElement('button');
+    button.textContent = 'Click me';
+    container.appendChild(button);
+    document.body.appendChild(container);
+
+    const { result } = renderHook(() =>
+      useFocusTrap<HTMLDivElement>({ enabled: true, autoFocus: true })
+    );
+
+    act(() => {
+      (result.current as any).current = container;
+    });
+
+    // Re-render to trigger effect with the ref set
+    const { result: result2 } = renderHook(() =>
+      useFocusTrap<HTMLDivElement>({ enabled: true, autoFocus: true })
+    );
+
+    document.body.removeChild(container);
+  });
+
+  it('focuses initialFocus selector when provided', () => {
+    const container = document.createElement('div');
+    const input1 = document.createElement('input');
+    const input2 = document.createElement('input');
+    input2.className = 'target-input';
+    container.appendChild(input1);
+    container.appendChild(input2);
+    document.body.appendChild(container);
+
+    const focusSpy = vi.spyOn(input2, 'focus');
+
+    const { result, rerender } = renderHook(
+      ({ enabled }) =>
+        useFocusTrap<HTMLDivElement>({
+          enabled,
+          autoFocus: true,
+          initialFocus: '.target-input',
+        }),
+      { initialProps: { enabled: false } }
+    );
+
+    // Set the ref
+    (result.current as any).current = container;
+
+    // Enable the trap to trigger the effect
+    rerender({ enabled: true });
+
+    expect(focusSpy).toHaveBeenCalled();
+
+    document.body.removeChild(container);
+  });
+
+  it('handles Escape key when escapeDeactivates is true', () => {
+    const container = document.createElement('div');
+    const button = document.createElement('button');
+    container.appendChild(button);
+    document.body.appendChild(container);
+
+    const onEscape = vi.fn();
+
+    const { result, rerender } = renderHook(
+      ({ enabled }) =>
+        useFocusTrap<HTMLDivElement>({
+          enabled,
+          escapeDeactivates: true,
+          onEscape,
+        }),
+      { initialProps: { enabled: false } }
+    );
+
+    (result.current as any).current = container;
+    rerender({ enabled: true });
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+      container.dispatchEvent(event);
+    });
+
+    expect(onEscape).toHaveBeenCalled();
+
+    document.body.removeChild(container);
+  });
+
+  it('traps Tab focus at the end of focusable elements', () => {
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    button1.textContent = 'First';
+    const button2 = document.createElement('button');
+    button2.textContent = 'Last';
+    container.appendChild(button1);
+    container.appendChild(button2);
+    document.body.appendChild(container);
+
+    const { result, rerender } = renderHook(
+      ({ enabled }) =>
+        useFocusTrap<HTMLDivElement>({
+          enabled,
+          autoFocus: false,
+        }),
+      { initialProps: { enabled: false } }
+    );
+
+    (result.current as any).current = container;
+    rerender({ enabled: true });
+
+    // Focus the last element
+    button2.focus();
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', {
+        key: 'Tab',
+        bubbles: true,
+      });
+      container.dispatchEvent(event);
+    });
+
+    document.body.removeChild(container);
+  });
+
+  it('traps Shift+Tab focus at the start of focusable elements', () => {
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    button1.textContent = 'First';
+    const button2 = document.createElement('button');
+    button2.textContent = 'Last';
+    container.appendChild(button1);
+    container.appendChild(button2);
+    document.body.appendChild(container);
+
+    const { result, rerender } = renderHook(
+      ({ enabled }) =>
+        useFocusTrap<HTMLDivElement>({
+          enabled,
+          autoFocus: false,
+        }),
+      { initialProps: { enabled: false } }
+    );
+
+    (result.current as any).current = container;
+    rerender({ enabled: true });
+
+    // Focus the first element
+    button1.focus();
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', {
+        key: 'Tab',
+        shiftKey: true,
+        bubbles: true,
+      });
+      container.dispatchEvent(event);
+    });
+
+    document.body.removeChild(container);
+  });
+
+  it('restores focus on unmount when restoreFocus is true', () => {
+    const outsideButton = document.createElement('button');
+    outsideButton.textContent = 'Outside';
+    document.body.appendChild(outsideButton);
+    outsideButton.focus();
+
+    const container = document.createElement('div');
+    const innerButton = document.createElement('button');
+    innerButton.textContent = 'Inside';
+    container.appendChild(innerButton);
+    document.body.appendChild(container);
+
+    const { result, rerender, unmount } = renderHook(
+      ({ enabled }) =>
+        useFocusTrap<HTMLDivElement>({
+          enabled,
+          autoFocus: true,
+          restoreFocus: true,
+        }),
+      { initialProps: { enabled: false } }
+    );
+
+    (result.current as any).current = container;
+    rerender({ enabled: true });
+
+    unmount();
+
+    document.body.removeChild(container);
+    document.body.removeChild(outsideButton);
+  });
+
+  it('ignores non-Tab and non-Escape keys', () => {
+    const container = document.createElement('div');
+    const button = document.createElement('button');
+    container.appendChild(button);
+    document.body.appendChild(container);
+
+    const { result, rerender } = renderHook(
+      ({ enabled }) =>
+        useFocusTrap<HTMLDivElement>({
+          enabled,
+          autoFocus: false,
+        }),
+      { initialProps: { enabled: false } }
+    );
+
+    (result.current as any).current = container;
+    rerender({ enabled: true });
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', {
+        key: 'a',
+        bubbles: true,
+      });
+      container.dispatchEvent(event);
+    });
+
+    document.body.removeChild(container);
+  });
+
+  it('handles container with no focusable elements', () => {
+    const container = document.createElement('div');
+    container.innerHTML = '<span>No focusable elements</span>';
+    document.body.appendChild(container);
+
+    const { result, rerender } = renderHook(
+      ({ enabled }) =>
+        useFocusTrap<HTMLDivElement>({
+          enabled,
+          autoFocus: true,
+        }),
+      { initialProps: { enabled: false } }
+    );
+
+    (result.current as any).current = container;
+    rerender({ enabled: true });
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', {
+        key: 'Tab',
+        bubbles: true,
+      });
+      container.dispatchEvent(event);
+    });
+
+    document.body.removeChild(container);
+  });
 });