@object-ui/react 0.5.0 → 3.0.0

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

@@ -0,0 +1,82 @@
+/**
+ * Tests for useAnimation and useReducedMotion hooks
+ */
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useAnimation } from '../useAnimation';
+import { useReducedMotion } from '../useReducedMotion';
+
+describe('useAnimation', () => {
+  it('returns empty className and style for no config', () => {
+    const { result } = renderHook(() => useAnimation());
+    expect(result.current.className).toBe('');
+    expect(result.current.style).toEqual({});
+  });
+
+  it('returns empty when preset is none', () => {
+    const { result } = renderHook(() => useAnimation({ preset: 'none' }));
+    expect(result.current.className).toBe('');
+  });
+
+  it('returns empty when disabled', () => {
+    const { result } = renderHook(() =>
+      useAnimation({ preset: 'fade', enabled: false })
+    );
+    expect(result.current.className).toBe('');
+  });
+
+  it('returns correct className for fade preset', () => {
+    const { result } = renderHook(() => useAnimation({ preset: 'fade' }));
+    expect(result.current.className).toContain('fade-in');
+  });
+
+  it('returns correct className for slide-up preset', () => {
+    const { result } = renderHook(() => useAnimation({ preset: 'slide-up' }));
+    expect(result.current.className).toContain('slide-in-from-bottom');
+  });
+
+  it('returns correct className for scale preset', () => {
+    const { result } = renderHook(() => useAnimation({ preset: 'scale' }));
+    expect(result.current.className).toContain('zoom-in');
+  });
+
+  it('returns correct className for scale-fade preset', () => {
+    const { result } = renderHook(() => useAnimation({ preset: 'scale-fade' }));
+    expect(result.current.className).toContain('fade-in');
+    expect(result.current.className).toContain('zoom-in');
+  });
+
+  it('applies custom duration', () => {
+    const { result } = renderHook(() =>
+      useAnimation({ preset: 'fade', duration: 300 })
+    );
+    expect(result.current.style.animationDuration).toBe('300ms');
+  });
+
+  it('applies custom delay', () => {
+    const { result } = renderHook(() =>
+      useAnimation({ preset: 'fade', delay: 100 })
+    );
+    expect(result.current.style.animationDelay).toBe('100ms');
+  });
+
+  it('applies easing function', () => {
+    const { result } = renderHook(() =>
+      useAnimation({ preset: 'fade', easing: 'spring' })
+    );
+    expect(result.current.style.animationTimingFunction).toContain('cubic-bezier');
+  });
+});
+
+describe('useReducedMotion', () => {
+  it('returns a boolean value', () => {
+    const { result } = renderHook(() => useReducedMotion());
+    expect(typeof result.current).toBe('boolean');
+  });
+
+  it('defaults to false when matchMedia returns false', () => {
+    const { result } = renderHook(() => useReducedMotion());
+    // jsdom matchMedia always returns false by default
+    expect(result.current).toBe(false);
+  });
+});

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

@@ -0,0 +1,93 @@
+/**
+ * Tests for useColumnSummary hook
+ */
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useColumnSummary } from '../useColumnSummary';
+
+const sampleData = [
+  { name: 'Alice', amount: 100, category: 'A' },
+  { name: 'Bob', amount: 200, category: 'B' },
+  { name: 'Charlie', amount: 300, category: 'A' },
+  { name: 'Diana', amount: 400, category: 'C' },
+];
+
+describe('useColumnSummary', () => {
+  it('computes sum correctly', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary(sampleData, { field: 'amount', function: 'sum' })
+    );
+    expect(result.current.value).toBe(1000);
+    expect(result.current.label).toBe('SUM');
+  });
+
+  it('computes avg correctly', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary(sampleData, { field: 'amount', function: 'avg' })
+    );
+    expect(result.current.value).toBe(250);
+  });
+
+  it('computes count correctly', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary(sampleData, { field: 'amount', function: 'count' })
+    );
+    expect(result.current.value).toBe(4);
+  });
+
+  it('computes min correctly', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary(sampleData, { field: 'amount', function: 'min' })
+    );
+    expect(result.current.value).toBe(100);
+  });
+
+  it('computes max correctly', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary(sampleData, { field: 'amount', function: 'max' })
+    );
+    expect(result.current.value).toBe(400);
+  });
+
+  it('computes distinct correctly', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary(sampleData, { field: 'category', function: 'distinct' })
+    );
+    expect(result.current.value).toBe(3); // A, B, C
+  });
+
+  it('uses custom label', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary(sampleData, { field: 'amount', function: 'sum', label: 'Total Revenue' })
+    );
+    expect(result.current.label).toBe('Total Revenue');
+  });
+
+  it('returns formatted string', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary(sampleData, { field: 'amount', function: 'sum' }, 'en-US')
+    );
+    expect(result.current.formatted).toBe('1,000');
+  });
+
+  it('handles empty data for sum', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary([], { field: 'amount', function: 'sum' })
+    );
+    expect(result.current.value).toBe(0);
+  });
+
+  it('handles empty data for avg', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary([], { field: 'amount', function: 'avg' })
+    );
+    expect(result.current.value).toBe(0);
+  });
+
+  it('handles empty data for min', () => {
+    const { result } = renderHook(() =>
+      useColumnSummary([], { field: 'amount', function: 'min' })
+    );
+    expect(result.current.value).toBe(0);
+  });
+});

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

@@ -0,0 +1,81 @@
+/**
+ * Tests for useDensityMode hook
+ */
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useDensityMode } from '../useDensityMode';
+
+describe('useDensityMode', () => {
+  it('defaults to comfortable mode', () => {
+    const { result } = renderHook(() => useDensityMode());
+    expect(result.current.mode).toBe('comfortable');
+  });
+
+  it('accepts initial mode', () => {
+    const { result } = renderHook(() => useDensityMode('compact'));
+    expect(result.current.mode).toBe('compact');
+  });
+
+  it('provides correct row height for compact', () => {
+    const { result } = renderHook(() => useDensityMode('compact'));
+    expect(result.current.rowHeight).toBe(32);
+  });
+
+  it('provides correct row height for comfortable', () => {
+    const { result } = renderHook(() => useDensityMode('comfortable'));
+    expect(result.current.rowHeight).toBe(40);
+  });
+
+  it('provides correct row height for spacious', () => {
+    const { result } = renderHook(() => useDensityMode('spacious'));
+    expect(result.current.rowHeight).toBe(52);
+  });
+
+  it('provides padding classes', () => {
+    const { result } = renderHook(() => useDensityMode('compact'));
+    expect(result.current.paddingClass).toContain('py-1');
+    expect(result.current.paddingClass).toContain('px-2');
+  });
+
+  it('provides font size classes', () => {
+    const { result } = renderHook(() => useDensityMode('compact'));
+    expect(result.current.fontSizeClass).toBe('text-xs');
+  });
+
+  it('cycles through modes', () => {
+    const { result } = renderHook(() => useDensityMode('compact'));
+
+    act(() => {
+      result.current.cycle();
+    });
+    expect(result.current.mode).toBe('comfortable');
+
+    act(() => {
+      result.current.cycle();
+    });
+    expect(result.current.mode).toBe('spacious');
+
+    act(() => {
+      result.current.cycle();
+    });
+    expect(result.current.mode).toBe('compact');
+  });
+
+  it('allows setting mode directly', () => {
+    const { result } = renderHook(() => useDensityMode());
+
+    act(() => {
+      result.current.setMode('spacious');
+    });
+    expect(result.current.mode).toBe('spacious');
+  });
+
+  it('accepts custom row heights', () => {
+    const { result } = renderHook(() =>
+      useDensityMode('compact', {
+        rowHeights: { compact: 24, comfortable: 36, spacious: 48 },
+      })
+    );
+    expect(result.current.rowHeight).toBe(24);
+  });
+});

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

@@ -0,0 +1,149 @@
+/**
+ * Tests for useDiscovery hook
+ */
+
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useDiscovery } from '../useDiscovery';
+import { SchemaRendererContext } from '../../context/SchemaRendererContext';
+
+function createWrapper(dataSource: any) {
+  return ({ children }: { children: React.ReactNode }) =>
+    React.createElement(
+      SchemaRendererContext.Provider,
+      { value: { dataSource } },
+      children,
+    );
+}
+
+describe('useDiscovery', () => {
+  it('returns isLoading false and null discovery when no context is provided', async () => {
+    const { result } = renderHook(() => useDiscovery());
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.discovery).toBeNull();
+    expect(result.current.error).toBeNull();
+  });
+
+  it('returns isLoading false and null discovery when dataSource has no getDiscovery method', async () => {
+    const dataSource = { someOtherMethod: vi.fn() };
+
+    const { result } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.discovery).toBeNull();
+    expect(result.current.error).toBeNull();
+  });
+
+  it('successfully fetches discovery data from dataSource.getDiscovery()', async () => {
+    const discoveryData = {
+      name: 'test-server',
+      version: '1.0.0',
+      services: {
+        auth: { enabled: true, status: 'available' as const },
+        data: { enabled: true, status: 'available' as const },
+      },
+    };
+
+    const dataSource = {
+      getDiscovery: vi.fn().mockResolvedValue(discoveryData),
+    };
+
+    const { result } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.discovery).toEqual(discoveryData);
+    expect(result.current.error).toBeNull();
+    expect(dataSource.getDiscovery).toHaveBeenCalled();
+  });
+
+  it('handles errors from getDiscovery gracefully', async () => {
+    const dataSource = {
+      getDiscovery: vi.fn().mockRejectedValue(new Error('Network error')),
+    };
+
+    const { result } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.discovery).toBeNull();
+    expect(result.current.error?.message).toBe('Network error');
+  });
+
+  it('isAuthEnabled defaults to true when no discovery', async () => {
+    const { result } = renderHook(() => useDiscovery());
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.isAuthEnabled).toBe(true);
+  });
+
+  it('isAuthEnabled reflects the auth service enabled state', async () => {
+    const discoveryData = {
+      services: {
+        auth: { enabled: false },
+      },
+    };
+
+    const dataSource = {
+      getDiscovery: vi.fn().mockResolvedValue(discoveryData),
+    };
+
+    const { result } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.isAuthEnabled).toBe(false);
+  });
+
+  it('cleans up on unmount (cancelled flag)', async () => {
+    let resolveDiscovery: (value: any) => void;
+    const discoveryPromise = new Promise((resolve) => {
+      resolveDiscovery = resolve;
+    });
+
+    const dataSource = {
+      getDiscovery: vi.fn().mockReturnValue(discoveryPromise),
+    };
+
+    const { result, unmount } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    expect(result.current.isLoading).toBe(true);
+
+    unmount();
+
+    // Resolve after unmount — state should not update
+    resolveDiscovery!({ name: 'late-response' });
+
+    // Discovery should remain null since the component was unmounted
+    expect(result.current.discovery).toBeNull();
+  });
+});

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

@@ -0,0 +1,161 @@
+/**
+ * Tests for useDynamicApp hook
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useDynamicApp } from '../useDynamicApp';
+
+describe('useDynamicApp', () => {
+  const staticConfig = {
+    name: 'crm',
+    label: 'CRM App',
+    objects: ['contact', 'account'],
+  };
+
+  it('returns static config when no adapter is provided', () => {
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig }),
+    );
+
+    expect(result.current.config).toEqual(staticConfig);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isServerConfig).toBe(false);
+  });
+
+  it('returns null config when neither adapter nor static config provided', () => {
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm' }),
+    );
+
+    expect(result.current.config).toBeNull();
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('loads config from server adapter', async () => {
+    const serverConfig = { name: 'crm', label: 'CRM (Server)', objects: ['contact'] };
+    const adapter = {
+      getApp: vi.fn().mockResolvedValue(serverConfig),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig, adapter }),
+    );
+
+    // Initially loading
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.config).toEqual(serverConfig);
+    expect(result.current.isServerConfig).toBe(true);
+    expect(adapter.getApp).toHaveBeenCalledWith('crm');
+  });
+
+  it('falls back to static config when server returns null', async () => {
+    const adapter = {
+      getApp: vi.fn().mockResolvedValue(null),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig, adapter }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.config).toEqual(staticConfig);
+    expect(result.current.isServerConfig).toBe(false);
+  });
+
+  it('falls back to static config on server error', async () => {
+    const adapter = {
+      getApp: vi.fn().mockRejectedValue(new Error('Network error')),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig, adapter }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.config).toEqual(staticConfig);
+    expect(result.current.isServerConfig).toBe(false);
+    expect(result.current.error?.message).toBe('Network error');
+  });
+
+  it('skips loading when enabled is false', () => {
+    const adapter = {
+      getApp: vi.fn(),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig, adapter, enabled: false }),
+    );
+
+    expect(result.current.config).toEqual(staticConfig);
+    expect(result.current.isLoading).toBe(false);
+    expect(adapter.getApp).not.toHaveBeenCalled();
+  });
+
+  it('refresh invalidates cache and re-fetches', async () => {
+    let callCount = 0;
+    const adapter = {
+      getApp: vi.fn().mockImplementation(async () => {
+        callCount++;
+        return { name: 'crm', version: callCount };
+      }),
+      invalidateCache: vi.fn(),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', adapter }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect((result.current.config as any).version).toBe(1);
+
+    await act(async () => {
+      await result.current.refresh();
+    });
+
+    expect(adapter.invalidateCache).toHaveBeenCalledWith('app:crm');
+    expect((result.current.config as any).version).toBe(2);
+  });
+
+  it('reloads when appId changes', async () => {
+    const adapter = {
+      getApp: vi.fn().mockImplementation(async (appId: string) => {
+        return { name: appId };
+      }),
+    };
+
+    const { result, rerender } = renderHook(
+      ({ appId }: { appId: string }) =>
+        useDynamicApp({ appId, adapter }),
+      { initialProps: { appId: 'crm' } },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect((result.current.config as any).name).toBe('crm');
+
+    rerender({ appId: 'erp' });
+
+    await waitFor(() => {
+      expect((result.current.config as any).name).toBe('erp');
+    });
+
+    expect(adapter.getApp).toHaveBeenCalledWith('erp');
+  });
+});