@capillarytech/creatives-library 8.0.208 → 8.0.210

package/v2Components/HtmlEditor/components/InAppPreviewPane/__tests__/ContentOverlay.test.js

@@ -0,0 +1,403 @@
+/**
+ * ContentOverlay Tests
+ *
+ * Tests for InApp HTML content overlay component
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ContentOverlay from '../ContentOverlay';
+import { LAYOUT_TYPES } from '../constants';
+import { DEVICE_TYPES } from '../../../constants';
+
+describe('ContentOverlay', () => {
+  describe('Rendering', () => {
+    it('renders without crashing', () => {
+      render(<ContentOverlay />);
+      const overlay = document.querySelector('.content-overlay');
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it('renders with default props', () => {
+      render(<ContentOverlay />);
+      const overlay = document.querySelector('.content-overlay');
+      expect(overlay).toBeInTheDocument();
+      expect(overlay).toHaveClass('content-overlay--popup');
+    });
+
+    it('renders screen area container', () => {
+      render(<ContentOverlay />);
+      const screenArea = document.querySelector('.content-overlay__screen-area');
+      expect(screenArea).toBeInTheDocument();
+    });
+
+    it('applies custom className', () => {
+      render(<ContentOverlay className="custom-class" />);
+      const overlay = document.querySelector('.content-overlay');
+      expect(overlay).toHaveClass('custom-class');
+    });
+  });
+
+  describe('Layout Types', () => {
+    it('renders with MODAL layout type', () => {
+      render(<ContentOverlay layoutType={LAYOUT_TYPES.MODAL} />);
+      const overlay = document.querySelector('.content-overlay');
+      expect(overlay).toHaveClass('content-overlay--popup');
+    });
+
+    it('renders with HEADER layout type', () => {
+      render(<ContentOverlay layoutType={LAYOUT_TYPES.HEADER} />);
+      const overlay = document.querySelector('.content-overlay');
+      expect(overlay).toHaveClass('content-overlay--header');
+    });
+
+    it('renders with FOOTER layout type', () => {
+      render(<ContentOverlay layoutType={LAYOUT_TYPES.FOOTER} />);
+      const overlay = document.querySelector('.content-overlay');
+      expect(overlay).toHaveClass('content-overlay--footer');
+    });
+
+    it('renders with FULLSCREEN layout type', () => {
+      render(<ContentOverlay layoutType={LAYOUT_TYPES.FULLSCREEN} />);
+      const overlay = document.querySelector('.content-overlay');
+      expect(overlay).toHaveClass('content-overlay--fullscreen');
+    });
+  });
+
+  describe('Device Types', () => {
+    it('renders with ANDROID device', () => {
+      render(<ContentOverlay device={DEVICE_TYPES.ANDROID} />);
+      const screenArea = document.querySelector('.content-overlay__screen-area');
+      expect(screenArea).toBeInTheDocument();
+    });
+
+    it('renders with IOS device', () => {
+      render(<ContentOverlay device={DEVICE_TYPES.IOS} />);
+      const screenArea = document.querySelector('.content-overlay__screen-area');
+      expect(screenArea).toBeInTheDocument();
+    });
+
+    it('defaults to ANDROID device when invalid device provided', () => {
+      render(<ContentOverlay device="INVALID" />);
+      const screenArea = document.querySelector('.content-overlay__screen-area');
+      expect(screenArea).toBeInTheDocument();
+    });
+  });
+
+  describe('Empty State', () => {
+    it('shows empty state when no content provided', () => {
+      render(<ContentOverlay />);
+      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
+    });
+
+    it('shows empty state when content is empty string', () => {
+      render(<ContentOverlay content="" />);
+      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
+    });
+
+    it('shows empty state when content is whitespace only', () => {
+      render(<ContentOverlay content="   " />);
+      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
+    });
+
+    it('displays layout type in empty state', () => {
+      render(<ContentOverlay layoutType={LAYOUT_TYPES.MODAL} />);
+      expect(screen.getByText('POPUP')).toBeInTheDocument();
+    });
+
+    it('shows icon in empty state', () => {
+      render(<ContentOverlay />);
+      expect(screen.getByText('📱')).toBeInTheDocument();
+    });
+  });
+
+  describe('Content Rendering', () => {
+    it('renders iframe when content is provided', () => {
+      render(<ContentOverlay content="<p>Test content</p>" />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toBeInTheDocument();
+    });
+
+    it('sets iframe srcDoc with HTML content', () => {
+      const htmlContent = '<p>Hello World</p>';
+      render(<ContentOverlay content={htmlContent} />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('srcDoc', htmlContent);
+    });
+
+    it('sets iframe title', () => {
+      render(<ContentOverlay content="<p>Test</p>" />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('title', 'InApp HTML Preview');
+    });
+
+    it('sets iframe sandbox attribute', () => {
+      render(<ContentOverlay content="<p>Test</p>" />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('sandbox', 'allow-scripts allow-same-origin');
+    });
+
+    it('hides empty state when content is provided', () => {
+      render(<ContentOverlay content="<p>Test</p>" />);
+      expect(screen.queryByText('HTML content will appear here')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('applies screen area positioning styles', () => {
+      render(<ContentOverlay />);
+      const screenArea = document.querySelector('.content-overlay__screen-area');
+      const styles = window.getComputedStyle(screenArea);
+      expect(styles.position).toBe('absolute');
+    });
+
+    it('applies overlay positioning styles', () => {
+      render(<ContentOverlay />);
+      const overlay = document.querySelector('.content-overlay');
+      // Check that the overlay element exists and has the correct CSS class
+      expect(overlay).toBeInTheDocument();
+      expect(overlay).toHaveClass('content-overlay');
+      expect(overlay).toHaveClass('content-overlay--popup'); // default layout type is MODAL which maps to 'popup' class
+
+      // Check that inline styles from getOverlayStyles() are applied
+      const inlineStyles = overlay.style;
+      expect(inlineStyles.top).toBe('50%');
+      expect(inlineStyles.left).toBe('50%');
+      expect(inlineStyles.transform).toBe('translate(-50%, -50%)');
+    });
+
+    it('does not apply inline iframe styles (SCSS-managed)', () => {
+      render(<ContentOverlay content="<p>Test</p>" />);
+      const iframe = document.querySelector('iframe');
+
+      // Verify iframe styling is managed by SCSS, not inline styles
+      // The iframe should have no inline style attribute since all styling
+      // (width: 100%, height: 100%, border: none, display: block, backgroundColor)
+      // is handled via the .content-overlay iframe CSS rule in _inAppPreviewPane.scss
+      expect(iframe.style.cssText).toBe('');
+      expect(iframe.hasAttribute('style')).toBe(false);
+
+      // Ensure no inline style properties are set
+      expect(iframe.style.width).toBe('');
+      expect(iframe.style.height).toBe('');
+      expect(iframe.style.border).toBe('');
+      expect(iframe.style.display).toBe('');
+      expect(iframe.style.backgroundColor).toBe('');
+    });
+  });
+
+  describe('Props Forwarding', () => {
+    it('forwards additional props to overlay container', () => {
+      render(<ContentOverlay data-testid="custom-overlay" />);
+      const overlay = screen.getByTestId('custom-overlay');
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it('forwards aria attributes', () => {
+      render(<ContentOverlay aria-label="Preview overlay" />);
+      const overlay = document.querySelector('.content-overlay');
+      expect(overlay).toHaveAttribute('aria-label', 'Preview overlay');
+    });
+
+    it('forwards data attributes', () => {
+      render(<ContentOverlay data-preview="true" />);
+      const overlay = document.querySelector('.content-overlay');
+      expect(overlay).toHaveAttribute('data-preview', 'true');
+    });
+  });
+
+  describe('Content Variations', () => {
+    it('renders simple HTML content', () => {
+      render(<ContentOverlay content="<p>Simple text</p>" />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('srcDoc', '<p>Simple text</p>');
+    });
+
+    it('renders complex HTML content', () => {
+      const complexHtml = `
+        <div>
+          <h1>Title</h1>
+          <p>Paragraph</p>
+          <button>Click me</button>
+        </div>
+      `;
+      render(<ContentOverlay content={complexHtml} />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('srcDoc', complexHtml);
+    });
+
+    it('renders HTML with inline styles', () => {
+      const styledHtml = '<div style="color: red;">Styled content</div>';
+      render(<ContentOverlay content={styledHtml} />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('srcDoc', styledHtml);
+    });
+
+    it('renders HTML with CSS', () => {
+      const htmlWithCss = '<style>p { color: blue; }</style><p>Blue text</p>';
+      render(<ContentOverlay content={htmlWithCss} />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('srcDoc', htmlWithCss);
+    });
+  });
+
+  describe('Layout Type Combinations', () => {
+    it('renders modal layout with Android device', () => {
+      render(
+        <ContentOverlay
+          layoutType={LAYOUT_TYPES.MODAL}
+          device={DEVICE_TYPES.ANDROID}
+          content="<p>Modal Android</p>"
+        />
+      );
+      const overlay = document.querySelector('.content-overlay--popup');
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it('renders header layout with iOS device', () => {
+      render(
+        <ContentOverlay
+          layoutType={LAYOUT_TYPES.HEADER}
+          device={DEVICE_TYPES.IOS}
+          content="<p>Header iOS</p>"
+        />
+      );
+      const overlay = document.querySelector('.content-overlay--header');
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it('renders footer layout with content', () => {
+      render(
+        <ContentOverlay
+          layoutType={LAYOUT_TYPES.FOOTER}
+          content="<p>Footer content</p>"
+        />
+      );
+      const overlay = document.querySelector('.content-overlay--footer');
+      const iframe = document.querySelector('iframe');
+      expect(overlay).toBeInTheDocument();
+      expect(iframe).toBeInTheDocument();
+    });
+
+    it('renders fullscreen layout with content', () => {
+      render(
+        <ContentOverlay
+          layoutType={LAYOUT_TYPES.FULLSCREEN}
+          content="<p>Fullscreen content</p>"
+        />
+      );
+      const overlay = document.querySelector('.content-overlay--fullscreen');
+      const iframe = document.querySelector('iframe');
+      expect(overlay).toBeInTheDocument();
+      expect(iframe).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles null content', () => {
+      render(<ContentOverlay content={null} />);
+      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
+    });
+
+    it('handles undefined content', () => {
+      render(<ContentOverlay content={undefined} />);
+      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
+    });
+
+    it('handles very long content', () => {
+      const longContent = '<p>' + 'a'.repeat(10000) + '</p>';
+      render(<ContentOverlay content={longContent} />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toBeInTheDocument();
+    });
+
+    it('handles content with special characters', () => {
+      const specialContent = '<p>Special: & < > " \'</p>';
+      render(<ContentOverlay content={specialContent} />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('srcDoc', specialContent);
+    });
+
+    it('handles content with unicode characters', () => {
+      const unicodeContent = '<p>Unicode: 你好 مرحبا 🎉</p>';
+      render(<ContentOverlay content={unicodeContent} />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('srcDoc', unicodeContent);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides iframe title for screen readers', () => {
+      render(<ContentOverlay content="<p>Test</p>" />);
+      const iframe = document.querySelector('iframe');
+      expect(iframe).toHaveAttribute('title');
+    });
+
+    it('empty state is readable', () => {
+      render(<ContentOverlay />);
+      const text = screen.getByText('HTML content will appear here');
+      expect(text).toBeVisible();
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('maintains correct DOM hierarchy', () => {
+      render(<ContentOverlay content="<p>Test</p>" />);
+      const screenArea = document.querySelector('.content-overlay__screen-area');
+      const overlay = document.querySelector('.content-overlay');
+      const iframe = document.querySelector('iframe');
+
+      expect(screenArea).toBeInTheDocument();
+      expect(overlay).toBeInTheDocument();
+      expect(iframe).toBeInTheDocument();
+      expect(overlay.parentElement).toBe(screenArea);
+      expect(iframe.parentElement).toBe(overlay);
+    });
+
+    it('applies correct CSS classes', () => {
+      render(<ContentOverlay layoutType={LAYOUT_TYPES.MODAL} className="custom" />);
+      const overlay = document.querySelector('.content-overlay');
+
+      expect(overlay).toHaveClass('content-overlay');
+      expect(overlay).toHaveClass('content-overlay--popup');
+      expect(overlay).toHaveClass('custom');
+    });
+  });
+
+  describe('PropTypes Validation', () => {
+    // These tests verify the component accepts the expected prop types
+    it('accepts valid layoutType values', () => {
+      const { rerender } = render(<ContentOverlay layoutType={LAYOUT_TYPES.MODAL} />);
+      expect(document.querySelector('.content-overlay')).toBeInTheDocument();
+
+      rerender(<ContentOverlay layoutType={LAYOUT_TYPES.HEADER} />);
+      expect(document.querySelector('.content-overlay')).toBeInTheDocument();
+
+      rerender(<ContentOverlay layoutType={LAYOUT_TYPES.FOOTER} />);
+      expect(document.querySelector('.content-overlay')).toBeInTheDocument();
+
+      rerender(<ContentOverlay layoutType={LAYOUT_TYPES.FULLSCREEN} />);
+      expect(document.querySelector('.content-overlay')).toBeInTheDocument();
+    });
+
+    it('accepts valid device values', () => {
+      const { rerender } = render(<ContentOverlay device={DEVICE_TYPES.ANDROID} />);
+      expect(document.querySelector('.content-overlay')).toBeInTheDocument();
+
+      rerender(<ContentOverlay device={DEVICE_TYPES.IOS} />);
+      expect(document.querySelector('.content-overlay')).toBeInTheDocument();
+    });
+
+    it('accepts string content', () => {
+      render(<ContentOverlay content="String content" />);
+      expect(document.querySelector('iframe')).toBeInTheDocument();
+    });
+
+    it('accepts string className', () => {
+      render(<ContentOverlay className="test-class" />);
+      expect(document.querySelector('.test-class')).toBeInTheDocument();
+    });
+  });
+});
+