@htlkg/components 0.0.1

package/src/forms/JsonSchemaForm.unit.test.ts

@@ -0,0 +1,801 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import JsonSchemaForm from './JsonSchemaForm.vue';
+
+/**
+ * Unit tests for JsonSchemaForm
+ * Tests individual functions and methods in isolation
+ */
+describe('JsonSchemaForm unit tests', () => {
+  describe('getFieldLabel()', () => {
+    it('should return field title from schema', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          username: { type: 'string', title: 'User Name' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getFieldLabel('username')).toBe('User Name');
+    });
+
+    it('should return field name when title is not provided', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getFieldLabel('email')).toBe('email');
+    });
+
+    it('should handle missing field gracefully', () => {
+      const schema = {
+        type: 'object',
+        properties: {}
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getFieldLabel('nonexistent')).toBe('nonexistent');
+    });
+  });
+
+  describe('getFieldDescription()', () => {
+    it('should return field description from schema', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          password: { 
+            type: 'string', 
+            description: 'Must be at least 8 characters' 
+          }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getFieldDescription('password')).toBe('Must be at least 8 characters');
+    });
+
+    it('should return empty string when description is not provided', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          field: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getFieldDescription('field')).toBe('');
+    });
+  });
+
+  describe('isRequired()', () => {
+    it('should return true for required fields', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: { type: 'string' }
+        },
+        required: ['email']
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.isRequired('email')).toBe(true);
+    });
+
+    it('should return false for optional fields', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          nickname: { type: 'string' }
+        },
+        required: []
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.isRequired('nickname')).toBe(false);
+    });
+
+    it('should return false when required array is not defined', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          field: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.isRequired('field')).toBe(false);
+    });
+  });
+
+  describe('getWidget()', () => {
+    it('should return widget from uiSchema when specified', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          password: { type: 'string' }
+        }
+      };
+
+      const uiSchema = {
+        password: { 'ui:widget': 'password' }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, uiSchema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getWidget('password')).toBe('password');
+    });
+
+    it('should infer toggle widget for boolean type', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          active: { type: 'boolean' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getWidget('active')).toBe('toggle');
+    });
+
+    it('should infer number widget for number type', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          age: { type: 'number' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getWidget('age')).toBe('number');
+    });
+
+    it('should NOT auto-infer slider for numbers with min/max', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          volume: { type: 'number', minimum: 0, maximum: 100 }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      // Should be 'number', not 'slider' (slider must be explicit in uiSchema)
+      expect(vm.getWidget('volume')).toBe('number');
+    });
+
+    it('should infer select widget for enum', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          status: { type: 'string', enum: ['active', 'inactive'] }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getWidget('status')).toBe('select');
+    });
+
+    it('should infer email widget for email format', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: { type: 'string', format: 'email' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getWidget('email')).toBe('email');
+    });
+
+    it('should infer url widget for uri format', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          website: { type: 'string', format: 'uri' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getWidget('website')).toBe('url');
+    });
+
+    it('should infer textarea for long strings', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          description: { type: 'string', minLength: 150 }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getWidget('description')).toBe('textarea');
+    });
+
+    it('should return text as default widget', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          field: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getWidget('field')).toBe('text');
+    });
+  });
+
+  describe('getInputType()', () => {
+    it('should return password for password widget', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          pwd: { type: 'string' }
+        }
+      };
+
+      const uiSchema = {
+        pwd: { 'ui:widget': 'password' }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, uiSchema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getInputType('pwd')).toBe('password');
+    });
+
+    it('should return email for email widget', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: { type: 'string', format: 'email' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getInputType('email')).toBe('email');
+    });
+
+    it('should return number for number widget', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          age: { type: 'number' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getInputType('age')).toBe('number');
+    });
+
+    it('should return text as default', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          name: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getInputType('name')).toBe('text');
+    });
+  });
+
+  describe('getFieldColor()', () => {
+    it('should return gray for untouched fields', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          field: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getFieldColor('field')).toBe('gray');
+    });
+
+    it('should return red for fields with errors', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: { type: 'string', format: 'email', minLength: 1 }
+        },
+        required: ['email']
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: { email: 'invalid' } }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Trigger validation
+      vm.validateField('email');
+      
+      expect(vm.errors.email).toBeDefined();
+      expect(vm.getFieldColor('email')).toBe('red');
+    });
+
+    it('should return green for valid touched required fields', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          name: { type: 'string', minLength: 1 }
+        },
+        required: ['name']
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: { name: 'John' } }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Mark as touched
+      vm.touched.name = true;
+      
+      expect(vm.getFieldColor('name')).toBe('green');
+    });
+
+    it('should return gray for empty optional fields', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          nickname: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.touched.nickname = true;
+      
+      expect(vm.getFieldColor('nickname')).toBe('gray');
+    });
+  });
+
+  describe('getPlaceholder()', () => {
+    it('should return placeholder from uiSchema', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: { type: 'string' }
+        }
+      };
+
+      const uiSchema = {
+        email: { 'ui:placeholder': 'Enter your email' }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, uiSchema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getPlaceholder('email')).toBe('Enter your email');
+    });
+
+    it('should return empty string when placeholder is not defined', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          field: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getPlaceholder('field')).toBe('');
+    });
+  });
+
+  describe('getSelectOptions()', () => {
+    it('should return options from enum', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          status: { 
+            type: 'string', 
+            enum: ['active', 'inactive', 'pending'] 
+          }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      const options = vm.getSelectOptions('status');
+      
+      expect(options).toHaveLength(3);
+      expect(options[0]).toEqual({ id: 'active', name: 'active', label: 'active' });
+      expect(options[1]).toEqual({ id: 'inactive', name: 'inactive', label: 'inactive' });
+      expect(options[2]).toEqual({ id: 'pending', name: 'pending', label: 'pending' });
+    });
+
+    it('should return empty array when enum is not defined', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          field: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getSelectOptions('field')).toEqual([]);
+    });
+
+    it('should handle numeric enum values', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          priority: { type: 'number', enum: [1, 2, 3] }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      const options = vm.getSelectOptions('priority');
+      
+      expect(options).toHaveLength(3);
+      expect(options[0]).toEqual({ id: '1', name: '1', label: '1' });
+    });
+  });
+
+  describe('getSelectedOption()', () => {
+    it('should return selected option from current value', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          status: { type: 'string', enum: ['active', 'inactive'] }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { 
+          schema, 
+          modelValue: { status: 'active' } 
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      const selected = vm.getSelectedOption('status');
+      
+      expect(selected).toEqual({ id: 'active', name: 'active', label: 'active' });
+    });
+
+    it('should return first option when value is not set', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          status: { type: 'string', enum: ['active', 'inactive'] }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      const selected = vm.getSelectedOption('status');
+      
+      expect(selected).toEqual({ id: 'active', name: 'active', label: 'active' });
+    });
+  });
+
+  describe('updateField()', () => {
+    it('should mark field as touched', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          name: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      expect(vm.touched.name).toBeUndefined();
+      
+      vm.updateField('name', 'John');
+      
+      expect(vm.touched.name).toBe(true);
+    });
+
+    it('should emit update:modelValue', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          age: { type: 'number' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      vm.updateField('age', 25);
+      
+      // Should emit update:modelValue
+      const updateEvents = wrapper.emitted('update:modelValue');
+      expect(updateEvents).toBeDefined();
+      const lastUpdate = updateEvents?.[updateEvents.length - 1]?.[0] as any;
+      expect(lastUpdate.age).toBe(25);
+    });
+
+    it('should trigger field validation', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: { type: 'string', format: 'email', minLength: 1 }
+        },
+        required: ['email']
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Update with invalid email
+      vm.updateField('email', 'invalid');
+      
+      // Should have validation error
+      expect(vm.errors.email).toBeDefined();
+    });
+  });
+
+  describe('validate()', () => {
+    it('should return empty array for valid data', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          name: { type: 'string', minLength: 1 }
+        },
+        required: ['name']
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { 
+          schema, 
+          modelValue: { name: 'John' } 
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      const errors = vm.validate();
+      
+      expect(errors).toEqual([]);
+    });
+
+    it('should return errors for invalid data', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: { type: 'string', format: 'email', minLength: 1 }
+        },
+        required: ['email']
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { 
+          schema, 
+          modelValue: { email: 'invalid' } 
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      const errors = vm.validate();
+      
+      expect(errors.length).toBeGreaterThan(0);
+      expect(errors[0].field).toBe('email');
+      expect(errors[0].message).toContain('email');
+    });
+
+    it('should populate errors object', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          name: { type: 'string', minLength: 1 }
+        },
+        required: ['name']
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.validate();
+      
+      expect(vm.errors.name).toBeDefined();
+      expect(vm.errors.name).toContain('required');
+    });
+  });
+
+  describe('reset()', () => {
+    it('should emit empty modelValue', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          name: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { 
+          schema, 
+          modelValue: { name: 'John' } 
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      expect(vm.formData.name).toBe('John');
+      
+      vm.reset();
+      
+      // Should emit empty object
+      const updateEvents = wrapper.emitted('update:modelValue');
+      expect(updateEvents).toBeDefined();
+      const lastUpdate = updateEvents?.[updateEvents.length - 1]?.[0] as any;
+      expect(Object.keys(lastUpdate).length).toBe(0);
+    });
+
+    it('should clear errors', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: { type: 'string', format: 'email', minLength: 1 }
+        },
+        required: ['email']
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Create error
+      vm.validate();
+      expect(Object.keys(vm.errors).length).toBeGreaterThan(0);
+      
+      // Reset
+      vm.reset();
+      
+      expect(Object.keys(vm.errors).length).toBe(0);
+    });
+
+    it('should clear touched state', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          field: { type: 'string' }
+        }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: { schema, modelValue: {} }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Mark as touched
+      vm.updateField('field', 'value');
+      expect(vm.touched.field).toBe(true);
+      
+      // Reset
+      vm.reset();
+      
+      expect(Object.keys(vm.touched).length).toBe(0);
+    });
+  });
+});