@object-ui/fields 3.4.0 → 4.0.3

package/src/remaining-widgets.test.tsx

@@ -1,211 +0,0 @@
-
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { AutoNumberField } from './widgets/AutoNumberField';
-import { FormulaField } from './widgets/FormulaField';
-import { SummaryField } from './widgets/SummaryField';
-import { PercentField } from './widgets/PercentField';
-import { ImageField } from './widgets/ImageField';
-import { LocationField } from './widgets/LocationField';
-import { ObjectField } from './widgets/ObjectField';
-import { UserField } from './widgets/UserField';
-import { VectorField } from './widgets/VectorField';
-import type { FieldWidgetProps } from './widgets/types';
-
-// ------------- Mocks & Setup -------------
-
-const mockField = {
-  name: 'test_field',
-  label: 'Test Field',
-} as any;
-
-const baseProps: FieldWidgetProps<any> = {
-  field: mockField,
-  value: undefined,
-  onChange: vi.fn(),
-  readonly: false,
-};
-
-describe('Remaining Field Widgets', () => {
-  
-  // 1. AutoNumberField
-  describe('AutoNumberField', () => {
-    it('should render value as string', () => {
-      render(<AutoNumberField {...baseProps} value={1001} />);
-      expect(screen.getByText('1001')).toBeInTheDocument();
-    });
-
-    it('should render dash for null value', () => {
-      render(<AutoNumberField {...baseProps} value={null as any} />);
-      expect(screen.getByText('—')).toBeInTheDocument();
-    });
-  });
-
-  // 2. FormulaField
-  describe('FormulaField', () => {
-    it('should format return_type=currency', () => {
-      const field = { ...mockField, return_type: 'currency' };
-      render(<FormulaField {...baseProps} field={field} value={123.456} />);
-      // Checks for 2 decimal places
-      expect(screen.getByText('123.46')).toBeInTheDocument();
-    });
-
-    it('should format return_type=boolean', () => {
-      const field = { ...mockField, return_type: 'boolean' };
-      render(<FormulaField {...baseProps} field={field} value={true} />);
-      expect(screen.getByText('Yes')).toBeInTheDocument();
-    });
-  });
-
-  // 3. SummaryField
-  describe('SummaryField', () => {
-    it('should render count as integer', () => {
-      const field = { ...mockField, summary_type: 'count' };
-      render(<SummaryField {...baseProps} field={field} value={42} />);
-      expect(screen.getByText('42')).toBeInTheDocument();
-    });
-
-    it('should render sum with decimals', () => {
-      const field = { ...mockField, summary_type: 'sum' };
-      render(<SummaryField {...baseProps} field={field} value={10.566} />);
-      expect(screen.getByText('10.57')).toBeInTheDocument();
-    });
-  });
-
-  // 4. PercentField
-  describe('PercentField', () => {
-    it('should display value * 100 in input', () => {
-      render(<PercentField {...baseProps} value={0.5} />);
-      const input = screen.getByRole('spinbutton') as HTMLInputElement;
-      expect(input.value).toBe('50');
-    });
-
-    it('should display formatted value in readonly', () => {
-      render(<PercentField {...baseProps} value={0.125} readonly={true} />);
-      expect(screen.getByText('12.50%')).toBeInTheDocument();
-    });
-
-    it('should call onChange with value / 100', () => {
-        const handleChange = vi.fn();
-        render(<PercentField {...baseProps} onChange={handleChange} value={0} />);
-        const input = screen.getByRole('spinbutton');
-        fireEvent.change(input, { target: { value: '75' } });
-        expect(handleChange).toHaveBeenCalledWith(0.75);
-    });
-
-    it('slider renders and syncs with input value', () => {
-      render(<PercentField {...baseProps} value={0.5} />);
-      const slider = screen.getByTestId('percent-slider');
-      expect(slider).toBeInTheDocument();
-    });
-
-    it('slider does not fire onChange when disabled', () => {
-      const handleChange = vi.fn();
-      render(<PercentField {...baseProps} onChange={handleChange} value={0.5} disabled={true} />);
-      const slider = screen.getByTestId('percent-slider');
-      expect(slider).toBeInTheDocument();
-      // The slider should be disabled, so no changes should fire
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-
-    it('slider is not rendered in readonly mode', () => {
-      render(<PercentField {...baseProps} value={0.5} readonly={true} />);
-      expect(screen.queryByTestId('percent-slider')).not.toBeInTheDocument();
-    });
-
-    it('handles null value gracefully for slider', () => {
-      render(<PercentField {...baseProps} value={null as any} />);
-      const slider = screen.getByTestId('percent-slider');
-      expect(slider).toBeInTheDocument();
-    });
-  });
-
-  // 5. ImageField
-  describe('ImageField', () => {
-    const images = [
-      { url: 'http://example.com/1.jpg', name: 'Img 1' },
-      { url: 'http://example.com/2.jpg', name: 'Img 2' }
-    ];
-
-    it('should render images in readonly mode', () => {
-      render(<ImageField {...baseProps} value={images} readonly={true} />);
-      const imgs = screen.getAllByRole('img');
-      expect(imgs).toHaveLength(2);
-      expect(imgs[0]).toHaveAttribute('src', 'http://example.com/1.jpg');
-    });
-
-    it('renders a Crop button per image when crop is enabled (default)', () => {
-      render(<ImageField {...baseProps} value={images} field={{ ...baseProps.field, multiple: true } as any} />);
-      // Two crop buttons (one per image) with stable test ids — opacity is hover-controlled
-      // but the buttons are still present in the DOM for a11y/keyboard users.
-      expect(screen.getByTestId('image-field-crop-0')).toBeInTheDocument();
-      expect(screen.getByTestId('image-field-crop-1')).toBeInTheDocument();
-    });
-
-    it('hides the Crop button when field.crop = false', () => {
-      render(<ImageField {...baseProps} value={images} field={{ ...baseProps.field, multiple: true, crop: false } as any} />);
-      expect(screen.queryByTestId('image-field-crop-0')).not.toBeInTheDocument();
-    });
-
-    // Complex interaction omitted for brevity, focusing on render contracts
-  });
-
-  // 6. LocationField
-  describe('LocationField', () => {
-    it('should render lat,long string', () => {
-       const loc = { latitude: 34.05, longitude: -118.25 };
-       render(<LocationField {...baseProps} value={loc} />);
-       const input = screen.getByRole('textbox') as HTMLInputElement;
-       expect(input.value).toContain('34.05, -118.25');
-    });
-
-    it('should parse string input to object', () => {
-        const handleChange = vi.fn();
-        render(<LocationField {...baseProps} onChange={handleChange} />);
-        const input = screen.getByRole('textbox');
-        fireEvent.change(input, { target: { value: '10.5, 20.5' } });
-        expect(handleChange).toHaveBeenCalledWith({ latitude: 10.5, longitude: 20.5 });
-    });
-  });
-
-  // 7. ObjectField
-  describe('ObjectField', () => {
-    const obj = { foo: 'bar', num: 1 };
-    
-    it('should render JSON string in readonly', () => {
-      render(<ObjectField {...baseProps} value={obj} readonly={true} />);
-      // pre tag usually contains formatted JSON
-      expect(screen.getByText(/"foo": "bar"/)).toBeInTheDocument();
-    });
-
-    it('should parse valid JSON input', () => {
-        const handleChange = vi.fn();
-        render(<ObjectField {...baseProps} onChange={handleChange} value={obj} />);
-        const textarea = screen.getByRole('textbox');
-        const newJson = '{"test": true}';
-        fireEvent.change(textarea, { target: { value: newJson } });
-        expect(handleChange).toHaveBeenCalledWith({ test: true });
-    });
-  });
-
-  // 8. UserField
-  describe('UserField', () => {
-    const user = { name: 'Alice Smith', id: 'u1' };
-    
-    it('should render user avatar in readonly', () => {
-       render(<UserField {...baseProps} value={user} readonly={true} />);
-       // Avatar fallback logic splits name
-       expect(screen.getByText('AS')).toBeInTheDocument();
-    });
-  });
-
-  // 9. VectorField
-  describe('VectorField', () => {
-    it('should render vector values', () => {
-       const vec = [0.12345, 0.67891, 0.00001];
-       render(<VectorField {...baseProps} value={vec} />);
-       expect(screen.getByText(/0.1235/)).toBeInTheDocument(); // toFixed(4)
-       expect(screen.getByText('(3D)')).toBeInTheDocument();
-    });
-  });
-});

package/src/text-rich-widgets.test.tsx

@@ -1,104 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { TextAreaField } from './widgets/TextAreaField';
-import { RichTextField } from './widgets/RichTextField';
-import { CodeField } from './widgets/CodeField';
-import { PasswordField } from './widgets/PasswordField';
-import type { FieldWidgetProps } from './widgets/types';
-
-const mockField = {
-  name: 'test_field',
-  label: 'Test Field',
-} as any;
-
-const baseProps: FieldWidgetProps<string> = {
-  field: mockField,
-  value: '',
-  onChange: vi.fn(),
-  readonly: false,
-};
-
-describe('Text & Rich Content Widgets', () => {
-    describe('TextAreaField', () => {
-        it('renders textarea in edit mode', () => {
-            render(<TextAreaField {...baseProps} />);
-            expect(screen.getByRole('textbox')).toBeInTheDocument();
-        });
-
-        it('handles max length indicator', () => {
-            const propsWithMax = {
-                ...baseProps,
-                field: { ...mockField, max_length: 100 }
-            };
-            render(<TextAreaField {...propsWithMax} value="testing" />);
-            expect(screen.getByLabelText('Character count: 7 of 100')).toBeInTheDocument();
-        });
-
-        it('renders whitespace-pre-wrap in readonly mode', () => {
-            const text = 'Line 1\nLine 2';
-            render(<TextAreaField {...baseProps} readonly value={text} />);
-            // Check existence logic
-            const display = screen.getByText((content) => 
-                content.includes('Line 1') && content.includes('Line 2')
-            );
-            expect(display).toHaveClass('whitespace-pre-wrap');
-        });
-    });
-
-    describe('RichTextField', () => {
-        // Current implementation is a simpler textarea wrapper
-        it('renders textarea with format indicator', () => {
-            render(<RichTextField {...baseProps} />);
-            expect(screen.getByRole('textbox')).toBeInTheDocument();
-            expect(screen.getByText((content) => content.includes('Format: markdown'))).toBeInTheDocument();
-        });
-
-        it('renders prose in readonly mode', () => {
-            render(<RichTextField {...baseProps} readonly value="# Heading" />);
-            const display = screen.getByText('# Heading');
-            expect(display).toHaveClass('prose');
-        });
-    });
-
-    describe('CodeField', () => {
-        it('renders textarea with monospace font', () => {
-            render(<CodeField {...baseProps} />);
-            const input = screen.getByRole('textbox');
-            expect(input).toHaveClass('font-mono');
-        });
-
-        it('renders code block in readonly mode', () => {
-            render(<CodeField {...baseProps} readonly value="const x = 1;" />);
-            // Check for pre > code structure
-            const pre = document.querySelector('pre');
-            expect(pre).toBeInTheDocument();
-            expect(pre).toHaveTextContent('const x = 1;');
-        });
-    });
-
-    describe('PasswordField', () => {
-        it('renders password input by default', () => {
-            const { container } = render(<PasswordField {...baseProps} />);
-            const input = container.querySelector('input[type="password"]');
-            expect(input).toBeInTheDocument();
-        });
-
-        it('toggles visibility', () => {
-            const { container } = render(<PasswordField {...baseProps} />);
-            const button = screen.getByRole('button'); // The eye icon button
-            const input = container.querySelector('input') as HTMLInputElement;
-            
-            expect(input.type).toBe('password');
-            fireEvent.click(button);
-            expect(input.type).toBe('text');
-            fireEvent.click(button);
-            expect(input.type).toBe('password');
-        });
-
-        it('renders masked bullets in readonly mode', () => {
-            render(<PasswordField {...baseProps} readonly value="secret" />);
-            expect(screen.getByText('••••••••')).toBeInTheDocument();
-            expect(screen.queryByText('secret')).not.toBeInTheDocument();
-        });
-    });
-});

package/src/visual-widgets.test.tsx

@@ -1,97 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { ColorField } from './widgets/ColorField';
-import { RatingField } from './widgets/RatingField';
-import { SliderField } from './widgets/SliderField';
-import { QRCodeField } from './widgets/QRCodeField'; // Intentionally simpler than Image/Avatar
-import type { FieldWidgetProps } from './widgets/types';
-
-const mockField = {
-  name: 'test_field',
-  label: 'Test Field',
-} as any;
-
-const baseProps: FieldWidgetProps<any> = {
-  field: mockField,
-  value: undefined,
-  onChange: vi.fn(),
-  readonly: false,
-};
-
-describe('Visual & Display Widgets', () => {
-    describe('ColorField', () => {
-        it('renders color picker + text input in edit mode', () => {
-             const { container } = render(<ColorField {...baseProps} value="#00ff00" />);
-             const colorInput = container.querySelector('input[type="color"]');
-             const textInput = screen.getByRole('textbox');
-             
-             expect(colorInput).toBeInTheDocument();
-             expect(textInput).toBeInTheDocument();
-             expect(textInput).toHaveValue('#00ff00');
-        });
-
-        it('syncs change from color picker', () => {
-            const { container } = render(<ColorField {...baseProps} />);
-            const colorInput = container.querySelector('input[type="color"]') as HTMLInputElement;
-            fireEvent.change(colorInput, { target: { value: '#ff0000' } });
-            expect(baseProps.onChange).toHaveBeenCalledWith('#ff0000');
-        });
-
-        it('shows preview box in readonly mode', () => {
-            const { container } = render(<ColorField {...baseProps} readonly value="#0000ff" />);
-            // Check for the style attribute on the div
-            // We search for a div that has the style background-color
-            // This is a bit fragile but standard for inline styles
-            const preview = container.querySelector('div[style="background-color: #0000ff;"]');
-            // Or looser check:
-            const divs = container.querySelectorAll('div');
-            const found = Array.from(divs).some(d => d.style.backgroundColor === 'rgb(0, 0, 255)' || d.style.backgroundColor === '#0000ff');
-            expect(found).toBe(true);
-            expect(screen.getByText('#0000ff')).toBeInTheDocument();
-        });
-    });
-
-    describe('RatingField', () => {
-        it('renders stars', () => {
-            render(<RatingField {...baseProps} value={3} />);
-            // Should see 5 buttons (default max)
-            const buttons = screen.getAllByRole('button');
-            expect(buttons).toHaveLength(5);
-        });
-
-        it('highlights correct number of stars in readonly', () => {
-             const { container } = render(<RatingField {...baseProps} readonly value={3} />);
-             // Should have 3 filled stars, 2 empty. 
-             // Logic: fill-yellow-400
-             const filled = container.querySelectorAll('.fill-yellow-400');
-             expect(filled).toHaveLength(3);
-             expect(screen.getByText('3 / 5')).toBeInTheDocument();
-        });
-
-        it('calls onChange when clicking star', () => {
-             render(<RatingField {...baseProps} />);
-             const buttons = screen.getAllByRole('button');
-             fireEvent.click(buttons[3]); // 4th star (index 3) -> value 4
-             expect(baseProps.onChange).toHaveBeenCalledWith(4);
-        });
-    });
-
-    describe('SliderField', () => {
-        it('renders slider', () => {
-            const { container } = render(<SliderField {...baseProps} value={50} />);
-            // Radix slider usually has role="slider"
-            const slider = screen.getByRole('slider');
-            expect(slider).toBeInTheDocument();
-            // Check text display
-            expect(screen.getByText('50')).toBeInTheDocument();
-        });
-
-        it('renders readonly view', () => {
-            render(<SliderField {...baseProps} readonly value={75} />);
-            expect(screen.getByText('75')).toBeInTheDocument();
-            expect(screen.getByText('/ 100')).toBeInTheDocument();
-            expect(screen.queryByRole('slider')).not.toBeInTheDocument();
-        });
-    });
-    
-});