@qwickapps/react-framework 1.4.1 → 1.4.2

package/src/__tests__/schemas/transformers/SerializationPerformance.test.ts

@@ -114,7 +114,7 @@ describe('Component Serialization Performance Tests', () => {
   describe('Serialization Speed Benchmarks', () => {
     it('should serialize 1000 simple components within performance budget', () => {
       const components = Array.from({ length: 1000 }, (_, i) => ({
-        tag: 'Button',
+        tagName: 'Button',
         version: '1.0.0',
         data: {
           id: `btn-${i}`,
@@ -137,12 +137,12 @@ describe('Component Serialization Performance Tests', () => {
     it('should deserialize complex nested structures efficiently', () => {
       // Create nested structure with 10 sections, each containing 50 buttons
       const nestedStructure = Array.from({ length: 10 }, (_, sectionIndex) => ({
-        tag: 'Section',
+        tagName: 'Section',
         version: '1.0.0',
         data: {
           id: `section-${sectionIndex}`,
           children: Array.from({ length: 50 }, (_, buttonIndex) => ({
-            tag: 'Button',
+            tagName: 'Button',
             version: '1.0.0',
             data: {
               id: `btn-${sectionIndex}-${buttonIndex}`,
@@ -167,12 +167,12 @@ describe('Component Serialization Performance Tests', () => {
 
     it('should handle roundtrip serialization efficiently', () => {
       const testData = Array.from({ length: 100 }, (_, i) => ({
-        tag: 'Section',
+        tagName: 'Section',
         version: '1.0.0',
         data: {
           id: `section-${i}`,
           children: [{
-            tag: 'Button',
+            tagName: 'Button',
             version: '1.0.0',
             data: { id: `btn-${i}`, label: `Button ${i}` }
           }]
@@ -200,7 +200,7 @@ describe('Component Serialization Performance Tests', () => {
   describe('Memory Usage Validation', () => {
     it('should not create excessive memory overhead for large component trees', () => {
       const largeComponentTree = Array.from({ length: 5000 }, (_, i) => ({
-        tag: 'Button',
+        tagName: 'Button',
         version: '1.0.0',
         data: {
           id: `large-btn-${i}`,
@@ -235,7 +235,7 @@ describe('Component Serialization Performance Tests', () => {
       // Create and process large data
       for (let batch = 0; batch < 10; batch++) {
         const batchData = Array.from({ length: 1000 }, (_, i) => ({
-          tag: 'Button',
+          tagName: 'Button',
           version: '1.0.0',
           data: { id: `batch-${batch}-btn-${i}`, label: `Button ${i}` }
         }));
@@ -266,7 +266,7 @@ describe('Component Serialization Performance Tests', () => {
 
       for (const count of componentCounts) {
         const components = Array.from({ length: count }, (_, i) => ({
-          tag: 'Button',
+          tagName: 'Button',
           version: '1.0.0',
           data: { id: `scale-btn-${i}`, label: `Button ${i}` }
         }));
@@ -304,14 +304,14 @@ describe('Component Serialization Performance Tests', () => {
       for (const depth of depths) {
         // Create nested structure
         let nestedData: any = {
-          tag: 'Button',
+          tagName: 'Button',
           version: '1.0.0',
           data: { id: 'deep-button', label: `Button at depth ${depth}` }
         };
 
         for (let level = 0; level < depth; level++) {
           nestedData = {
-            tag: 'Section',
+            tagName: 'Section',
             version: '1.0.0',
             data: {
               id: `section-level-${level}`,
@@ -351,7 +351,7 @@ describe('Component Serialization Performance Tests', () => {
       // Test with 10,000 components
       const extremeCount = 10000;
       const components = Array.from({ length: extremeCount }, (_, i) => ({
-        tag: 'Button',
+        tagName: 'Button',
         version: '1.0.0',
         data: {
           id: `extreme-btn-${i}`,
@@ -382,7 +382,7 @@ describe('Component Serialization Performance Tests', () => {
 
       const operations = Array.from({ length: concurrentOperations }, (_, opIndex) => {
         const components = Array.from({ length: componentsPerOperation }, (_, compIndex) => ({
-          tag: 'Button',
+          tagName: 'Button',
           version: '1.0.0',
           data: {
             id: `concurrent-op${opIndex}-btn${compIndex}`,
@@ -420,13 +420,13 @@ describe('Component Serialization Performance Tests', () => {
   describe('Performance Regression Detection', () => {
     it('should maintain consistent performance characteristics', () => {
       const benchmarkData = Array.from({ length: 1000 }, (_, i) => ({
-        tag: 'Section',
+        tagName: 'Section',
         version: '1.0.0',
         data: {
           id: `benchmark-section-${i}`,
           children: [
             {
-              tag: 'Button',
+              tagName: 'Button',
               version: '1.0.0',
               data: { id: `benchmark-btn-${i}`, label: `Button ${i}` }
             }

package/src/__tests__/schemas/transformers/TestAutomation.test.ts

@@ -244,7 +244,7 @@ describe('QA Test Automation Integration', () => {
       ComponentTransformer.registerComponent('MockComponent', mockComponent as any);
       
       const testData = {
-        tag: 'MockComponent',
+        tagName: 'MockComponent',
         version: '1.0.0',
         data: { text: 'Unit test' }
       };
@@ -361,8 +361,8 @@ describe('QA Test Automation Integration', () => {
         ComponentTransformer.clearRegistry();
         
         const invalidScenarios = [
-          { tag: 'UnknownComponent', version: '1.0.0', data: {} },
-          { tag: 'ValidComponent', version: '1.0.0' }, // Missing data
+          { tagName: 'UnknownComponent', version: '1.0.0', data: {} },
+          { tagName: 'ValidComponent', version: '1.0.0' }, // Missing data
         ];
         
         let handledErrors = 0;
@@ -551,12 +551,12 @@ describe('QA Test Automation Integration', () => {
     it('should provide standardized test data for consistent testing', () => {
       const standardTestData = {
         simpleButton: {
-          tag: 'Button',
+          tagName: 'Button',
           version: '1.0.0',
           data: { label: 'Click Me', variant: 'primary' }
         },
         complexCard: {
-          tag: 'Card',
+          tagName: 'Card',
           version: '1.0.0',
           data: {
             title: 'Test Card',
@@ -565,7 +565,7 @@ describe('QA Test Automation Integration', () => {
             metadata: { author: 'Tester', date: '2025-01-01' },
             actions: [
               {
-                tag: 'Button',
+                tagName: 'Button',
                 version: '1.0.0',
                 data: { label: 'Action', variant: 'secondary' }
               }
@@ -573,7 +573,7 @@ describe('QA Test Automation Integration', () => {
           }
         },
         largeDataset: Array.from({ length: 1000 }, (_, i) => ({
-          tag: 'ListItem',
+          tagName: 'ListItem',
           version: '1.0.0',
           data: { id: i, text: `Item ${i}` }
         }))
@@ -586,7 +586,7 @@ describe('QA Test Automation Integration', () => {
       
       // Test data should be deterministic
       const regeneratedData = Array.from({ length: 1000 }, (_, i) => ({
-        tag: 'ListItem',
+        tagName: 'ListItem',
         version: '1.0.0',
         data: { id: i, text: `Item ${i}` }
       }));

package/src/__tests__/schemas/transformers/nested-serialization.test.tsx

@@ -0,0 +1,181 @@
+/**
+ * Nested Component Serialization Tests
+ * 
+ * Tests to verify that deeply nested component structures can be
+ * properly serialized and deserialized without circular references.
+ */
+
+import React from 'react';
+import { Container } from '../../../components/base/Container';
+import { Text } from '../../../components/blocks/Text';
+import { ComponentTransformer } from '../../../schemas/transformers/ComponentTransformer';
+import '../schemas/transformers/registry'; // Ensure components are registered
+
+describe('Nested Component Serialization', () => {
+  describe('Deep Nesting with Mixed Content', () => {
+    it('should serialize and deserialize deeply nested Container and Text components', () => {
+      // Create a complex nested structure
+      const nestedStructure = (
+        <Container
+          span={12}
+          padding="large"
+          background="primary.main"
+          onClick={(event) => { console.log("Parent clicked"); }}
+        >
+          <Container 
+            span={6}
+            padding="medium"
+            background="secondary.main"
+          >
+            <Text variant="h6" color="textSecondary">
+              Deep nested text content
+            </Text>
+          </Container>
+          
+          <Container
+            span={6}
+            padding="medium"
+            background="success.main"
+          >
+            Simple string content
+          </Container>
+        </Container>
+      );
+
+      // Test serialization
+      expect(() => {
+        const serializedData = ComponentTransformer.serialize(nestedStructure);
+        const parsedData = JSON.parse(serializedData);
+        
+        // Verify outer Container structure
+        expect(parsedData.tagName).toBe('Container');
+        expect(parsedData.version).toBe('1.0.0');
+        expect(parsedData.data.span).toBe(12);
+        expect(parsedData.data.padding).toBe('large');
+        expect(typeof parsedData.data.onClick).toBe('string');
+        
+        // Verify children are serialized as array
+        expect(Array.isArray(parsedData.data.children)).toBe(true);
+        expect(parsedData.data.children).toHaveLength(2);
+        
+        // Verify first nested Container
+        const firstChild = parsedData.data.children[0];
+        expect(firstChild.tagName).toBe('Container');
+        expect(firstChild.data.span).toBe(6);
+        expect(firstChild.data.background).toBe('secondary.main');
+        
+        // Verify deeply nested Text component (single child is not wrapped in array)
+        expect(typeof firstChild.data.children).toBe('object');
+        expect(firstChild.data.children).not.toBeNull();
+        const textComponent = firstChild.data.children;
+        expect(textComponent.tagName).toBe('Text');
+        expect(textComponent.data.variant).toBe('h6');
+        expect(textComponent.data.color).toBe('white');
+        expect(textComponent.data.children).toBe('Deep nested text content');
+        
+        // Verify second nested Container with string content
+        const secondChild = parsedData.data.children[1];
+        expect(secondChild.tagName).toBe('Container');
+        expect(secondChild.data.children).toBe('Simple string content');
+        
+        console.log('✅ Nested serialization structure validated');
+        
+      }).not.toThrow();
+    });
+
+    it('should perform round-trip serialization/deserialization', () => {
+      // Create nested structure
+      const originalStructure = (
+        <Container span={8} padding="medium" background="info.main">
+          <Container span={12} padding="small">
+            <Text variant="body1">Level 2 content</Text>
+          </Container>
+        </Container>
+      );
+
+      // Serialize
+      const serializedData = ComponentTransformer.serialize(originalStructure);
+      
+      // Deserialize  
+      const deserializedComponent = ComponentTransformer.deserialize(serializedData);
+      
+      // Verify it's a valid React element
+      expect(React.isValidElement(deserializedComponent)).toBe(true);
+      
+      // Serialize again to verify integrity
+      const reserializedData = ComponentTransformer.serialize(deserializedComponent);
+      const originalParsed = JSON.parse(serializedData);
+      const reserializedParsed = JSON.parse(reserializedData);
+      
+      // Compare key structural elements (skip function references which will differ)
+      expect(reserializedParsed.tagName).toBe(originalParsed.tagName);
+      expect(reserializedParsed.data.span).toBe(originalParsed.data.span);
+      expect(reserializedParsed.data.padding).toBe(originalParsed.data.padding);
+      
+      console.log('✅ Round-trip serialization successful');
+    });
+
+    it('should handle mixed primitive and component children', () => {
+      const mixedContent = (
+        <Container span={12} padding="large">
+          String content first
+          <Container span={6} padding="small">
+            <Text variant="h5">Component content</Text>
+          </Container>
+          More string content
+          <Text variant="body2">Another component</Text>
+          Final string
+        </Container>
+      );
+
+      expect(() => {
+        const serializedData = ComponentTransformer.serialize(mixedContent);
+        const parsedData = JSON.parse(serializedData);
+        
+        // Verify mixed children array
+        expect(Array.isArray(parsedData.data.children)).toBe(true);
+        expect(parsedData.data.children.length).toBeGreaterThan(1);
+        
+        // Should contain both strings and component objects
+        const hasStrings = parsedData.data.children.some(child => typeof child === 'string');
+        const hasComponents = parsedData.data.children.some(child => 
+          typeof child === 'object' && child.tagName
+        );
+        
+        expect(hasStrings).toBe(true);
+        expect(hasComponents).toBe(true);
+        
+        console.log('✅ Mixed content serialization validated');
+        
+      }).not.toThrow();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle empty children gracefully', () => {
+      const emptyContainer = <Container span={6} padding="medium" />;
+      
+      expect(() => {
+        const serializedData = ComponentTransformer.serialize(emptyContainer);
+        const parsedData = JSON.parse(serializedData);
+        
+        // Should not have children property or should be undefined
+        expect(parsedData.data.children === undefined || parsedData.data.children === null).toBe(true);
+        
+      }).not.toThrow();
+    });
+
+    it('should handle null children gracefully', () => {
+      const nullChildrenContainer = <Container span={6} padding="medium">{null}</Container>;
+      
+      expect(() => {
+        const serializedData = ComponentTransformer.serialize(nullChildrenContainer);
+        const parsedData = JSON.parse(serializedData);
+        
+        // Null should be preserved
+        expect(parsedData.data.children).toBe(null);
+        
+      }).not.toThrow();
+    });
+  });
+});