@capillarytech/creatives-library 8.0.208 → 8.0.209

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

@@ -0,0 +1,424 @@
+/**
+ * DeviceFrame Tests
+ *
+ * Tests for the DeviceFrame component
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DEVICE_TYPES } from '../../../constants';
+
+// Mock the entire DeviceFrame module to bypass image import issues
+jest.mock('../../../../assets/Android.png', () => 'mocked-android-frame.png');
+jest.mock('../../../../assets/iOS.png', () => 'mocked-ios-frame.png');
+
+// Import after mocking
+import DeviceFrame from '../DeviceFrame';
+
+describe('DeviceFrame', () => {
+  describe('Basic Rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = render(<DeviceFrame />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with default props', () => {
+      const { container } = render(<DeviceFrame />);
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveClass('device-frame');
+      expect(frame).toHaveClass('device-frame--android'); // Default device
+    });
+
+    it('renders children correctly', () => {
+      render(
+        <DeviceFrame>
+          <div data-testid="child-content">Test Content</div>
+        </DeviceFrame>
+      );
+      
+      expect(screen.getByTestId('child-content')).toBeInTheDocument();
+      expect(screen.getByTestId('child-content')).toHaveTextContent('Test Content');
+    });
+
+    it('renders multiple children', () => {
+      render(
+        <DeviceFrame>
+          <div data-testid="child-1">Child 1</div>
+          <div data-testid="child-2">Child 2</div>
+          <div data-testid="child-3">Child 3</div>
+        </DeviceFrame>
+      );
+      
+      expect(screen.getByTestId('child-1')).toBeInTheDocument();
+      expect(screen.getByTestId('child-2')).toBeInTheDocument();
+      expect(screen.getByTestId('child-3')).toBeInTheDocument();
+    });
+  });
+
+  describe('Device Types', () => {
+    it('renders Android frame correctly', () => {
+      const { container } = render(<DeviceFrame device={DEVICE_TYPES.ANDROID} />);
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveClass('device-frame--android');
+      expect(frame.style.backgroundImage).toBeTruthy();
+      expect(frame.style.backgroundImage).toMatch(/url\(/);
+    });
+
+    it('renders iOS frame correctly', () => {
+      const { container } = render(<DeviceFrame device={DEVICE_TYPES.IOS} />);
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveClass('device-frame--ios');
+      expect(frame.style.backgroundImage).toBeTruthy();
+      expect(frame.style.backgroundImage).toMatch(/url\(/);
+    });
+
+    it('defaults to Android when no device specified', () => {
+      const { container } = render(<DeviceFrame />);
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveClass('device-frame--android');
+      expect(frame.style.backgroundImage).toBeTruthy();
+      expect(frame.style.backgroundImage).toMatch(/url\(/);
+    });
+
+    it('handles device type case insensitivity', () => {
+      const { container: androidContainer } = render(
+        <DeviceFrame device={DEVICE_TYPES.ANDROID} />
+      );
+      expect(androidContainer.firstChild).toHaveClass('device-frame--android');
+
+      const { container: iosContainer } = render(
+        <DeviceFrame device={DEVICE_TYPES.IOS} />
+      );
+      expect(iosContainer.firstChild).toHaveClass('device-frame--ios');
+    });
+  });
+
+  describe('Styling', () => {
+    it('applies correct dimensions', () => {
+      const { container } = render(<DeviceFrame />);
+      const frame = container.firstChild;
+      
+      expect(frame.style.width).toBe('450px');
+      expect(frame.style.height).toBe('920px');
+    });
+
+    it('applies unified dimensions for both devices', () => {
+      const { container: androidContainer } = render(
+        <DeviceFrame device={DEVICE_TYPES.ANDROID} />
+      );
+      const androidFrame = androidContainer.firstChild;
+
+      const { container: iosContainer } = render(
+        <DeviceFrame device={DEVICE_TYPES.IOS} />
+      );
+      const iosFrame = iosContainer.firstChild;
+      
+      expect(androidFrame.style.width).toBe(iosFrame.style.width);
+      expect(androidFrame.style.height).toBe(iosFrame.style.height);
+    });
+
+    it('applies background styles correctly', () => {
+      const { container } = render(<DeviceFrame />);
+      const frame = container.firstChild;
+      
+      expect(frame.style.position).toBe('relative');
+      expect(frame.style.display).toBe('inline-block');
+      expect(frame.style.backgroundRepeat).toBe('no-repeat');
+      expect(frame.style.backgroundPosition).toBe('center');
+      expect(frame.style.backgroundSize).toBe('contain');
+    });
+
+    it('applies drop-shadow filter', () => {
+      const { container } = render(<DeviceFrame />);
+      const frame = container.firstChild;
+      
+      expect(frame.style.filter).toContain('drop-shadow');
+      expect(frame.style.filter).toContain('brightness');
+      expect(frame.style.filter).toContain('contrast');
+    });
+
+    it('sets correct background image for Android', () => {
+      const { container } = render(<DeviceFrame device={DEVICE_TYPES.ANDROID} />);
+      const frame = container.firstChild;
+      
+      // Verify background image is set (actual mock value may vary)
+      expect(frame.style.backgroundImage).toBeTruthy();
+      expect(frame.style.backgroundImage).toMatch(/^url\(.+\)$/);
+    });
+
+    it('sets correct background image for iOS', () => {
+      const { container } = render(<DeviceFrame device={DEVICE_TYPES.IOS} />);
+      const frame = container.firstChild;
+      
+      // Verify background image is set (actual mock value may vary)
+      expect(frame.style.backgroundImage).toBeTruthy();
+      expect(frame.style.backgroundImage).toMatch(/^url\(.+\)$/);
+    });
+  });
+
+  describe('Custom Props', () => {
+    it('accepts and applies custom className', () => {
+      const { container } = render(<DeviceFrame className="custom-frame" />);
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveClass('custom-frame');
+      expect(frame).toHaveClass('device-frame'); // Base class still present
+    });
+
+    it('merges multiple classNames correctly', () => {
+      const { container } = render(
+        <DeviceFrame className="custom-class another-class" />
+      );
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveClass('custom-class');
+      expect(frame).toHaveClass('another-class');
+      expect(frame).toHaveClass('device-frame');
+    });
+
+    it('forwards additional props to container', () => {
+      const { container } = render(
+        <DeviceFrame data-testid="custom-frame" aria-label="Device Preview" />
+      );
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveAttribute('data-testid', 'custom-frame');
+      expect(frame).toHaveAttribute('aria-label', 'Device Preview');
+    });
+
+    it('handles onClick event', () => {
+      const handleClick = jest.fn();
+      const { container } = render(<DeviceFrame onClick={handleClick} />);
+      const frame = container.firstChild;
+      
+      frame.click();
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles custom styles via props', () => {
+      const customStyle = { border: '2px solid red' };
+      const { container } = render(<DeviceFrame style={customStyle} />);
+      const frame = container.firstChild;
+      
+      // Note: inline styles from props override component styles
+      expect(frame.style.border).toBe('2px solid red');
+    });
+  });
+
+  describe('PropTypes Validation', () => {
+    // Suppress console errors for these tests
+    const originalError = console.error;
+    beforeAll(() => {
+      console.error = jest.fn();
+    });
+    afterAll(() => {
+      console.error = originalError;
+    });
+
+    it('accepts valid device types', () => {
+      expect(() => {
+        render(<DeviceFrame device={DEVICE_TYPES.ANDROID} />);
+      }).not.toThrow();
+
+      expect(() => {
+        render(<DeviceFrame device={DEVICE_TYPES.IOS} />);
+      }).not.toThrow();
+    });
+
+    it('accepts string className', () => {
+      expect(() => {
+        render(<DeviceFrame className="test-class" />);
+      }).not.toThrow();
+    });
+
+    it('accepts valid children types', () => {
+      expect(() => {
+        render(<DeviceFrame><div>Test</div></DeviceFrame>);
+      }).not.toThrow();
+
+      expect(() => {
+        render(<DeviceFrame>Plain text</DeviceFrame>);
+      }).not.toThrow();
+
+      expect(() => {
+        render(<DeviceFrame>{null}</DeviceFrame>);
+      }).not.toThrow();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('renders without children', () => {
+      const { container } = render(<DeviceFrame />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with null children', () => {
+      const { container } = render(<DeviceFrame>{null}</DeviceFrame>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with undefined children', () => {
+      const { container } = render(<DeviceFrame>{undefined}</DeviceFrame>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with empty string className', () => {
+      const { container } = render(<DeviceFrame className="" />);
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveClass('device-frame');
+    });
+
+    it('renders with fragment children', () => {
+      render(
+        <DeviceFrame>
+          <>
+            <div data-testid="fragment-child-1">Child 1</div>
+            <div data-testid="fragment-child-2">Child 2</div>
+          </>
+        </DeviceFrame>
+      );
+      
+      expect(screen.getByTestId('fragment-child-1')).toBeInTheDocument();
+      expect(screen.getByTestId('fragment-child-2')).toBeInTheDocument();
+    });
+
+    it('handles complex nested children', () => {
+      render(
+        <DeviceFrame>
+          <div>
+            <div>
+              <div data-testid="nested-child">Deeply Nested</div>
+            </div>
+          </div>
+        </DeviceFrame>
+      );
+      
+      expect(screen.getByTestId('nested-child')).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('renders a single root div element', () => {
+      const { container } = render(<DeviceFrame />);
+      
+      expect(container.firstChild.tagName).toBe('DIV');
+      expect(container.children).toHaveLength(1);
+    });
+
+    it('maintains consistent class structure', () => {
+      const { container: androidContainer } = render(
+        <DeviceFrame device={DEVICE_TYPES.ANDROID} className="custom" />
+      );
+      const androidFrame = androidContainer.firstChild;
+      
+      const classes = androidFrame.className.split(' ').filter(c => c);
+      expect(classes).toContain('device-frame');
+      expect(classes).toContain('device-frame--android');
+      expect(classes).toContain('custom');
+    });
+
+    it('applies styles as inline styles object', () => {
+      const { container } = render(<DeviceFrame />);
+      const frame = container.firstChild;
+      
+      // Verify style is an object
+      expect(typeof frame.style).toBe('object');
+      expect(frame.style).not.toBeNull();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('can receive accessibility props', () => {
+      const { container } = render(
+        <DeviceFrame
+          role="img"
+          aria-label="Mobile Device Preview"
+          aria-describedby="device-description"
+        />
+      );
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveAttribute('role', 'img');
+      expect(frame).toHaveAttribute('aria-label', 'Mobile Device Preview');
+      expect(frame).toHaveAttribute('aria-describedby', 'device-description');
+    });
+
+    it('allows custom data attributes', () => {
+      const { container } = render(
+        <DeviceFrame
+          data-device="android"
+          data-testid="device-frame"
+          data-analytics="preview-frame"
+        />
+      );
+      const frame = container.firstChild;
+      
+      expect(frame).toHaveAttribute('data-device', 'android');
+      expect(frame).toHaveAttribute('data-testid', 'device-frame');
+      expect(frame).toHaveAttribute('data-analytics', 'preview-frame');
+    });
+  });
+
+  describe('Integration Scenarios', () => {
+    it('works with ContentOverlay-style content', () => {
+      render(
+        <DeviceFrame device={DEVICE_TYPES.IOS}>
+          <div style={{ width: '100%', height: '100%' }}>
+            <iframe
+              title="preview"
+              srcDoc="<p>Preview Content</p>"
+              data-testid="preview-iframe"
+            />
+          </div>
+        </DeviceFrame>
+      );
+      
+      expect(screen.getByTestId('preview-iframe')).toBeInTheDocument();
+    });
+
+    it('maintains structure when device changes', () => {
+      const { container, rerender } = render(
+        <DeviceFrame device={DEVICE_TYPES.ANDROID}>
+          <div data-testid="content">Content</div>
+        </DeviceFrame>
+      );
+      
+      expect(container.firstChild).toHaveClass('device-frame--android');
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+      
+      rerender(
+        <DeviceFrame device={DEVICE_TYPES.IOS}>
+          <div data-testid="content">Content</div>
+        </DeviceFrame>
+      );
+      
+      expect(container.firstChild).toHaveClass('device-frame--ios');
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+    });
+
+    it('handles dynamic children updates', () => {
+      const { rerender } = render(
+        <DeviceFrame>
+          <div data-testid="dynamic-content">Initial</div>
+        </DeviceFrame>
+      );
+      
+      expect(screen.getByTestId('dynamic-content')).toHaveTextContent('Initial');
+      
+      rerender(
+        <DeviceFrame>
+          <div data-testid="dynamic-content">Updated</div>
+        </DeviceFrame>
+      );
+      
+      expect(screen.getByTestId('dynamic-content')).toHaveTextContent('Updated');
+    });
+  });
+});
+

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

@@ -0,0 +1,248 @@
+/**
+ * LayoutSelector Component Tests
+ *
+ * Tests for the LayoutSelector component that provides layout type selection.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import LayoutSelector from '../LayoutSelector';
+import { LAYOUT_TYPES, LAYOUT_OPTIONS } from '../constants';
+
+describe('LayoutSelector', () => {
+  const defaultProps = {
+    value: LAYOUT_TYPES.MODAL,
+    onChange: jest.fn()
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = render(<LayoutSelector {...defaultProps} />);
+      expect(container.querySelector('.layout-selector')).toBeInTheDocument();
+    });
+
+    it('renders all layout option labels', () => {
+      render(<LayoutSelector {...defaultProps} />);
+
+      expect(screen.getByText('Modal')).toBeInTheDocument();
+      expect(screen.getByText('Top Banner')).toBeInTheDocument();
+      expect(screen.getByText('Bottom Banner')).toBeInTheDocument();
+      expect(screen.getByText('Fullscreen')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const { container } = render(
+        <LayoutSelector {...defaultProps} className="custom-layout-selector" />
+      );
+
+      const selector = container.querySelector('.layout-selector');
+      expect(selector).toHaveClass('custom-layout-selector');
+    });
+
+    it('applies base layout-selector class', () => {
+      const { container } = render(<LayoutSelector {...defaultProps} />);
+      expect(container.querySelector('.layout-selector')).toBeInTheDocument();
+    });
+
+    it('renders radio group with proper structure', () => {
+      const { container } = render(<LayoutSelector {...defaultProps} />);
+
+      const radioGroup = container.querySelector('.layout-selector__radio-group');
+      expect(radioGroup).toBeInTheDocument();
+    });
+  });
+
+  describe('Value Selection', () => {
+    it('renders with MODAL value by default', () => {
+      render(<LayoutSelector onChange={defaultProps.onChange} />);
+
+      // Component should render without error
+      expect(screen.getByText('Modal')).toBeInTheDocument();
+    });
+
+    it('accepts HEADER value', () => {
+      const { container } = render(
+        <LayoutSelector value={LAYOUT_TYPES.HEADER} onChange={defaultProps.onChange} />
+      );
+
+      expect(container.querySelector('.layout-selector')).toBeInTheDocument();
+    });
+
+    it('accepts FOOTER value', () => {
+      const { container } = render(
+        <LayoutSelector value={LAYOUT_TYPES.FOOTER} onChange={defaultProps.onChange} />
+      );
+
+      expect(container.querySelector('.layout-selector')).toBeInTheDocument();
+    });
+
+    it('accepts FULLSCREEN value', () => {
+      const { container } = render(
+        <LayoutSelector value={LAYOUT_TYPES.FULLSCREEN} onChange={defaultProps.onChange} />
+      );
+
+      expect(container.querySelector('.layout-selector')).toBeInTheDocument();
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('calls onChange when a radio button is clicked', () => {
+      const handleChange = jest.fn();
+      const { container } = render(
+        <LayoutSelector value={LAYOUT_TYPES.MODAL} onChange={handleChange} />
+      );
+
+      // Find all radio inputs in the component
+      const radioInputs = container.querySelectorAll('input[type="radio"]');
+
+      // Should have 4 radio buttons (one for each layout type)
+      expect(radioInputs.length).toBe(4);
+
+      // Click the second radio button (Header/Top Banner)
+      if (radioInputs[1]) {
+        fireEvent.click(radioInputs[1]);
+        expect(handleChange).toHaveBeenCalled();
+      }
+    });
+
+    it('handles missing onChange gracefully', () => {
+      // Should not throw error when onChange is not provided
+      expect(() => {
+        render(<LayoutSelector value={LAYOUT_TYPES.MODAL} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('Layout Options', () => {
+    it('renders correct number of options', () => {
+      const { container } = render(<LayoutSelector {...defaultProps} />);
+
+      // Should render 4 layout options
+      const radioInputs = container.querySelectorAll('input[type="radio"]');
+      expect(radioInputs.length).toBe(LAYOUT_OPTIONS.length);
+    });
+
+    it('renders each layout option label', () => {
+      render(<LayoutSelector {...defaultProps} />);
+
+      LAYOUT_OPTIONS.forEach(option => {
+        expect(screen.getByText(option.label)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('CSS Classes', () => {
+    it('applies radio group class', () => {
+      const { container } = render(<LayoutSelector {...defaultProps} />);
+
+      const radioGroup = container.querySelector('.layout-selector__radio-group');
+      expect(radioGroup).toBeInTheDocument();
+    });
+
+    it('combines custom className with base class', () => {
+      const { container } = render(
+        <LayoutSelector {...defaultProps} className="my-custom-class" />
+      );
+
+      const selector = container.querySelector('.layout-selector');
+      expect(selector).toHaveClass('layout-selector');
+      expect(selector).toHaveClass('my-custom-class');
+    });
+  });
+
+  describe('Props Spreading', () => {
+    it('spreads additional props to container', () => {
+      const { container } = render(
+        <LayoutSelector
+          {...defaultProps}
+          data-custom-attr="test-value"
+          id="custom-id"
+        />
+      );
+
+      const selector = container.querySelector('.layout-selector');
+      expect(selector).toHaveAttribute('data-custom-attr', 'test-value');
+      expect(selector).toHaveAttribute('id', 'custom-id');
+    });
+  });
+
+  describe('PropTypes Validation', () => {
+    it('accepts all valid layout type values', () => {
+      const validValues = Object.values(LAYOUT_TYPES);
+
+      validValues.forEach(value => {
+        expect(() => {
+          render(<LayoutSelector value={value} onChange={defaultProps.onChange} />);
+        }).not.toThrow();
+      });
+    });
+
+    it('accepts all valid size values', () => {
+      const validSizes = ['small', 'middle', 'large'];
+
+      validSizes.forEach(size => {
+        expect(() => {
+          render(<LayoutSelector {...defaultProps} size={size} />);
+        }).not.toThrow();
+      });
+    });
+  });
+
+  describe('Integration', () => {
+    it('maintains structure across re-renders', () => {
+      const { container, rerender } = render(
+        <LayoutSelector value={LAYOUT_TYPES.MODAL} onChange={defaultProps.onChange} />
+      );
+
+      expect(container.querySelector('.layout-selector')).toBeInTheDocument();
+
+      rerender(<LayoutSelector value={LAYOUT_TYPES.HEADER} onChange={defaultProps.onChange} />);
+      expect(container.querySelector('.layout-selector')).toBeInTheDocument();
+
+      rerender(<LayoutSelector value={LAYOUT_TYPES.FULLSCREEN} onChange={defaultProps.onChange} />);
+      expect(container.querySelector('.layout-selector')).toBeInTheDocument();
+    });
+
+    it('works with controlled component pattern', () => {
+      const ControlledComponent = () => {
+        const [value, setValue] = React.useState(LAYOUT_TYPES.MODAL);
+
+        return (
+          <div>
+            <div data-testid="current-value">{value}</div>
+            <LayoutSelector value={value} onChange={setValue} />
+          </div>
+        );
+      };
+
+      render(<ControlledComponent />);
+
+      expect(screen.getByTestId('current-value')).toHaveTextContent(LAYOUT_TYPES.MODAL);
+      expect(screen.getByText('Modal')).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('renders with proper DOM hierarchy', () => {
+      const { container } = render(<LayoutSelector {...defaultProps} />);
+
+      const selector = container.querySelector('.layout-selector');
+      expect(selector).toBeInTheDocument();
+
+      const radioGroup = selector.querySelector('.layout-selector__radio-group');
+      expect(radioGroup).toBeInTheDocument();
+    });
+
+    it('contains radio inputs', () => {
+      const { container } = render(<LayoutSelector {...defaultProps} />);
+
+      const radioInputs = container.querySelectorAll('input[type="radio"]');
+      expect(radioInputs.length).toBeGreaterThan(0);
+    });
+  });
+});