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('platform.browser getter — 2-part vs 3-part class names', () => {
    it('derives browser from 2-part class name (macos-chrome → parts[1])', () => {
      // 'macos-chrome'.split('-') = ['macos', 'chrome'] → length=2 → browser = parts[1] = 'chrome'
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_MACOS} selectedBrowser={BROWSER_CHROME} />
      );
      expect(wrapper.find('.notification-container').hasClass('macos-chrome')).toBe(true);
    });

    it('derives browser from 3-part class name (android-mobile-chrome → parts[2])', () => {
      // 'android-mobile-chrome'.split('-') = ['android', 'mobile', 'chrome'] → length=3 → browser = parts[2] = 'chrome'
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_ANDROID_MOBILE} selectedBrowser={BROWSER_CHROME} />
      );
      expect(wrapper.find('.notification-container').hasClass('android-mobile-chrome')).toBe(true);
    });

    it('derives browser from 3-part class name for Android Tablet (android-tablet-firefox → parts[2])', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_ANDROID_TABLET} selectedBrowser={BROWSER_FIREFOX} />
      );
      expect(wrapper.find('.notification-container').hasClass('android-tablet-firefox')).toBe(true);
    });
  });

  describe('platform.isIOS getter (selectedOS === OS_IOS)', () => {
    it('is true for iOS — renders IOSHeader', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_IOS} selectedBrowser={BROWSER_CHROME} />
      );
      expect(wrapper.find(IOSHeader).exists()).toBe(true);
    });

    it('is false for macOS — does not render IOSHeader', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_MACOS} selectedBrowser={BROWSER_CHROME} />
      );
      expect(wrapper.find(IOSHeader).exists()).toBe(false);
    });

    it('is false for Android Mobile — does not render IOSHeader', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_ANDROID_MOBILE} selectedBrowser={BROWSER_CHROME} />
      );
      expect(wrapper.find(IOSHeader).exists()).toBe(false);
    });

    it('is false for Windows — does not render IOSHeader', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_WINDOWS} selectedBrowser={BROWSER_CHROME} />
      );
      expect(wrapper.find(IOSHeader).exists()).toBe(false);
    });
  });

  describe('platform.isIPadOS getter (selectedOS === OS_IPADOS)', () => {
    it('is true for iPadOS — renders IOSHeader', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_IPADOS} selectedBrowser={BROWSER_CHROME} />
      );
      expect(wrapper.find(IOSHeader).exists()).toBe(true);
    });

    it('is false for Android Tablet — does not render IOSHeader', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_ANDROID_TABLET} selectedBrowser={BROWSER_CHROME} />
      );
      expect(wrapper.find(IOSHeader).exists()).toBe(false);
      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(true);
    });

    it('is false for Windows — does not render IOSHeader', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_WINDOWS} selectedBrowser={BROWSER_CHROME} />
      );
      expect(wrapper.find(IOSHeader).exists()).toBe(false);
    });

    it('is false for macOS — does not render IOSHeader', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...defaultProps} selectedOS={OS_MACOS} selectedBrowser={BROWSER_SAFARI} />
      );
      expect(wrapper.find(IOSHeader).exists()).toBe(false);
    });
  });

  describe('platform.isMacOsBrandIconBrowser getter (isMacOs && supportsBrandIcon)', () => {
    it('is true for macOS + Chrome (Chrome is in BRAND_ICON_SUPPORTED_BROWSERS) — shows brand icon in expanded', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer
          {...defaultProps}
          selectedOS={OS_MACOS}
          selectedBrowser={BROWSER_CHROME}
          notificationState={NOTIFICATION_STATE_EXPANDED}
          brandIcon="brand.png"
          enableBrandIconPreview={true}
        />
      );
      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(true);
    });

    it('is true for macOS + Edge (Edge is in BRAND_ICON_SUPPORTED_BROWSERS)', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer
          {...defaultProps}
          selectedOS={OS_MACOS}
          selectedBrowser={BROWSER_EDGE}
          notificationState={NOTIFICATION_STATE_EXPANDED}
          brandIcon="brand.png"
          enableBrandIconPreview={true}
        />
      );
      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(true);
    });

    it('is true for macOS + Opera (Opera is in BRAND_ICON_SUPPORTED_BROWSERS)', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer
          {...defaultProps}
          selectedOS={OS_MACOS}
          selectedBrowser={BROWSER_OPERA}
          notificationState={NOTIFICATION_STATE_EXPANDED}
          brandIcon="brand.png"
          enableBrandIconPreview={true}
        />
      );
      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(true);
    });

    it('is false for macOS + Safari (Safari is NOT in BRAND_ICON_SUPPORTED_BROWSERS)', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer
          {...defaultProps}
          selectedOS={OS_MACOS}
          selectedBrowser={BROWSER_SAFARI}
          notificationState={NOTIFICATION_STATE_EXPANDED}
          brandIcon="brand.png"
          enableBrandIconPreview={true}
        />
      );
      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(false);
    });

    it('is false for Windows + Chrome (not macOS) — renders WindowsChromeExpanded instead', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer
          {...defaultProps}
          selectedOS={OS_WINDOWS}
          selectedBrowser={BROWSER_CHROME}
          notificationState={NOTIFICATION_STATE_EXPANDED}
          brandIcon="brand.png"
          enableBrandIconPreview={true}
        />
      );
      expect(wrapper.find(NotificationExpandedContent).exists()).toBe(false);
      expect(wrapper.find(WindowsChromeExpanded).exists()).toBe(true);
    });

    it('is false for macOS + Chrome when brandIcon is empty', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer
          {...defaultProps}
          selectedOS={OS_MACOS}
          selectedBrowser={BROWSER_CHROME}
          notificationState={NOTIFICATION_STATE_EXPANDED}
          brandIcon=""
          enableBrandIconPreview={true}
        />
      );
      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(false);
    });
  });

  describe('shouldRenderSeparateIOSCTAs behavior', () => {
    const iosCollapsedWithCTAs = {
      ...defaultProps,
      selectedOS: OS_IOS,
      selectedBrowser: BROWSER_CHROME,
      notificationState: NOTIFICATION_STATE_COLLAPSED,
      showSeparateIOSCTAs: true,
      enableCtas: true,
      buttons: [{ text: 'Accept' }, { text: 'Dismiss' }],
    };

    it('renders ios-notification-wrapper when all conditions are satisfied', () => {
      const wrapper = mountWithIntl(<NotificationContainer {...iosCollapsedWithCTAs} />);
      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(true);
    });

    it('renders ios-cta-container inside the wrapper', () => {
      const wrapper = mountWithIntl(<NotificationContainer {...iosCollapsedWithCTAs} />);
      expect(wrapper.find('.ios-cta-container').exists()).toBe(true);
    });

    it('renders one ios-cta-button per button', () => {
      const wrapper = mountWithIntl(<NotificationContainer {...iosCollapsedWithCTAs} />);
      expect(wrapper.find('.ios-cta-button').length).toBe(2);
    });

    it('renders the correct button label text', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer
          {...iosCollapsedWithCTAs}
          buttons={[{ text: 'Confirm' }]}
        />
      );
      expect(wrapper.find('.ios-cta-button').first().text()).toBe('Confirm');
    });

    it('still renders the notification-container inside the wrapper', () => {
      const wrapper = mountWithIntl(<NotificationContainer {...iosCollapsedWithCTAs} />);
      const iosWrapper = wrapper.find('.ios-notification-wrapper');
      expect(iosWrapper.find('.notification-container').exists()).toBe(true);
    });

    it('does NOT render ios-notification-wrapper when showSeparateIOSCTAs is false', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...iosCollapsedWithCTAs} showSeparateIOSCTAs={false} />
      );
      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
    });

    it('does NOT render ios-notification-wrapper when expanded (isExpanded is true)', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer
          {...iosCollapsedWithCTAs}
          notificationState={NOTIFICATION_STATE_EXPANDED}
          supportsExpanded={true}
        />
      );
      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
    });

    it('does NOT render ios-notification-wrapper when enableCtas is false', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...iosCollapsedWithCTAs} enableCtas={false} />
      );
      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
    });

    it('does NOT render ios-notification-wrapper when buttons array is empty', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...iosCollapsedWithCTAs} buttons={[]} />
      );
      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
    });

    it('does NOT render ios-notification-wrapper for iPadOS (not an iOS browser)', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...iosCollapsedWithCTAs} selectedOS={OS_IPADOS} />
      );
      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
    });

    it('does NOT render ios-notification-wrapper for macOS', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...iosCollapsedWithCTAs} selectedOS={OS_MACOS} />
      );
      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
    });

    it('does NOT render ios-notification-wrapper for Android Mobile', () => {
      const wrapper = mountWithIntl(
        <NotificationContainer {...iosCollapsedWithCTAs} selectedOS={OS_ANDROID_MOBILE} />
      );
      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
    });
  });

  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();
    });
  });
});

