@capillarytech/creatives-library 8.0.242-alpha.1 → 8.0.242-alpha.11

package/v2Containers/WebPush/Create/preview/tests/DevicePreviewContent.test.js

@@ -0,0 +1,909 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithIntl, shallowWithIntl } from '../../../../../helpers/intl-enzym-test-helpers';
+import DevicePreviewContent from '../DevicePreviewContent';
+import PreviewControls from '../PreviewControls';
+import NotificationContainer from '../NotificationContainer';
+import {
+  OS_MACOS,
+  OS_IOS,
+  OS_IPADOS,
+  OS_WINDOWS,
+  OS_ANDROID_MOBILE,
+  OS_ANDROID_TABLET,
+  BROWSER_CHROME,
+  BROWSER_FIREFOX,
+  BROWSER_EDGE,
+  BROWSER_SAFARI,
+  BROWSER_OPERA,
+  NOTIFICATION_STATE_COLLAPSED,
+  NOTIFICATION_STATE_EXPANDED,
+  DEFAULT_OS,
+  DEFAULT_BROWSER,
+  DEFAULT_STATE,
+} from '../constants';
+import {
+  getBrowserOptionsForOS,
+  getResolvedVariant,
+  coerceStateForVariant,
+  getSupportedStates,
+} from '../config/notificationMappings';
+
+// Mock PreviewControls to avoid complex CapSelect interactions
+jest.mock('../PreviewControls', () => {
+  const React = require('react');
+  return function MockPreviewControls({
+    selectedOS,
+    selectedBrowser,
+    selectedState,
+    onOSChange,
+    onBrowserChange,
+    onStateChange,
+  }) {
+    return (
+      <div className="mock-preview-controls">
+        <button
+          className="mock-os-change"
+          onClick={() => onOSChange && onOSChange('Windows')}
+          data-testid="mock-os-change"
+        >
+          Change OS
+        </button>
+        <button
+          className="mock-browser-change"
+          onClick={() => onBrowserChange && onBrowserChange('Firefox')}
+          data-testid="mock-browser-change"
+        >
+          Change Browser
+        </button>
+        <button
+          className="mock-state-change"
+          onClick={() => onStateChange && onStateChange('Expanded')}
+          data-testid="mock-state-change"
+        >
+          Change State
+        </button>
+        <div data-testid="selected-os">{selectedOS}</div>
+        <div data-testid="selected-browser">{selectedBrowser}</div>
+        <div data-testid="selected-state">{selectedState}</div>
+      </div>
+    );
+  };
+});
+
+// Mock NotificationContainer to focus on DevicePreviewContent logic
+jest.mock('../NotificationContainer', () => {
+  const React = require('react');
+  return function MockNotificationContainer({ notificationTitle, notificationBody }) {
+    return (
+      <div className="mock-notification-container">
+        <div className="notification-title">{notificationTitle}</div>
+        <div className="notification-body">{notificationBody}</div>
+      </div>
+    );
+  };
+});
+
+describe('DevicePreviewContent', () => {
+  const defaultProps = {
+    notificationTitle: 'Test Notification Title',
+    notificationBody: 'Test notification body text',
+    url: 'https://www.example.com',
+    imageSrc: 'https://example.com/image.jpg',
+    brandIconSrc: 'https://example.com/icon.png',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Basic Rendering', () => {
+    it('should render correctly with default props', () => {
+      const wrapper = shallowWithIntl(<DevicePreviewContent {...defaultProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render with minimal props', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent />);
+      expect(wrapper.exists()).toBe(true);
+    });
+
+    it('should render PreviewControls with correct props', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const previewControls = wrapper.find(PreviewControls);
+      expect(previewControls.exists()).toBe(true);
+      expect(previewControls.prop('selectedOS')).toBe(DEFAULT_OS);
+      expect(previewControls.prop('selectedBrowser')).toBe(DEFAULT_BROWSER);
+      expect(previewControls.prop('selectedState')).toBe(DEFAULT_STATE);
+      expect(previewControls.prop('layoutMode')).toBe('compact');
+      expect(previewControls.prop('showStateDropdown')).toBe(true);
+    });
+
+    it('should render device frame container', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const container = wrapper.find('.device-preview-container');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('should render device frame wrapper', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const frameWrapper = wrapper.find('.device-frame-wrapper');
+      expect(frameWrapper.exists()).toBe(true);
+    });
+
+    it('should render device frame image', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const frameImage = wrapper.find('.device-frame');
+      expect(frameImage.exists()).toBe(true);
+      expect(frameImage.prop('alt')).toContain(DEFAULT_OS);
+    });
+  });
+
+  describe('Initial State', () => {
+    it('should initialize with default OS, browser, and state', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const controls = wrapper.find(PreviewControls);
+      expect(controls.prop('selectedOS')).toBe(DEFAULT_OS);
+      expect(controls.prop('selectedBrowser')).toBe(DEFAULT_BROWSER);
+      expect(controls.prop('selectedState')).toBe(DEFAULT_STATE);
+    });
+  });
+
+  describe('OS Selection and Browser Options', () => {
+    it('should update OS when handleOSChange is called', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const controls = wrapper.find(PreviewControls);
+      
+      // Simulate OS change
+      act(() => {
+        controls.prop('onOSChange')(OS_WINDOWS);
+      });
+      wrapper.update();
+      
+      const updatedControls = wrapper.find(PreviewControls);
+      expect(updatedControls.prop('selectedOS')).toBe(OS_WINDOWS);
+    });
+
+    it('should filter browser options based on selected OS', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      // macOS should have all browsers including Safari
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+      });
+      wrapper.update();
+      let browserOptions = wrapper.find(PreviewControls).prop('browserOptions');
+      expect(browserOptions.some(opt => opt.value === BROWSER_SAFARI)).toBe(true);
+      
+      // Windows should not have Safari
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
+      });
+      wrapper.update();
+      browserOptions = wrapper.find(PreviewControls).prop('browserOptions');
+      expect(browserOptions.some(opt => opt.value === BROWSER_SAFARI)).toBe(false);
+    });
+
+    it('should coerce browser when OS changes to unsupported browser', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      // Start with macOS and Safari
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_SAFARI);
+      });
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_SAFARI);
+      
+      // Change to Windows (Safari not supported)
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
+      });
+      wrapper.update();
+      
+      // Browser should be coerced to first available option (Chrome)
+      const browserOptions = getBrowserOptionsForOS(OS_WINDOWS);
+      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(browserOptions[0].value);
+    });
+
+    it('should handle OS change for iOS', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);
+
+      });
+
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedOS')).toBe(OS_IOS);
+    });
+
+    it('should handle OS change for iPadOS', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_IPADOS);
+
+      });
+
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedOS')).toBe(OS_IPADOS);
+    });
+
+    it('should handle OS change for Android Mobile', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_ANDROID_MOBILE);
+
+      });
+
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedOS')).toBe(OS_ANDROID_MOBILE);
+    });
+
+    it('should handle OS change for Android Tablet', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_ANDROID_TABLET);
+
+      });
+
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedOS')).toBe(OS_ANDROID_TABLET);
+    });
+  });
+
+  describe('Browser Selection', () => {
+    it('should update browser when handleBrowserChange is called', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const controls = wrapper.find(PreviewControls);
+      
+      act(() => {
+
+      
+        controls.prop('onBrowserChange')(BROWSER_FIREFOX);
+
+      
+      });
+
+      
+      wrapper.update();
+      
+      const updatedControls = wrapper.find(PreviewControls);
+      expect(updatedControls.prop('selectedBrowser')).toBe(BROWSER_FIREFOX);
+    });
+
+    it('should handle browser change for Chrome', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+
+      });
+
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_CHROME);
+    });
+
+    it('should handle browser change for Firefox', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_FIREFOX);
+
+      });
+
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_FIREFOX);
+    });
+
+    it('should handle browser change for Edge', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_EDGE);
+
+      });
+
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_EDGE);
+    });
+
+    it('should handle browser change for Opera', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_OPERA);
+
+      });
+
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_OPERA);
+    });
+  });
+
+  describe('State Selection and Coercion', () => {
+    it('should update state when handleStateChange is called', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const controls = wrapper.find(PreviewControls);
+      
+      // Set up macOS Chrome which supports Expanded
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      });
+      wrapper.update();
+      
+      act(() => {
+
+      
+        controls.prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);
+
+      
+      });
+
+      
+      wrapper.update();
+      
+      const updatedControls = wrapper.find(PreviewControls);
+      expect(updatedControls.prop('selectedState')).toBe(NOTIFICATION_STATE_EXPANDED);
+    });
+
+    it('should coerce state when OS/Browser combination does not support current state', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      // Set up macOS Chrome with Expanded state
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);
+      });
+      wrapper.update();
+      expect(wrapper.find(PreviewControls).prop('selectedState')).toBe(NOTIFICATION_STATE_EXPANDED);
+      
+      // Change to iOS Chrome which only supports Collapsed
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      });
+      wrapper.update();
+      
+      // State should be coerced to Collapsed
+      expect(wrapper.find(PreviewControls).prop('selectedState')).toBe(NOTIFICATION_STATE_COLLAPSED);
+    });
+
+    it('should filter state options based on OS/Browser combination', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      // macOS Chrome supports both Collapsed and Expanded
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      });
+      wrapper.update();
+      let stateOptions = wrapper.find(PreviewControls).prop('stateOptions');
+      expect(stateOptions.length).toBeGreaterThanOrEqual(1);
+      expect(stateOptions.some(opt => opt.value === NOTIFICATION_STATE_COLLAPSED)).toBe(true);
+      
+      // iOS Chrome only supports Collapsed
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      });
+      wrapper.update();
+      stateOptions = wrapper.find(PreviewControls).prop('stateOptions');
+      expect(stateOptions.some(opt => opt.value === NOTIFICATION_STATE_COLLAPSED)).toBe(true);
+    });
+  });
+
+  describe('Device Frame Asset Selection', () => {
+    it('should use topSvg for macOS', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+
+      });
+
+      wrapper.update();
+      
+      const frameImage = wrapper.find('.device-frame');
+      expect(frameImage.prop('src')).toBeDefined();
+      expect(frameImage.prop('alt')).toContain(OS_MACOS);
+    });
+
+    it('should use topSvg for Windows', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
+
+      });
+
+      wrapper.update();
+      
+      const frameImage = wrapper.find('.device-frame');
+      expect(frameImage.prop('src')).toBeDefined();
+      expect(frameImage.prop('alt')).toContain(OS_WINDOWS);
+    });
+
+    it('should use iosSvg for iOS', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);
+
+      });
+
+      wrapper.update();
+      
+      const frameImage = wrapper.find('.device-frame');
+      expect(frameImage.prop('src')).toBeDefined();
+      expect(frameImage.prop('alt')).toContain(OS_IOS);
+    });
+
+    it('should use iosSvg for Android Mobile', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_ANDROID_MOBILE);
+
+      });
+
+      wrapper.update();
+      
+      const frameImage = wrapper.find('.device-frame');
+      expect(frameImage.prop('src')).toBeDefined();
+      expect(frameImage.prop('alt')).toContain(OS_ANDROID_MOBILE);
+    });
+
+    it('should use lightSvg for iPadOS', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_IPADOS);
+
+      });
+
+      wrapper.update();
+      
+      const frameImage = wrapper.find('.device-frame');
+      expect(frameImage.prop('src')).toBeDefined();
+      expect(frameImage.prop('alt')).toContain(OS_IPADOS);
+    });
+
+    it('should use lightSvg for Android Tablet', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_ANDROID_TABLET);
+
+      });
+
+      wrapper.update();
+      
+      const frameImage = wrapper.find('.device-frame');
+      expect(frameImage.prop('src')).toBeDefined();
+      expect(frameImage.prop('alt')).toContain(OS_ANDROID_TABLET);
+    });
+
+    it('should fallback to topSvg for unknown OS', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      // Force an unknown OS by directly calling the handler with invalid value
+      // This tests the fallback in DEVICE_ASSET_MAP
+      const frameImage = wrapper.find('.device-frame');
+      expect(frameImage.prop('src')).toBeDefined();
+    });
+  });
+
+  describe('Notification Position Calculation', () => {
+    it('should calculate position from variant configuration for macOS Chrome Collapsed', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);
+
+      });
+
+      wrapper.update();
+      
+      const resolvedVariant = getResolvedVariant(OS_MACOS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
+      const expectedPosition = resolvedVariant?.stateConfig?.position?.custom || { x: 0, y: 0 };
+      
+      const notificationWrapper = wrapper.find('.device-notification-wrapper');
+      const style = notificationWrapper.prop('style');
+      expect(style.left).toBe(`${expectedPosition.x}px`);
+      expect(style.top).toBe(`${expectedPosition.y}px`);
+    });
+
+    it('should calculate position from variant configuration for macOS Chrome Expanded', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);
+
+      });
+
+      wrapper.update();
+      
+      const resolvedVariant = getResolvedVariant(OS_MACOS, BROWSER_CHROME, NOTIFICATION_STATE_EXPANDED);
+      const expectedPosition = resolvedVariant?.stateConfig?.position?.custom || { x: 0, y: 0 };
+      
+      const notificationWrapper = wrapper.find('.device-notification-wrapper');
+      const style = notificationWrapper.prop('style');
+      expect(style.left).toBe(`${expectedPosition.x}px`);
+      expect(style.top).toBe(`${expectedPosition.y}px`);
+    });
+
+    it('should calculate position with bottom property for Windows Chrome', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
+      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);
+
+      });
+
+      wrapper.update();
+      
+      const resolvedVariant = getResolvedVariant(OS_WINDOWS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
+      const expectedPosition = resolvedVariant?.stateConfig?.position?.custom || { x: 0, y: 0 };
+      
+      const notificationWrapper = wrapper.find('.device-notification-wrapper');
+      const style = notificationWrapper.prop('style');
+      expect(style.left).toBe(`${expectedPosition.x}px`);
+      if (expectedPosition.bottom !== undefined) {
+        expect(style.bottom).toBe(`${expectedPosition.bottom}px`);
+        expect(style.top).toBeUndefined();
+      } else {
+        expect(style.top).toBe(`${expectedPosition.y || 0}px`);
+      }
+    });
+
+    it('should use fallback position (0, 0) when variant has no position config', () => {
+      // This tests the fallback when position.custom is not defined
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      const notificationWrapper = wrapper.find('.device-notification-wrapper');
+      const style = notificationWrapper.prop('style');
+      expect(style.left).toBeDefined();
+      expect(style.top !== undefined || style.bottom !== undefined).toBe(true);
+    });
+
+    it('should update position when OS changes', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      // macOS Chrome position
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      });
+      wrapper.update();
+      const position1 = wrapper.find('.device-notification-wrapper').prop('style');
+      
+      // Windows Chrome position (uses bottom instead of top)
+      act(() => {
+        wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      });
+      wrapper.update();
+      const position2 = wrapper.find('.device-notification-wrapper').prop('style');
+      
+      // Both should have valid positions calculated
+      expect(position1.left).toBeDefined();
+      expect(position2.left).toBeDefined();
+      // Windows uses bottom positioning, macOS uses top - verify the difference
+      expect(position1.top !== undefined || position1.bottom !== undefined).toBe(true);
+      expect(position2.top !== undefined || position2.bottom !== undefined).toBe(true);
+      // macOS should use top, Windows should use bottom
+      const resolvedVariant1 = getResolvedVariant(OS_MACOS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
+      const resolvedVariant2 = getResolvedVariant(OS_WINDOWS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
+      if (resolvedVariant1?.stateConfig?.position?.custom?.bottom === undefined &&
+          resolvedVariant2?.stateConfig?.position?.custom?.bottom !== undefined) {
+        // macOS uses top, Windows uses bottom
+        expect(position1.top).toBeDefined();
+        expect(position2.bottom).toBeDefined();
+      }
+    });
+
+    it('should update position when browser changes', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+
+      });
+
+      wrapper.update();
+      const position1 = wrapper.find('.device-notification-wrapper').prop('style');
+      
+      act(() => {
+
+      
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_FIREFOX);
+
+      
+      });
+
+      
+      wrapper.update();
+      const position2 = wrapper.find('.device-notification-wrapper').prop('style');
+      
+      // Both should have valid positions
+      expect(position1.left).toBeDefined();
+      expect(position2.left).toBeDefined();
+    });
+
+    it('should update position when state changes', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);
+
+      });
+
+      wrapper.update();
+      const position1 = wrapper.find('.device-notification-wrapper').prop('style');
+      
+      act(() => {
+
+      
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);
+
+      
+      });
+
+      
+      wrapper.update();
+      const position2 = wrapper.find('.device-notification-wrapper').prop('style');
+      
+      // Both should have valid positions
+      expect(position1.left).toBeDefined();
+      expect(position2.left).toBeDefined();
+    });
+  });
+
+  describe('NotificationContainer Rendering', () => {
+    it('should render NotificationContainer when variant is resolved', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+
+      });
+
+      wrapper.update();
+      
+      const notificationContainer = wrapper.find(NotificationContainer);
+      expect(notificationContainer.exists()).toBe(true);
+    });
+
+    it('should not render NotificationContainer when variant is not resolved', () => {
+      // Use an unsupported combination if any exists
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      // Check that NotificationContainer is rendered for default (macOS Chrome)
+      const notificationContainer = wrapper.find(NotificationContainer);
+      expect(notificationContainer.exists()).toBe(true);
+    });
+
+    it('should pass correct props to NotificationContainer', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);
+
+      });
+
+      wrapper.update();
+      
+      const notificationContainer = wrapper.find(NotificationContainer);
+      expect(notificationContainer.prop('notificationTitle')).toBe(defaultProps.notificationTitle);
+      expect(notificationContainer.prop('notificationBody')).toBe(defaultProps.notificationBody);
+      expect(notificationContainer.prop('url')).toBe(defaultProps.url);
+      expect(notificationContainer.prop('selectedOS')).toBe(OS_MACOS);
+      expect(notificationContainer.prop('selectedBrowser')).toBe(BROWSER_CHROME);
+      expect(notificationContainer.prop('imageSrc')).toBe(defaultProps.imageSrc);
+      expect(notificationContainer.prop('brandIconSrc')).toBe(defaultProps.brandIconSrc);
+    });
+
+    it('should pass resolved variant state to NotificationContainer', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);
+
+      });
+
+      wrapper.update();
+      
+      const resolvedVariant = getResolvedVariant(OS_MACOS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
+      const notificationContainer = wrapper.find(NotificationContainer);
+      
+      expect(notificationContainer.prop('notificationState')).toBe(resolvedVariant.stateKey);
+      expect(notificationContainer.prop('icon')).toBe(resolvedVariant.variant.icon);
+      expect(notificationContainer.prop('supportsExpanded')).toBe(resolvedVariant.stateConfig.supportsExpanded);
+      expect(notificationContainer.prop('enableMedia')).toBe(resolvedVariant.stateConfig.showMedia);
+      expect(notificationContainer.prop('enableCtas')).toBe(false);
+      expect(notificationContainer.prop('className')).toBe(resolvedVariant.variant.notificationClassName);
+    });
+  });
+
+  describe('Combined OS/Browser/State Combinations', () => {
+    const testCombinations = [
+      { os: OS_MACOS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
+      { os: OS_MACOS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_EXPANDED },
+      { os: OS_MACOS, browser: BROWSER_FIREFOX, state: NOTIFICATION_STATE_COLLAPSED },
+      { os: OS_MACOS, browser: BROWSER_SAFARI, state: NOTIFICATION_STATE_COLLAPSED },
+      { os: OS_WINDOWS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
+      { os: OS_WINDOWS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_EXPANDED },
+      { os: OS_IOS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
+      { os: OS_IOS, browser: BROWSER_SAFARI, state: NOTIFICATION_STATE_COLLAPSED },
+      { os: OS_ANDROID_MOBILE, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
+      { os: OS_ANDROID_MOBILE, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_EXPANDED },
+      { os: OS_IPADOS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
+      { os: OS_ANDROID_TABLET, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
+    ];
+
+    testCombinations.forEach(({ os, browser, state }) => {
+      it(`should handle ${os} + ${browser} + ${state} combination`, () => {
+        const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+        
+        wrapper.find(PreviewControls).prop('onOSChange')(os);
+        wrapper.find(PreviewControls).prop('onBrowserChange')(browser);
+        act(() => {
+
+          wrapper.find(PreviewControls).prop('onStateChange')(state);
+
+        });
+
+        wrapper.update();
+        
+        const controls = wrapper.find(PreviewControls);
+        expect(controls.prop('selectedOS')).toBe(os);
+        expect(controls.prop('selectedBrowser')).toBe(browser);
+        
+        // State might be coerced if not supported
+        const supportedStates = getSupportedStates(os, browser);
+        if (supportedStates.includes(state)) {
+          expect(controls.prop('selectedState')).toBe(state);
+        } else {
+          expect(supportedStates).toContain(controls.prop('selectedState'));
+        }
+        
+        // Position should be calculated
+        const notificationWrapper = wrapper.find('.device-notification-wrapper');
+        expect(notificationWrapper.exists()).toBe(true);
+        const style = notificationWrapper.prop('style');
+        expect(style).toBeDefined();
+        expect(style.position).toBe('absolute');
+        expect(style.left).toBeDefined();
+      });
+    });
+  });
+
+  describe('CSS Classes and Styling', () => {
+    it('should apply preview-unavailable class when variant is not resolved', () => {
+      // This would require an unsupported combination
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const notificationWrapper = wrapper.find('.device-notification-wrapper');
+      
+      // For default macOS Chrome, variant should be resolved
+      const resolvedVariant = getResolvedVariant(DEFAULT_OS, DEFAULT_BROWSER, DEFAULT_STATE);
+      if (resolvedVariant) {
+        expect(notificationWrapper.hasClass('preview-unavailable')).toBe(false);
+      }
+    });
+
+    it('should apply correct z-index to notification wrapper', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const notificationWrapper = wrapper.find('.device-notification-wrapper');
+      const style = notificationWrapper.prop('style');
+      expect(style.zIndex).toBe(10);
+    });
+
+    it('should apply absolute positioning to notification wrapper', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      const notificationWrapper = wrapper.find('.device-notification-wrapper');
+      const style = notificationWrapper.prop('style');
+      expect(style.position).toBe('absolute');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty notification title and body', () => {
+      const wrapper = mountWithIntl(
+        <DevicePreviewContent
+          notificationTitle=""
+          notificationBody=""
+          url=""
+        />
+      );
+      expect(wrapper.exists()).toBe(true);
+      const notificationContainer = wrapper.find(NotificationContainer);
+      expect(notificationContainer.prop('notificationTitle')).toBe('');
+      expect(notificationContainer.prop('notificationBody')).toBe('');
+    });
+
+    it('should handle missing imageSrc and brandIconSrc', () => {
+      const wrapper = mountWithIntl(
+        <DevicePreviewContent
+          notificationTitle="Test"
+          notificationBody="Test"
+          url="https://example.com"
+        />
+      );
+      const notificationContainer = wrapper.find(NotificationContainer);
+      expect(notificationContainer.prop('imageSrc')).toBe('');
+      expect(notificationContainer.prop('brandIconSrc')).toBe('');
+    });
+
+    it('should handle rapid OS/Browser/State changes', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      // Rapidly change combinations
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
+      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);
+
+      });
+
+      wrapper.update();
+      
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
+      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_FIREFOX);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);
+
+      });
+
+      wrapper.update();
+      
+      wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);
+      act(() => {
+
+        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_SAFARI);
+
+      });
+
+      wrapper.update();
+      
+      const controls = wrapper.find(PreviewControls);
+      expect(controls.prop('selectedOS')).toBe(OS_IOS);
+      expect(controls.prop('selectedBrowser')).toBe(BROWSER_SAFARI);
+    });
+  });
+
+  describe('Refs and DOM Elements', () => {
+    it('should create refs for device frame and notification', () => {
+      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
+      
+      const deviceFrame = wrapper.find('.device-frame');
+      expect(deviceFrame.exists()).toBe(true);
+      
+      const notificationWrapper = wrapper.find('.device-notification-wrapper');
+      expect(notificationWrapper.exists()).toBe(true);
+    });
+  });
+});
+