@object-ui/components 3.3.0 → 3.3.1

package/src/__tests__/test-utils.tsx

@@ -1,190 +0,0 @@
-/**
- * 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 { render, RenderOptions } from '@testing-library/react';
-import { ComponentRegistry } from '@object-ui/core';
-import type { SchemaNode } from '@object-ui/types';
-
-/**
- * Test utility for rendering components from schema
- */
-export function renderComponent(schema: SchemaNode, options?: RenderOptions) {
-  const Component = ComponentRegistry.get(schema.type);
-  
-  if (!Component) {
-    throw new Error(`Component "${schema.type}" is not registered`);
-  }
-
-  return render(<Component schema={schema} />, options);
-}
-
-/**
- * Check if a component has proper accessibility attributes
- */
-export function checkAccessibility(element: HTMLElement): {
-  hasRole: boolean;
-  hasAriaLabel: boolean;
-  hasAriaDescribedBy: boolean;
-  issues: string[];
-} {
-  const issues: string[] = [];
-  const hasRole = element.hasAttribute('role');
-  const hasAriaLabel = element.hasAttribute('aria-label') || element.hasAttribute('aria-labelledby');
-  const hasAriaDescribedBy = element.hasAttribute('aria-describedby');
-
-  // Check for interactive elements without labels
-  if (
-    element.tagName === 'BUTTON' ||
-    element.tagName === 'A' ||
-    element.getAttribute('role') === 'button'
-  ) {
-    if (!element.textContent?.trim() && !hasAriaLabel) {
-      issues.push('Interactive element missing accessible label');
-    }
-  }
-
-  // Check for form inputs without labels
-  if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
-    const id = element.getAttribute('id');
-    const doc = element.ownerDocument || document;
-    const hasAssociatedLabel =
-      !!element.closest('label') ||
-      (!!id && !!doc.querySelector(`label[for="${id}"]`));
-    const hasLabel = hasAriaLabel || hasAssociatedLabel;
-    if (!hasLabel) {
-      issues.push('Form element missing label association');
-    }
-  }
-
-  return {
-    hasRole,
-    hasAriaLabel,
-    hasAriaDescribedBy,
-    issues,
-  };
-}
-
-/**
- * Check DOM structure for common issues
- */
-export function checkDOMStructure(container: HTMLElement): {
-  hasContent: boolean;
-  isEmpty: boolean;
-  hasChildren: boolean;
-  nestedDepth: number;
-  issues: string[];
-} {
-  const issues: string[] = [];
-  const hasContent = container.textContent !== null && container.textContent.trim().length > 0;
-  const isEmpty = container.children.length === 0 && !hasContent;
-  const hasChildren = container.children.length > 0;
-
-  // Calculate nesting depth
-  let maxDepth = 0;
-  function getDepth(el: Element, depth = 0): number {
-    if (el.children.length === 0) return depth;
-    let max = depth;
-    for (const child of Array.from(el.children)) {
-      max = Math.max(max, getDepth(child, depth + 1));
-    }
-    return max;
-  }
-  maxDepth = getDepth(container);
-
-  // Check for excessive nesting (potential performance issue)
-  if (maxDepth > 20) {
-    issues.push(`Excessive DOM nesting detected: ${maxDepth} levels`);
-  }
-
-  // Check for empty elements
-  if (isEmpty) {
-    issues.push('Component renders empty content');
-  }
-
-  return {
-    hasContent,
-    isEmpty,
-    hasChildren,
-    nestedDepth: maxDepth,
-    issues,
-  };
-}
-
-/**
- * Validate component registration
- */
-export function validateComponentRegistration(componentType: string): {
-  isRegistered: boolean;
-  hasConfig: boolean;
-  hasRenderer: boolean;
-  hasLabel: boolean;
-  hasInputs: boolean;
-  hasDefaultProps: boolean;
-  config: ReturnType<typeof ComponentRegistry.getConfig>;
-} {
-  const isRegistered = ComponentRegistry.has(componentType);
-  const renderer = ComponentRegistry.get(componentType);
-  const config = ComponentRegistry.getConfig(componentType);
-
-  return {
-    isRegistered,
-    hasConfig: !!config,
-    hasRenderer: !!renderer,
-    hasLabel: !!config?.label,
-    hasInputs: !!config?.inputs && config.inputs.length > 0,
-    hasDefaultProps: !!config?.defaultProps,
-    config,
-  };
-}
-
-/**
- * Get all display issues for a rendered component
- */
-export function getAllDisplayIssues(container: HTMLElement): string[] {
-  const issues: string[] = [];
-
-  // Check DOM structure
-  const domCheck = checkDOMStructure(container);
-  issues.push(...domCheck.issues);
-
-  // Check accessibility for all interactive elements
-  const buttons = container.querySelectorAll('button, a, [role="button"], input, textarea, select');
-  buttons.forEach((element) => {
-    const a11yCheck = checkAccessibility(element as HTMLElement);
-    issues.push(...a11yCheck.issues);
-  });
-
-  // Check for missing keys in lists
-  const lists = container.querySelectorAll('[role="list"], ul, ol');
-  lists.forEach((list) => {
-    const items = list.children;
-    if (items.length > 0) {
-      // This is a simplified check - in React, keys are not in the DOM
-      // but we can check for duplicate content which might indicate missing keys
-      const contents = Array.from(items).map(item => item.textContent);
-      const contentCounts = new Map<string, number>();
-      contents.forEach(content => {
-        contentCounts.set(content || '', (contentCounts.get(content || '') || 0) + 1);
-      });
-      const hasDuplicates = Array.from(contentCounts.values()).some(count => count > 1);
-      if (hasDuplicates) {
-        issues.push(`Potential duplicate list items detected`);
-      }
-    }
-  });
-
-  // Check for images without alt text
-  const images = container.querySelectorAll('img');
-  images.forEach((img) => {
-    if (!img.hasAttribute('alt')) {
-      issues.push('Image missing alt attribute');
-    }
-  });
-
-  return issues;
-}

package/src/__tests__/use-config-draft.test.tsx

@@ -1,295 +0,0 @@
-/**
- * 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 { renderHook, act } from '@testing-library/react';
-import { useConfigDraft } from '../hooks/use-config-draft';
-
-describe('useConfigDraft', () => {
-  const source = { name: 'Test', columns: 3, gap: 4, enabled: true };
-
-  it('should initialize draft from source', () => {
-    const { result } = renderHook(() => useConfigDraft(source));
-    expect(result.current.draft).toEqual(source);
-    expect(result.current.isDirty).toBe(false);
-  });
-
-  it('should start dirty in create mode', () => {
-    const { result } = renderHook(() =>
-      useConfigDraft(source, { mode: 'create' }),
-    );
-    expect(result.current.isDirty).toBe(true);
-  });
-
-  it('should start clean in edit mode', () => {
-    const { result } = renderHook(() =>
-      useConfigDraft(source, { mode: 'edit' }),
-    );
-    expect(result.current.isDirty).toBe(false);
-  });
-
-  it('should update a single field and mark dirty', () => {
-    const { result } = renderHook(() => useConfigDraft(source));
-    act(() => {
-      result.current.updateField('columns', 6);
-    });
-    expect(result.current.draft.columns).toBe(6);
-    expect(result.current.isDirty).toBe(true);
-  });
-
-  it('should preserve other fields when updating one', () => {
-    const { result } = renderHook(() => useConfigDraft(source));
-    act(() => {
-      result.current.updateField('gap', 8);
-    });
-    expect(result.current.draft.name).toBe('Test');
-    expect(result.current.draft.columns).toBe(3);
-    expect(result.current.draft.gap).toBe(8);
-  });
-
-  it('should discard changes and revert to source', () => {
-    const { result } = renderHook(() => useConfigDraft(source));
-    act(() => {
-      result.current.updateField('name', 'Modified');
-      result.current.updateField('columns', 12);
-    });
-    expect(result.current.isDirty).toBe(true);
-
-    act(() => {
-      result.current.discard();
-    });
-    expect(result.current.draft).toEqual(source);
-    expect(result.current.isDirty).toBe(false);
-  });
-
-  it('should call onUpdate callback when field changes', () => {
-    const onUpdate = vi.fn();
-    const { result } = renderHook(() =>
-      useConfigDraft(source, { onUpdate }),
-    );
-    act(() => {
-      result.current.updateField('gap', 10);
-    });
-    expect(onUpdate).toHaveBeenCalledWith('gap', 10);
-    expect(onUpdate).toHaveBeenCalledTimes(1);
-  });
-
-  it('should reset draft when source changes', () => {
-    const source1 = { name: 'A', value: 1 };
-    const source2 = { name: 'B', value: 2 };
-
-    const { result, rerender } = renderHook(
-      ({ src }) => useConfigDraft(src),
-      { initialProps: { src: source1 } },
-    );
-
-    act(() => {
-      result.current.updateField('name', 'Modified');
-    });
-    expect(result.current.isDirty).toBe(true);
-
-    rerender({ src: source2 });
-    expect(result.current.draft).toEqual(source2);
-    expect(result.current.isDirty).toBe(false);
-  });
-
-  it('should handle setDraft for advanced use cases', () => {
-    const { result } = renderHook(() => useConfigDraft(source));
-    act(() => {
-      result.current.setDraft({ ...source, name: 'Advanced', extra: 42 });
-    });
-    expect(result.current.draft.name).toBe('Advanced');
-    expect(result.current.draft.extra).toBe(42);
-  });
-
-  it('should not share reference with source', () => {
-    const mutableSource = { name: 'Original' };
-    const { result } = renderHook(() => useConfigDraft(mutableSource));
-    expect(result.current.draft).not.toBe(mutableSource);
-    expect(result.current.draft).toEqual(mutableSource);
-  });
-
-  // ── Undo / Redo ──────────────────────────────────────────────
-
-  describe('undo/redo', () => {
-    it('should start with canUndo=false and canRedo=false', () => {
-      const { result } = renderHook(() => useConfigDraft(source));
-      expect(result.current.canUndo).toBe(false);
-      expect(result.current.canRedo).toBe(false);
-    });
-
-    it('should enable undo after a field update', () => {
-      const { result } = renderHook(() => useConfigDraft(source));
-      act(() => {
-        result.current.updateField('name', 'Changed');
-      });
-      expect(result.current.canUndo).toBe(true);
-      expect(result.current.canRedo).toBe(false);
-    });
-
-    it('should undo to previous state', () => {
-      const { result } = renderHook(() => useConfigDraft(source));
-      act(() => {
-        result.current.updateField('name', 'Changed');
-      });
-      expect(result.current.draft.name).toBe('Changed');
-
-      act(() => {
-        result.current.undo();
-      });
-      expect(result.current.draft.name).toBe('Test');
-      expect(result.current.canUndo).toBe(false);
-      expect(result.current.canRedo).toBe(true);
-    });
-
-    it('should redo after undo', () => {
-      const { result } = renderHook(() => useConfigDraft(source));
-      act(() => {
-        result.current.updateField('name', 'Changed');
-      });
-      act(() => {
-        result.current.undo();
-      });
-      act(() => {
-        result.current.redo();
-      });
-      expect(result.current.draft.name).toBe('Changed');
-      expect(result.current.canUndo).toBe(true);
-      expect(result.current.canRedo).toBe(false);
-    });
-
-    it('should clear redo stack when a new change is made after undo', () => {
-      const { result } = renderHook(() => useConfigDraft(source));
-      act(() => {
-        result.current.updateField('name', 'First');
-      });
-      act(() => {
-        result.current.updateField('name', 'Second');
-      });
-      act(() => {
-        result.current.undo();
-      });
-      expect(result.current.canRedo).toBe(true);
-
-      act(() => {
-        result.current.updateField('name', 'Third');
-      });
-      expect(result.current.canRedo).toBe(false);
-      expect(result.current.draft.name).toBe('Third');
-    });
-
-    it('should support multiple undo steps', () => {
-      const { result } = renderHook(() => useConfigDraft(source));
-      act(() => {
-        result.current.updateField('name', 'A');
-      });
-      act(() => {
-        result.current.updateField('name', 'B');
-      });
-      act(() => {
-        result.current.updateField('name', 'C');
-      });
-      expect(result.current.draft.name).toBe('C');
-
-      act(() => {
-        result.current.undo();
-      });
-      expect(result.current.draft.name).toBe('B');
-
-      act(() => {
-        result.current.undo();
-      });
-      expect(result.current.draft.name).toBe('A');
-
-      act(() => {
-        result.current.undo();
-      });
-      expect(result.current.draft.name).toBe('Test');
-      expect(result.current.canUndo).toBe(false);
-    });
-
-    it('should do nothing when undoing with empty history', () => {
-      const { result } = renderHook(() => useConfigDraft(source));
-      act(() => {
-        result.current.undo();
-      });
-      expect(result.current.draft).toEqual(source);
-    });
-
-    it('should do nothing when redoing with empty future', () => {
-      const { result } = renderHook(() => useConfigDraft(source));
-      act(() => {
-        result.current.redo();
-      });
-      expect(result.current.draft).toEqual(source);
-    });
-
-    it('should clear history on discard', () => {
-      const { result } = renderHook(() => useConfigDraft(source));
-      act(() => {
-        result.current.updateField('name', 'Changed');
-      });
-      expect(result.current.canUndo).toBe(true);
-
-      act(() => {
-        result.current.discard();
-      });
-      expect(result.current.canUndo).toBe(false);
-      expect(result.current.canRedo).toBe(false);
-    });
-
-    it('should clear history when source changes', () => {
-      const source1 = { name: 'A', value: 1 };
-      const source2 = { name: 'B', value: 2 };
-      const { result, rerender } = renderHook(
-        ({ src }) => useConfigDraft(src),
-        { initialProps: { src: source1 } },
-      );
-      act(() => {
-        result.current.updateField('name', 'Modified');
-      });
-      expect(result.current.canUndo).toBe(true);
-
-      rerender({ src: source2 });
-      expect(result.current.canUndo).toBe(false);
-      expect(result.current.canRedo).toBe(false);
-    });
-
-    it('should respect maxHistory limit', () => {
-      const { result } = renderHook(() =>
-        useConfigDraft(source, { maxHistory: 3 }),
-      );
-      act(() => {
-        result.current.updateField('name', 'A');
-      });
-      act(() => {
-        result.current.updateField('name', 'B');
-      });
-      act(() => {
-        result.current.updateField('name', 'C');
-      });
-      act(() => {
-        result.current.updateField('name', 'D');
-      });
-      // maxHistory=3, so only 3 undo steps (not 4)
-      act(() => {
-        result.current.undo();
-      });
-      expect(result.current.draft.name).toBe('C');
-      act(() => {
-        result.current.undo();
-      });
-      expect(result.current.draft.name).toBe('B');
-      act(() => {
-        result.current.undo();
-      });
-      // Should stop here — oldest entry was trimmed
-      expect(result.current.canUndo).toBe(false);
-    });
-  });
-});

package/src/__tests__/view-compliance.test.tsx

@@ -1,153 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, waitFor } from '@testing-library/react';
-import React from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import type { DataSource } from '@object-ui/types';
-
-// Import all available plugins to ensure they register their views
-import '@object-ui/plugin-aggrid';
-import '@object-ui/plugin-calendar';
-import '@object-ui/plugin-charts';
-import '@object-ui/plugin-dashboard';
-import '@object-ui/plugin-gantt';
-import '@object-ui/plugin-grid';
-import '@object-ui/plugin-kanban';
-import '@object-ui/plugin-map';
-import '@object-ui/plugin-timeline';
-import '@object-ui/plugin-list';
-import '@object-ui/plugin-detail';
-import '@object-ui/plugin-form';
-// Import main components in case they provide default views
-import '../index';
-
-// Create a Mock DataSource type compatible with the system
-const createMockDataSource = (): DataSource => ({
-    find: vi.fn().mockResolvedValue([]),
-    findOne: vi.fn().mockResolvedValue({}),
-    create: vi.fn().mockResolvedValue({}),
-    update: vi.fn().mockResolvedValue({}),
-    delete: vi.fn().mockResolvedValue(true),
-    count: vi.fn().mockResolvedValue(0),
-} as unknown as DataSource);
-
-describe('View Component Compliance', () => {
-    
-    // Expected standard views based on supported plugins and types
-    // These should coincide with packages/types/src/views.ts or objectql view types
-    const EXPECTED_STANDARD_VIEWS = [
-        'grid',      // plugin-grid
-        'kanban',    // plugin-kanban
-        'calendar',  // plugin-calendar
-        'timeline',  // plugin-timeline
-        'map',       // plugin-map
-        'gantt',     // plugin-gantt
-        'chart',     // plugin-charts
-        'dashboard', // plugin-dashboard
-        'list',      // plugin-list
-        'detail',    // plugin-detail
-        'form',      // plugin-form
-    ];
-
-    // Assert registration of expected standard views
-    EXPECTED_STANDARD_VIEWS.forEach(viewType => {
-        it(`should have registered standard view: view:${viewType}`, () => {
-             // We look for components registered with 'view' namespace or starting with 'view:'
-             // Example: 'view:grid'
-            const viewKey = `view:${viewType}`;
-            
-            // Check direct registration or via namespace aliasing
-            // ComponentRegistry.get checks namespaces.
-            // If registered as { type: 'grid', namespace: 'view' }, fullKey is 'view:grid'.
-            const hasView = ComponentRegistry.getAllConfigs().some(c => c.type === viewKey);
-
-            if (!hasView) {
-                 // Try looking for non-namespaced if it is a view category
-                 const fallback = ComponentRegistry.getAllConfigs().some(c => 
-                    (c.category === 'view' || c.category === 'Complex') && 
-                    (c.type === viewType || c.type.endsWith(':' + viewType))
-                 );
-                 if (fallback) {
-                     // Warn but accept if instructions allow? instructions strict on "view:*"
-                     // I will fail if not registered as view:*
-                 }
-            }
-
-            if (!hasView) {
-                console.warn(`MISSING VIEW IMPLEMENTATION: ${viewKey}. Ensure the plugin (e.g. plugin-${viewType}) is imported and registers with namespace: 'view'.`);
-                // Fail the test as per requirements
-                // We expect TRUE. If hasView is false, it fails.
-                expect(hasView, `View '${viewKey}' should be registered`).toBe(true);
-            } else {
-                expect(hasView).toBe(true);
-            }
-        });
-    });
-    
-    // Filter for valid view components for deeper method compliance
-    // We include anything that claims to be a view
-    const viewComponents = ComponentRegistry.getAllConfigs().filter(c => 
-        c.category === 'view' || c.namespace === 'view' || c.type.startsWith('view:')
-    );
-
-    it('should have some view components registered from plugins', () => {
-        expect(viewComponents.length).toBeGreaterThan(0);
-    });
-
-    viewComponents.forEach(config => {
-        const componentName = config.type;
-        
-        describe(`View: ${componentName}`, () => {
-            
-            it('should have required metadata for views', () => {
-                // Either category is view OR namespace is view (which implies it's a view)
-                const isView = config.category === 'view' || config.namespace === 'view' || config.type.startsWith('view:');
-                expect(isView).toBe(true);
-                expect(config.component).toBeDefined();
-            });
-
-            it('should define data binding inputs (object/bind) or data input', () => {
-                const inputs = config.inputs || [];
-                // Views usually need an objectName to bind to ObjectStack OR a direct data array
-                const hasObjectInput = inputs.some(i => i.name === 'objectName' || i.name === 'object' || i.name === 'entity');
-                const hasDataInput = inputs.some(i => i.name === 'data' || i.name === 'items' || i.name === 'events' || i.name === 'tasks');
-                
-                // Warn but don't unnecessary fail if complex logic exists
-                if (!hasObjectInput && hasDataInput) {
-                    // Acceptable
-                } else if (!hasObjectInput && !config.inputs) {
-                     // Might be purely props driven
-                }
-                
-                expect(true).toBe(true); 
-            });
-
-            it('should attempt to fetchData when rendered with dataSource', async () => {
-                 const Cmp = config.component as React.ComponentType<any>;
-                 const mockSource = createMockDataSource();
-                 
-                 const schema = {
-                     type: config.type,
-                     objectName: 'test_object',
-                     columns: [{ name: 'name', label: 'Name' }], 
-                     data: [], 
-                     ...config.defaultProps
-                 };
-                 
-                 // Render test
-                 try {
-                     const { unmount } = render(
-                        <Cmp 
-                            schema={schema} 
-                            dataSource={mockSource} 
-                            className="test-view-class"
-                        />
-                     );
-                     
-                     unmount();
-                 } catch (e) {
-                     // console.error(`Failed to verify view render ${componentName}`, e);
-                 }
-            });
-        });
-    });
-});