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

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

@@ -0,0 +1,1081 @@
+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 WindowsChromeExpanded for Windows Chrome collapsed (Windows always uses expanded UI)', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...defaultProps}
+          selectedOS={OS_WINDOWS}
+          selectedBrowser={BROWSER_CHROME}
+          notificationState={NOTIFICATION_STATE_COLLAPSED}
+        />
+      );
+      expect(wrapper.find(WindowsChromeExpanded).exists()).toBe(true);
+      expect(wrapper.find(NotificationHeader).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 WindowsChromeExpanded for Windows Edge collapsed (Windows always uses expanded UI)', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...defaultProps}
+          selectedOS={OS_WINDOWS}
+          selectedBrowser={BROWSER_EDGE}
+          notificationState={NOTIFICATION_STATE_COLLAPSED}
+        />
+      );
+      expect(wrapper.find(WindowsChromeExpanded).exists()).toBe(true);
+      expect(wrapper.find(NotificationHeader).exists()).toBe(false);
+    });
+
+    it('should render WindowsChromeExpanded for Windows Firefox collapsed (Windows always uses expanded UI)', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...defaultProps}
+          selectedOS={OS_WINDOWS}
+          selectedBrowser={BROWSER_FIREFOX}
+          notificationState={NOTIFICATION_STATE_COLLAPSED}
+        />
+      );
+      expect(wrapper.find(WindowsChromeExpanded).exists()).toBe(true);
+      expect(wrapper.find(NotificationHeader).exists()).toBe(false);
+    });
+
+    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 windowsExpanded = wrapper.find(WindowsChromeExpanded);
+      expect(windowsExpanded.prop('enableBrandIconPreview')).toBe(true);
+      expect(windowsExpanded.prop('brandIcon')).toBe('brand-icon.png');
+    });
+
+    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}
+          buttons={[{ text: 'Button 1' }, { text: 'Button 2' }]}
+        />
+      );
+      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();
+    });
+  });
+});
+