@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.255

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

@@ -1,909 +0,0 @@
-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);
-    });
-  });
-});
-