@object-ui/components 3.0.3 → 3.1.1

package/src/__tests__/action-bar.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * Tests for ActionBar (action:bar) renderer
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ComponentRegistry } from '@object-ui/core';
+import { renderComponent, validateComponentRegistration } from './test-utils';
+
+// Ensure action renderers are loaded (side-effect imports via vitest.setup.tsx)
+
+describe('ActionBar (action:bar)', () => {
+  describe('registration', () => {
+    it('is registered in ComponentRegistry', () => {
+      const reg = validateComponentRegistration('action:bar');
+      expect(reg.isRegistered).toBe(true);
+      expect(reg.hasRenderer).toBe(true);
+      expect(reg.hasLabel).toBe(true);
+      expect(reg.hasInputs).toBe(true);
+      expect(reg.hasDefaultProps).toBe(true);
+    });
+  });
+
+  describe('rendering', () => {
+    it('renders nothing when actions array is empty', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        actions: [],
+      });
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('renders action buttons for provided actions', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        actions: [
+          { name: 'save', label: 'Save', type: 'script', component: 'action:button' },
+          { name: 'cancel', label: 'Cancel', type: 'script', component: 'action:button' },
+        ],
+      });
+      expect(container.textContent).toContain('Save');
+      expect(container.textContent).toContain('Cancel');
+    });
+
+    it('renders with role="toolbar" and aria-label', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        actions: [
+          { name: 'test', label: 'Test', type: 'script' },
+        ],
+      });
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar).toBeTruthy();
+      expect(toolbar?.getAttribute('aria-label')).toBe('Actions');
+    });
+
+    it('filters actions by location', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        location: 'list_toolbar',
+        actions: [
+          { name: 'toolbar_action', label: 'Toolbar Action', type: 'script', locations: ['list_toolbar'] },
+          { name: 'header_action', label: 'Header Action', type: 'script', locations: ['record_header'] },
+          { name: 'both_action', label: 'Both Action', type: 'script', locations: ['list_toolbar', 'record_header'] },
+        ],
+      });
+      expect(container.textContent).toContain('Toolbar Action');
+      expect(container.textContent).not.toContain('Header Action');
+      expect(container.textContent).toContain('Both Action');
+    });
+
+    it('shows actions without locations when filtering by location', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        location: 'record_header',
+        actions: [
+          { name: 'no_loc', label: 'No Location', type: 'script' },
+          { name: 'has_loc', label: 'Has Location', type: 'script', locations: ['list_toolbar'] },
+        ],
+      });
+      // Action without locations should show in any location
+      expect(container.textContent).toContain('No Location');
+      expect(container.textContent).not.toContain('Has Location');
+    });
+
+    it('renders all actions when no location filter is set', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        actions: [
+          { name: 'a1', label: 'Action 1', type: 'script', locations: ['list_toolbar'] },
+          { name: 'a2', label: 'Action 2', type: 'script', locations: ['record_header'] },
+        ],
+      });
+      expect(container.textContent).toContain('Action 1');
+      expect(container.textContent).toContain('Action 2');
+    });
+
+    it('deduplicates actions by name', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        actions: [
+          { name: 'change_status', label: 'Change Status', type: 'script', component: 'action:button' },
+          { name: 'assign_user', label: 'Assign User', type: 'script', component: 'action:button' },
+          { name: 'change_status', label: 'Change Status', type: 'script', component: 'action:button' },
+        ],
+      });
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar).toBeTruthy();
+      // Should only render 2 actions (duplicates removed)
+      expect(toolbar!.children.length).toBe(2);
+      expect(container.textContent).toContain('Change Status');
+      expect(container.textContent).toContain('Assign User');
+    });
+
+    it('deduplicates actions after location filtering', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        location: 'record_header',
+        actions: [
+          { name: 'change_status', label: 'Change Status', type: 'script', locations: ['record_header'] },
+          { name: 'assign_user', label: 'Assign User', type: 'script', locations: ['record_header'] },
+          { name: 'change_status', label: 'Change Status', type: 'script', locations: ['record_header', 'record_more'] },
+          { name: 'assign_user', label: 'Assign User', type: 'script', locations: ['record_header'] },
+        ],
+      });
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar).toBeTruthy();
+      // Should only render 2 unique actions
+      expect(toolbar!.children.length).toBe(2);
+    });
+  });
+
+  describe('overflow', () => {
+    it('groups excess actions into overflow menu when maxVisible is exceeded', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        maxVisible: 2,
+        actions: [
+          { name: 'a1', label: 'Action 1', type: 'script' },
+          { name: 'a2', label: 'Action 2', type: 'script' },
+          { name: 'a3', label: 'Action 3', type: 'script' },
+          { name: 'a4', label: 'Action 4', type: 'script' },
+        ],
+      });
+      // First 2 should be visible as buttons
+      expect(container.textContent).toContain('Action 1');
+      expect(container.textContent).toContain('Action 2');
+      // Remaining 2 should be in a dropdown (rendered as action:menu trigger)
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar).toBeTruthy();
+      // There should be 3 children: 2 inline buttons + 1 menu trigger
+      const children = toolbar!.children;
+      expect(children.length).toBe(3);
+    });
+
+    it('does not show overflow when actions fit within maxVisible', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        maxVisible: 5,
+        actions: [
+          { name: 'a1', label: 'Action 1', type: 'script' },
+          { name: 'a2', label: 'Action 2', type: 'script' },
+        ],
+      });
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar!.children.length).toBe(2);
+    });
+  });
+
+  describe('styling', () => {
+    it('applies custom className', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        className: 'my-custom-bar',
+        actions: [
+          { name: 'test', label: 'Test', type: 'script' },
+        ],
+      });
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar?.className).toContain('my-custom-bar');
+    });
+
+    it('supports vertical direction', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        direction: 'vertical',
+        actions: [
+          { name: 'test', label: 'Test', type: 'script' },
+        ],
+      });
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar?.className).toContain('flex-col');
+    });
+
+    it('defaults to horizontal direction', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        actions: [
+          { name: 'test', label: 'Test', type: 'script' },
+        ],
+      });
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar?.className).toContain('flex-row');
+    });
+  });
+});

package/src/__tests__/config-field-renderer.test.tsx

@@ -0,0 +1,307 @@
+/**
+ * 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, fireEvent } from '@testing-library/react';
+import { ConfigFieldRenderer } from '../custom/config-field-renderer';
+import type { ConfigField } from '../types/config-panel';
+
+const defaultDraft = { name: 'Test', enabled: true, theme: 'dark', count: 5 };
+
+describe('ConfigFieldRenderer', () => {
+  describe('input type', () => {
+    const field: ConfigField = { key: 'name', label: 'Name', type: 'input', placeholder: 'Enter name' };
+
+    it('should render input with label', () => {
+      render(<ConfigFieldRenderer field={field} value="Test" onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Name')).toBeDefined();
+      expect(screen.getByTestId('config-field-name')).toBeDefined();
+    });
+
+    it('should display current value', () => {
+      render(<ConfigFieldRenderer field={field} value="Hello" onChange={vi.fn()} draft={defaultDraft} />);
+      expect((screen.getByTestId('config-field-name') as HTMLInputElement).value).toBe('Hello');
+    });
+
+    it('should call onChange on input', () => {
+      const onChange = vi.fn();
+      render(<ConfigFieldRenderer field={field} value="" onChange={onChange} draft={defaultDraft} />);
+      fireEvent.change(screen.getByTestId('config-field-name'), { target: { value: 'New' } });
+      expect(onChange).toHaveBeenCalledWith('New');
+    });
+
+    it('should use defaultValue when value is undefined', () => {
+      const fieldWithDefault: ConfigField = { key: 'name', label: 'Name', type: 'input', defaultValue: 'Default' };
+      render(<ConfigFieldRenderer field={fieldWithDefault} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
+      expect((screen.getByTestId('config-field-name') as HTMLInputElement).value).toBe('Default');
+    });
+  });
+
+  describe('switch type', () => {
+    const field: ConfigField = { key: 'enabled', label: 'Enabled', type: 'switch' };
+
+    it('should render switch with label', () => {
+      render(<ConfigFieldRenderer field={field} value={true} onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Enabled')).toBeDefined();
+      expect(screen.getByTestId('config-field-enabled')).toBeDefined();
+    });
+
+    it('should toggle on click', () => {
+      const onChange = vi.fn();
+      render(<ConfigFieldRenderer field={field} value={false} onChange={onChange} draft={defaultDraft} />);
+      fireEvent.click(screen.getByTestId('config-field-enabled'));
+      expect(onChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('checkbox type', () => {
+    const field: ConfigField = { key: 'checked', label: 'Active', type: 'checkbox' };
+
+    it('should render checkbox with label', () => {
+      render(<ConfigFieldRenderer field={field} value={false} onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Active')).toBeDefined();
+      expect(screen.getByTestId('config-field-checked')).toBeDefined();
+    });
+
+    it('should toggle on click', () => {
+      const onChange = vi.fn();
+      render(<ConfigFieldRenderer field={field} value={false} onChange={onChange} draft={defaultDraft} />);
+      fireEvent.click(screen.getByTestId('config-field-checked'));
+      expect(onChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('select type', () => {
+    const field: ConfigField = {
+      key: 'theme',
+      label: 'Theme',
+      type: 'select',
+      options: [
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' },
+        { value: 'auto', label: 'Auto' },
+      ],
+    };
+
+    it('should render select trigger with label', () => {
+      render(<ConfigFieldRenderer field={field} value="dark" onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Theme')).toBeDefined();
+      expect(screen.getByTestId('config-field-theme')).toBeDefined();
+    });
+  });
+
+  describe('slider type', () => {
+    const field: ConfigField = {
+      key: 'count',
+      label: 'Count',
+      type: 'slider',
+      min: 1,
+      max: 10,
+      step: 1,
+    };
+
+    it('should render slider with label and value display', () => {
+      render(<ConfigFieldRenderer field={field} value={5} onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Count')).toBeDefined();
+      expect(screen.getByText('5')).toBeDefined();
+    });
+  });
+
+  describe('color type', () => {
+    const field: ConfigField = { key: 'bgColor', label: 'Background', type: 'color' };
+
+    it('should render color picker', () => {
+      render(<ConfigFieldRenderer field={field} value="#ff0000" onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Background')).toBeDefined();
+      const input = screen.getByTestId('config-field-bgColor') as HTMLInputElement;
+      expect(input.type).toBe('color');
+      expect(input.value).toBe('#ff0000');
+    });
+
+    it('should call onChange on color change', () => {
+      const onChange = vi.fn();
+      render(<ConfigFieldRenderer field={field} value="#ff0000" onChange={onChange} draft={defaultDraft} />);
+      fireEvent.change(screen.getByTestId('config-field-bgColor'), { target: { value: '#00ff00' } });
+      expect(onChange).toHaveBeenCalledWith('#00ff00');
+    });
+  });
+
+  describe('icon-group type', () => {
+    const field: ConfigField = {
+      key: 'size',
+      label: 'Size',
+      type: 'icon-group',
+      options: [
+        { value: 'sm', label: 'Small' },
+        { value: 'md', label: 'Medium' },
+        { value: 'lg', label: 'Large' },
+      ],
+    };
+
+    it('should render icon group buttons', () => {
+      render(<ConfigFieldRenderer field={field} value="md" onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Size')).toBeDefined();
+      expect(screen.getByTitle('Small')).toBeDefined();
+      expect(screen.getByTitle('Medium')).toBeDefined();
+      expect(screen.getByTitle('Large')).toBeDefined();
+    });
+
+    it('should call onChange when button clicked', () => {
+      const onChange = vi.fn();
+      render(<ConfigFieldRenderer field={field} value="sm" onChange={onChange} draft={defaultDraft} />);
+      fireEvent.click(screen.getByTitle('Large'));
+      expect(onChange).toHaveBeenCalledWith('lg');
+    });
+  });
+
+  describe('custom type', () => {
+    it('should render custom content via render prop', () => {
+      const field: ConfigField = {
+        key: 'custom',
+        label: 'Custom',
+        type: 'custom',
+        render: (value, onChange) => (
+          <div data-testid="custom-render">
+            <span>Custom: {value}</span>
+            <button onClick={() => onChange('updated')}>Update</button>
+          </div>
+        ),
+      };
+      const onChange = vi.fn();
+      render(<ConfigFieldRenderer field={field} value="initial" onChange={onChange} draft={defaultDraft} />);
+      expect(screen.getByTestId('custom-render')).toBeDefined();
+      expect(screen.getByText('Custom: initial')).toBeDefined();
+      fireEvent.click(screen.getByText('Update'));
+      expect(onChange).toHaveBeenCalledWith('updated');
+    });
+
+    it('should return null for custom type without render', () => {
+      const field: ConfigField = { key: 'empty', label: 'Empty', type: 'custom' };
+      const { container } = render(<ConfigFieldRenderer field={field} value={null} onChange={vi.fn()} draft={defaultDraft} />);
+      expect(container.innerHTML).toBe('');
+    });
+  });
+
+  describe('visibility', () => {
+    it('should hide field when visibleWhen returns false', () => {
+      const field: ConfigField = {
+        key: 'hidden',
+        label: 'Hidden',
+        type: 'input',
+        visibleWhen: () => false,
+      };
+      const { container } = render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('should show field when visibleWhen returns true', () => {
+      const field: ConfigField = {
+        key: 'visible',
+        label: 'Visible',
+        type: 'input',
+        visibleWhen: (draft) => draft.enabled === true,
+      };
+      render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Visible')).toBeDefined();
+    });
+
+    it('should evaluate visibleWhen against draft', () => {
+      const field: ConfigField = {
+        key: 'conditional',
+        label: 'Conditional',
+        type: 'input',
+        visibleWhen: (draft) => draft.theme === 'dark',
+      };
+      const { container: hidden } = render(
+        <ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={{ ...defaultDraft, theme: 'light' }} />,
+      );
+      expect(hidden.innerHTML).toBe('');
+
+      render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={{ ...defaultDraft, theme: 'dark' }} />);
+      expect(screen.getByText('Conditional')).toBeDefined();
+    });
+  });
+
+  describe('field-picker type', () => {
+    it('should render as clickable config row', () => {
+      const field: ConfigField = { key: 'field', label: 'Select Field', type: 'field-picker', placeholder: 'Choose...' };
+      render(<ConfigFieldRenderer field={field} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Select Field')).toBeDefined();
+      expect(screen.getByText('Choose...')).toBeDefined();
+    });
+  });
+
+  describe('filter/sort types', () => {
+    it('should render filter with FilterBuilder', () => {
+      const field: ConfigField = {
+        key: 'filter',
+        label: 'Filters',
+        type: 'filter',
+        fields: [
+          { value: 'name', label: 'Name' },
+          { value: 'status', label: 'Status' },
+        ],
+      };
+      render(<ConfigFieldRenderer field={field} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Filters')).toBeDefined();
+      expect(screen.getByTestId('config-field-filter')).toBeDefined();
+      // FilterBuilder renders 'Where' label and 'Add filter' button
+      expect(screen.getByText('Add filter')).toBeDefined();
+    });
+
+    it('should render sort with SortBuilder', () => {
+      const field: ConfigField = {
+        key: 'sort',
+        label: 'Sorting',
+        type: 'sort',
+        fields: [
+          { value: 'name', label: 'Name' },
+          { value: 'date', label: 'Date' },
+        ],
+      };
+      render(<ConfigFieldRenderer field={field} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Sorting')).toBeDefined();
+      expect(screen.getByTestId('config-field-sort')).toBeDefined();
+      // SortBuilder renders 'Add sort' button
+      expect(screen.getByText('Add sort')).toBeDefined();
+    });
+  });
+
+  describe('helpText rendering', () => {
+    it('should render helpText below field when provided', () => {
+      const field: ConfigField = {
+        key: 'width',
+        label: 'Width',
+        type: 'input',
+        helpText: 'Available for drawer, modal, and split modes',
+      };
+      render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Available for drawer, modal, and split modes')).toBeDefined();
+    });
+
+    it('should not render helpText paragraph when not provided', () => {
+      const field: ConfigField = { key: 'name', label: 'Name', type: 'input' };
+      const { container } = render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
+      expect(container.querySelectorAll('p').length).toBe(0);
+    });
+
+    it('should render helpText for custom field type', () => {
+      const React = require('react');
+      const field: ConfigField = {
+        key: 'custom',
+        label: 'Custom',
+        type: 'custom',
+        helpText: 'Custom help text',
+        render: (value, onChange) => React.createElement('div', { 'data-testid': 'custom-content' }, 'Custom'),
+      };
+      render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
+      expect(screen.getByText('Custom help text')).toBeDefined();
+      expect(screen.getByTestId('custom-content')).toBeDefined();
+    });
+  });
+});