@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.10

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

@@ -1,1077 +0,0 @@
-import React from 'react';
-import { mountWithIntl, shallowWithIntl } from '../../../../../helpers/intl-enzym-test-helpers';
-import NotificationContainer from '../NotificationContainer';
-import NotificationHeader from '../components/NotificationHeader';
-import AndroidMobileChromeHeader from '../components/AndroidMobileChromeHeader';
-import AndroidMobileExpanded from '../components/AndroidMobileExpanded';
-import IOSHeader from '../components/IOSHeader';
-import WindowsChromeExpanded from '../components/WindowsChromeExpanded';
-import NotificationExpandedContent from '../components/NotificationExpandedContent';
-import {
-  OS_MACOS,
-  OS_IOS,
-  OS_IPADOS,
-  OS_WINDOWS,
-  OS_ANDROID_MOBILE,
-  OS_ANDROID_TABLET,
-  BROWSER_CHROME,
-  BROWSER_FIREFOX,
-  BROWSER_EDGE,
-  BROWSER_OPERA,
-  BROWSER_SAFARI,
-  NOTIFICATION_STATE_COLLAPSED,
-  NOTIFICATION_STATE_EXPANDED,
-} from '../constants';
-
-describe('NotificationContainer', () => {
-  const defaultProps = {
-    notificationTitle: 'Test Notification Title',
-    notificationBody: 'Test notification body text',
-    url: 'https://www.example.com',
-    selectedOS: OS_MACOS,
-    selectedBrowser: BROWSER_CHROME,
-    notificationState: NOTIFICATION_STATE_COLLAPSED,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Basic Rendering', () => {
-    it('should render correctly with default props', () => {
-      const wrapper = shallowWithIntl(<NotificationContainer {...defaultProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should render with required props only', () => {
-      const minimalProps = {
-        selectedOS: OS_MACOS,
-        selectedBrowser: BROWSER_CHROME,
-      };
-      const wrapper = shallowWithIntl(<NotificationContainer {...minimalProps} />);
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should apply custom className when provided', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} className="custom-class" />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('custom-class')).toBe(true);
-    });
-  });
-
-  describe('CSS Class Name Generation', () => {
-    it('should generate correct class name for macOS Chrome', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} selectedOS={OS_MACOS} selectedBrowser={BROWSER_CHROME} />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('macos-chrome')).toBe(true);
-    });
-
-    it('should generate correct class name for macOS Firefox', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} selectedOS={OS_MACOS} selectedBrowser={BROWSER_FIREFOX} />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('macos-firefox')).toBe(true);
-    });
-
-    it('should generate correct class name for Windows Chrome', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} selectedOS={OS_WINDOWS} selectedBrowser={BROWSER_CHROME} />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('windows-chrome')).toBe(true);
-    });
-
-    it('should generate correct class name for Windows Edge', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} selectedOS={OS_WINDOWS} selectedBrowser={BROWSER_EDGE} />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('windows-edge')).toBe(true);
-    });
-
-    it('should generate correct class name for Android Mobile Chrome', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_MOBILE}
-          selectedBrowser={BROWSER_CHROME}
-        />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('android-mobile-chrome')).toBe(true);
-    });
-
-    it('should generate correct class name for Android Tablet Chrome', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_TABLET}
-          selectedBrowser={BROWSER_CHROME}
-        />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('android-tablet-chrome')).toBe(true);
-    });
-
-    it('should generate correct class name for iOS Safari', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} selectedOS={OS_IOS} selectedBrowser={BROWSER_SAFARI} />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('ios-safari')).toBe(true);
-    });
-
-    it('should generate correct class name for iPadOS Safari', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} selectedOS={OS_IPADOS} selectedBrowser={BROWSER_SAFARI} />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('ipados-safari')).toBe(true);
-    });
-
-    it('should add collapsed state class by default', () => {
-      const wrapper = mountWithIntl(<NotificationContainer {...defaultProps} />);
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('collapsed')).toBe(true);
-    });
-
-    it('should add expanded state class when expanded', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} notificationState={NOTIFICATION_STATE_EXPANDED} />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('expanded')).toBe(true);
-    });
-
-    it('should add windows-chrome-expanded class for Windows expanded notifications', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      const container = wrapper.find('.notification-container');
-      expect(container.hasClass('windows-chrome-expanded')).toBe(true);
-    });
-  });
-
-  describe('URL Formatting', () => {
-    it('should format URL by removing protocol', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} url="https://example.com" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('example.com');
-    });
-
-    it('should format URL by removing www prefix', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} url="https://www.example.com" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('example.com');
-    });
-
-    it('should format URL by removing trailing slashes', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} url="https://example.com/" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('example.com');
-    });
-
-    it('should format URL with all transformations', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} url="https://www.example.com/path/" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('example.com');
-    });
-
-    it('should remove child paths from URL', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} url="https://example.com/path/to/page" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('example.com');
-    });
-
-    it('should preserve subdomain while removing child paths', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} url="https://subdomain.example.com/path/to/page" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('subdomain.example.com');
-    });
-
-    it('should remove child paths with www prefix', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} url="https://www.example.com/path/to/page" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('example.com');
-    });
-
-    it('should handle HTTP protocol', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} url="http://example.com" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('example.com');
-    });
-
-    it('should use empty string when url is empty', () => {
-      const wrapper = mountWithIntl(<NotificationContainer {...defaultProps} url="" />);
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('');
-    });
-
-    it('should use empty string when url is undefined', () => {
-      const wrapper = mountWithIntl(<NotificationContainer {...defaultProps} url={undefined} />);
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('');
-    });
-
-    it('should handle URL with multiple trailing slashes', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} url="https://example.com///" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('displayUrl')).toBe('example.com');
-    });
-  });
-
-  describe('Platform-Specific Rendering - macOS', () => {
-    it('should render NotificationHeader for macOS Chrome collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(NotificationHeader).exists()).toBe(true);
-      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(false);
-      expect(wrapper.find(IOSHeader).exists()).toBe(false);
-      expect(wrapper.find(WindowsChromeExpanded).exists()).toBe(false);
-    });
-
-    it('should render NotificationHeader and NotificationExpandedContent for macOS Chrome expanded', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      expect(wrapper.find(NotificationHeader).exists()).toBe(true);
-      expect(wrapper.find(NotificationExpandedContent).exists()).toBe(true);
-    });
-
-    it('should render NotificationHeader for macOS Firefox collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_FIREFOX}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(NotificationHeader).exists()).toBe(true);
-    });
-
-    it('should render NotificationHeader for macOS Edge collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_EDGE}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(NotificationHeader).exists()).toBe(true);
-    });
-
-    it('should render NotificationHeader for macOS Opera collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_OPERA}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(NotificationHeader).exists()).toBe(true);
-    });
-  });
-
-  describe('Platform-Specific Rendering - Windows', () => {
-    it('should render NotificationHeader for Windows Chrome collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(NotificationHeader).exists()).toBe(true);
-      expect(wrapper.find(WindowsChromeExpanded).exists()).toBe(false);
-    });
-
-    it('should render WindowsChromeExpanded for Windows Chrome expanded', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      expect(wrapper.find(WindowsChromeExpanded).exists()).toBe(true);
-      expect(wrapper.find(NotificationHeader).exists()).toBe(false);
-    });
-
-    it('should render NotificationHeader for Windows Edge collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_EDGE}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(NotificationHeader).exists()).toBe(true);
-    });
-
-    it('should render NotificationHeader for Windows Firefox collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_FIREFOX}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(NotificationHeader).exists()).toBe(true);
-    });
-
-    it('should pass correct props to WindowsChromeExpanded when expanded', () => {
-      const props = {
-        ...defaultProps,
-        selectedOS: OS_WINDOWS,
-        selectedBrowser: BROWSER_CHROME,
-        notificationState: NOTIFICATION_STATE_EXPANDED,
-        brandIcon: 'brand-icon.png',
-        imageSrc: 'media-image.jpg',
-      };
-      const wrapper = mountWithIntl(<NotificationContainer {...props} />);
-      const windowsExpanded = wrapper.find(WindowsChromeExpanded);
-      expect(windowsExpanded.prop('notificationTitle')).toBe(props.notificationTitle);
-      expect(windowsExpanded.prop('notificationBody')).toBe(props.notificationBody);
-      expect(windowsExpanded.prop('brandIcon')).toBe('brand-icon.png');
-      expect(windowsExpanded.prop('mediaImageUrl')).toBe('media-image.jpg');
-      expect(windowsExpanded.prop('browserName')).toBe('Google Chrome');
-    });
-  });
-
-  describe('Platform-Specific Rendering - Android Mobile', () => {
-    it('should render AndroidMobileChromeHeader for Android Mobile Chrome collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_MOBILE}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(true);
-      expect(wrapper.find(NotificationHeader).exists()).toBe(false);
-      expect(wrapper.find(AndroidMobileExpanded).exists()).toBe(false);
-    });
-
-    it('should render AndroidMobileExpanded for Android Mobile Chrome expanded', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_MOBILE}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      expect(wrapper.find(AndroidMobileExpanded).exists()).toBe(true);
-      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(false);
-    });
-
-    it('should render AndroidMobileChromeHeader for Android Mobile Firefox collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_MOBILE}
-          selectedBrowser={BROWSER_FIREFOX}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(true);
-    });
-
-    it('should render AndroidMobileChromeHeader for Android Mobile Edge collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_MOBILE}
-          selectedBrowser={BROWSER_EDGE}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(true);
-    });
-
-    it('should render AndroidMobileChromeHeader for Android Mobile Opera collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_MOBILE}
-          selectedBrowser={BROWSER_OPERA}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(true);
-    });
-
-    it('should pass correct props to AndroidMobileExpanded when expanded', () => {
-      const props = {
-        ...defaultProps,
-        selectedOS: OS_ANDROID_MOBILE,
-        selectedBrowser: BROWSER_CHROME,
-        notificationState: NOTIFICATION_STATE_EXPANDED,
-        brandIcon: 'brand-icon.png',
-        imageSrc: 'media-image.jpg',
-      };
-      const wrapper = mountWithIntl(<NotificationContainer {...props} />);
-      const androidExpanded = wrapper.find(AndroidMobileExpanded);
-      expect(androidExpanded.prop('notificationTitle')).toBe(props.notificationTitle);
-      expect(androidExpanded.prop('notificationBody')).toBe(props.notificationBody);
-      expect(androidExpanded.prop('brandIcon')).toBe('brand-icon.png');
-      expect(androidExpanded.prop('mediaImageUrl')).toBe('media-image.jpg');
-    });
-  });
-
-  describe('Platform-Specific Rendering - Android Tablet', () => {
-    it('should render AndroidMobileChromeHeader for Android Tablet Chrome collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_TABLET}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(true);
-    });
-
-    it('should render AndroidMobileExpanded for Android Tablet Chrome expanded', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_TABLET}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      expect(wrapper.find(AndroidMobileExpanded).exists()).toBe(true);
-    });
-
-    it('should render AndroidMobileChromeHeader for Android Tablet Firefox collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_TABLET}
-          selectedBrowser={BROWSER_FIREFOX}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(true);
-    });
-  });
-
-  describe('Platform-Specific Rendering - iOS', () => {
-    it('should render IOSHeader for iOS Safari collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_IOS}
-          selectedBrowser={BROWSER_SAFARI}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(IOSHeader).exists()).toBe(true);
-      expect(wrapper.find(NotificationHeader).exists()).toBe(false);
-      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(false);
-    });
-
-    it('should render IOSHeader for iOS Safari even when expanded (iOS does not support expanded)', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_IOS}
-          selectedBrowser={BROWSER_SAFARI}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          supportsExpanded={false}
-        />
-      );
-      expect(wrapper.find(IOSHeader).exists()).toBe(true);
-      expect(wrapper.find(NotificationExpandedContent).exists()).toBe(false);
-    });
-
-    it('should render IOSHeader for iOS Chrome collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_IOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(IOSHeader).exists()).toBe(true);
-    });
-  });
-
-  describe('Platform-Specific Rendering - iPadOS', () => {
-    it('should render IOSHeader for iPadOS Safari collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_IPADOS}
-          selectedBrowser={BROWSER_SAFARI}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(IOSHeader).exists()).toBe(true);
-      expect(wrapper.find(NotificationHeader).exists()).toBe(false);
-    });
-
-    it('should render IOSHeader for iPadOS Safari even when expanded (iPadOS does not support expanded)', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_IPADOS}
-          selectedBrowser={BROWSER_SAFARI}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          supportsExpanded={false}
-        />
-      );
-      expect(wrapper.find(IOSHeader).exists()).toBe(true);
-      expect(wrapper.find(NotificationExpandedContent).exists()).toBe(false);
-    });
-  });
-
-  describe('Brand Icon Visibility Logic', () => {
-    it('should show brand icon for macOS Chrome collapsed when brandIcon is provided', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('shouldShowBrandIcon')).toBe(true);
-      expect(header.prop('brandIcon')).toBe('brand-icon.png');
-    });
-
-    it('should not show brand icon for macOS Chrome collapsed when brandIcon is empty', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          brandIcon=""
-          enableBrandIconPreview={true}
-        />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('shouldShowBrandIcon')).toBe(false);
-    });
-
-    it('should not show brand icon for macOS Chrome collapsed when enableBrandIconPreview is false', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={false}
-        />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('shouldShowBrandIcon')).toBe(false);
-    });
-
-    it('should show brand icon for macOS Chrome expanded when brandIcon is provided and browser supports it', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const expandedContent = wrapper.find(NotificationExpandedContent);
-      expect(expandedContent.prop('shouldShowBrandIconInExpandedMac')).toBe(true);
-    });
-
-    it('should show brand icon for macOS Firefox expanded (Firefox supports brand icon)', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_FIREFOX}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const expandedContent = wrapper.find(NotificationExpandedContent);
-      expect(expandedContent.prop('shouldShowBrandIconInExpandedMac')).toBe(true);
-    });
-
-    it('should show brand icon for Windows Chrome collapsed when brandIcon is provided', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_CHROME}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('shouldShowBrandIcon')).toBe(true);
-    });
-
-    it('should show brand icon for Android Mobile Chrome collapsed when brandIcon is provided', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_MOBILE}
-          selectedBrowser={BROWSER_CHROME}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const header = wrapper.find(AndroidMobileChromeHeader);
-      expect(header.prop('shouldShowBrandIcon')).toBe(true);
-    });
-
-    it('should show brand icon for Android Mobile Chrome expanded when brandIcon is provided', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_MOBILE}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const expanded = wrapper.find(AndroidMobileExpanded);
-      expect(expanded.prop('shouldShowBrandIconExpanded')).toBe(true);
-    });
-
-    it('should not show brand icon for iOS Safari (iOS does not support brand icons)', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_IOS}
-          selectedBrowser={BROWSER_SAFARI}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const header = wrapper.find(IOSHeader);
-      // IOSHeader doesn't have brand icon props, which is correct
-      expect(header.exists()).toBe(true);
-    });
-
-    it('should not show brand icon for iPadOS Safari (iPadOS does not support brand icons)', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_IPADOS}
-          selectedBrowser={BROWSER_SAFARI}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const header = wrapper.find(IOSHeader);
-      expect(header.exists()).toBe(true);
-    });
-
-    it('should prefer brandIconSrc over brandIcon prop', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          brandIcon="old-brand-icon.png"
-          brandIconSrc="new-brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('brandIcon')).toBe('new-brand-icon.png');
-    });
-  });
-
-  describe('Expanded Content Rendering', () => {
-    it('should render NotificationExpandedContent for macOS Chrome expanded', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      expect(wrapper.find(NotificationExpandedContent).exists()).toBe(true);
-    });
-
-    it('should not render NotificationExpandedContent for macOS Chrome collapsed', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper.find(NotificationExpandedContent).exists()).toBe(false);
-    });
-
-    it('should not render NotificationExpandedContent when supportsExpanded is false', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          supportsExpanded={false}
-        />
-      );
-      expect(wrapper.find(NotificationExpandedContent).exists()).toBe(false);
-    });
-
-    it('should render media image when imageSrc is provided and enableMedia is true for non-brand browsers', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_SAFARI}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          imageSrc="media-image.jpg"
-          enableMedia={true}
-        />
-      );
-      const expandedContent = wrapper.find(NotificationExpandedContent);
-      expect(expandedContent.prop('shouldRenderExpandedMedia')).toBe(true);
-      expect(expandedContent.prop('mediaImageUrl')).toBe('media-image.jpg');
-    });
-
-    it('should render brand icon as media for macOS Chrome expanded when brand icon is available', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          imageSrc="media-image.jpg"
-          enableMedia={true}
-          brandIcon="brand-icon.png"
-          enableBrandIconPreview={true}
-        />
-      );
-      const expandedContent = wrapper.find(NotificationExpandedContent);
-      expect(expandedContent.prop('shouldRenderExpandedMedia')).toBe(true);
-      expect(expandedContent.prop('shouldShowBrandIconInExpandedMac')).toBe(true);
-    });
-
-    it('should not render media for macOS Chrome expanded when brand icon is not available', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          imageSrc="media-image.jpg"
-          enableMedia={true}
-          brandIcon=""
-          enableBrandIconPreview={true}
-        />
-      );
-      const expandedContent = wrapper.find(NotificationExpandedContent);
-      expect(expandedContent.prop('shouldRenderExpandedMedia')).toBe(false);
-    });
-
-    it('should not render media image when enableMedia is false', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          imageSrc="media-image.jpg"
-          enableMedia={false}
-        />
-      );
-      const expandedContent = wrapper.find(NotificationExpandedContent);
-      expect(expandedContent.prop('shouldRenderExpandedMedia')).toBe(false);
-    });
-
-    it('should not render media image when imageSrc is empty', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          imageSrc=""
-          enableMedia={true}
-        />
-      );
-      const expandedContent = wrapper.find(NotificationExpandedContent);
-      expect(expandedContent.prop('shouldRenderExpandedMedia')).toBe(false);
-    });
-
-    it('should render CTA buttons when enableCtas is true', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          enableCtas={true}
-        />
-      );
-      const expandedContent = wrapper.find(NotificationExpandedContent);
-      expect(expandedContent.prop('enableCtas')).toBe(true);
-      expect(expandedContent.prop('ctaButtons').length).toBeGreaterThan(0);
-    });
-
-    it('should not render CTA buttons when enableCtas is false', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-          enableCtas={false}
-        />
-      );
-      const expandedContent = wrapper.find(NotificationExpandedContent);
-      expect(expandedContent.prop('enableCtas')).toBe(false);
-    });
-  });
-
-  describe('Edge Cases and Error Handling', () => {
-    it('should handle empty notificationTitle', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} notificationTitle="" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('notificationTitle')).toBe('');
-    });
-
-    it('should handle empty notificationBody', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} notificationBody="" />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('notificationBody')).toBe('');
-    });
-
-    it('should handle undefined notificationTitle', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} notificationTitle={undefined} />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('notificationTitle')).toBeUndefined();
-    });
-
-    it('should handle undefined notificationBody', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} notificationBody={undefined} />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('notificationBody')).toBeUndefined();
-    });
-
-    it('should handle custom icon prop', () => {
-      const customIcon = 'custom-icon.png';
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} icon={customIcon} />
-      );
-      const header = wrapper.find(NotificationHeader);
-      expect(header.prop('icon')).toBe(customIcon);
-    });
-
-    it('should handle empty string for selectedBrowser', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} selectedBrowser="" />
-      );
-      // Should still render without crashing
-      expect(wrapper.find('.notification-container').exists()).toBe(true);
-    });
-
-    it('should handle unknown OS gracefully', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer {...defaultProps} selectedOS="UnknownOS" />
-      );
-      // Should still render without crashing
-      expect(wrapper.find('.notification-container').exists()).toBe(true);
-    });
-  });
-
-  describe('Browser Display Names', () => {
-    it('should pass correct browser display name to WindowsChromeExpanded', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      const windowsExpanded = wrapper.find(WindowsChromeExpanded);
-      expect(windowsExpanded.prop('browserName')).toBe('Google Chrome');
-    });
-
-    it('should pass correct browser display name for Firefox', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_FIREFOX}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      const windowsExpanded = wrapper.find(WindowsChromeExpanded);
-      expect(windowsExpanded.prop('browserName')).toBe('Mozilla Firefox');
-    });
-
-    it('should pass correct browser display name for Edge', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_EDGE}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      const windowsExpanded = wrapper.find(WindowsChromeExpanded);
-      expect(windowsExpanded.prop('browserName')).toBe('Microsoft Edge');
-    });
-
-    it('should pass correct browser display name for Opera', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_OPERA}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      const windowsExpanded = wrapper.find(WindowsChromeExpanded);
-      expect(windowsExpanded.prop('browserName')).toBe('Opera');
-    });
-
-    it('should fallback to browser name when display name is not available', () => {
-      const wrapper = mountWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser="UnknownBrowser"
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      const windowsExpanded = wrapper.find(WindowsChromeExpanded);
-      expect(windowsExpanded.prop('browserName')).toBe('UnknownBrowser');
-    });
-  });
-
-  describe('Snapshot Tests', () => {
-    it('should match snapshot for macOS Chrome collapsed', () => {
-      const wrapper = shallowWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should match snapshot for macOS Chrome expanded', () => {
-      const wrapper = shallowWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_MACOS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should match snapshot for Windows Chrome expanded', () => {
-      const wrapper = shallowWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_WINDOWS}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should match snapshot for Android Mobile Chrome expanded', () => {
-      const wrapper = shallowWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_ANDROID_MOBILE}
-          selectedBrowser={BROWSER_CHROME}
-          notificationState={NOTIFICATION_STATE_EXPANDED}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should match snapshot for iOS Safari collapsed', () => {
-      const wrapper = shallowWithIntl(
-        <NotificationContainer
-          {...defaultProps}
-          selectedOS={OS_IOS}
-          selectedBrowser={BROWSER_SAFARI}
-          notificationState={NOTIFICATION_STATE_COLLAPSED}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-});
-