@object-ui/react 0.3.1 → 2.0.0

package/src/__tests__/LazyPluginLoader.test.tsx

@@ -0,0 +1,176 @@
+/**
+ * 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 } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { createLazyPlugin, preloadPlugin } from '../LazyPluginLoader';
+
+describe('createLazyPlugin', () => {
+  it('should create a lazy-loaded component', async () => {
+    const TestComponent = () => <div>Test Component</div>;
+    
+    const LazyComponent = createLazyPlugin(
+      () => Promise.resolve({ default: TestComponent })
+    );
+    
+    render(<LazyComponent />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Test Component')).toBeInTheDocument();
+    });
+  });
+
+  it('should show custom fallback while loading', async () => {
+    const TestComponent = () => <div>Test Component</div>;
+    
+    const LazyComponent = createLazyPlugin(
+      () => new Promise<{ default: React.ComponentType }>((resolve) => {
+        setTimeout(() => resolve({ default: TestComponent }), 100);
+      }),
+      { fallback: <div>Loading...</div> }
+    );
+    
+    render(<LazyComponent />);
+    
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    
+    await waitFor(() => {
+      expect(screen.getByText('Test Component')).toBeInTheDocument();
+    });
+  });
+
+  it('should pass props to the lazy component', async () => {
+    interface TestProps {
+      message: string;
+    }
+    
+    const TestComponent = ({ message }: TestProps) => <div>{message}</div>;
+    
+    const LazyComponent = createLazyPlugin<TestProps>(
+      () => Promise.resolve({ default: TestComponent })
+    );
+    
+    render(<LazyComponent message="Hello World" />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Hello World')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle loading errors gracefully', async () => {
+    // Mock console.error to avoid noise in test output
+    const originalError = console.error;
+    console.error = vi.fn();
+
+    const LazyComponent = createLazyPlugin<any>(
+      () => Promise.reject(new Error('Load error'))
+    );
+    
+    expect(() => render(<LazyComponent />)).not.toThrow();
+    
+    // Restore console.error
+    console.error = originalError;
+  });
+
+  it('should preload a plugin without rendering', async () => {
+    const TestComponent = () => <div>Preloaded</div>;
+    const importFn = vi.fn(() => Promise.resolve({ default: TestComponent }));
+
+    const result = await preloadPlugin(importFn);
+
+    expect(importFn).toHaveBeenCalledTimes(1);
+    expect(result).toEqual({ default: TestComponent });
+  });
+
+  it('should render errorFallback when component fails to load', async () => {
+    const originalError = console.error;
+    console.error = vi.fn();
+
+    const ErrorFallback = ({ error, retry }: { error: Error; retry: () => void }) => (
+      <div>
+        <span>Error: {error.message}</span>
+        <button onClick={retry}>Retry</button>
+      </div>
+    );
+
+    const LazyComponent = createLazyPlugin(
+      () => Promise.reject(new Error('chunk failed')),
+      { retries: 0, errorFallback: ErrorFallback }
+    );
+
+    render(<LazyComponent />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Error: chunk failed')).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
+
+    console.error = originalError;
+  });
+
+  it('should not retry when retries=0', async () => {
+    const originalError = console.error;
+    console.error = vi.fn();
+
+    const importFn = vi.fn(() => Promise.reject(new Error('fail')));
+
+    const ErrorFallback = ({ error }: { error: Error; retry: () => void }) => (
+      <div>Error: {error.message}</div>
+    );
+
+    const LazyComponent = createLazyPlugin(importFn, {
+      retries: 0,
+      errorFallback: ErrorFallback,
+    });
+
+    render(<LazyComponent />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Error: fail')).toBeInTheDocument();
+    });
+
+    // Called only once — no retries
+    expect(importFn).toHaveBeenCalledTimes(1);
+
+    console.error = originalError;
+  });
+
+  it('should retry on failure then succeed', async () => {
+    const originalError = console.error;
+    console.error = vi.fn();
+
+    const TestComponent = () => <div>Success after retry</div>;
+
+    let callCount = 0;
+    const importFn = vi.fn(() => {
+      callCount++;
+      if (callCount <= 2) {
+        return Promise.reject(new Error('transient error'));
+      }
+      return Promise.resolve({ default: TestComponent as React.ComponentType });
+    });
+
+    const LazyComponent = createLazyPlugin(importFn, {
+      retries: 3,
+      retryDelay: 10,
+    });
+
+    render(<LazyComponent />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Success after retry')).toBeInTheDocument();
+    }, { timeout: 5000 });
+
+    // First call + 2 retries (fails) + 1 success = called 3 times
+    expect(importFn).toHaveBeenCalledTimes(3);
+
+    console.error = originalError;
+  });
+});

package/src/__tests__/ThemeProvider.test.tsx

@@ -0,0 +1,451 @@
+/**
+ * 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 React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import type { Theme } from '@object-ui/types';
+import {
+  ThemeProvider,
+  useTheme,
+  useOptionalTheme,
+} from '../context/ThemeContext';
+
+// ============================================================================
+// Fixtures
+// ============================================================================
+
+const lightTheme: Theme = {
+  name: 'light',
+  label: 'Light',
+  mode: 'light',
+  colors: {
+    primary: '#3B82F6',
+    secondary: '#64748B',
+    background: '#FFFFFF',
+    text: '#0F172A',
+    error: '#EF4444',
+  },
+  typography: {
+    fontFamily: { base: 'Inter, sans-serif' },
+    fontSize: { base: '1rem' },
+  },
+  borderRadius: { base: '0.25rem', lg: '0.5rem' },
+};
+
+const darkTheme: Theme = {
+  name: 'dark',
+  label: 'Dark',
+  mode: 'dark',
+  colors: {
+    primary: '#60A5FA',
+    secondary: '#94A3B8',
+    background: '#0F172A',
+    text: '#F1F5F9',
+    error: '#FCA5A5',
+  },
+};
+
+const childTheme: Theme = {
+  name: 'corporate',
+  label: 'Corporate',
+  colors: { primary: '#1E40AF' },
+  extends: 'light',
+};
+
+function createWrapper(props: Omit<React.ComponentProps<typeof ThemeProvider>, 'children'>) {
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return <ThemeProvider {...props}>{children}</ThemeProvider>;
+  };
+}
+
+// ============================================================================
+// Setup
+// ============================================================================
+
+beforeEach(() => {
+  // Clean DOM state
+  document.documentElement.style.cssText = '';
+  document.documentElement.className = '';
+  localStorage.clear();
+});
+
+afterEach(() => {
+  document.documentElement.style.cssText = '';
+  document.documentElement.className = '';
+  localStorage.clear();
+});
+
+// ============================================================================
+// useTheme — basic context
+// ============================================================================
+
+describe('useTheme', () => {
+  it('should throw when used outside ThemeProvider', () => {
+    expect(() => {
+      renderHook(() => useTheme());
+    }).toThrow('useTheme must be used within a <ThemeProvider>');
+  });
+
+  it('should return theme context when inside ThemeProvider', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme] }),
+    });
+
+    expect(result.current.theme).toBeTruthy();
+    expect(result.current.theme?.name).toBe('light');
+    expect(result.current.activeTheme).toBe('light');
+  });
+
+  it('should default to first theme when no defaultTheme', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [darkTheme, lightTheme] }),
+    });
+
+    expect(result.current.activeTheme).toBe('dark');
+  });
+
+  it('should use defaultTheme when provided', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme, darkTheme], defaultTheme: 'dark' }),
+    });
+
+    expect(result.current.activeTheme).toBe('dark');
+  });
+
+  it('should return empty state when no themes', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [] }),
+    });
+
+    expect(result.current.theme).toBeNull();
+    expect(result.current.activeTheme).toBeNull();
+    expect(result.current.cssVars).toEqual({});
+  });
+});
+
+// ============================================================================
+// useOptionalTheme
+// ============================================================================
+
+describe('useOptionalTheme', () => {
+  it('should return null outside ThemeProvider', () => {
+    const { result } = renderHook(() => useOptionalTheme());
+    expect(result.current).toBeNull();
+  });
+
+  it('should return context inside ThemeProvider', () => {
+    const { result } = renderHook(() => useOptionalTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme] }),
+    });
+
+    expect(result.current).toBeTruthy();
+    expect(result.current?.theme?.name).toBe('light');
+  });
+});
+
+// ============================================================================
+// Theme switching
+// ============================================================================
+
+describe('Theme switching', () => {
+  it('should switch theme via setTheme', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme, darkTheme], defaultTheme: 'light' }),
+    });
+
+    expect(result.current.activeTheme).toBe('light');
+
+    act(() => {
+      result.current.setTheme('dark');
+    });
+
+    expect(result.current.activeTheme).toBe('dark');
+    expect(result.current.theme?.name).toBe('dark');
+  });
+
+  it('should not switch to nonexistent theme', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme], defaultTheme: 'light' }),
+    });
+
+    act(() => {
+      result.current.setTheme('nonexistent');
+    });
+
+    expect(result.current.activeTheme).toBe('light');
+  });
+
+  it('should update CSS variables when theme changes', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme, darkTheme], defaultTheme: 'light' }),
+    });
+
+    const lightPrimary = result.current.cssVars['--primary'];
+
+    act(() => {
+      result.current.setTheme('dark');
+    });
+
+    const darkPrimary = result.current.cssVars['--primary'];
+    expect(darkPrimary).not.toBe(lightPrimary);
+  });
+});
+
+// ============================================================================
+// Mode management
+// ============================================================================
+
+describe('Mode management', () => {
+  it('should default mode to auto', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme] }),
+    });
+
+    expect(result.current.mode).toBe('auto');
+  });
+
+  it('should use defaultMode when provided', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme], defaultMode: 'dark' }),
+    });
+
+    expect(result.current.mode).toBe('dark');
+    expect(result.current.resolvedMode).toBe('dark');
+  });
+
+  it('should switch mode via setMode', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme], defaultMode: 'light' }),
+    });
+
+    expect(result.current.resolvedMode).toBe('light');
+
+    act(() => {
+      result.current.setMode('dark');
+    });
+
+    expect(result.current.mode).toBe('dark');
+    expect(result.current.resolvedMode).toBe('dark');
+  });
+
+  it('should resolve auto mode based on system preference', () => {
+    // Mock system dark mode
+    const original = window.matchMedia;
+    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+      matches: query === '(prefers-color-scheme: dark)',
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme], defaultMode: 'auto' }),
+    });
+
+    expect(result.current.resolvedMode).toBe('dark');
+
+    window.matchMedia = original;
+  });
+});
+
+// ============================================================================
+// CSS variable injection
+// ============================================================================
+
+describe('CSS variable injection', () => {
+  it('should inject CSS variables into documentElement', () => {
+    renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme] }),
+    });
+
+    const root = document.documentElement;
+    expect(root.style.getPropertyValue('--primary')).toBeTruthy();
+  });
+
+  it('should inject mode class on documentElement', () => {
+    renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme], defaultMode: 'dark' }),
+    });
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
+
+  it('should inject into custom target element', () => {
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+
+    renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme], target }),
+    });
+
+    expect(target.style.getPropertyValue('--primary')).toBeTruthy();
+
+    document.body.removeChild(target);
+  });
+
+  it('should clean up CSS variables on unmount', () => {
+    const { unmount } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme] }),
+    });
+
+    const root = document.documentElement;
+    expect(root.style.getPropertyValue('--primary')).toBeTruthy();
+
+    unmount();
+
+    expect(root.style.getPropertyValue('--primary')).toBe('');
+  });
+
+  it('should include typography and radius variables', () => {
+    renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme] }),
+    });
+
+    const root = document.documentElement;
+    expect(root.style.getPropertyValue('--font-sans')).toBe('Inter, sans-serif');
+    expect(root.style.getPropertyValue('--radius')).toBe('0.25rem');
+    expect(root.style.getPropertyValue('--radius-lg')).toBe('0.5rem');
+  });
+});
+
+// ============================================================================
+// Theme inheritance
+// ============================================================================
+
+describe('Theme inheritance', () => {
+  it('should resolve theme.extends', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({
+        themes: [lightTheme, childTheme],
+        defaultTheme: 'corporate',
+      }),
+    });
+
+    // Child overrides primary
+    expect(result.current.theme?.colors.primary).toBe('#1E40AF');
+    // Inherits from parent
+    expect(result.current.theme?.colors.secondary).toBe('#64748B');
+    expect(result.current.theme?.colors.background).toBe('#FFFFFF');
+    expect(result.current.theme?.typography?.fontFamily?.base).toBe('Inter, sans-serif');
+  });
+});
+
+// ============================================================================
+// Persistence
+// ============================================================================
+
+describe('Persistence', () => {
+  it('should persist theme name to localStorage', () => {
+    renderHook(() => useTheme(), {
+      wrapper: createWrapper({
+        themes: [lightTheme, darkTheme],
+        defaultTheme: 'light',
+        persist: true,
+      }),
+    });
+
+    expect(localStorage.getItem('objectui-theme-name')).toBe('light');
+  });
+
+  it('should persist mode to localStorage', () => {
+    renderHook(() => useTheme(), {
+      wrapper: createWrapper({
+        themes: [lightTheme],
+        defaultMode: 'dark',
+        persist: true,
+      }),
+    });
+
+    expect(localStorage.getItem('objectui-theme-mode')).toBe('dark');
+  });
+
+  it('should restore theme from localStorage', () => {
+    localStorage.setItem('objectui-theme-name', 'dark');
+    localStorage.setItem('objectui-theme-mode', 'dark');
+
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({
+        themes: [lightTheme, darkTheme],
+        defaultTheme: 'light',
+        defaultMode: 'light',
+        persist: true,
+      }),
+    });
+
+    expect(result.current.activeTheme).toBe('dark');
+    expect(result.current.mode).toBe('dark');
+  });
+
+  it('should use custom storageKey', () => {
+    renderHook(() => useTheme(), {
+      wrapper: createWrapper({
+        themes: [lightTheme],
+        persist: true,
+        storageKey: 'myapp-theme',
+      }),
+    });
+
+    expect(localStorage.getItem('myapp-theme-name')).toBe('light');
+    expect(localStorage.getItem('myapp-theme-mode')).toBeTruthy();
+  });
+
+  it('should not persist when persist=false', () => {
+    renderHook(() => useTheme(), {
+      wrapper: createWrapper({
+        themes: [lightTheme],
+        persist: false,
+      }),
+    });
+
+    expect(localStorage.getItem('objectui-theme-name')).toBeNull();
+  });
+
+  it('should update persistence when theme changes', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({
+        themes: [lightTheme, darkTheme],
+        defaultTheme: 'light',
+        persist: true,
+      }),
+    });
+
+    act(() => {
+      result.current.setTheme('dark');
+    });
+
+    expect(localStorage.getItem('objectui-theme-name')).toBe('dark');
+  });
+});
+
+// ============================================================================
+// Generated CSS vars object
+// ============================================================================
+
+describe('cssVars output', () => {
+  it('should expose cssVars in the context', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme] }),
+    });
+
+    expect(result.current.cssVars).toBeDefined();
+    expect(result.current.cssVars['--primary']).toBeTruthy();
+    expect(result.current.cssVars['--foreground']).toBeTruthy();
+    expect(result.current.cssVars['--font-sans']).toBe('Inter, sans-serif');
+  });
+
+  it('should provide themes list', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createWrapper({ themes: [lightTheme, darkTheme] }),
+    });
+
+    expect(result.current.themes).toHaveLength(2);
+    expect(result.current.themes[0].name).toBe('light');
+    expect(result.current.themes[1].name).toBe('dark');
+  });
+});