@qwickapps/react-framework 1.3.0

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

@@ -0,0 +1,463 @@
+/**
+ * Unit tests for HeroBlock component
+ * 
+ * Tests both traditional props usage and data binding functionality
+ * with the new schema system.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import HeroBlock from '../blocks/HeroBlock';
+import type { ButtonProps } from '../buttons/Button';
+import { DataProvider } from '../../contexts/DataContext';
+import { JsonDataProvider } from '@qwickapps/schema';
+import { ThemeProvider, PaletteProvider } from '../../contexts';
+
+// Test data for data binding
+const sampleCmsData = {
+  'hero.main': [{
+    title: 'Welcome to QwickApps',
+    subtitle: 'Build amazing applications faster with our comprehensive framework',
+    backgroundImage: '/images/hero-bg.jpg',
+    backgroundColor: 'primary',
+    actions: [
+      { label: 'Get Started', variant: 'primary', buttonSize: 'large', href: '/getting-started' },
+      { label: 'View Documentation', variant: 'outlined', buttonSize: 'large', href: '/docs' }
+    ],
+    textAlign: 'center',
+    blockHeight: 'large',
+    overlayOpacity: 0.6
+  }],
+  'hero.startup': [{
+    title: 'Launch Your Startup',
+    subtitle: 'From idea to production in days, not months',
+    backgroundColor: 'secondary',
+    actions: [
+      { label: 'Start Building', variant: 'contained', buttonSize: 'large' }
+    ],
+    textAlign: 'left',
+    blockHeight: 'medium'
+  }],
+  'hero.minimal': [{
+    title: 'Simple & Powerful',
+    backgroundColor: 'default',
+    textAlign: 'center',
+    blockHeight: 'small'
+  }],
+  'hero.empty': [{}]
+};
+
+// Sample actions for testing
+const sampleActions: ButtonProps[] = [
+  { label: 'Primary Action', variant: 'primary', buttonSize: 'large' },
+  { label: 'Secondary Action', variant: 'outlined', buttonSize: 'medium', href: '/docs' },
+  { label: 'Text Action', variant: 'text', onClick: 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('HeroBlock', () => {
+  describe.skip('Traditional Props Usage', () => {
+    it('renders basic hero with title only', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock title="Welcome" />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Welcome')).toBeInTheDocument();
+      const heroSection = document.querySelector('section');
+      expect(heroSection).toBeInTheDocument();
+    });
+
+    it('renders hero with title and subtitle', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Welcome to QwickApps"
+            subtitle="Build amazing applications faster"
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Welcome to QwickApps')).toBeInTheDocument();
+      expect(screen.getByText('Build amazing applications faster')).toBeInTheDocument();
+    });
+
+    it('renders hero with actions', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Hero with Actions"
+            actions={sampleActions}
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Hero with Actions')).toBeInTheDocument();
+      expect(screen.getByText('Primary Action')).toBeInTheDocument();
+      expect(screen.getByText('Secondary Action')).toBeInTheDocument();
+      expect(screen.getByText('Text Action')).toBeInTheDocument();
+    });
+
+    it('handles different background colors', () => {
+      const backgroundColors = ['default', 'primary', 'secondary', 'surface'] as const;
+      
+      backgroundColors.forEach(color => {
+        const { unmount } = render(
+          <TestWrapper>
+            <HeroBlock 
+              title={`Hero with ${color} background`}
+              backgroundColor={color}
+            />
+          </TestWrapper>
+        );
+
+        expect(screen.getByText(`Hero with ${color} background`)).toBeInTheDocument();
+        
+        unmount();
+      });
+    });
+
+    it('handles different text alignments', () => {
+      const alignments = ['left', 'center', 'right'] as const;
+      
+      alignments.forEach(alignment => {
+        const { unmount } = render(
+          <TestWrapper>
+            <HeroBlock 
+              title={`${alignment} aligned hero`}
+              textAlign={alignment}
+            />
+          </TestWrapper>
+        );
+
+        expect(screen.getByText(`${alignment} aligned hero`)).toBeInTheDocument();
+        
+        unmount();
+      });
+    });
+
+    it('handles different block heights', () => {
+      const heights = ['small', 'medium', 'large', 'viewport'] as const;
+      
+      heights.forEach(height => {
+        const { unmount } = render(
+          <TestWrapper>
+            <HeroBlock 
+              title={`${height} height hero`}
+              blockHeight={height}
+            />
+          </TestWrapper>
+        );
+
+        expect(screen.getByText(`${height} height hero`)).toBeInTheDocument();
+        
+        unmount();
+      });
+    });
+
+    it('renders hero with background image', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Hero with Background"
+            backgroundImage="/images/hero.jpg"
+            overlayOpacity={0.8}
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Hero with Background')).toBeInTheDocument();
+    });
+
+    it('renders hero with background gradient', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Hero with Gradient"
+            backgroundGradient="linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Hero with Gradient')).toBeInTheDocument();
+    });
+
+    it('handles action click events', () => {
+      const handleClick = jest.fn();
+      const actionsWithClick: ButtonProps[] = [
+        { label: 'Click Me', onClick: handleClick }
+      ];
+
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Hero with Click"
+            actions={actionsWithClick}
+          />
+        </TestWrapper>
+      );
+
+      const button = screen.getByText('Click Me');
+      fireEvent.click(button);
+      
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('supports grid props', () => {
+      const { container } = render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Hero with Grid"
+            span={12}
+            xs={12}
+            md={8}
+          />
+        </TestWrapper>
+      );
+
+      const element = container.querySelector('[data-grid-span]');
+      expect(element).toHaveAttribute('data-grid-span', '12');
+      expect(element).toBeInTheDocument();
+    });
+
+    it('renders with custom CSS classes and styles', () => {
+      const { container } = render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Custom Hero"
+            className="custom-hero"
+            sx={{ backgroundColor: 'red' }}
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Custom Hero')).toBeInTheDocument();
+    });
+
+    it('renders with additional children content', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock title="Hero with Children">
+            <div>Additional content</div>
+            <p>More details here</p>
+          </HeroBlock>
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Hero with Children')).toBeInTheDocument();
+      expect(screen.getByText('Additional content')).toBeInTheDocument();
+      expect(screen.getByText('More details here')).toBeInTheDocument();
+    });
+  });
+
+  describe.skip('Data Binding Usage', () => {
+    let dataProvider: JsonDataProvider;
+
+    beforeEach(() => {
+      dataProvider = new JsonDataProvider({ data: sampleCmsData });
+    });
+
+    it('renders with dataSource prop (main hero)', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <HeroBlock dataSource="hero.main" />
+        </TestWrapper>
+      );
+
+      await screen.findByText('Welcome to QwickApps');
+      expect(screen.getByText('Build amazing applications faster with our comprehensive framework')).toBeInTheDocument();
+      expect(screen.getByText('Get Started')).toBeInTheDocument();
+      expect(screen.getByText('View Documentation')).toBeInTheDocument();
+    });
+
+    it('renders with dataSource prop (startup hero)', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <HeroBlock dataSource="hero.startup" />
+        </TestWrapper>
+      );
+
+      await screen.findByText('Launch Your Startup');
+      expect(screen.getByText('From idea to production in days, not months')).toBeInTheDocument();
+      expect(screen.getByText('Start Building')).toBeInTheDocument();
+    });
+
+    it('shows loading state while data is loading', () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <HeroBlock dataSource="hero.nonexistent" />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Loading Hero...')).toBeInTheDocument();
+    });
+
+    it('uses fallback props when dataSource has no content', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <HeroBlock 
+            dataSource="nonexistent.hero"
+            title="Fallback Title"
+            subtitle="Fallback Subtitle"
+          />
+        </TestWrapper>
+      );
+
+      await screen.findByText('Fallback Title');
+      expect(screen.getByText('Fallback Subtitle')).toBeInTheDocument();
+    });
+
+    it('handles minimal hero from data', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <HeroBlock dataSource="hero.minimal" />
+        </TestWrapper>
+      );
+
+      await screen.findByText('Simple & Powerful');
+    });
+
+    it('works with custom binding options', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <HeroBlock 
+            dataSource="hero.main"
+            bindingOptions={{ cache: false, strict: true }}
+          />
+        </TestWrapper>
+      );
+
+      await screen.findByText('Welcome to QwickApps');
+    });
+
+    it('handles empty data from CMS', async () => {
+      render(
+        <TestWrapper dataProvider={dataProvider}>
+          <HeroBlock 
+            dataSource="hero.empty"
+            title="Fallback for Empty Data"
+          />
+        </TestWrapper>
+      );
+
+      await screen.findByText('Fallback for Empty Data');
+    });
+  });
+
+  describe.skip('Edge Cases', () => {
+    it('handles hero without title gracefully', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            subtitle="Subtitle only hero"
+            backgroundColor="default"
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Subtitle only hero')).toBeInTheDocument();
+    });
+
+    it('handles empty actions array', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Hero without actions"
+            actions={[]}
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Hero without actions')).toBeInTheDocument();
+    });
+
+    it('handles very long title and subtitle', () => {
+      const longTitle = 'Very '.repeat(20) + 'Long Hero Title';
+      const longSubtitle = 'Very '.repeat(30) + 'Long Hero Subtitle';
+
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title={longTitle}
+            subtitle={longSubtitle}
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText(longTitle)).toBeInTheDocument();
+      expect(screen.getByText(longSubtitle)).toBeInTheDocument();
+    });
+
+    it('handles special characters in content', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title={'Special: &<>"\' Characters'}
+            subtitle={'Subtitle with & < > " \' chars'}
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText(/Special:.*Characters/)).toBeInTheDocument();
+      expect(screen.getByText(/Subtitle with.*chars/)).toBeInTheDocument();
+    });
+
+    it('handles extreme overlay opacity values', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Extreme Overlay"
+            backgroundImage="/test.jpg"
+            overlayOpacity={0}
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Extreme Overlay')).toBeInTheDocument();
+    });
+
+    it('handles invalid blockHeight values by using default', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock 
+            title="Default Height Hero"
+            // @ts-expect-error Testing invalid value
+            blockHeight="invalid"
+          />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Default Height Hero')).toBeInTheDocument();
+    });
+
+    it('handles hero without any props', () => {
+      render(
+        <TestWrapper>
+          <HeroBlock />
+        </TestWrapper>
+      );
+
+      const heroSection = document.querySelector('section');
+      expect(heroSection).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,174 @@
+/**
+ * Html Component Tests
+ */
+
+import { render, screen } from '@testing-library/react';
+import { Html } from '../Html';
+
+describe('Html Component', () => {
+  // Test empty content handling
+  describe('Empty Content', () => {
+    it('renders nothing when children is empty', () => {
+      const { container } = render(<Html>{''}</Html>);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders placeholder when children is empty and placeholder is provided', () => {
+      render(<Html placeholder="No content available">{''}</Html>);
+      expect(screen.getByText('No content available')).toBeInTheDocument();
+    });
+
+    it('renders placeholder with proper styling', () => {
+      render(<Html placeholder="Loading content...">{''}</Html>);
+      const placeholder = screen.getByText('Loading content...');
+      expect(placeholder).toBeInTheDocument();
+    });
+  });
+
+  // Test basic HTML rendering
+  describe('Basic HTML Rendering', () => {
+    it('renders simple HTML content', () => {
+      render(<Html>{'<p>Hello World</p>'}</Html>);
+      expect(screen.getByText('Hello World')).toBeInTheDocument();
+    });
+
+    it('renders multiple paragraphs', () => {
+      const html = '<p>First paragraph</p><p>Second paragraph</p>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByText('First paragraph')).toBeInTheDocument();
+      expect(screen.getByText('Second paragraph')).toBeInTheDocument();
+    });
+
+    it('handles headers correctly', () => {
+      const html = '<h1>Main Title</h1><h2>Subtitle</h2>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Main Title');
+      expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('Subtitle');
+    });
+  });
+
+  // Test code transformation
+  describe('Code Block Transformation', () => {
+    it('transforms pre+code blocks to Code component', () => {
+      const html = '<pre><code class="language-javascript">console.log("Hello");</code></pre>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByText('console.log("Hello");')).toBeInTheDocument();
+    });
+
+    it('handles code blocks without language class', () => {
+      const html = '<pre><code>plain text code</code></pre>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByText('plain text code')).toBeInTheDocument();
+    });
+
+    it('transforms standalone complex code blocks', () => {
+      const html = '<code>line1\nline2</code>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByText(/line1/)).toBeInTheDocument();
+      expect(screen.getByText(/line2/)).toBeInTheDocument();
+    });
+
+    it('preserves inline code elements', () => {
+      const html = '<p>This has <code>inline code</code> in it.</p>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByText('inline code')).toBeInTheDocument();
+      // SafeSpan wraps the p tag content, so we check the combination
+      const paragraph = screen.getByText('inline code').closest('p');
+      expect(paragraph).toBeInTheDocument();
+    });
+  });
+
+  // Test section transformation
+  describe('Section Transformation', () => {
+    it('transforms blog sections to Section component', () => {
+      const html = '<section class="blog-section" data-padding="large"><h2>Section Title</h2><p>Content</p></section>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByText('Section Title')).toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+
+    it('handles sections without titles', () => {
+      const html = '<section class="blog-section"><p>Just content</p></section>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByText('Just content')).toBeInTheDocument();
+    });
+  });
+
+  // Test button transformation
+  describe('Button Transformation', () => {
+    it('transforms button elements to Button components', () => {
+      const html = '<button data-variant="contained">Click Me</button>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByRole('button')).toHaveTextContent('Click Me');
+    });
+
+    it('handles disabled buttons', () => {
+      const html = '<button disabled>Disabled Button</button>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+  });
+
+  // Test header stripping
+  describe('Header Stripping', () => {
+    it('strips headers when stripHeaders is true', () => {
+      const html = '<header class="blog-header"><h1>Page Title</h1></header><p>Content</p>';
+      render(<Html stripHeaders>{html}</Html>);
+      expect(screen.queryByText('Page Title')).not.toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+
+    it('preserves headers when stripHeaders is false', () => {
+      const html = '<header class="blog-header"><h1>Page Title</h1></header><p>Content</p>';
+      render(<Html stripHeaders={false}>{html}</Html>);
+      expect(screen.getByText('Page Title')).toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+  });
+
+  // Test error handling
+  describe('Error Handling', () => {
+    it('handles malformed HTML gracefully', () => {
+      const html = '<p>Unclosed paragraph<div>Mixed content</p></div>';
+      const { container } = render(<Html>{html}</Html>);
+      expect(container.firstChild).not.toBeNull();
+    });
+
+    it('sanitizes dangerous content by default', () => {
+      const html = '<script>alert("hack")</script><p>Safe content</p>';
+      render(<Html>{html}</Html>);
+      expect(screen.getByText('Safe content')).toBeInTheDocument();
+      expect(screen.queryByText('alert("hack")')).not.toBeInTheDocument();
+    });
+  });
+
+  // Test custom props
+  describe('Custom Props', () => {
+    it('accepts custom component prop', () => {
+      const { container } = render(<Html component="article">{'<p>Content</p>'}</Html>);
+      expect(container.firstChild?.nodeName).toBe('ARTICLE');
+    });
+
+    it('accepts custom className', () => {
+      const { container } = render(<Html className="custom-html">{'<p>Content</p>'}</Html>);
+      expect(container.firstChild).toHaveClass('custom-html');
+    });
+
+    it('accepts custom styles', () => {
+      const { container } = render(
+        <Html sx={{ backgroundColor: 'red' }}>{'<p>Content</p>'}</Html>
+      );
+      expect(container.firstChild).toHaveClass('MuiBox-root');
+    });
+  });
+
+  // Test sanitization options
+  describe('Sanitization', () => {
+    it('can disable sanitization', () => {
+      // Note: This test verifies the prop is accepted; actual script execution is browser-dependent
+      const html = '<p onmouseover="alert(\'test\')">Hover me</p>';
+      render(<Html sanitize={false}>{html}</Html>);
+      expect(screen.getByText('Hover me')).toBeInTheDocument();
+    });
+  });
+});