@object-ui/components 3.3.0 → 3.3.1

package/src/__tests__/form-renderers.test.tsx

@@ -1,364 +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, beforeAll } from 'vitest';
-import { screen } from '@testing-library/react';
-import {
-  renderComponent,
-  validateComponentRegistration,
-  getAllDisplayIssues,
-} from './test-utils';
-
-// Import renderers to ensure registration
-beforeAll(async () => {
-  await import('../renderers');
-}, 30000); // Increase timeout to 30 seconds for heavy renderer imports
-
-/**
- * Comprehensive tests for form renderer components
- * These tests automatically detect display and accessibility issues
- */
-describe('Form Renderers - Display Issue Detection', () => {
-  describe('Button Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('button');
-      expect(validation.isRegistered).toBe(true);
-      expect(validation.hasConfig).toBe(true);
-      expect(validation.hasDefaultProps).toBe(true);
-    });
-
-    it('should render button with label', () => {
-      const { container } = renderComponent({
-        type: 'button',
-        label: 'Click Me',
-      });
-
-      const button = screen.getByRole('button', { name: /click me/i });
-      expect(button).toBeInTheDocument();
-      
-      const issues = getAllDisplayIssues(container);
-      const a11yIssues = issues.filter(i => i.includes('missing accessible label'));
-      expect(a11yIssues).toHaveLength(0);
-    });
-
-    it('should support different variants', () => {
-      const variants = ['default', 'secondary', 'destructive', 'outline', 'ghost', 'link'];
-      
-      variants.forEach(variant => {
-        const { container } = renderComponent({
-          type: 'button',
-          label: 'Test',
-          variant,
-        });
-
-        const button = container.querySelector('button');
-        expect(button).toBeTruthy();
-      });
-    });
-
-    it('should support different sizes', () => {
-      const sizes = ['default', 'sm', 'lg', 'icon'];
-      
-      sizes.forEach(size => {
-        const { container } = renderComponent({
-          type: 'button',
-          label: 'Test',
-          size,
-        });
-
-        const button = container.querySelector('button');
-        expect(button).toBeTruthy();
-      });
-    });
-
-    it('should render children when no label provided', () => {
-      const { container } = renderComponent({
-        type: 'button',
-        body: [{ type: 'text', content: 'Child Content' }],
-      });
-
-      expect(container.textContent).toContain('Child Content');
-    });
-  });
-
-  describe('Input Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('input');
-      expect(validation.isRegistered).toBe(true);
-      expect(validation.hasDefaultProps).toBe(true);
-    });
-
-    it('should render input with label', () => {
-      const { container } = renderComponent({
-        type: 'input',
-        label: 'Username',
-        name: 'username',
-        id: 'username-input',
-      });
-
-      const input = container.querySelector('input');
-      const label = container.querySelector('label');
-      
-      expect(input).toBeTruthy();
-      expect(label).toBeTruthy();
-      expect(label?.textContent).toContain('Username');
-    });
-
-    it('should show required indicator when required', () => {
-      const { container } = renderComponent({
-        type: 'input',
-        label: 'Required Field',
-        name: 'required',
-        required: true,
-      });
-
-      const label = container.querySelector('label');
-      // The label should have a required indicator (*)
-      expect(label?.className).toContain('text-destructive');
-    });
-
-    it('should support different input types', () => {
-      const types = ['text', 'email', 'password', 'number', 'tel', 'url', 'date'];
-      
-      types.forEach(inputType => {
-        const { container } = renderComponent({
-          type: 'input',
-          label: 'Test',
-          inputType,
-        });
-
-        const input = container.querySelector('input');
-        expect(input?.getAttribute('type')).toBe(inputType);
-      });
-    });
-
-    it('should display description when provided', () => {
-      const { container } = renderComponent({
-        type: 'input',
-        label: 'Field',
-        description: 'This is a helpful description',
-      });
-
-      expect(container.textContent).toContain('This is a helpful description');
-    });
-
-    it('should display error message when provided', () => {
-      const { container } = renderComponent({
-        type: 'input',
-        label: 'Field',
-        error: 'This field has an error',
-      });
-
-      expect(container.textContent).toContain('This field has an error');
-      const error = container.querySelector('.text-destructive');
-      expect(error).toBeTruthy();
-    });
-
-    it('should handle disabled state', () => {
-      const { container } = renderComponent({
-        type: 'input',
-        label: 'Field',
-        disabled: true,
-      });
-
-      const input = container.querySelector('input');
-      expect(input?.hasAttribute('disabled')).toBe(true);
-    });
-
-    it('should handle readonly state', () => {
-      const { container } = renderComponent({
-        type: 'input',
-        label: 'Field',
-        readOnly: true,
-      });
-
-      const input = container.querySelector('input');
-      expect(input?.hasAttribute('readonly')).toBe(true);
-    });
-  });
-
-  describe('Email Input Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('email');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render email input with correct type', () => {
-      const { container } = renderComponent({
-        type: 'email',
-        label: 'Email',
-      });
-
-      const input = container.querySelector('input[type="email"]');
-      expect(input).toBeTruthy();
-    });
-  });
-
-  describe('Password Input Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('password');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render password input with correct type', () => {
-      const { container } = renderComponent({
-        type: 'password',
-        label: 'Password',
-      });
-
-      const input = container.querySelector('input[type="password"]');
-      expect(input).toBeTruthy();
-    });
-  });
-
-  describe('Textarea Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('textarea');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render textarea with label', () => {
-      const { container } = renderComponent({
-        type: 'textarea',
-        label: 'Comments',
-        name: 'comments',
-      });
-
-      const textarea = container.querySelector('textarea');
-      const label = container.querySelector('label');
-      
-      expect(textarea).toBeTruthy();
-      expect(label).toBeTruthy();
-    });
-
-    it('should support placeholder', () => {
-      const { container } = renderComponent({
-        type: 'textarea',
-        label: 'Comments',
-        placeholder: 'Enter your comments here',
-      });
-
-      const textarea = container.querySelector('textarea');
-      expect(textarea?.getAttribute('placeholder')).toBe('Enter your comments here');
-    });
-  });
-
-  describe('Select Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('select');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render select with options', () => {
-      const { container } = renderComponent({
-        type: 'select',
-        label: 'Choose option',
-        options: [
-          { value: '1', label: 'Option 1' },
-          { value: '2', label: 'Option 2' },
-        ],
-      });
-
-      // Select component should be present
-      expect(container.querySelector('[role="combobox"]') || container.querySelector('select')).toBeTruthy();
-    });
-  });
-
-  describe('Checkbox Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('checkbox');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render checkbox with label', () => {
-      const { container } = renderComponent({
-        type: 'checkbox',
-        label: 'Accept terms',
-        name: 'terms',
-      });
-
-      const checkbox = container.querySelector('input[type="checkbox"], button[role="checkbox"]');
-      expect(checkbox).toBeTruthy();
-    });
-  });
-
-  describe('Switch Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('switch');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render switch component', () => {
-      const { container } = renderComponent({
-        type: 'switch',
-        label: 'Enable feature',
-      });
-
-      const switchEl = container.querySelector('[role="switch"], button');
-      expect(switchEl).toBeTruthy();
-    });
-  });
-
-  describe('Radio Group Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('radio-group');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render radio group with options', () => {
-      const { container } = renderComponent({
-        type: 'radio-group',
-        label: 'Choose one',
-        options: [
-          { value: 'a', label: 'Option A' },
-          { value: 'b', label: 'Option B' },
-        ],
-      });
-
-      const radioGroup = container.querySelector('[role="radiogroup"]');
-      expect(radioGroup).toBeTruthy();
-    });
-  });
-
-  describe('Slider Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('slider');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render slider component', () => {
-      const { container } = renderComponent({
-        type: 'slider',
-        label: 'Volume',
-        min: 0,
-        max: 100,
-      });
-
-      const slider = container.querySelector('[role="slider"], input[type="range"]');
-      expect(slider).toBeTruthy();
-    });
-  });
-
-  describe('Label Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('label');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render label element', () => {
-      const { container } = renderComponent({
-        type: 'label',
-        content: 'Form Label',
-      });
-
-      const label = container.querySelector('label');
-      expect(label).toBeTruthy();
-      expect(label?.textContent).toContain('Form Label');
-    });
-  });
-});

package/src/__tests__/layout-data-renderers.test.tsx

@@ -1,340 +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, beforeAll } from 'vitest';
-import {
-  renderComponent,
-  validateComponentRegistration,
-  checkDOMStructure,
-} from './test-utils';
-
-// Import renderers to ensure registration
-beforeAll(async () => {
-  await import('../renderers');
-}, 30000); // Increase timeout to 30 seconds for heavy renderer imports
-
-/**
- * Comprehensive tests for layout renderer components
- */
-describe('Layout Renderers - Display Issue Detection', () => {
-  describe('Container Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('container');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render container with children', () => {
-      const { container } = renderComponent({
-        type: 'container',
-        children: [
-          { type: 'text', content: 'Content 1' },
-          { type: 'text', content: 'Content 2' },
-        ],
-      });
-
-      expect(container.textContent).toContain('Content 1');
-      expect(container.textContent).toContain('Content 2');
-    });
-
-    it('should not have structural issues', () => {
-      const { container } = renderComponent({
-        type: 'container',
-        children: [{ type: 'text', content: 'Test' }],
-      });
-
-      const domCheck = checkDOMStructure(container);
-      expect(domCheck.hasContent).toBe(true);
-      expect(domCheck.isEmpty).toBe(false);
-    });
-  });
-
-  describe('Grid Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('grid');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render grid layout', () => {
-      const { container } = renderComponent({
-        type: 'grid',
-        columns: 3,
-        children: [
-          { type: 'text', content: 'Item 1' },
-          { type: 'text', content: 'Item 2' },
-          { type: 'text', content: 'Item 3' },
-        ],
-      });
-
-      const grid = container.querySelector('[class*="grid"]');
-      expect(grid || container.firstChild).toBeTruthy();
-      expect(container.textContent).toContain('Item 1');
-    });
-  });
-
-  describe('Flex Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('flex');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render flex layout', () => {
-      const { container } = renderComponent({
-        type: 'flex',
-        direction: 'row',
-        body: [
-          { type: 'text', content: 'Flex Item 1' },
-          { type: 'text', content: 'Flex Item 2' },
-        ],
-      });
-
-      const flex = container.querySelector('[class*="flex"]');
-      expect(flex || container.firstChild).toBeTruthy();
-    });
-
-    it('should support different directions', () => {
-      const directions = ['row', 'column', 'row-reverse', 'column-reverse'];
-      
-      directions.forEach(direction => {
-        const { container } = renderComponent({
-          type: 'flex',
-          direction,
-          children: [{ type: 'text', content: 'Test' }],
-        });
-
-        expect(container.firstChild).toBeTruthy();
-      });
-    });
-  });
-});
-
-/**
- * Comprehensive tests for data display renderer components
- */
-describe('Data Display Renderers - Display Issue Detection', () => {
-  describe('List Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('list');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render list with items', () => {
-      const { container } = renderComponent({
-        type: 'list',
-        items: [
-          { content: 'Item 1' },
-          { content: 'Item 2' },
-          { content: 'Item 3' },
-        ],
-      });
-
-      expect(container.textContent).toContain('Item 1');
-      expect(container.textContent).toContain('Item 2');
-    });
-
-    it('should use proper list semantics', () => {
-      const { container } = renderComponent({
-        type: 'list',
-        items: [{ content: 'Test' }],
-      });
-
-      const list = container.querySelector('ul, ol, [role="list"]');
-      expect(list).toBeTruthy();
-    });
-  });
-
-  describe('Tree View Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('tree-view');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render tree structure', () => {
-      const { container } = renderComponent({
-        type: 'tree-view',
-        nodes: [
-          {
-            id: '1',
-            label: 'Root',
-            children: [
-              { id: '1-1', label: 'Child 1' },
-              { id: '1-2', label: 'Child 2' },
-            ],
-          },
-        ],
-      });
-
-      expect(container.textContent).toContain('Root');
-    });
-  });
-
-  describe('Badge Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('badge');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render badge with text', () => {
-      const { container } = renderComponent({
-        type: 'badge',
-        label: 'New',
-      });
-
-      expect(container.textContent).toContain('New');
-    });
-
-    it('should support different variants', () => {
-      const variants = ['default', 'secondary', 'destructive', 'outline'];
-      
-      variants.forEach(variant => {
-        const { container } = renderComponent({
-          type: 'badge',
-          label: 'Badge',
-          variant,
-        });
-
-        expect(container.textContent).toContain('Badge');
-      });
-    });
-  });
-
-  describe('Avatar Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('avatar');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render avatar with image', () => {
-      const { container } = renderComponent({
-        type: 'avatar',
-        src: 'https://example.com/avatar.jpg',
-        alt: 'User avatar',
-      });
-
-      // Avatar component renders, even if image doesn't load in test environment
-      const avatar = container.querySelector('span[class*="avatar"]') || container.firstChild;
-      expect(avatar).toBeTruthy();
-    });
-
-    it('should render fallback when no image', () => {
-      const { container } = renderComponent({
-        type: 'avatar',
-        fallback: 'JD',
-      });
-
-      expect(container.textContent).toContain('JD');
-    });
-  });
-
-  describe('Alert Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('alert');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render alert with message', () => {
-      const { container } = renderComponent({
-        type: 'alert',
-        title: 'Important',
-        description: 'This is an important message',
-      });
-
-      expect(container.textContent).toContain('Important');
-      expect(container.textContent).toContain('This is an important message');
-    });
-
-    it('should support different variants', () => {
-      const variants = ['default', 'destructive'];
-      
-      variants.forEach(variant => {
-        const { container } = renderComponent({
-          type: 'alert',
-          title: 'Alert',
-          variant,
-        });
-
-        expect(container.textContent).toContain('Alert');
-      });
-    });
-
-    it('should have proper role for accessibility', () => {
-      const { container } = renderComponent({
-        type: 'alert',
-        title: 'Alert',
-      });
-
-      const alert = container.querySelector('[role="alert"]');
-      expect(alert || container.querySelector('div')).toBeTruthy();
-    });
-  });
-
-  describe('Breadcrumb Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('breadcrumb');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render breadcrumb navigation', () => {
-      const { container } = renderComponent({
-        type: 'breadcrumb',
-        items: [
-          { label: 'Home', href: '/' },
-          { label: 'Products', href: '/products' },
-          { label: 'Details' },
-        ],
-      });
-
-      expect(container.textContent).toContain('Home');
-      expect(container.textContent).toContain('Products');
-    });
-
-    it('should use nav element for semantics', () => {
-      const { container } = renderComponent({
-        type: 'breadcrumb',
-        items: [{ label: 'Home' }],
-      });
-
-      const nav = container.querySelector('nav, [role="navigation"]');
-      expect(nav).toBeTruthy();
-    });
-  });
-
-  describe('Statistic Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('statistic');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render statistic with value and label', () => {
-      const { container } = renderComponent({
-        type: 'statistic',
-        value: '1,234',
-        label: 'Total Users',
-      });
-
-      expect(container.textContent).toContain('1,234');
-      expect(container.textContent).toContain('Total Users');
-    });
-  });
-
-  describe('Kbd Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('kbd');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render keyboard key', () => {
-      const { container } = renderComponent({
-        type: 'kbd',
-        keys: ['Ctrl', 'C'],
-      });
-
-      const kbd = container.querySelector('kbd');
-      expect(kbd || container.firstChild).toBeTruthy();
-    });
-  });
-});