@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/__tests__/components/base/ModelView.test.tsx

@@ -0,0 +1,220 @@
+/**
+ * ModelView Base Class Tests
+ * 
+ * Tests the base ModelView functionality and ensures that components
+ * extending it work correctly with serialization.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { ComponentTransformer } from '../../../schemas/transformers/ComponentTransformer';
+import { Code } from '../../../components/base/../blocks/Code';
+import { Section } from '../../../components/base/../blocks/Section';
+import Button from '../../../components/base/../buttons/Button';
+
+describe('ModelView Base Class', () => {
+  beforeEach(() => {
+    ComponentTransformer.clearRegistry();
+  });
+
+  describe('Component Registration', () => {
+    it('should register all ModelView-based components successfully', () => {
+      ComponentTransformer.registerComponent(Code as any);
+      ComponentTransformer.registerComponent(Section as any);
+      ComponentTransformer.registerComponent(Button as any);
+
+      const registeredComponents = ComponentTransformer.getRegisteredComponents();
+      
+      expect(registeredComponents).toContain('Code');
+      expect(registeredComponents).toContain('Section'); 
+      expect(registeredComponents).toContain('Button');
+    });
+
+    it('should have correct tagName and version properties', () => {
+      expect(Code.tagName).toBe('Code');
+      expect(Code.version).toBe('1.0.0');
+      
+      expect(Section.tagName).toBe('Section');
+      expect(Section.version).toBe('1.0.0');
+      
+      expect(Button.tagName).toBe('Button');
+      expect(Button.version).toBe('1.0.0');
+    });
+  });
+
+  describe('Serialization Pattern', () => {
+    beforeEach(() => {
+      ComponentTransformer.registerComponent(Code as any);
+      ComponentTransformer.registerComponent(Section as any);
+      ComponentTransformer.registerComponent(Button as any);
+    });
+
+    it('should serialize Code component correctly', () => {
+      const codeElement = <Code language="javascript" showCopy={true}>
+        console.log("Hello, World!");
+      </Code>;
+
+      const codeInstance = new Code({
+        language: 'javascript',
+        showCopy: true,
+        children: 'console.log("Hello, World!");'
+      });
+
+      const serialized = codeInstance.toJson();
+
+      expect(serialized).toMatchObject({
+        children: 'console.log("Hello, World!");',
+        language: 'javascript',
+        showCopy: true,
+        dataSource: undefined,
+        bindingOptions: undefined
+      });
+    });
+
+    it('should serialize Section component correctly', () => {
+      const sectionInstance = new Section({
+        background: '#f5f5f5',
+        padding: 'large',
+        children: 'Section content'
+      });
+
+      const serialized = sectionInstance.toJson();
+
+      expect(serialized).toMatchObject({
+        children: 'Section content',
+        background: '#f5f5f5',
+        padding: 'large',
+        dataSource: undefined,
+        bindingOptions: undefined
+      });
+    });
+
+    it('should serialize Button component correctly', () => {
+      const buttonInstance = new Button({
+        label: 'Click me',
+        variant: 'primary',
+        disabled: false,
+        children: 'Click me'
+      });
+
+      const serialized = buttonInstance.toJson();
+
+      expect(serialized).toMatchObject({
+        children: 'Click me',
+        label: 'Click me',
+        variant: 'primary',
+        disabled: false,
+        dataSource: undefined,
+        bindingOptions: undefined
+      });
+    });
+  });
+
+  describe('Data Binding Props', () => {
+    it('should include data binding props in serialization when present', () => {
+      const codeInstance = new Code({
+        language: 'javascript',
+        children: 'test code',
+        dataSource: 'api.code.example',
+        bindingOptions: { cache: true, strict: false }
+      });
+
+      const serialized = codeInstance.toJson();
+
+      expect(serialized.dataSource).toBe('api.code.example');
+      expect(serialized.bindingOptions).toEqual({ cache: true, strict: false });
+    });
+  });
+
+  describe('Common Base Props', () => {
+    it('should handle common props like className and id', () => {
+      const codeInstance = new Code({
+        language: 'javascript',
+        children: 'test',
+        className: 'my-custom-code',
+        id: 'code-block-1'
+      });
+
+      const serialized = codeInstance.toJson();
+
+      expect(serialized.className).toBe('my-custom-code');
+      expect(serialized.id).toBe('code-block-1');
+    });
+  });
+
+  describe('Deserialization', () => {
+    beforeEach(() => {
+      ComponentTransformer.registerComponent(Code as any);
+      ComponentTransformer.registerComponent(Section as any);
+      ComponentTransformer.registerComponent(Button as any);
+    });
+
+    it('should deserialize Code component correctly', () => {
+      const jsonData = {
+        children: 'console.log("test");',
+        language: 'javascript',
+        showCopy: true
+      };
+
+      const element = Code.fromJson(jsonData);
+      
+      expect(React.isValidElement(element)).toBe(true);
+      expect(element.type).toBe(Code);
+      expect(element.props).toMatchObject(jsonData);
+    });
+
+    it('should deserialize Section component correctly', () => {
+      const jsonData = {
+        children: 'Section content',
+        background: '#ffffff',
+        padding: 'medium'
+      };
+
+      const element = Section.fromJson(jsonData);
+      
+      expect(React.isValidElement(element)).toBe(true);
+      expect(element.type).toBe(Section);
+      expect(element.props).toMatchObject(jsonData);
+    });
+
+    it('should deserialize Button component correctly', () => {
+      const jsonData = {
+        label: 'Test Button',
+        variant: 'outlined',
+        disabled: false
+      };
+
+      const element = Button.fromJson(jsonData);
+      
+      expect(React.isValidElement(element)).toBe(true);
+      expect(element.type).toBe(Button);
+      expect(element.props).toMatchObject(jsonData);
+    });
+  });
+
+  describe('Rendering Patterns', () => {
+    it('should render traditional props correctly', () => {
+      const codeInstance = new Code({
+        language: 'javascript',
+        children: 'test code'
+      });
+
+      const rendered = codeInstance.render();
+      
+      expect(React.isValidElement(rendered)).toBe(true);
+    });
+
+    it('should render with data binding when dataSource is present', () => {
+      const codeInstance = new Code({
+        language: 'javascript',
+        children: 'test code',
+        dataSource: 'api.code.example'
+      });
+
+      const rendered = codeInstance.render();
+      
+      expect(React.isValidElement(rendered)).toBe(true);
+    });
+  });
+});