@htlkg/components 0.0.1

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

@@ -0,0 +1,817 @@
+import { describe, it, expect } from 'vitest';
+import * as fc from 'fast-check';
+import { mount } from '@vue/test-utils';
+import JsonSchemaForm from './JsonSchemaForm.vue';
+
+/**
+ * Feature: htlkg-modular-architecture, Property 10: JsonSchemaForm validates input
+ * Validates: Requirements 12.5
+ */
+describe('JsonSchemaForm property tests', () => {
+  it('should validate required fields for any schema', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            name: fc.string({ minLength: 1, maxLength: 20 }),
+            type: fc.constantFrom('string', 'number', 'boolean')
+          }),
+          { minLength: 1, maxLength: 5 }
+        ),
+        (fields) => {
+          // Ensure unique field names
+          const uniqueFields = fields.map((field, index) => ({
+            ...field,
+            name: `field_${index}`
+          }));
+
+          // Create schema with all fields required
+          const schema = {
+            type: 'object',
+            properties: uniqueFields.reduce((acc, field) => {
+              acc[field.name] = { type: field.type };
+              return acc;
+            }, {} as Record<string, any>),
+            required: uniqueFields.map(f => f.name)
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: {}
+            }
+          });
+
+          // Property: validate() should return errors for all required fields when empty
+          const validationErrors = (wrapper.vm as any).validate();
+          expect(validationErrors.length).toBe(uniqueFields.length);
+          
+          // Property: Each required field should have an error
+          uniqueFields.forEach(field => {
+            const fieldError = validationErrors.find((e: any) => e.field === field.name);
+            expect(fieldError).toBeDefined();
+            expect(fieldError.message).toContain('required');
+          });
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should validate type constraints for any schema', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          stringField: fc.string(),
+          numberField: fc.integer(),
+          booleanField: fc.boolean()
+        }),
+        (validData) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              stringField: { type: 'string' },
+              numberField: { type: 'number' },
+              booleanField: { type: 'boolean' }
+            }
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: validData
+            }
+          });
+
+          // Property: Valid data should pass validation
+          const validationErrors = (wrapper.vm as any).validate();
+          expect(validationErrors.length).toBe(0);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should detect type mismatches for any invalid data', () => {
+    fc.assert(
+      fc.property(
+        fc.string({ minLength: 1 }),
+        (stringValue) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              numberField: { type: 'number', title: 'Number Field' }
+            }
+          };
+
+          // Provide string value for number field (type mismatch)
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { numberField: stringValue }
+            }
+          });
+
+          // Property: Type mismatch should be detected
+          const validationErrors = (wrapper.vm as any).validate();
+          const numberFieldError = validationErrors.find((e: any) => e.field === 'numberField');
+          
+          // Only expect error if the string is not a valid number
+          if (isNaN(Number(stringValue))) {
+            expect(numberFieldError).toBeDefined();
+            expect(numberFieldError.message).toContain('number');
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should render fields according to schema properties', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            name: fc.string({ minLength: 1, maxLength: 20 }),
+            type: fc.constantFrom('string', 'number', 'boolean'),
+            title: fc.string({ minLength: 1, maxLength: 30 })
+          }),
+          { minLength: 1, maxLength: 5 }
+        ),
+        (fields) => {
+          // Ensure unique field names
+          const uniqueFields = fields.map((field, index) => ({
+            ...field,
+            name: `field_${index}`
+          }));
+
+          const schema = {
+            type: 'object',
+            properties: uniqueFields.reduce((acc, field) => {
+              acc[field.name] = { 
+                type: field.type,
+                title: field.title
+              };
+              return acc;
+            }, {} as Record<string, any>)
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: {}
+            }
+          });
+
+          // Property: Each field in schema should have a widget type
+          const vm = wrapper.vm as any;
+          uniqueFields.forEach(field => {
+            const widget = vm.getWidget(field.name);
+            expect(widget).toBeDefined();
+            
+            // Property: Widget type should match schema type
+            if (field.type === 'boolean') {
+              expect(widget).toBe('toggle');
+            } else if (field.type === 'number') {
+              expect(widget).toBe('number');
+            } else {
+              expect(widget).toBe('text');
+            }
+          });
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle partial data validation correctly', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          requiredFields: fc.array(fc.string({ minLength: 1, maxLength: 20 }), { minLength: 1, maxLength: 3 }),
+          optionalFields: fc.array(fc.string({ minLength: 1, maxLength: 20 }), { minLength: 1, maxLength: 3 }),
+          providedFieldIndex: fc.integer({ min: 0, max: 2 })
+        }),
+        ({ requiredFields, optionalFields, providedFieldIndex }) => {
+          // Ensure unique field names
+          const uniqueRequired = requiredFields.map((_, i) => `req_${i}`);
+          const uniqueOptional = optionalFields.map((_, i) => `opt_${i}`);
+
+          const schema = {
+            type: 'object',
+            properties: {
+              ...uniqueRequired.reduce((acc, name) => {
+                acc[name] = { type: 'string' };
+                return acc;
+              }, {} as Record<string, any>),
+              ...uniqueOptional.reduce((acc, name) => {
+                acc[name] = { type: 'string' };
+                return acc;
+              }, {} as Record<string, any>)
+            },
+            required: uniqueRequired
+          };
+
+          // Provide data for only one required field
+          const validIndex = Math.min(providedFieldIndex, uniqueRequired.length - 1);
+          const partialData = {
+            [uniqueRequired[validIndex]]: 'some value'
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: partialData
+            }
+          });
+
+          // Property: Should have errors for missing required fields only
+          const validationErrors = (wrapper.vm as any).validate();
+          expect(validationErrors.length).toBe(uniqueRequired.length - 1);
+          
+          // Property: Provided field should not have error
+          const providedFieldError = validationErrors.find((e: any) => e.field === uniqueRequired[validIndex]);
+          expect(providedFieldError).toBeUndefined();
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should emit validation-error event with correct error structure', () => {
+    fc.assert(
+      fc.property(
+        fc.array(fc.string({ minLength: 1, maxLength: 20 }), { minLength: 1, maxLength: 4 }),
+        (fieldNames) => {
+          // Ensure unique field names
+          const uniqueFields = fieldNames.map((_, i) => `field_${i}`);
+
+          const schema = {
+            type: 'object',
+            properties: uniqueFields.reduce((acc, name) => {
+              acc[name] = { type: 'string', title: name };
+              return acc;
+            }, {} as Record<string, any>),
+            required: uniqueFields
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: {}
+            }
+          });
+
+          // Trigger form submission to emit validation-error
+          wrapper.find('form').trigger('submit');
+
+          // Property: validation-error event should be emitted
+          expect(wrapper.emitted('validation-error')).toBeDefined();
+          
+          // Property: Error structure should have field and message
+          const emittedErrors = wrapper.emitted('validation-error')?.[0]?.[0] as any[];
+          expect(emittedErrors).toBeDefined();
+          expect(emittedErrors.length).toBe(uniqueFields.length);
+          
+          emittedErrors.forEach((error: any) => {
+            expect(error).toHaveProperty('field');
+            expect(error).toHaveProperty('message');
+            expect(typeof error.field).toBe('string');
+            expect(typeof error.message).toBe('string');
+          });
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle empty schema gracefully', () => {
+    fc.assert(
+      fc.property(
+        fc.constant({}),
+        (emptyData) => {
+          const schema = {
+            type: 'object',
+            properties: {}
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: emptyData
+            }
+          });
+
+          // Property: Empty schema should validate successfully
+          const validationErrors = (wrapper.vm as any).validate();
+          expect(validationErrors.length).toBe(0);
+          
+          // Property: Form should still render
+          expect(wrapper.find('form').exists()).toBe(true);
+        }
+      ),
+      { numRuns: 50 }
+    );
+  });
+
+  it('should update modelValue when fields change', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          fieldName: fc.string({ minLength: 1, maxLength: 20 }).filter(s => s.trim().length > 0),
+          fieldValue: fc.string({ minLength: 1, maxLength: 50 })
+        }),
+        ({ fieldName, fieldValue }) => {
+          // Create a valid CSS ID by removing spaces and special characters
+          const uniqueFieldName = `field_${fieldName.replace(/[^a-zA-Z0-9]/g, '_')}`;
+          
+          const schema = {
+            type: 'object',
+            properties: {
+              [uniqueFieldName]: { type: 'string' }
+            }
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: {}
+            }
+          });
+
+          // Property: Updating field should emit update:modelValue
+          const vm = wrapper.vm as any;
+          vm.updateField(uniqueFieldName, fieldValue);
+
+          // Property: modelValue should be updated with new value
+          const updateEvents = wrapper.emitted('update:modelValue');
+          expect(updateEvents).toBeDefined();
+          
+          if (updateEvents && updateEvents.length > 0) {
+            const lastUpdate = updateEvents[updateEvents.length - 1][0] as Record<string, any>;
+            expect(lastUpdate[uniqueFieldName]).toBe(fieldValue);
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should validate minLength constraint for strings', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          minLength: fc.integer({ min: 1, max: 10 }),
+          value: fc.string({ maxLength: 20 })
+        }),
+        ({ minLength, value }) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              testField: { 
+                type: 'string', 
+                minLength,
+                title: 'Test Field'
+              }
+            },
+            required: ['testField']
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { testField: value }
+            }
+          });
+
+          const validationErrors = (wrapper.vm as any).validate();
+          
+          // Property: Should have error if value length < minLength
+          if (value.length < minLength) {
+            expect(validationErrors.length).toBeGreaterThan(0);
+            const error = validationErrors.find((e: any) => e.field === 'testField');
+            expect(error).toBeDefined();
+            expect(error.message).toContain('at least');
+          } else {
+            // Should not have minLength error
+            const minLengthError = validationErrors.find(
+              (e: any) => e.field === 'testField' && e.message.includes('at least')
+            );
+            expect(minLengthError).toBeUndefined();
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should validate maxLength constraint for strings', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          maxLength: fc.integer({ min: 5, max: 20 }),
+          value: fc.string({ minLength: 1, maxLength: 30 })
+        }),
+        ({ maxLength, value }) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              testField: { 
+                type: 'string', 
+                maxLength,
+                title: 'Test Field'
+              }
+            }
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { testField: value }
+            }
+          });
+
+          const validationErrors = (wrapper.vm as any).validate();
+          
+          // Property: Should have error if value length > maxLength
+          if (value.length > maxLength) {
+            expect(validationErrors.length).toBeGreaterThan(0);
+            const error = validationErrors.find((e: any) => e.field === 'testField');
+            expect(error).toBeDefined();
+            expect(error.message).toContain('at most');
+          } else {
+            const maxLengthError = validationErrors.find(
+              (e: any) => e.field === 'testField' && e.message.includes('at most')
+            );
+            expect(maxLengthError).toBeUndefined();
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should validate minimum constraint for numbers', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          minimum: fc.integer({ min: 0, max: 100 }),
+          value: fc.integer({ min: -50, max: 150 })
+        }),
+        ({ minimum, value }) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              numberField: { 
+                type: 'number', 
+                minimum,
+                title: 'Number Field'
+              }
+            }
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { numberField: value }
+            }
+          });
+
+          const validationErrors = (wrapper.vm as any).validate();
+          
+          // Property: Should have error if value < minimum
+          if (value < minimum) {
+            expect(validationErrors.length).toBeGreaterThan(0);
+            const error = validationErrors.find((e: any) => e.field === 'numberField');
+            expect(error).toBeDefined();
+            expect(error.message).toContain('at least');
+          } else {
+            const minError = validationErrors.find(
+              (e: any) => e.field === 'numberField' && e.message.includes('at least')
+            );
+            expect(minError).toBeUndefined();
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should validate maximum constraint for numbers', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          maximum: fc.integer({ min: 50, max: 200 }),
+          value: fc.integer({ min: 0, max: 250 })
+        }),
+        ({ maximum, value }) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              numberField: { 
+                type: 'number', 
+                maximum,
+                title: 'Number Field'
+              }
+            }
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { numberField: value }
+            }
+          });
+
+          const validationErrors = (wrapper.vm as any).validate();
+          
+          // Property: Should have error if value > maximum
+          if (value > maximum) {
+            expect(validationErrors.length).toBeGreaterThan(0);
+            const error = validationErrors.find((e: any) => e.field === 'numberField');
+            expect(error).toBeDefined();
+            expect(error.message).toContain('at most');
+          } else {
+            const maxError = validationErrors.find(
+              (e: any) => e.field === 'numberField' && e.message.includes('at most')
+            );
+            expect(maxError).toBeUndefined();
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should validate enum constraints', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          allowedValues: fc.array(fc.string({ minLength: 1, maxLength: 10 }), { minLength: 2, maxLength: 5 }),
+          testValue: fc.string({ minLength: 1, maxLength: 10 })
+        }),
+        ({ allowedValues, testValue }) => {
+          // Ensure unique values
+          const uniqueValues = [...new Set(allowedValues)];
+          if (uniqueValues.length < 2) return; // Skip if not enough unique values
+
+          const schema = {
+            type: 'object',
+            properties: {
+              enumField: { 
+                type: 'string', 
+                enum: uniqueValues,
+                title: 'Enum Field'
+              }
+            }
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { enumField: testValue }
+            }
+          });
+
+          const validationErrors = (wrapper.vm as any).validate();
+          
+          // Property: Should have error if value not in enum
+          if (!uniqueValues.includes(testValue)) {
+            expect(validationErrors.length).toBeGreaterThan(0);
+            const error = validationErrors.find((e: any) => e.field === 'enumField');
+            expect(error).toBeDefined();
+            expect(error.message).toContain('one of');
+          } else {
+            const enumError = validationErrors.find(
+              (e: any) => e.field === 'enumField' && e.message.includes('one of')
+            );
+            expect(enumError).toBeUndefined();
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should treat empty strings as invalid for required fields with minLength: 1', () => {
+    fc.assert(
+      fc.property(
+        fc.constantFrom(''),
+        (emptyValue) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              requiredField: { 
+                type: 'string', 
+                minLength: 1,
+                title: 'Required Field'
+              }
+            },
+            required: ['requiredField']
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { requiredField: emptyValue }
+            }
+          });
+
+          const validationErrors = (wrapper.vm as any).validate();
+          
+          // Property: Empty strings should fail validation (either required or minLength)
+          expect(validationErrors.length).toBeGreaterThan(0);
+          const error = validationErrors.find((e: any) => e.field === 'requiredField');
+          expect(error).toBeDefined();
+        }
+      ),
+      { numRuns: 50 }
+    );
+  });
+
+  it('should validate email format', () => {
+    fc.assert(
+      fc.property(
+        fc.oneof(
+          fc.emailAddress(),
+          fc.string({ minLength: 1, maxLength: 20 }).filter(s => !s.includes('@'))
+        ),
+        (value) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              emailField: { 
+                type: 'string', 
+                format: 'email',
+                title: 'Email Field'
+              }
+            }
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { emailField: value }
+            }
+          });
+
+          const validationErrors = (wrapper.vm as any).validate();
+          
+          // Property: Invalid emails should fail format validation
+          const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+          if (!isValidEmail && value !== '') {
+            const error = validationErrors.find((e: any) => e.field === 'emailField');
+            expect(error).toBeDefined();
+            expect(error.message).toContain('email');
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle multiple validation errors on same field', () => {
+    fc.assert(
+      fc.property(
+        fc.string({ maxLength: 2 }),
+        (shortValue) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              complexField: { 
+                type: 'string', 
+                minLength: 5,
+                maxLength: 10,
+                title: 'Complex Field'
+              }
+            },
+            required: ['complexField']
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { complexField: shortValue }
+            }
+          });
+
+          const validationErrors = (wrapper.vm as any).validate();
+          
+          // Property: Should report at least one error for constraint violation
+          if (shortValue.length < 5) {
+            expect(validationErrors.length).toBeGreaterThan(0);
+            const error = validationErrors.find((e: any) => e.field === 'complexField');
+            expect(error).toBeDefined();
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should validate successfully with all valid data', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          name: fc.string({ minLength: 1, maxLength: 50 }),
+          age: fc.integer({ min: 18, max: 120 }),
+          email: fc.emailAddress(),
+          active: fc.boolean()
+        }),
+        (validData) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              name: { type: 'string', minLength: 1, maxLength: 50 },
+              age: { type: 'number', minimum: 18, maximum: 120 },
+              email: { type: 'string', format: 'email' },
+              active: { type: 'boolean' }
+            },
+            required: ['name', 'email']
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: validData
+            }
+          });
+
+          const validationErrors = (wrapper.vm as any).validate();
+          
+          // Property: All valid data should pass validation
+          expect(validationErrors.length).toBe(0);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should emit submit event only when validation passes', () => {
+    fc.assert(
+      fc.property(
+        fc.record({
+          validName: fc.string({ minLength: 1, maxLength: 20 }),
+          validEmail: fc.emailAddress()
+        }),
+        ({ validName, validEmail }) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              name: { type: 'string', minLength: 1 },
+              email: { type: 'string', format: 'email' }
+            },
+            required: ['name', 'email']
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: { name: validName, email: validEmail }
+            }
+          });
+
+          // Trigger form submission
+          wrapper.find('form').trigger('submit');
+
+          // Property: Submit event should be emitted for valid data
+          expect(wrapper.emitted('submit')).toBeDefined();
+          expect(wrapper.emitted('validation-error')).toBeUndefined();
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should not emit submit event when validation fails', () => {
+    fc.assert(
+      fc.property(
+        fc.constant({}),
+        (emptyData) => {
+          const schema = {
+            type: 'object',
+            properties: {
+              requiredField: { type: 'string', minLength: 1 }
+            },
+            required: ['requiredField']
+          };
+
+          const wrapper = mount(JsonSchemaForm, {
+            props: {
+              schema,
+              modelValue: emptyData
+            }
+          });
+
+          // Trigger form submission
+          wrapper.find('form').trigger('submit');
+
+          // Property: Submit event should NOT be emitted for invalid data
+          expect(wrapper.emitted('submit')).toBeUndefined();
+          expect(wrapper.emitted('validation-error')).toBeDefined();
+        }
+      ),
+      { numRuns: 50 }
+    );
+  });
+});