@object-ui/components 0.3.0 → 0.3.1

package/src/__tests__/complex-disclosure-renderers.test.tsx

@@ -0,0 +1,301 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
+import {
+  renderComponent,
+  validateComponentRegistration,
+  checkDOMStructure,
+} from './test-utils';
+
+// Import renderers to ensure registration
+beforeAll(async () => {
+  await import('../renderers');
+});
+
+/**
+ * Comprehensive tests for disclosure renderer components
+ */
+describe('Disclosure Renderers - Display Issue Detection', () => {
+  describe('Accordion Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('accordion');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render accordion with items', () => {
+      const { container } = renderComponent({
+        type: 'accordion',
+        items: [
+          {
+            title: 'Section 1',
+            content: 'Content 1',
+          },
+          {
+            title: 'Section 2',
+            content: 'Content 2',
+          },
+        ],
+      });
+
+      expect(container.textContent).toContain('Section 1');
+      expect(container.textContent).toContain('Section 2');
+    });
+
+    it('should not have structural issues', () => {
+      const { container } = renderComponent({
+        type: 'accordion',
+        items: [{ title: 'Test', content: 'Content' }],
+      });
+
+      const domCheck = checkDOMStructure(container);
+      expect(domCheck.hasContent).toBe(true);
+    });
+  });
+
+  describe('Collapsible Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('collapsible');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render collapsible component', () => {
+      const { container } = renderComponent({
+        type: 'collapsible',
+        trigger: { type: 'button', label: 'Toggle' },
+        body: [{ type: 'text', content: 'Hidden content' }],
+      });
+
+      expect(container.textContent).toContain('Toggle');
+    });
+  });
+
+  describe('Toggle Group Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('toggle-group');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render toggle group with items', () => {
+      const { container } = renderComponent({
+        type: 'toggle-group',
+        selectionType: 'single',
+        items: [
+          { value: 'bold', label: 'Bold' },
+          { value: 'italic', label: 'Italic' },
+        ],
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+});
+
+/**
+ * Comprehensive tests for complex renderer components
+ */
+describe('Complex Renderers - Display Issue Detection', () => {
+  describe('Data Table Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('data-table');
+      expect(validation.isRegistered).toBe(true);
+      expect(validation.hasDefaultProps).toBe(true);
+    });
+
+    it('should render table with data', () => {
+      const { container } = renderComponent({
+        type: 'data-table',
+        columns: [
+          { id: 'name', header: 'Name' },
+          { id: 'age', header: 'Age' },
+        ],
+        data: [
+          { name: 'John', age: 30 },
+          { name: 'Jane', age: 25 },
+        ],
+      });
+
+      expect(container.textContent).toContain('Name');
+      expect(container.textContent).toContain('Age');
+    });
+
+    it('should use table semantics', () => {
+      const { container } = renderComponent({
+        type: 'data-table',
+        columns: [{ id: 'col1', header: 'Column 1' }],
+        data: [{ col1: 'Data' }],
+      });
+
+      const table = container.querySelector('table');
+      expect(table || container.querySelector('[role="table"]')).toBeTruthy();
+    });
+
+    it('should not have excessive nesting', () => {
+      const { container } = renderComponent({
+        type: 'data-table',
+        columns: [{ id: 'col1', header: 'Test' }],
+        data: [{ col1: 'Value' }],
+      });
+
+      const domCheck = checkDOMStructure(container);
+      // Tables can be nested but not excessively
+      expect(domCheck.nestedDepth).toBeLessThan(25);
+    });
+  });
+
+  describe('Carousel Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('carousel');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render carousel with items', () => {
+      const { container } = renderComponent({
+        type: 'carousel',
+        items: [
+          { type: 'div', body: [{ type: 'text', content: 'Slide 1' }] },
+          { type: 'div', body: [{ type: 'text', content: 'Slide 2' }] },
+        ],
+      });
+
+      // Carousel should render
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Scroll Area Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('scroll-area');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render scrollable area', () => {
+      const { container } = renderComponent({
+        type: 'scroll-area',
+        content: [{ type: 'text', content: 'Scrollable content' }],
+      });
+
+      // ScrollArea renders content
+      expect(container.textContent).toContain('Scrollable content');
+    });
+  });
+
+  describe('Resizable Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('resizable');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render resizable panels', () => {
+      const { container } = renderComponent({
+        type: 'resizable',
+        panels: [
+          { content: { type: 'text', content: 'Panel 1' } },
+          { content: { type: 'text', content: 'Panel 2' } },
+        ],
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Filter Builder Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('filter-builder');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render filter builder', () => {
+      const { container } = renderComponent({
+        type: 'filter-builder',
+        fields: [
+          { name: 'name', label: 'Name', type: 'text' },
+          { name: 'age', label: 'Age', type: 'number' },
+        ],
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Table Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('table');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render basic table', () => {
+      const { container } = renderComponent({
+        type: 'table',
+        head: {
+          rows: [
+            {
+              cells: [
+                { type: 'text', content: 'Header 1' },
+                { type: 'text', content: 'Header 2' },
+              ],
+            },
+          ],
+        },
+        body: {
+          rows: [
+            {
+              cells: [
+                { type: 'text', content: 'Cell 1' },
+                { type: 'text', content: 'Cell 2' },
+              ],
+            },
+          ],
+        },
+      });
+
+      const table = container.querySelector('table');
+      expect(table).toBeTruthy();
+    });
+  });
+});
+
+/**
+ * Cross-cutting concerns: Tests that apply to all components
+ */
+describe('All Renderers - Cross-Cutting Concerns', () => {
+  it('should not render components with excessive DOM nesting', () => {
+    const components = ['div', 'container', 'flex', 'grid'];
+    
+    components.forEach(type => {
+      if (ComponentRegistry.has(type)) {
+        const { container } = renderComponent({
+          type,
+          body: [{ type: 'text', content: 'Test' }],
+        });
+
+        const domCheck = checkDOMStructure(container);
+        expect(domCheck.nestedDepth).toBeLessThan(20);
+      }
+    });
+  });
+
+  it('should handle className prop for custom styling', () => {
+    const components = ['button', 'input', 'div', 'text'];
+    
+    components.forEach(type => {
+      if (ComponentRegistry.has(type)) {
+        const { container } = renderComponent({
+          type,
+          className: 'custom-class',
+          label: 'Test',
+          content: 'Test',
+        });
+
+        // Should render without errors
+        expect(container).toBeDefined();
+      }
+    });
+  });
+});

package/src/__tests__/feedback-overlay-renderers.test.tsx

@@ -0,0 +1,349 @@
+/**
+ * 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');
+});
+
+/**
+ * Comprehensive tests for feedback renderer components
+ */
+describe('Feedback Renderers - Display Issue Detection', () => {
+  describe('Loading Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('loading');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render loading indicator', () => {
+      const { container } = renderComponent({
+        type: 'loading',
+      });
+
+      const domCheck = checkDOMStructure(container);
+      expect(domCheck.hasChildren || domCheck.hasContent).toBe(true);
+    });
+
+    it('should support loading message', () => {
+      const { container } = renderComponent({
+        type: 'loading',
+        text: 'Loading data...',
+      });
+
+      expect(container.textContent).toContain('Loading');
+    });
+  });
+
+  describe('Spinner Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('spinner');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render spinner element', () => {
+      const { container } = renderComponent({
+        type: 'spinner',
+      });
+
+      // Spinner should render some content
+      expect(container.firstChild).toBeTruthy();
+    });
+  });
+
+  describe('Progress Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('progress');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render progress bar', () => {
+      const { container } = renderComponent({
+        type: 'progress',
+        value: 50,
+      });
+
+      const progress = container.querySelector('[role="progressbar"], progress');
+      expect(progress || container.firstChild).toBeTruthy();
+    });
+
+    it('should support different values', () => {
+      const values = [0, 25, 50, 75, 100];
+      
+      values.forEach(value => {
+        const { container } = renderComponent({
+          type: 'progress',
+          value,
+        });
+
+        expect(container.firstChild).toBeTruthy();
+      });
+    });
+  });
+
+  describe('Skeleton Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('skeleton');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render skeleton placeholder', () => {
+      const { container } = renderComponent({
+        type: 'skeleton',
+      });
+
+      expect(container.firstChild).toBeTruthy();
+    });
+
+    it('should support different shapes', () => {
+      const { container: rect } = renderComponent({
+        type: 'skeleton',
+        className: 'h-12',
+      });
+
+      const { container: circle } = renderComponent({
+        type: 'skeleton',
+        className: 'h-12 w-12 rounded-full',
+      });
+
+      expect(rect.firstChild).toBeTruthy();
+      expect(circle.firstChild).toBeTruthy();
+    });
+  });
+
+  describe('Empty Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('empty');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render empty state message', () => {
+      const { container } = renderComponent({
+        type: 'empty',
+        description: 'No data available',
+      });
+
+      expect(container.textContent).toContain('No data');
+    });
+  });
+
+  describe('Toast Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('toast');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render toast notification', () => {
+      const { container } = renderComponent({
+        type: 'toast',
+        title: 'Success',
+        description: 'Operation completed',
+      });
+
+      // Toast might be rendered in a portal, so just check it doesn't error
+      expect(container).toBeDefined();
+    });
+  });
+});
+
+/**
+ * Comprehensive tests for overlay renderer components
+ */
+describe('Overlay Renderers - Display Issue Detection', () => {
+  describe('Dialog Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('dialog');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render dialog structure', () => {
+      const { container } = renderComponent({
+        type: 'dialog',
+        title: 'Dialog Title',
+        open: true,
+        body: [
+          { type: 'text', content: 'Dialog content' },
+        ],
+      });
+
+      // Dialog might render in a portal
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Alert Dialog Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('alert-dialog');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render alert dialog', () => {
+      const { container } = renderComponent({
+        type: 'alert-dialog',
+        title: 'Confirm',
+        description: 'Are you sure?',
+        open: true,
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Sheet Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('sheet');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render sheet component', () => {
+      const { container } = renderComponent({
+        type: 'sheet',
+        title: 'Sheet',
+        open: true,
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Drawer Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('drawer');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render drawer component', () => {
+      const { container } = renderComponent({
+        type: 'drawer',
+        title: 'Drawer',
+        open: true,
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Popover Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('popover');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render popover structure', () => {
+      const { container } = renderComponent({
+        type: 'popover',
+        trigger: { type: 'button', label: 'Open' },
+        content: { type: 'text', content: 'Popover content' },
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Tooltip Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('tooltip');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render tooltip with trigger', () => {
+      const { container } = renderComponent({
+        type: 'tooltip',
+        content: 'Helpful tip',
+        trigger: [{ type: 'button', label: 'Hover me' }],
+      });
+
+      // Tooltip renders with trigger
+      expect(container.textContent).toContain('Hover me');
+    });
+  });
+
+  describe('Dropdown Menu Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('dropdown-menu');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render dropdown with items', () => {
+      const { container } = renderComponent({
+        type: 'dropdown-menu',
+        trigger: { type: 'button', label: 'Menu' },
+        items: [
+          { label: 'Item 1' },
+          { label: 'Item 2' },
+        ],
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Context Menu Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('context-menu');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render context menu', () => {
+      const { container } = renderComponent({
+        type: 'context-menu',
+        items: [
+          { label: 'Action 1' },
+          { label: 'Action 2' },
+        ],
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Hover Card Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('hover-card');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render hover card', () => {
+      const { container } = renderComponent({
+        type: 'hover-card',
+        trigger: { type: 'text', content: 'Hover' },
+        content: { type: 'text', content: 'Card content' },
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Menubar Renderer', () => {
+    it('should be properly registered', () => {
+      const validation = validateComponentRegistration('menubar');
+      expect(validation.isRegistered).toBe(true);
+    });
+
+    it('should render menubar', () => {
+      const { container } = renderComponent({
+        type: 'menubar',
+        menus: [
+          {
+            label: 'File',
+            items: [{ label: 'New' }, { label: 'Open' }],
+          },
+        ],
+      });
+
+      expect(container).toBeDefined();
+    });
+  });
+});