@object-ui/fields 0.3.0 → 0.5.0

package/src/new-widgets.test.tsx

@@ -0,0 +1,302 @@
+/**
+ * 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 } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ColorField } from './widgets/ColorField';
+import { SliderField } from './widgets/SliderField';
+import { RatingField } from './widgets/RatingField';
+import { CodeField } from './widgets/CodeField';
+import { AvatarField } from './widgets/AvatarField';
+import { AddressField } from './widgets/AddressField';
+import { GeolocationField } from './widgets/GeolocationField';
+import { SignatureField } from './widgets/SignatureField';
+import { QRCodeField } from './widgets/QRCodeField';
+import { MasterDetailField } from './widgets/MasterDetailField';
+
+const mockField: any = {
+  name: 'test_field',
+  label: 'Test Field',
+  type: 'text',
+};
+
+describe('New Field Widgets', () => {
+  describe('ColorField', () => {
+    it('should render in readonly mode', () => {
+      const { container } = render(
+        <ColorField
+          value="#ff0000"
+          onChange={() => {}}
+          field={mockField}
+          readonly={true}
+        />
+      );
+      expect(container).toBeDefined();
+      expect(container.textContent).toContain('#ff0000');
+    });
+
+    it('should render in edit mode', () => {
+      const { container } = render(
+        <ColorField
+          value="#00ff00"
+          onChange={() => {}}
+          field={mockField}
+        />
+      );
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('SliderField', () => {
+    it('should render with value', () => {
+      const { container } = render(
+        <SliderField
+          value={50}
+          onChange={() => {}}
+          field={mockField}
+        />
+      );
+      expect(container).toBeDefined();
+      expect(container.textContent).toContain('50');
+    });
+
+    it('should render in readonly mode', () => {
+      const { container } = render(
+        <SliderField
+          value={75}
+          onChange={() => {}}
+          field={mockField}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toContain('75');
+    });
+  });
+
+  describe('RatingField', () => {
+    it('should render stars', () => {
+      const { container } = render(
+        <RatingField
+          value={3}
+          onChange={() => {}}
+          field={mockField}
+        />
+      );
+      expect(container).toBeDefined();
+      expect(container.textContent).toContain('3 / 5');
+    });
+
+    it('should render in readonly mode', () => {
+      const { container } = render(
+        <RatingField
+          value={4}
+          onChange={() => {}}
+          field={mockField}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toContain('4 / 5');
+    });
+  });
+
+  describe('CodeField', () => {
+    it('should render textarea', () => {
+      const { container } = render(
+        <CodeField
+          value="console.log('hello');"
+          onChange={() => {}}
+          field={mockField}
+        />
+      );
+      expect(container).toBeDefined();
+    });
+
+    it('should render readonly code', () => {
+      const { container } = render(
+        <CodeField
+          value="const x = 42;"
+          onChange={() => {}}
+          field={mockField}
+          readonly={true}
+        />
+      );
+      expect(container).toBeDefined();
+      expect(container.textContent).toContain('const x = 42;');
+    });
+  });
+
+  describe('AvatarField', () => {
+    it('should render avatar', () => {
+      const { container } = render(
+        <AvatarField
+          value=""
+          onChange={() => {}}
+          field={mockField}
+        />
+      );
+      expect(container).toBeDefined();
+    });
+
+    it('should render readonly avatar', () => {
+      const { container } = render(
+        <AvatarField
+          value="https://example.com/avatar.jpg"
+          onChange={() => {}}
+          field={mockField}
+          readonly={true}
+        />
+      );
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('AddressField', () => {
+    it('should render address fields', () => {
+      const { container } = render(
+        <AddressField
+          value={{ street: '123 Main St', city: 'San Francisco' }}
+          onChange={() => {}}
+          field={mockField}
+        />
+      );
+      expect(container).toBeDefined();
+    });
+
+    it('should render readonly address', () => {
+      const { container } = render(
+        <AddressField
+          value={{ street: '456 Oak Ave', city: 'New York', state: 'NY' }}
+          onChange={() => {}}
+          field={mockField}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toContain('456 Oak Ave');
+    });
+  });
+
+  describe('GeolocationField', () => {
+    it('should render geolocation inputs', () => {
+      const { container } = render(
+        <GeolocationField
+          value={{ latitude: 37.7749, longitude: -122.4194 }}
+          onChange={() => {}}
+          field={mockField}
+        />
+      );
+      expect(container).toBeDefined();
+    });
+
+    it('should render readonly geolocation', () => {
+      const { container } = render(
+        <GeolocationField
+          value={{ latitude: 40.7128, longitude: -74.0060 }}
+          onChange={() => {}}
+          field={mockField}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toContain('40.712800');
+    });
+  });
+
+  describe('SignatureField', () => {
+    it('should render signature canvas', () => {
+      const { container } = render(
+        <SignatureField
+          value=""
+          field={mockField}
+          onChange={() => {}}
+        />
+      );
+      expect(container).toBeDefined();
+      expect(container.querySelector('canvas')).toBeDefined();
+    });
+
+    it('should render readonly signature', () => {
+      const { container } = render(
+        <SignatureField
+          value="data:image/png;base64,..."
+          field={mockField}
+          onChange={() => {}}
+          readonly={true}
+        />
+      );
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('QRCodeField', () => {
+    it('should render QR code input', () => {
+      const { container } = render(
+        <QRCodeField
+          value="https://example.com"
+          onChange={() => {}}
+          field={mockField}
+        />
+      );
+      expect(container).toBeDefined();
+    });
+
+    it('should render readonly QR code', () => {
+      const { container } = render(
+        <QRCodeField
+          value="Test Data"
+          onChange={() => {}}
+          field={mockField}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toContain('Test Data');
+    });
+  });
+
+  describe('MasterDetailField', () => {
+    it('should render empty state', () => {
+      const { container } = render(
+        <MasterDetailField
+          value={[]}
+          field={mockField}
+          onChange={() => {}}
+        />
+      );
+      expect(container).toBeDefined();
+    });
+
+    it('should render with items', () => {
+      const items = [
+        { id: '1', label: 'Item 1' },
+        { id: '2', label: 'Item 2' },
+      ];
+      const { container } = render(
+        <MasterDetailField
+          value={items}
+          field={mockField}
+          onChange={() => {}}
+        />
+      );
+      expect(container.textContent).toContain('Item 1');
+      expect(container.textContent).toContain('Item 2');
+    });
+
+    it('should render readonly items', () => {
+      const items = [
+        { id: '1', label: 'Item A' },
+      ];
+      const { container } = render(
+        <MasterDetailField
+          value={items}
+          field={mockField}
+          onChange={() => {}}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toContain('Item A');
+    });
+  });
+});

package/src/remaining-widgets.test.tsx

@@ -0,0 +1,172 @@
+
+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);
+    });
+  });
+
+  // 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');
+    });
+    
+    // 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();
+    });
+  });
+});