@qwickapps/react-framework 1.3.0

package/src/components/__tests__/ProductCard.test.tsx

@@ -0,0 +1,377 @@
+/**
+ * Unit tests for ProductCard component
+ * 
+ * Tests both traditional props usage and data binding functionality
+ * with the new schema system.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ProductCard } from '../blocks/ProductCard';
+import type { Product } from '../blocks/ProductCard';
+import { DataProvider } from '../../contexts/DataContext';
+import { JsonDataProvider } from '@qwickapps/schema';
+import { ThemeProvider, PaletteProvider } from '../../contexts';
+
+// Sample product data
+const sampleProduct: Product = {
+  id: 'test-product',
+  name: 'Test Product',
+  category: 'Testing',
+  description: 'A comprehensive testing framework for modern applications',
+  shortDescription: 'Modern testing framework',
+  features: ['Easy setup', 'Fast execution', 'Comprehensive reporting'],
+  technologies: ['React', 'TypeScript', 'Jest'],
+  status: 'launched',
+  image: 'https://example.com/test-product.jpg',
+  url: 'https://example.com/product'
+};
+
+const sampleProductBeta: Product = {
+  id: 'beta-product',
+  name: 'Beta Product',
+  category: 'Development',
+  description: 'Beta version of our next-generation platform',
+  features: ['Cutting edge features', 'Early access', 'Community feedback'],
+  technologies: ['Next.js', 'GraphQL'],
+  status: 'beta'
+};
+
+const sampleProductComingSoon: Product = {
+  id: 'coming-soon-product',
+  name: 'Future Product',
+  category: 'Innovation',
+  description: 'Revolutionary new product coming soon',
+  features: ['AI-powered', 'Cloud-native', 'Scalable'],
+  technologies: ['AI/ML', 'Kubernetes'],
+  status: 'coming-soon'
+};
+
+// Test data for data binding
+const sampleCmsData = {
+  'products.main-product': [{
+    product: sampleProduct,
+    variant: 'detailed',
+    showImage: true,
+    showTechnologies: true
+  }],
+  'products.compact-list': [{
+    product: sampleProductBeta,
+    variant: 'compact',
+    showImage: false,
+    maxFeaturesCompact: 2
+  }],
+  'products.coming-soon': [{
+    product: sampleProductComingSoon,
+    variant: 'detailed'
+  }]
+};
+
+// Mock window.open for Jest
+Object.defineProperty(window, 'open', {
+  writable: true,
+  value: jest.fn()
+});
+
+// Wrapper component for tests that need providers
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+  children, 
+  dataProvider 
+}) => (
+  <ThemeProvider>
+    <PaletteProvider>
+      {dataProvider ? (
+        <DataProvider dataSource={dataProvider}>
+          {children}
+        </DataProvider>
+      ) : (
+        children
+      )}
+    </PaletteProvider>
+  </ThemeProvider>
+);
+
+describe.skip('ProductCard', () => {
+  describe('Traditional Props Usage', () => {
+    it('renders launched product correctly', () => {
+      render(
+        <TestWrapper>
+          <ProductCard product={sampleProduct} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Testing')).toBeInTheDocument();
+      expect(screen.getByText('Modern testing framework')).toBeInTheDocument();
+      expect(screen.getByText('launched')).toBeInTheDocument();
+      expect(screen.getByText('Launch App')).toBeInTheDocument();
+    });
+
+    it('renders beta product with correct status', () => {
+      render(
+        <TestWrapper>
+          <ProductCard product={sampleProductBeta} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Beta Product')).toBeInTheDocument();
+      expect(screen.getByText('beta')).toBeInTheDocument();
+      expect(screen.getByText('Try Beta')).toBeInTheDocument();
+    });
+
+    it('renders coming soon product with disabled button', () => {
+      render(
+        <TestWrapper>
+          <ProductCard product={sampleProductComingSoon} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Future Product')).toBeInTheDocument();
+      expect(screen.getByText('coming soon')).toBeInTheDocument();
+      
+      const comingSoonButton = screen.getByText('Coming Soon');
+      expect(comingSoonButton).toBeDisabled();
+    });
+
+    it('renders detailed variant correctly', () => {
+      render(
+        <TestWrapper>
+          <ProductCard product={sampleProduct} variant="detailed" />
+        </TestWrapper>
+      );
+
+      // Should show full description in detailed mode
+      expect(screen.getByText('A comprehensive testing framework for modern applications')).toBeInTheDocument();
+      
+      // Should show technologies in detailed mode
+      expect(screen.getByText('Technologies:')).toBeInTheDocument();
+      expect(screen.getByText('React')).toBeInTheDocument();
+      expect(screen.getByText('TypeScript')).toBeInTheDocument();
+    });
+
+    it('renders compact variant correctly', () => {
+      render(
+        <TestWrapper>
+          <ProductCard product={sampleProduct} variant="compact" maxFeaturesCompact={2} />
+        </TestWrapper>
+      );
+
+      // Should show short description in compact mode
+      expect(screen.getByText('Modern testing framework')).toBeInTheDocument();
+      
+      // Should limit features in compact mode
+      expect(screen.getByText('Easy setup')).toBeInTheDocument();
+      expect(screen.getByText('Fast execution')).toBeInTheDocument();
+      expect(screen.getByText('+1 more features')).toBeInTheDocument();
+      
+      // Should not show technologies section in compact mode
+      expect(screen.queryByText('Technologies:')).not.toBeInTheDocument();
+    });
+
+    it('handles click events correctly', () => {
+      const mockClick = jest.fn();
+      render(
+        <TestWrapper>
+          <ProductCard product={sampleProduct} onClick={mockClick} variant="compact" />
+        </TestWrapper>
+      );
+
+      const card = screen.getByText('Test Product').closest('.product-card');
+      if (card) {
+        fireEvent.click(card);
+        expect(mockClick).toHaveBeenCalled();
+      }
+    });
+
+    it('renders without image when showImage is false', () => {
+      render(
+        <TestWrapper>
+          <ProductCard product={sampleProduct} showImage={false} />
+        </TestWrapper>
+      );
+
+      expect(screen.queryByAltText('Test Product')).not.toBeInTheDocument();
+    });
+
+    it('shows empty state when no product is provided', () => {
+      render(
+        <TestWrapper>
+          <ProductCard />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('No Product Available')).toBeInTheDocument();
+      expect(screen.getByText('Empty')).toBeInTheDocument();
+      expect(screen.getByText('No product data found in the specified data source')).toBeInTheDocument();
+    });
+  });
+
+  describe.skip('Data Binding Usage', () => {
+    let dataProvider: JsonDataProvider;
+
+    beforeEach(() => {
+      dataProvider = new JsonDataProvider({ data: sampleCmsData });
+    });
+
+    it('renders with dataSource prop (detailed variant)', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <ProductCard dataSource="products.main-product" />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Test Product')).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('Testing')).toBeInTheDocument();
+      expect(screen.getByText('A comprehensive testing framework for modern applications')).toBeInTheDocument();
+      expect(screen.getByText('Technologies:')).toBeInTheDocument();
+    });
+
+    it('renders with dataSource prop (compact variant)', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <ProductCard dataSource="products.compact-list" />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Beta Product')).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('Try Beta')).toBeInTheDocument();
+      // Should limit features to 2 in compact mode
+      expect(screen.getByText('Cutting edge features')).toBeInTheDocument();
+      expect(screen.getByText('Early access')).toBeInTheDocument();
+      expect(screen.getByText('+1 more features')).toBeInTheDocument();
+    });
+
+    it('shows loading state while data is loading', () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <ProductCard dataSource="products.nonexistent" />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Loading Product...')).toBeInTheDocument();
+      expect(screen.getByText('Loading')).toBeInTheDocument();
+    });
+
+    it('includes data attributes when using dataSource', async () => {
+      const { container } = render(
+        <TestWrapper dataProvider={dataProvider}>
+          <ProductCard dataSource="products.main-product" />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        const card = container.querySelector('[data-component="ProductCard"]');
+        expect(card).toBeInTheDocument();
+        expect(card).toHaveAttribute('data-data-source', 'products.main-product');
+        expect(card).toHaveAttribute('data-variant', 'detailed');
+      });
+    });
+
+    it('uses fallback props when dataSource has no content', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <ProductCard 
+            dataSource="products.nonexistent-key" 
+            product={sampleProduct}
+            variant="compact"
+          />
+        </TestWrapper>
+      );
+
+      // Should eventually show the fallback product
+      await waitFor(() => {
+        expect(screen.getByText('Test Product')).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+
+    it('handles different product statuses from data', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <ProductCard dataSource="products.coming-soon" />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Future Product')).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('coming soon')).toBeInTheDocument();
+      
+      const comingSoonButton = screen.getByText('Coming Soon');
+      expect(comingSoonButton).toBeDisabled();
+    });
+
+    it('works with custom binding options', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <ProductCard 
+            dataSource="products.main-product" 
+            bindingOptions={{ cache: false, strict: true }}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Test Product')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles missing product image gracefully', () => {
+      const productWithoutImage = { ...sampleProduct, image: undefined };
+      
+      render(
+        <TestWrapper>
+          <ProductCard product={productWithoutImage} />
+        </TestWrapper>
+      );
+
+      expect(screen.queryByAltText('Test Product')).not.toBeInTheDocument();
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('handles empty features array', () => {
+      const productWithNoFeatures = { ...sampleProduct, features: [] };
+      
+      render(
+        <TestWrapper>
+          <ProductCard product={productWithNoFeatures} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Key Features:')).toBeInTheDocument();
+      // Should not show any feature items
+      expect(screen.queryByText('Easy setup')).not.toBeInTheDocument();
+    });
+
+    it('handles custom actions', () => {
+      const customActions = [
+        {
+          id: 'custom',
+          label: 'Custom Action',
+          onClick: jest.fn()
+        }
+      ];
+
+      render(
+        <TestWrapper>
+          <ProductCard product={sampleProduct} actions={customActions} />
+        </TestWrapper>
+      );
+
+      const customButton = screen.getByText('Custom Action');
+      expect(customButton).toBeInTheDocument();
+      
+      fireEvent.click(customButton);
+      expect(customActions[0].onClick).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/__tests__/SafeSpan.integration.test.tsx

@@ -0,0 +1,123 @@
+/**
+ * Integration tests for SafeSpan with data binding functionality
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import SafeSpan from '../SafeSpan';
+import { DataProvider } from '../../contexts/DataContext';
+import { JsonDataProvider } from '@qwickapps/schema';
+
+describe.skip('SafeSpan Integration (Traditional + Data Binding)', () => {
+  const testData = {
+    'company.description': {
+      html: '<p>QwickApps helps you <strong>build apps faster</strong> with our comprehensive framework.</p>',
+      placeholder: 'Loading company description...'
+    },
+    'empty.content': {}
+  };
+
+  const dataProvider = new JsonDataProvider({ data: testData });
+
+  it('should work as traditional SafeSpan without dataSource', () => {
+    const { container } = render(
+      <SafeSpan 
+        html="<p>Traditional <strong>SafeSpan</strong> usage</p>" 
+        placeholder="Traditional placeholder" 
+      />
+    );
+
+    expect(container.innerHTML).toContain('Traditional <strong>SafeSpan</strong> usage');
+  });
+
+  it('should work with dataSource prop (data binding)', async () => {
+    const { container } = render(
+      <DataProvider dataSource={{ dataProvider }}>
+        <SafeSpan dataSource="company.description" />
+      </DataProvider>
+    );
+
+    await waitFor(() => {
+      expect(container.innerHTML).toContain('QwickApps helps you <strong>build apps faster</strong>');
+    });
+  });
+
+  it('should use fallback props when dataSource has no content', async () => {
+    const { container } = render(
+      <DataProvider dataSource={{ dataProvider }}>
+        <SafeSpan 
+          dataSource="empty.content" 
+          html="<p>Fallback HTML content</p>"
+          placeholder="Fallback placeholder"
+        />
+      </DataProvider>
+    );
+
+    await waitFor(() => {
+      expect(container.innerHTML).toContain('Fallback HTML content');
+    });
+  });
+
+  it('should sanitize malicious HTML content', () => {
+    const { container } = render(
+      <SafeSpan html="<script>alert('xss')</script><p>Safe content</p>" />
+    );
+
+    // Script tag should be removed, safe content should remain
+    expect(container.innerHTML).not.toContain('<script>');
+    expect(container.innerHTML).not.toContain("alert('xss')");
+    expect(container.innerHTML).toContain('Safe content');
+  });
+
+  it('should include data attributes when using dataSource', async () => {
+    const { container } = render(
+      <DataProvider dataSource={{ dataProvider }}>
+        <SafeSpan dataSource="company.description" />
+      </DataProvider>
+    );
+
+    await waitFor(() => {
+      const span = container.querySelector('span');
+      expect(span).toHaveAttribute('data-component', 'SafeSpan');
+      expect(span).toHaveAttribute('data-data-source', 'company.description');
+    });
+  });
+
+  it('should work with base props like grid attributes', () => {
+    const { container } = render(
+      <SafeSpan 
+        html="<p>Test content</p>"
+        span={6}
+        xs={12}
+        md={8}
+      />
+    );
+
+    const span = container.querySelector('span');
+    expect(span).toHaveAttribute('data-grid-span', '6');
+    expect(span).toHaveAttribute('data-grid-xs', '12');
+    expect(span).toHaveAttribute('data-grid-md', '8');
+  });
+
+  it('should handle custom binding options', async () => {
+    const { container } = render(
+      <DataProvider dataSource={{ dataProvider }}>
+        <SafeSpan 
+          dataSource="nonexistent.data"
+          bindingOptions={{
+            fallback: {
+              html: '<p>Custom fallback content</p>',
+              placeholder: 'Custom fallback placeholder'
+            }
+          }}
+        />
+      </DataProvider>
+    );
+
+    await waitFor(() => {
+      expect(container.innerHTML).toContain('Custom fallback content');
+    });
+  });
+});

package/src/components/__tests__/SafeSpan.simple.test.tsx

@@ -0,0 +1,65 @@
+/**
+ * Simple unit tests for SafeSpan component
+ * Focuses on core functionality without complex data binding scenarios
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SafeSpan from '../SafeSpan';
+
+describe('SafeSpan Simple Tests', () => {
+  
+  describe('Basic Functionality', () => {
+    
+    it('renders simple HTML content', () => {
+      render(<SafeSpan html="<p>Hello World</p>" />);
+      expect(screen.getByText('Hello World')).toBeInTheDocument();
+    });
+
+    it('renders placeholder when html is empty', () => {
+      render(<SafeSpan html="" placeholder="Loading..." />);
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('returns null when both html and placeholder are empty', () => {
+      const { container } = render(<SafeSpan html="" />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('sanitizes script tags', () => {
+      render(<SafeSpan html="<p>Safe</p><script>alert('xss')</script>" />);
+      expect(screen.getByText('Safe')).toBeInTheDocument();
+      expect(document.querySelector('script')).toBeNull();
+    });
+
+    it('preserves safe formatting', () => {
+      render(<SafeSpan html="<p><strong>Bold</strong> and <em>italic</em> text</p>" />);
+      expect(screen.getByText('Bold')).toBeInTheDocument();
+      expect(screen.getByText('italic')).toBeInTheDocument();
+      
+      const boldElement = screen.getByText('Bold');
+      const italicElement = screen.getByText('italic');
+      
+      expect(boldElement.tagName).toBe('STRONG');
+      expect(italicElement.tagName).toBe('EM');
+    });
+
+    it('removes dangerous event handlers', () => {
+      const { container } = render(
+        <SafeSpan html='<p onclick="alert(1)">Click me</p>' />
+      );
+      
+      const paragraph = container.querySelector('p');
+      expect(paragraph).toBeInTheDocument();
+      expect(paragraph).not.toHaveAttribute('onclick');
+    });
+
+    it('works without data binding when no dataSource provided', () => {
+      render(<SafeSpan html="<p>Traditional usage</p>" />);
+      expect(screen.getByText('Traditional usage')).toBeInTheDocument();
+    });
+
+  });
+
+});