@htlkg/components 0.0.1

package/src/forms/JsonSchemaForm.test.ts

@@ -0,0 +1,601 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import JsonSchemaForm from './JsonSchemaForm.vue';
+
+/**
+ * Integration tests for JsonSchemaForm
+ * Tests user interactions, real-world scenarios, and component integration
+ */
+describe('JsonSchemaForm integration tests', () => {
+  describe('User Registration Form', () => {
+    const registrationSchema = {
+      type: 'object',
+      title: 'User Registration',
+      properties: {
+        username: { type: 'string', title: 'Username', minLength: 3, maxLength: 20 },
+        email: { type: 'string', title: 'Email', format: 'email', minLength: 1 },
+        password: { type: 'string', title: 'Password', minLength: 8 },
+        age: { type: 'number', title: 'Age', minimum: 18, maximum: 120 },
+        terms: { type: 'boolean', title: 'Accept Terms' }
+      },
+      required: ['username', 'email', 'password', 'terms']
+    };
+
+    it('should allow user to fill out and submit valid registration form', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: registrationSchema,
+          modelValue: {}
+        }
+      });
+
+      // User fills out form by updating modelValue
+      const vm = wrapper.vm as any;
+      vm.updateField('username', 'johndoe');
+      vm.updateField('email', 'john@example.com');
+      vm.updateField('password', 'SecurePass123');
+      vm.updateField('age', 25);
+      vm.updateField('terms', true);
+      
+      await nextTick();
+
+      // Update props to reflect the changes
+      await wrapper.setProps({
+        modelValue: {
+          username: 'johndoe',
+          email: 'john@example.com',
+          password: 'SecurePass123',
+          age: 25,
+          terms: true
+        }
+      });
+
+      // Submit form
+      await wrapper.find('form').trigger('submit');
+      await nextTick();
+
+      // Should emit submit event with form data
+      expect(wrapper.emitted('submit')).toBeDefined();
+      const submitData = wrapper.emitted('submit')?.[0]?.[0] as any;
+      expect(submitData.username).toBe('johndoe');
+      expect(submitData.email).toBe('john@example.com');
+      expect(submitData.password).toBe('SecurePass123');
+      expect(submitData.age).toBe(25);
+      expect(submitData.terms).toBe(true);
+    });
+
+    it('should show validation errors when submitting incomplete form', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: registrationSchema,
+          modelValue: {}
+        }
+      });
+
+      // Try to submit empty form
+      await wrapper.find('form').trigger('submit');
+      await nextTick();
+
+      // Should emit validation-error event
+      expect(wrapper.emitted('validation-error')).toBeDefined();
+      const errors = wrapper.emitted('validation-error')?.[0]?.[0] as any[];
+      
+      // Should have errors for all required fields
+      expect(errors.length).toBeGreaterThan(0);
+      expect(errors.some(e => e.field === 'username')).toBe(true);
+      expect(errors.some(e => e.field === 'email')).toBe(true);
+      expect(errors.some(e => e.field === 'password')).toBe(true);
+      expect(errors.some(e => e.field === 'terms')).toBe(true);
+
+      // Should NOT emit submit event
+      expect(wrapper.emitted('submit')).toBeUndefined();
+    });
+
+    it('should validate fields as user types', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: registrationSchema,
+          modelValue: {}
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // User types short username (less than minLength of 3)
+      vm.updateField('username', 'ab');
+      await wrapper.setProps({ modelValue: { username: 'ab' } });
+      await nextTick();
+
+      // Should show validation error for minLength
+      expect(vm.errors.username).toBeDefined();
+      expect(vm.errors.username).toContain('at least 3');
+
+      // User corrects username
+      vm.updateField('username', 'validuser');
+      await wrapper.setProps({ modelValue: { username: 'validuser' } });
+      await nextTick();
+
+      // Error should be cleared
+      expect(vm.errors.username).toBeUndefined();
+    });
+
+    it('should validate email format in real-time', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: registrationSchema,
+          modelValue: {}
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Invalid email (not matching email format)
+      vm.updateField('email', 'notanemail');
+      await wrapper.setProps({ modelValue: { email: 'notanemail' } });
+      await nextTick();
+
+      expect(vm.errors.email).toBeDefined();
+      expect(vm.errors.email).toContain('valid email');
+
+      // Valid email
+      vm.updateField('email', 'valid@email.com');
+      await wrapper.setProps({ modelValue: { email: 'valid@email.com' } });
+      await nextTick();
+
+      expect(vm.errors.email).toBeUndefined();
+    });
+  });
+
+  describe('API Configuration Form', () => {
+    const apiSchema = {
+      type: 'object',
+      title: 'API Configuration',
+      properties: {
+        apiUrl: { type: 'string', title: 'API URL', format: 'uri', minLength: 1 },
+        apiKey: { type: 'string', title: 'API Key', minLength: 1 },
+        timeout: { type: 'integer', title: 'Timeout', minimum: 5, maximum: 300 },
+        retries: { type: 'integer', title: 'Retries', minimum: 0, maximum: 10 },
+        logLevel: { 
+          type: 'string', 
+          title: 'Log Level',
+          enum: ['debug', 'info', 'warn', 'error']
+        }
+      },
+      required: ['apiUrl', 'apiKey']
+    };
+
+    const apiUiSchema = {
+      timeout: { 'ui:widget': 'slider' },
+      retries: { 'ui:widget': 'slider' }
+    };
+
+    it('should validate URL format', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: apiSchema,
+          uiSchema: apiUiSchema,
+          modelValue: {}
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Invalid URL (not matching uri format)
+      vm.updateField('apiUrl', 'not-a-url');
+      await wrapper.setProps({ modelValue: { apiUrl: 'not-a-url' } });
+      await nextTick();
+
+      expect(vm.errors.apiUrl).toBeDefined();
+      expect(vm.errors.apiUrl).toContain('valid uri');
+
+      // Valid URL
+      vm.updateField('apiUrl', 'https://api.example.com');
+      await wrapper.setProps({ modelValue: { apiUrl: 'https://api.example.com' } });
+      await nextTick();
+
+      expect(vm.errors.apiUrl).toBeUndefined();
+    });
+
+    it('should enforce number ranges', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: apiSchema,
+          uiSchema: apiUiSchema,
+          modelValue: {
+            apiUrl: 'https://api.example.com',
+            apiKey: 'test-key'
+          }
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Timeout too low (minimum is 5)
+      vm.updateField('timeout', 2);
+      await wrapper.setProps({ 
+        modelValue: { 
+          apiUrl: 'https://api.example.com',
+          apiKey: 'test-key',
+          timeout: 2 
+        } 
+      });
+      await nextTick();
+
+      expect(vm.errors.timeout).toBeDefined();
+      expect(vm.errors.timeout).toContain('at least 5');
+
+      // Timeout too high (maximum is 300)
+      vm.updateField('timeout', 500);
+      await wrapper.setProps({ 
+        modelValue: { 
+          apiUrl: 'https://api.example.com',
+          apiKey: 'test-key',
+          timeout: 500 
+        } 
+      });
+      await nextTick();
+
+      expect(vm.errors.timeout).toBeDefined();
+      expect(vm.errors.timeout).toContain('at most 300');
+
+      // Valid timeout
+      vm.updateField('timeout', 30);
+      await wrapper.setProps({ 
+        modelValue: { 
+          apiUrl: 'https://api.example.com',
+          apiKey: 'test-key',
+          timeout: 30 
+        } 
+      });
+      await nextTick();
+
+      expect(vm.errors.timeout).toBeUndefined();
+    });
+
+    it('should validate enum values', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: apiSchema,
+          uiSchema: apiUiSchema,
+          modelValue: {
+            apiUrl: 'https://api.example.com',
+            apiKey: 'test-key',
+            logLevel: 'invalid-level'
+          }
+        }
+      });
+
+      // Submit to trigger validation
+      await wrapper.find('form').trigger('submit');
+      await nextTick();
+
+      const errors = wrapper.emitted('validation-error')?.[0]?.[0] as any[];
+      const logLevelError = errors.find(e => e.field === 'logLevel');
+      
+      expect(logLevelError).toBeDefined();
+      expect(logLevelError.message).toContain('one of');
+    });
+
+    it('should not submit with empty required fields', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: apiSchema,
+          uiSchema: apiUiSchema,
+          modelValue: {
+            apiUrl: '',
+            apiKey: ''
+          }
+        }
+      });
+
+      await wrapper.find('form').trigger('submit');
+      await nextTick();
+
+      // Should have validation errors
+      expect(wrapper.emitted('validation-error')).toBeDefined();
+      const errors = wrapper.emitted('validation-error')?.[0]?.[0] as any[];
+      
+      expect(errors.some(e => e.field === 'apiUrl')).toBe(true);
+      expect(errors.some(e => e.field === 'apiKey')).toBe(true);
+
+      // Should not submit
+      expect(wrapper.emitted('submit')).toBeUndefined();
+    });
+  });
+
+  describe('Product Form with Complex Validation', () => {
+    const productSchema = {
+      type: 'object',
+      properties: {
+        name: { type: 'string', title: 'Product Name', minLength: 3, maxLength: 100 },
+        sku: { type: 'string', title: 'SKU', minLength: 1 },
+        price: { type: 'number', title: 'Price', minimum: 0, maximum: 999999 },
+        quantity: { type: 'integer', title: 'Quantity', minimum: 0, maximum: 10000 },
+        category: { 
+          type: 'string', 
+          title: 'Category',
+          enum: ['Electronics', 'Clothing', 'Food', 'Books']
+        },
+        description: { type: 'string', title: 'Description', minLength: 10, maxLength: 500 },
+        active: { type: 'boolean', title: 'Active' }
+      },
+      required: ['name', 'sku', 'price', 'category']
+    };
+
+    it('should handle complete product creation workflow', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: productSchema,
+          modelValue: {}
+        }
+      });
+
+      const vm = wrapper.vm as any;
+
+      // Fill required fields
+      vm.updateField('name', 'Wireless Headphones');
+      vm.updateField('sku', 'WH-001');
+      vm.updateField('price', 299.99);
+      vm.updateField('category', 'Electronics');
+
+      // Fill optional fields
+      vm.updateField('quantity', 50);
+      vm.updateField('description', 'High-quality wireless headphones with noise cancellation');
+      vm.updateField('active', true);
+      
+      await nextTick();
+
+      // Update props to reflect the changes
+      await wrapper.setProps({
+        modelValue: {
+          name: 'Wireless Headphones',
+          sku: 'WH-001',
+          price: 299.99,
+          category: 'Electronics',
+          quantity: 50,
+          description: 'High-quality wireless headphones with noise cancellation',
+          active: true
+        }
+      });
+
+      // Submit
+      await wrapper.find('form').trigger('submit');
+      await nextTick();
+
+      // Should submit successfully
+      expect(wrapper.emitted('submit')).toBeDefined();
+      const submitData = wrapper.emitted('submit')?.[0]?.[0] as any;
+      
+      expect(submitData.name).toBe('Wireless Headphones');
+      expect(submitData.sku).toBe('WH-001');
+      expect(submitData.price).toBe(299.99);
+      expect(submitData.category).toBe('Electronics');
+      expect(submitData.quantity).toBe(50);
+      expect(submitData.active).toBe(true);
+    });
+
+    it('should validate multiple fields simultaneously', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: productSchema,
+          modelValue: {
+            name: 'AB', // Too short
+            sku: '', // Empty
+            price: -10, // Negative
+            category: 'InvalidCategory', // Not in enum
+            description: 'Short' // Too short
+          }
+        }
+      });
+
+      await wrapper.find('form').trigger('submit');
+      await nextTick();
+
+      const errors = wrapper.emitted('validation-error')?.[0]?.[0] as any[];
+      
+      // Should have multiple errors
+      expect(errors.length).toBeGreaterThan(3);
+      expect(errors.some(e => e.field === 'name')).toBe(true);
+      expect(errors.some(e => e.field === 'sku')).toBe(true);
+      expect(errors.some(e => e.field === 'price')).toBe(true);
+      expect(errors.some(e => e.field === 'category')).toBe(true);
+      expect(errors.some(e => e.field === 'description')).toBe(true);
+    });
+  });
+
+  describe('Form Reset and State Management', () => {
+    const simpleSchema = {
+      type: 'object',
+      properties: {
+        field1: { type: 'string', title: 'Field 1', minLength: 1 },
+        field2: { type: 'number', title: 'Field 2' }
+      },
+      required: ['field1']
+    };
+
+    it('should reset form data and errors', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: simpleSchema,
+          modelValue: { field1: 'test', field2: 42 }
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Trigger validation error by submitting with invalid data
+      await wrapper.setProps({ modelValue: { field1: '', field2: 42 } });
+      await wrapper.find('form').trigger('submit');
+      await nextTick();
+
+      expect(vm.errors.field1).toBeDefined();
+
+      // Reset form
+      vm.reset();
+      await nextTick();
+
+      // Should emit empty modelValue
+      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);
+      
+      // Errors should be cleared
+      expect(Object.keys(vm.errors).length).toBe(0);
+      expect(Object.keys(vm.touched).length).toBe(0);
+    });
+
+    it('should track touched fields', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema: simpleSchema,
+          modelValue: {}
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Initially no fields touched
+      expect(vm.touched.field1).toBeUndefined();
+
+      // User interacts with field
+      vm.updateField('field1', 'test');
+      await nextTick();
+
+      // Field should be marked as touched
+      expect(vm.touched.field1).toBe(true);
+    });
+  });
+
+  describe('v-model Integration', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        name: { type: 'string', title: 'Name' },
+        age: { type: 'number', title: 'Age' }
+      }
+    };
+
+    it('should sync with v-model', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema,
+          modelValue: { name: 'John', age: 30 }
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Change field value
+      vm.updateField('name', 'Jane');
+      await nextTick();
+
+      // Should emit update:modelValue
+      const updateEvents = wrapper.emitted('update:modelValue');
+      expect(updateEvents).toBeDefined();
+      
+      const lastUpdate = updateEvents?.[updateEvents.length - 1]?.[0] as any;
+      expect(lastUpdate.name).toBe('Jane');
+      expect(lastUpdate.age).toBe(30);
+    });
+
+    it('should react to external modelValue changes', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema,
+          modelValue: { name: 'John', age: 30 }
+        }
+      });
+
+      // Update modelValue externally
+      await wrapper.setProps({
+        modelValue: { name: 'Jane', age: 25 }
+      });
+      await nextTick();
+
+      // Form should reflect new values in computed property
+      const vm = wrapper.vm as any;
+      expect(vm.formData.name).toBe('Jane');
+      expect(vm.formData.age).toBe(25);
+    });
+  });
+
+  describe('Loading State', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        field: { type: 'string', title: 'Field' }
+      }
+    };
+
+    it('should pass loading prop to components', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema,
+          modelValue: {},
+          loading: true
+        }
+      });
+
+      // Loading prop should be passed to form
+      expect(wrapper.props('loading')).toBe(true);
+    });
+
+    it('should not be loading by default', async () => {
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema,
+          modelValue: {}
+        }
+      });
+
+      expect(wrapper.props('loading')).toBe(false);
+    });
+  });
+
+  describe('Custom UI Schema', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        password: { type: 'string', title: 'Password' },
+        volume: { type: 'integer', title: 'Volume', minimum: 0, maximum: 100 }
+      }
+    };
+
+    it('should render password field when specified in uiSchema', async () => {
+      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');
+      expect(vm.getInputType('password')).toBe('password');
+    });
+
+    it('should render slider when specified in uiSchema', async () => {
+      const uiSchema = {
+        volume: { 'ui:widget': 'slider' }
+      };
+
+      const wrapper = mount(JsonSchemaForm, {
+        props: {
+          schema,
+          uiSchema,
+          modelValue: {}
+        }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getWidget('volume')).toBe('slider');
+    });
+  });
+});