@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/__tests__/components/blocks/HeroBlock.serialization.test.tsx

@@ -0,0 +1,414 @@
+/**
+ * HeroBlock Serialization Performance Tests
+ * 
+ * Comprehensive test suite for HeroBlock component serialization functionality,
+ * including performance benchmarks and nested component serialization.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import HeroBlock from '../../../components/blocks/HeroBlock';
+import { ComponentTransformer } from '../../../schemas/transformers/ComponentTransformer';
+import '../../../schemas/transformers/registry';
+
+describe('HeroBlock Serialization', () => {
+  describe('Performance Benchmarks', () => {
+    it('serializes basic HeroBlock in under 1ms', () => {
+      const heroComponent = (
+        <HeroBlock 
+          title="Performance Test Hero"
+          subtitle="Testing serialization speed"
+          backgroundColor="primary"
+          textAlign="center"
+          blockHeight="medium"
+        />
+      );
+
+      const startTime = performance.now();
+      const serializedData = ComponentTransformer.serialize(heroComponent);
+      const endTime = performance.now();
+      
+      const serializationTime = endTime - startTime;
+      
+      expect(serializedData).toBeDefined();
+      expect(serializationTime).toBeLessThan(1); // Less than 1ms target
+      
+      const parsedData = JSON.parse(serializedData);
+      expect(parsedData.tag).toBe('HeroBlock');
+      expect(parsedData.data.title).toBe('Performance Test Hero');
+    });
+
+    it('serializes complex HeroBlock with multiple actions in under 2ms', () => {
+      const complexHero = (
+        <HeroBlock 
+          title="Complex Performance Test"
+          subtitle="Hero with multiple actions and configurations"
+          backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+          backgroundImage="https://example.com/hero-bg.jpg"
+          overlayOpacity={0.7}
+          textAlign="center"
+          blockHeight="large"
+          actions={[
+            { label: 'Primary Action', variant: 'primary', buttonSize: 'large', href: '/test' },
+            { label: 'Secondary Action', variant: 'secondary', buttonSize: 'medium', target: '_blank' },
+            { label: 'Outlined Action', variant: 'outlined', buttonSize: 'small' },
+            { label: 'Text Action', variant: 'text', disabled: true },
+            { label: 'Loading Action', variant: 'contained', loading: true }
+          ]}
+        />
+      );
+
+      const startTime = performance.now();
+      const serializedData = ComponentTransformer.serialize(complexHero);
+      const endTime = performance.now();
+      
+      const serializationTime = endTime - startTime;
+      
+      expect(serializedData).toBeDefined();
+      expect(serializationTime).toBeLessThan(2); // Less than 2ms target for complex components
+      
+      const parsedData = JSON.parse(serializedData);
+      expect(parsedData.tag).toBe('HeroBlock');
+      expect(parsedData.data.actions).toHaveLength(5);
+    });
+
+    it('deserializes HeroBlock in under 1ms', () => {
+      const heroComponent = (
+        <HeroBlock 
+          title="Deserialization Test"
+          subtitle="Testing deserialization speed"
+          backgroundColor="secondary"
+          actions={[
+            { label: 'Test Action', variant: 'primary', buttonSize: 'large' }
+          ]}
+        />
+      );
+
+      const serializedData = ComponentTransformer.serialize(heroComponent);
+      
+      const startTime = performance.now();
+      const deserializedComponent = ComponentTransformer.deserialize(serializedData);
+      const endTime = performance.now();
+      
+      const deserializationTime = endTime - startTime;
+      
+      expect(deserializedComponent).toBeDefined();
+      expect(React.isValidElement(deserializedComponent)).toBe(true);
+      expect(deserializationTime).toBeLessThan(1); // Less than 1ms target
+    });
+
+    it('performs round-trip serialization 100 times in under 100ms', () => {
+      const heroComponent = (
+        <HeroBlock 
+          title="Batch Test Hero"
+          subtitle="Testing batch serialization performance"
+          backgroundColor="primary"
+          actions={[
+            { label: 'Batch Action', variant: 'primary', buttonSize: 'medium' }
+          ]}
+        />
+      );
+
+      const startTime = performance.now();
+      
+      for (let i = 0; i < 100; i++) {
+        const serialized = ComponentTransformer.serialize(heroComponent);
+        const deserialized = ComponentTransformer.deserialize(serialized);
+        expect(React.isValidElement(deserialized)).toBe(true);
+      }
+      
+      const endTime = performance.now();
+      const totalTime = endTime - startTime;
+      
+      expect(totalTime).toBeLessThan(100); // 100 round-trips in under 100ms (1ms per operation)
+      
+      // Average time per operation should be under 1ms
+      const averageTime = totalTime / 100;
+      expect(averageTime).toBeLessThan(1);
+    });
+  });
+
+  describe('Nested Component Serialization', () => {
+    it('properly serializes HeroBlock with Button actions', () => {
+      const heroWithActions = (
+        <HeroBlock 
+          title="Hero with Nested Actions"
+          subtitle="Testing nested Button component serialization"
+          backgroundGradient="linear-gradient(45deg, #2196F3, #21CBF3)"
+          textAlign="center"
+          blockHeight="medium"
+          actions={[
+            { 
+              label: 'Primary Button', 
+              variant: 'primary', 
+              buttonSize: 'large',
+              href: '/primary-action'
+            },
+            { 
+              label: 'Secondary Button', 
+              variant: 'secondary', 
+              buttonSize: 'medium',
+              disabled: false,
+              loading: false
+            }
+          ]}
+        />
+      );
+
+      const serializedData = ComponentTransformer.serialize(heroWithActions);
+      const parsedData = JSON.parse(serializedData);
+      
+      // Verify HeroBlock serialization
+      expect(parsedData.tag).toBe('HeroBlock');
+      expect(parsedData.version).toBe('1.0.0');
+      expect(parsedData.data.title).toBe('Hero with Nested Actions');
+      
+      // Verify nested actions serialization
+      expect(parsedData.data.actions).toHaveLength(2);
+      expect(parsedData.data.actions[0].label).toBe('Primary Button');
+      expect(parsedData.data.actions[0].variant).toBe('primary');
+      expect(parsedData.data.actions[0].buttonSize).toBe('large');
+      expect(parsedData.data.actions[0].href).toBe('/primary-action');
+      
+      expect(parsedData.data.actions[1].label).toBe('Secondary Button');
+      expect(parsedData.data.actions[1].variant).toBe('secondary');
+      expect(parsedData.data.actions[1].buttonSize).toBe('medium');
+
+      // Verify deserialization works
+      const deserializedComponent = ComponentTransformer.deserialize(serializedData);
+      expect(React.isValidElement(deserializedComponent)).toBe(true);
+    });
+
+    it('handles complex action configurations with custom properties', () => {
+      const complexActionsHero = (
+        <HeroBlock 
+          title="Complex Actions Test"
+          actions={[
+            {
+              label: 'Navigate Action',
+              variant: 'primary',
+              buttonSize: 'large',
+              action: { type: 'navigate', url: '/dashboard', target: '_self' }
+            },
+            {
+              label: 'External Action',
+              variant: 'outlined',
+              buttonSize: 'medium',
+              action: { type: 'external', url: 'https://example.com', target: '_blank' }
+            },
+            {
+              label: 'Custom Handler',
+              variant: 'text',
+              buttonSize: 'small',
+              action: { type: 'custom', customHandler: 'handleCustomClick' }
+            }
+          ]}
+        />
+      );
+
+      const serializedData = ComponentTransformer.serialize(complexActionsHero);
+      const parsedData = JSON.parse(serializedData);
+      
+      expect(parsedData.data.actions).toHaveLength(3);
+      
+      // Verify complex action structures are preserved
+      expect(parsedData.data.actions[0].action.type).toBe('navigate');
+      expect(parsedData.data.actions[0].action.url).toBe('/dashboard');
+      expect(parsedData.data.actions[0].action.target).toBe('_self');
+      
+      expect(parsedData.data.actions[1].action.type).toBe('external');
+      expect(parsedData.data.actions[1].action.url).toBe('https://example.com');
+      
+      expect(parsedData.data.actions[2].action.type).toBe('custom');
+      expect(parsedData.data.actions[2].action.customHandler).toBe('handleCustomClick');
+
+      // Verify deserialization maintains complex structures
+      const deserializedComponent = ComponentTransformer.deserialize(serializedData);
+      expect(React.isValidElement(deserializedComponent)).toBe(true);
+    });
+
+    it('preserves all background configuration options', () => {
+      const backgroundConfigHero = (
+        <HeroBlock 
+          title="Background Config Test"
+          subtitle="Testing all background options"
+          backgroundImage="https://example.com/hero-bg.jpg"
+          backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+          backgroundColor="primary"
+          overlayOpacity={0.8}
+          textAlign="right"
+          blockHeight="viewport"
+        />
+      );
+
+      const serializedData = ComponentTransformer.serialize(backgroundConfigHero);
+      const parsedData = JSON.parse(serializedData);
+      
+      expect(parsedData.data.backgroundImage).toBe('https://example.com/hero-bg.jpg');
+      expect(parsedData.data.backgroundGradient).toBe('linear-gradient(135deg, #667eea 0%, #764ba2 100%)');
+      expect(parsedData.data.backgroundColor).toBe('primary');
+      expect(parsedData.data.overlayOpacity).toBe(0.8);
+      expect(parsedData.data.textAlign).toBe('right');
+      expect(parsedData.data.blockHeight).toBe('viewport');
+
+      const deserializedComponent = ComponentTransformer.deserialize(serializedData);
+      expect(React.isValidElement(deserializedComponent)).toBe(true);
+    });
+
+    it('handles data binding configuration preservation', () => {
+      const dataBindingHero = (
+        <HeroBlock 
+          dataSource="heroes.main"
+          bindingOptions={{ cache: true, cacheTTL: 300000, strict: false }}
+          title="Fallback Title"
+          subtitle="Fallback Subtitle"
+        />
+      );
+
+      const serializedData = ComponentTransformer.serialize(dataBindingHero);
+      const parsedData = JSON.parse(serializedData);
+      
+      // Verify data binding properties are preserved
+      expect(parsedData.data.dataSource).toBe('heroes.main');
+      expect(parsedData.data.bindingOptions.cache).toBe(true);
+      expect(parsedData.data.bindingOptions.cacheTTL).toBe(300000);
+      expect(parsedData.data.bindingOptions.strict).toBe(false);
+      
+      // Verify fallback props are preserved
+      expect(parsedData.data.title).toBe('Fallback Title');
+      expect(parsedData.data.subtitle).toBe('Fallback Subtitle');
+
+      const deserializedComponent = ComponentTransformer.deserialize(serializedData);
+      expect(React.isValidElement(deserializedComponent)).toBe(true);
+    });
+
+    it('handles edge cases with empty and undefined values', () => {
+      const edgeCaseHero = (
+        <HeroBlock 
+          title=""
+          subtitle={undefined}
+          actions={[]}
+          backgroundImage={undefined}
+          overlayOpacity={0}
+          className=""
+        />
+      );
+
+      const serializedData = ComponentTransformer.serialize(edgeCaseHero);
+      const parsedData = JSON.parse(serializedData);
+      
+      expect(parsedData.data.title).toBe('');
+      expect(parsedData.data.actions).toEqual([]);
+      expect(parsedData.data.overlayOpacity).toBe(0);
+
+      const deserializedComponent = ComponentTransformer.deserialize(serializedData);
+      expect(React.isValidElement(deserializedComponent)).toBe(true);
+    });
+  });
+
+  describe('Data Integrity', () => {
+    it('maintains complete data integrity through multiple serialization cycles', () => {
+      const originalHero = (
+        <HeroBlock 
+          title="Data Integrity Test"
+          subtitle="Testing multiple serialization cycles"
+          backgroundGradient="linear-gradient(45deg, #FF6B6B, #4ECDC4)"
+          backgroundColor="secondary"
+          textAlign="center"
+          blockHeight="large"
+          overlayOpacity={0.6}
+          actions={[
+            { 
+              label: 'Complex Action', 
+              variant: 'primary', 
+              buttonSize: 'large',
+              href: '/test-url',
+              target: '_blank',
+              disabled: false,
+              loading: false,
+              fullWidth: false,
+              action: { 
+                type: 'navigate', 
+                url: '/complex-url', 
+                target: '_self' 
+              }
+            }
+          ]}
+        />
+      );
+
+      // First serialization cycle
+      const serialized1 = ComponentTransformer.serialize(originalHero);
+      const deserialized1 = ComponentTransformer.deserialize(serialized1);
+      
+      // Second serialization cycle
+      const serialized2 = ComponentTransformer.serialize(deserialized1 as React.ReactElement);
+      const deserialized2 = ComponentTransformer.deserialize(serialized2);
+      
+      // Third serialization cycle
+      const serialized3 = ComponentTransformer.serialize(deserialized2 as React.ReactElement);
+      const parsedData3 = JSON.parse(serialized3);
+      
+      // Verify data integrity is maintained across multiple cycles
+      expect(parsedData3.tag).toBe('HeroBlock');
+      expect(parsedData3.version).toBe('1.0.0');
+      expect(parsedData3.data.title).toBe('Data Integrity Test');
+      expect(parsedData3.data.subtitle).toBe('Testing multiple serialization cycles');
+      expect(parsedData3.data.backgroundGradient).toBe('linear-gradient(45deg, #FF6B6B, #4ECDC4)');
+      expect(parsedData3.data.backgroundColor).toBe('secondary');
+      expect(parsedData3.data.textAlign).toBe('center');
+      expect(parsedData3.data.blockHeight).toBe('large');
+      expect(parsedData3.data.overlayOpacity).toBe(0.6);
+      
+      expect(parsedData3.data.actions).toHaveLength(1);
+      expect(parsedData3.data.actions[0].label).toBe('Complex Action');
+      expect(parsedData3.data.actions[0].variant).toBe('primary');
+      expect(parsedData3.data.actions[0].href).toBe('/test-url');
+      expect(parsedData3.data.actions[0].target).toBe('_blank');
+      expect(parsedData3.data.actions[0].action.type).toBe('navigate');
+      expect(parsedData3.data.actions[0].action.url).toBe('/complex-url');
+      
+      const finalDeserialized = ComponentTransformer.deserialize(serialized3);
+      expect(React.isValidElement(finalDeserialized)).toBe(true);
+    });
+
+    it('preserves component hierarchy and structure', () => {
+      const structuralHero = (
+        <HeroBlock 
+          title="Structural Test"
+          subtitle="Testing component structure preservation"
+          backgroundColor="primary"
+          actions={[
+            { label: 'Action 1', variant: 'primary' },
+            { label: 'Action 2', variant: 'secondary' },
+            { label: 'Action 3', variant: 'outlined' }
+          ]}
+        />
+      );
+
+      const serializedData = ComponentTransformer.serialize(structuralHero);
+      const parsedData = JSON.parse(serializedData);
+      
+      // Verify component structure
+      expect(parsedData).toHaveProperty('tag');
+      expect(parsedData).toHaveProperty('version');
+      expect(parsedData).toHaveProperty('data');
+      
+      // Verify nested structure (actions array)
+      expect(parsedData.data.actions).toBeInstanceOf(Array);
+      expect(parsedData.data.actions).toHaveLength(3);
+      
+      parsedData.data.actions.forEach((action: any, index: number) => {
+        expect(action).toHaveProperty('label');
+        expect(action).toHaveProperty('variant');
+        expect(action.label).toBe(`Action ${index + 1}`);
+      });
+
+      const deserializedComponent = ComponentTransformer.deserialize(serializedData);
+      expect(React.isValidElement(deserializedComponent)).toBe(true);
+    });
+  });
+});

package/src/__tests__/components/blocks/Image.serialization.test.tsx

@@ -0,0 +1,257 @@
+/**
+ * Image Component Serialization Tests
+ * 
+ * Tests for the Image component's ModelView implementation and 
+ * serialization capabilities using ComponentTransformer.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ComponentTransformer } from '../../../schemas/transformers/ComponentTransformer';
+import { Image } from '../../../components/blocks/Image';
+
+describe('Image Serialization', () => {
+  beforeEach(() => {
+    // Clear component registry for clean tests
+    ComponentTransformer.clearRegistry();
+    
+    // Register Image component
+    ComponentTransformer.registerComponent(Image as any);
+  });
+
+  afterEach(() => {
+    ComponentTransformer.clearRegistry();
+  });
+
+  describe('Basic Serialization', () => {
+    it('should serialize and deserialize basic image component', () => {
+      // Create original component
+      const originalComponent = (
+        <Image 
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          width={400}
+          height={300}
+        />
+      );
+
+      // Serialize
+      const serialized = ComponentTransformer.serialize(originalComponent);
+      expect(serialized).toBeTruthy();
+      expect(typeof serialized).toBe('string');
+
+      // Parse to check structure
+      const parsed = JSON.parse(serialized);
+      expect(parsed.tag).toBe('Image');
+      expect(parsed.version).toBe('1.0.0');
+      expect(parsed.data.src).toBe('https://example.com/image.jpg');
+      expect(parsed.data.alt).toBe('Test image');
+      expect(parsed.data.width).toBe(400);
+      expect(parsed.data.height).toBe(300);
+
+      // Deserialize
+      const deserialized = ComponentTransformer.deserialize(serialized);
+      expect(React.isValidElement(deserialized)).toBe(true);
+    });
+
+    it('should preserve all image properties through serialization', () => {
+      const originalComponent = (
+        <Image 
+          src="https://example.com/image.jpg"
+          alt="Comprehensive test image"
+          width={600}
+          height={400}
+          objectFit="cover"
+          objectPosition="center"
+          loading="lazy"
+          title="Test image title"
+          draggable={false}
+          borderRadius="12px"
+          showLoading={true}
+          showError={true}
+          fallbackSrc="https://example.com/fallback.jpg"
+        />
+      );
+
+      const serialized = ComponentTransformer.serialize(originalComponent);
+      const parsed = JSON.parse(serialized);
+      const data = parsed.data;
+
+      expect(data.src).toBe('https://example.com/image.jpg');
+      expect(data.alt).toBe('Comprehensive test image');
+      expect(data.width).toBe(600);
+      expect(data.height).toBe(400);
+      expect(data.objectFit).toBe('cover');
+      expect(data.objectPosition).toBe('center');
+      expect(data.loading).toBe('lazy');
+      expect(data.title).toBe('Test image title');
+      expect(data.draggable).toBe(false);
+      expect(data.borderRadius).toBe('12px');
+      expect(data.showLoading).toBe(true);
+      expect(data.showError).toBe(true);
+      expect(data.fallbackSrc).toBe('https://example.com/fallback.jpg');
+
+      const deserialized = ComponentTransformer.deserialize(serialized);
+      expect(React.isValidElement(deserialized)).toBe(true);
+    });
+
+    it('should handle responsive image properties', () => {
+      const originalComponent = (
+        <Image 
+          src="https://example.com/image.jpg"
+          alt="Responsive image"
+          sizes="(max-width: 768px) 100vw, 50vw"
+          srcSet="https://example.com/image-400.jpg 400w, https://example.com/image-800.jpg 800w"
+        />
+      );
+
+      const serialized = ComponentTransformer.serialize(originalComponent);
+      const parsed = JSON.parse(serialized);
+      
+      expect(parsed.data.sizes).toBe('(max-width: 768px) 100vw, 50vw');
+      expect(parsed.data.srcSet).toBe('https://example.com/image-400.jpg 400w, https://example.com/image-800.jpg 800w');
+
+      const deserialized = ComponentTransformer.deserialize(serialized);
+      expect(React.isValidElement(deserialized)).toBe(true);
+    });
+  });
+
+  describe('ModelView Integration', () => {
+    it('should have correct static properties', () => {
+      expect((Image as any).tagName).toBe('Image');
+      expect((Image as any).version).toBe('1.0.0');
+      expect(typeof (Image as any).fromJson).toBe('function');
+    });
+
+    it('should create instance with toJson method', () => {
+      const imageInstance = new Image({
+        src: 'https://example.com/test.jpg',
+        alt: 'Test image'
+      });
+
+      expect(typeof imageInstance.toJson).toBe('function');
+      
+      const serialized = imageInstance.toJson();
+      expect(serialized.src).toBe('https://example.com/test.jpg');
+      expect(serialized.alt).toBe('Test image');
+    });
+
+    it('should handle fromJson static method', () => {
+      const jsonData = {
+        src: 'https://example.com/test.jpg',
+        alt: 'From JSON test',
+        width: 300,
+        height: 200
+      };
+
+      const component = (Image as any).fromJson(jsonData);
+      expect(React.isValidElement(component)).toBe(true);
+    });
+  });
+
+  describe('Data Binding Serialization', () => {
+    it('should preserve dataSource and bindingOptions', () => {
+      const originalComponent = (
+        <Image 
+          src="https://example.com/image.jpg"
+          alt="Data bound image"
+          dataSource="images.hero"
+          bindingOptions={{
+            cache: true,
+            cacheTTL: 300000,
+            strict: false
+          }}
+        />
+      );
+
+      const serialized = ComponentTransformer.serialize(originalComponent);
+      const parsed = JSON.parse(serialized);
+
+      expect(parsed.data.dataSource).toBe('images.hero');
+      expect(parsed.data.bindingOptions).toEqual({
+        cache: true,
+        cacheTTL: 300000,
+        strict: false
+      });
+
+      const deserialized = ComponentTransformer.deserialize(serialized);
+      expect(React.isValidElement(deserialized)).toBe(true);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle serialization of image without required props', () => {
+      // Image without src should still serialize (though it may not render)
+      const originalComponent = <Image alt="Image without src" />;
+      
+      const serialized = ComponentTransformer.serialize(originalComponent);
+      expect(serialized).toBeTruthy();
+      
+      const parsed = JSON.parse(serialized);
+      expect(parsed.tag).toBe('Image');
+      expect(parsed.data.alt).toBe('Image without src');
+      expect(parsed.data.src).toBeUndefined();
+
+      const deserialized = ComponentTransformer.deserialize(serialized);
+      expect(React.isValidElement(deserialized)).toBe(true);
+    });
+
+    it('should handle empty/null values gracefully', () => {
+      const originalComponent = (
+        <Image 
+          src=""
+          alt=""
+          width={undefined}
+          height={undefined}
+        />
+      );
+
+      const serialized = ComponentTransformer.serialize(originalComponent);
+      const parsed = JSON.parse(serialized);
+
+      expect(parsed.data.src).toBe('');
+      expect(parsed.data.alt).toBe('');
+      
+      const deserialized = ComponentTransformer.deserialize(serialized);
+      expect(React.isValidElement(deserialized)).toBe(true);
+    });
+  });
+
+  describe('Component Registry', () => {
+    it('should be registered in ComponentTransformer', () => {
+      const registeredComponents = ComponentTransformer.getRegisteredComponents();
+      expect(registeredComponents).toContain('Image');
+    });
+
+    it('should support round-trip serialization consistency', () => {
+      const originalComponent = (
+        <Image 
+          src="https://example.com/consistency-test.jpg"
+          alt="Consistency test image"
+          width={500}
+          height={300}
+          objectFit="contain"
+          borderRadius="8px"
+          showLoading={true}
+        />
+      );
+
+      // First round-trip
+      const serialized1 = ComponentTransformer.serialize(originalComponent);
+      const deserialized1 = ComponentTransformer.deserialize(serialized1);
+      
+      // Second round-trip
+      const serialized2 = ComponentTransformer.serialize(deserialized1);
+      const parsed1 = JSON.parse(serialized1);
+      const parsed2 = JSON.parse(serialized2);
+
+      // Should be identical
+      expect(parsed1.tag).toBe(parsed2.tag);
+      expect(parsed1.version).toBe(parsed2.version);
+      expect(parsed1.data).toEqual(parsed2.data);
+    });
+  });
+});