import React from 'react';
import { shallowWithIntl, mountWithIntl } from '../../../../../../helpers/intl-enzym-test-helpers';
import AndroidMobileExpanded from '../AndroidMobileExpanded';

describe('AndroidMobileExpanded', () => {
  const defaultProps = {
    icon: 'https://example.com/chrome-icon.png',
    selectedBrowser: 'Chrome',
    notificationTitle: 'Test Notification Title',
    notificationBody: 'Test notification body text that can be quite long and should be truncated after 4 lines',
    displayUrl: 'example.com',
    brandIcon: 'https://example.com/brand-icon.png',
    shouldShowBrandIcon: false,
    shouldShowBrandIconExpanded: false,
    mediaImageUrl: '',
  };

  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('Basic Rendering', () => {
    it('should render correctly with default props', () => {
      const wrapper = shallowWithIntl(<AndroidMobileExpanded {...defaultProps} />);
      expect(wrapper).toMatchSnapshot();
    });

    it('should render all required elements', () => {
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
      
      // Browser icon container
      expect(wrapper.find('.android-mobile-expanded-icon').exists()).toBe(true);
      expect(wrapper.find('.notification-icon-container').exists()).toBe(true);
      expect(wrapper.find('.notification-icon').exists()).toBe(true);
      
      // Wrapper container
      expect(wrapper.find('.android-mobile-expanded-wrapper').exists()).toBe(true);
      
      // Top section
      expect(wrapper.find('.android-mobile-expanded-top').exists()).toBe(true);
      expect(wrapper.find('.android-mobile-expanded-top-content').exists()).toBe(true);
      
      // Header
      expect(wrapper.find('.android-mobile-expanded-header').exists()).toBe(true);
      expect(wrapper.find('.android-mobile-expanded-header-content').exists()).toBe(true);
      expect(wrapper.find('.android-mobile-expanded-browser-name').exists()).toBe(true);
      expect(wrapper.find('.android-mobile-expanded-domain-time').exists()).toBe(true);
      expect(wrapper.find('.android-mobile-expanded-domain').exists()).toBe(true);
      expect(wrapper.find('.android-mobile-expanded-time').exists()).toBe(true);
      
      // Title
      expect(wrapper.find('.android-mobile-expanded-title').exists()).toBe(true);
      
      // Body
      expect(wrapper.find('.android-mobile-expanded-body').exists()).toBe(true);
      expect(wrapper.find('.android-mobile-expanded-body-text').exists()).toBe(true);
      
      // Arrow
      expect(wrapper.find('.notification-action-arrow.android-mobile-expanded-arrow').exists()).toBe(true);
    });

    it('should render browser icon with correct src and alt', () => {
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
      const icon = wrapper.find('.notification-icon');
      
      expect(icon.exists()).toBe(true);
      expect(icon.prop('src')).toBe(defaultProps.icon);
      expect(icon.prop('alt')).toBe(defaultProps.selectedBrowser);
    });

    it('should render notification title', () => {
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
      const title = wrapper.find('.android-mobile-expanded-title');
      
      expect(title.exists()).toBe(true);
      expect(title.text()).toBe(defaultProps.notificationTitle);
    });

    it('should render notification body', () => {
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
      const body = wrapper.find('.android-mobile-expanded-body-text');
      
      expect(body.exists()).toBe(true);
      expect(body.text()).toBe(defaultProps.notificationBody);
    });

    it('should render display URL', () => {
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
      const domain = wrapper.find('.android-mobile-expanded-domain');
      
      expect(domain.exists()).toBe(true);
      expect(domain.text()).toBe(defaultProps.displayUrl);
    });

    it('should render hardcoded time', () => {
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
      const time = wrapper.find('.android-mobile-expanded-time');
      
      expect(time.exists()).toBe(true);
      expect(time.text()).toBe('2:29 PM');
    });

    it('should render arrow icon', () => {
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
      const arrow = wrapper.find('.notification-action-arrow.android-mobile-expanded-arrow');
      const arrowIcon = wrapper.find('.android-mobile-expanded-arrow-icon');
      
      expect(arrow.exists()).toBe(true);
      expect(arrowIcon.exists()).toBe(true);
      expect(arrowIcon.prop('alt')).toBe('Collapse');
    });
  });

  describe('getBrowserDisplayName', () => {
    it('should return "Chrome" for Chrome browser', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} selectedBrowser="Chrome" />
      );
      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
      
      expect(browserName.text()).toBe('Chrome');
    });

    it('should return "Firefox" for Firefox browser', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} selectedBrowser="Firefox" />
      );
      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
      
      expect(browserName.text()).toBe('Firefox');
    });

    it('should return "Edge" for Edge browser', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} selectedBrowser="Edge" />
      );
      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
      
      expect(browserName.text()).toBe('Edge');
    });

    it('should return "Opera" for Opera browser', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} selectedBrowser="Opera" />
      );
      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
      
      expect(browserName.text()).toBe('Opera');
    });

    it('should return the browser name as-is for unknown browsers', () => {
      const unknownBrowser = 'Safari';
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} selectedBrowser={unknownBrowser} />
      );
      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
      
      expect(browserName.text()).toBe(unknownBrowser);
    });

    it('should handle empty string browser name', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} selectedBrowser="" />
      );
      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
      
      expect(browserName.text()).toBe('');
    });

    it('should handle case-sensitive browser names', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} selectedBrowser="chrome" />
      );
      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
      
      // Should return as-is since "chrome" (lowercase) is not in the mapping
      expect(browserName.text()).toBe('chrome');
    });
  });

  describe('Brand Icon Display Logic', () => {
    it('should show brand icon when shouldShowBrandIconExpanded is true and brandIcon exists', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          shouldShowBrandIconExpanded={true}
          brandIcon="https://example.com/brand-icon.png"
        />
      );
      
      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
      expect(brandIconContainer.exists()).toBe(true);
      
      const brandIcon = wrapper.find('.notification-brand-icon');
      expect(brandIcon.exists()).toBe(true);
      expect(brandIcon.prop('src')).toBe('https://example.com/brand-icon.png');
      expect(brandIcon.prop('alt')).toBe('Brand icon');
    });

    it('should show brand icon when shouldShowBrandIcon is true and brandIcon exists', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          shouldShowBrandIcon={true}
          brandIcon="https://example.com/brand-icon.png"
        />
      );
      
      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
      expect(brandIconContainer.exists()).toBe(true);
      
      const brandIcon = wrapper.find('.notification-brand-icon');
      expect(brandIcon.exists()).toBe(true);
      expect(brandIcon.prop('src')).toBe('https://example.com/brand-icon.png');
    });

    it('should show brand icon when both shouldShowBrandIcon and shouldShowBrandIconExpanded are true', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          shouldShowBrandIcon={true}
          shouldShowBrandIconExpanded={true}
          brandIcon="https://example.com/brand-icon.png"
        />
      );
      
      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
      expect(brandIconContainer.exists()).toBe(true);
    });

    it('should not show brand icon when both shouldShowBrandIcon and shouldShowBrandIconExpanded are false', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          shouldShowBrandIcon={false}
          shouldShowBrandIconExpanded={false}
          brandIcon="https://example.com/brand-icon.png"
        />
      );
      
      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
      expect(brandIconContainer.exists()).toBe(false);
    });

    it('should not show brand icon when brandIcon is not provided, even if shouldShowBrandIconExpanded is true', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          shouldShowBrandIconExpanded={true}
          brandIcon=""
        />
      );
      
      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
      expect(brandIconContainer.exists()).toBe(false);
    });

    it('should not show brand icon when brandIcon is not provided, even if shouldShowBrandIcon is true', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          shouldShowBrandIcon={true}
          brandIcon={null}
        />
      );
      
      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
      expect(brandIconContainer.exists()).toBe(false);
    });

    it('should not show brand icon when brandIcon is undefined', () => {
      const propsWithoutBrandIcon = { ...defaultProps };
      delete propsWithoutBrandIcon.brandIcon;
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...propsWithoutBrandIcon}
          shouldShowBrandIcon={true}
          shouldShowBrandIconExpanded={true}
        />
      );
      
      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
      expect(brandIconContainer.exists()).toBe(false);
    });

    it('should handle shouldShowBrandIconExpanded taking precedence when both flags are set', () => {
      // When shouldShowBrandIconExpanded is true, it should show (OR logic)
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          shouldShowBrandIcon={false}
          shouldShowBrandIconExpanded={true}
          brandIcon="https://example.com/brand-icon.png"
        />
      );
      
      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
      expect(brandIconContainer.exists()).toBe(true);
    });
  });

  describe('Media Image Display', () => {
    it('should render media image when mediaImageUrl is provided', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          mediaImageUrl="https://example.com/media-image.jpg"
        />
      );
      
      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
      expect(mediaContainer.exists()).toBe(true);
      
      const mediaImage = wrapper.find('.android-mobile-expanded-media-image');
      expect(mediaImage.exists()).toBe(true);
      expect(mediaImage.prop('src')).toBe('https://example.com/media-image.jpg');
      expect(mediaImage.prop('alt')).toBe('Notification media');
    });

    it('should not render media image when mediaImageUrl is empty string', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          mediaImageUrl=""
        />
      );
      
      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
      expect(mediaContainer.exists()).toBe(false);
    });

    it('should not render media image when mediaImageUrl is not provided', () => {
      const propsWithoutMedia = { ...defaultProps };
      delete propsWithoutMedia.mediaImageUrl;
      
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...propsWithoutMedia} />);
      
      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
      expect(mediaContainer.exists()).toBe(false);
    });

    it('should not render media image when mediaImageUrl is null', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          mediaImageUrl={null}
        />
      );
      
      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
      expect(mediaContainer.exists()).toBe(false);
    });

    it('should not render media image when mediaImageUrl is undefined', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          mediaImageUrl={undefined}
        />
      );
      
      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
      expect(mediaContainer.exists()).toBe(false);
    });
  });

  describe('Edge Cases and Optional Props', () => {
    it('should handle empty notification title', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} notificationTitle="" />
      );
      const title = wrapper.find('.android-mobile-expanded-title');
      
      expect(title.exists()).toBe(true);
      expect(title.text()).toBe('');
    });

    it('should handle empty notification body', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} notificationBody="" />
      );
      const body = wrapper.find('.android-mobile-expanded-body-text');
      
      expect(body.exists()).toBe(true);
      expect(body.text()).toBe('');
    });

    it('should handle empty display URL', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} displayUrl="" />
      );
      const domain = wrapper.find('.android-mobile-expanded-domain');
      
      expect(domain.exists()).toBe(true);
      expect(domain.text()).toBe('');
    });

    it('should handle very long notification title', () => {
      const longTitle = 'A'.repeat(200);
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} notificationTitle={longTitle} />
      );
      const title = wrapper.find('.android-mobile-expanded-title');
      
      expect(title.exists()).toBe(true);
      expect(title.text()).toBe(longTitle);
    });

    it('should handle very long notification body', () => {
      const longBody = 'B'.repeat(500);
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded {...defaultProps} notificationBody={longBody} />
      );
      const body = wrapper.find('.android-mobile-expanded-body-text');
      
      expect(body.exists()).toBe(true);
      expect(body.text()).toBe(longBody);
    });

    it('should handle missing optional props gracefully', () => {
      const minimalProps = {
        icon: 'https://example.com/icon.png',
        selectedBrowser: 'Chrome',
      };
      
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...minimalProps} />);
      
      // Should still render all structural elements
      expect(wrapper.find('.android-mobile-expanded-wrapper').exists()).toBe(true);
      expect(wrapper.find('.android-mobile-expanded-title').exists()).toBe(true);
      expect(wrapper.find('.android-mobile-expanded-body-text').exists()).toBe(true);
    });
  });

  describe('Component Structure', () => {
    it('should have correct DOM hierarchy', () => {
      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
      
      // Icon should be sibling to wrapper
      const icon = wrapper.find('.android-mobile-expanded-icon');
      const wrapperDiv = wrapper.find('.android-mobile-expanded-wrapper');
      const arrow = wrapper.find('.notification-action-arrow.android-mobile-expanded-arrow');
      
      expect(icon.exists()).toBe(true);
      expect(wrapperDiv.exists()).toBe(true);
      expect(arrow.exists()).toBe(true);
      
      // Top section should contain header and title
      const topSection = wrapper.find('.android-mobile-expanded-top');
      expect(topSection.find('.android-mobile-expanded-header').exists()).toBe(true);
      expect(topSection.find('.android-mobile-expanded-title').exists()).toBe(true);
      
      // Body should contain body text
      const bodySection = wrapper.find('.android-mobile-expanded-body');
      expect(bodySection.find('.android-mobile-expanded-body-text').exists()).toBe(true);
    });

    it('should render brand icon in correct location when shown', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          shouldShowBrandIconExpanded={true}
          brandIcon="https://example.com/brand-icon.png"
        />
      );
      
      // Brand icon should be in the top section
      const topSection = wrapper.find('.android-mobile-expanded-top');
      const brandIconContainer = topSection.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
      
      expect(brandIconContainer.exists()).toBe(true);
    });

    it('should render media image in body section when provided', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          mediaImageUrl="https://example.com/media.jpg"
        />
      );
      
      // Media should be in the body section
      const bodySection = wrapper.find('.android-mobile-expanded-body');
      const mediaContainer = bodySection.find('.android-mobile-expanded-media');
      
      expect(mediaContainer.exists()).toBe(true);
    });
  });

  describe('CTA Buttons', () => {
    it('should render CTA buttons when enableCtas is true and ctaButtons array has items', () => {
      const ctaButtons = [
        { id: '1', label: 'Button 1' },
        { id: '2', label: 'Button 2' },
      ];
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={ctaButtons}
        />
      );
      
      const ctaContainer = wrapper.find('.android-mobile-expanded-cta-container');
      expect(ctaContainer.exists()).toBe(true);
      
      const ctaButtonsElements = wrapper.find('.android-mobile-expanded-cta-button');
      expect(ctaButtonsElements.length).toBe(2);
      
      expect(ctaButtonsElements.at(0).find('.android-mobile-expanded-cta-button-text').text()).toBe('Button 1');
      expect(ctaButtonsElements.at(1).find('.android-mobile-expanded-cta-button-text').text()).toBe('Button 2');
    });

    it('should not render CTA buttons when enableCtas is false', () => {
      const ctaButtons = [
        { id: '1', label: 'Button 1' },
      ];
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={false}
          ctaButtons={ctaButtons}
        />
      );
      
      const ctaContainer = wrapper.find('.android-mobile-expanded-cta-container');
      expect(ctaContainer.exists()).toBe(false);
    });

    it('should not render CTA buttons when ctaButtons array is empty', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={[]}
        />
      );
      
      const ctaContainer = wrapper.find('.android-mobile-expanded-cta-container');
      expect(ctaContainer.exists()).toBe(false);
    });

    it('should not render CTA buttons when ctaButtons is null', () => {
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={null}
        />
      );
      
      const ctaContainer = wrapper.find('.android-mobile-expanded-cta-container');
      expect(ctaContainer.exists()).toBe(false);
    });

    it('should not render CTA buttons when ctaButtons is undefined', () => {
      const propsWithoutCtas = { ...defaultProps };
      delete propsWithoutCtas.ctaButtons;
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...propsWithoutCtas}
          enableCtas={true}
        />
      );
      
      const ctaContainer = wrapper.find('.android-mobile-expanded-cta-container');
      expect(ctaContainer.exists()).toBe(false);
    });

    it('should apply single button class when only one CTA button is provided', () => {
      const ctaButtons = [
        { id: '1', label: 'Single Button' },
      ];
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={ctaButtons}
        />
      );
      
      const ctaButton = wrapper.find('.android-mobile-expanded-cta-button');
      expect(ctaButton.hasClass('android-mobile-expanded-cta-button-single')).toBe(true);
    });

    it('should not apply single button class when multiple CTA buttons are provided', () => {
      const ctaButtons = [
        { id: '1', label: 'Button 1' },
        { id: '2', label: 'Button 2' },
      ];
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={ctaButtons}
        />
      );
      
      const ctaButtonsElements = wrapper.find('.android-mobile-expanded-cta-button');
      ctaButtonsElements.forEach((button) => {
        expect(button.hasClass('android-mobile-expanded-cta-button-single')).toBe(false);
      });
    });

    it('should render dividers between multiple CTA buttons', () => {
      const ctaButtons = [
        { id: '1', label: 'Button 1' },
        { id: '2', label: 'Button 2' },
        { id: '3', label: 'Button 3' },
      ];
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={ctaButtons}
        />
      );
      
      const dividers = wrapper.find('.android-mobile-expanded-cta-divider');
      // Should have 2 dividers for 3 buttons (dividers appear between buttons, not before first)
      expect(dividers.length).toBe(2);
    });

    it('should not render divider before first button', () => {
      const ctaButtons = [
        { id: '1', label: 'Button 1' },
        { id: '2', label: 'Button 2' },
      ];
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={ctaButtons}
        />
      );
      
      const ctaContainer = wrapper.find('.android-mobile-expanded-cta-container');
      const firstChild = ctaContainer.children().at(0);
      
      // First child should be a button, not a divider
      expect(firstChild.hasClass('android-mobile-expanded-cta-button')).toBe(true);
    });

    it('should render CTA buttons with correct keys', () => {
      const ctaButtons = [
        { id: 'button-1', label: 'Button 1' },
        { id: 'button-2', label: 'Button 2' },
      ];
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={ctaButtons}
        />
      );
      
      const ctaButtonsElements = wrapper.find('.android-mobile-expanded-cta-button');
      // React Fragment keys are not directly accessible, but we can verify buttons render correctly
      expect(ctaButtonsElements.length).toBe(2);
      expect(ctaButtonsElements.at(0).find('.android-mobile-expanded-cta-button-text').text()).toBe('Button 1');
      expect(ctaButtonsElements.at(1).find('.android-mobile-expanded-cta-button-text').text()).toBe('Button 2');
    });

    it('should render CTA buttons with aria-label', () => {
      const ctaButtons = [
        { id: '1', label: 'Click Me' },
      ];
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={ctaButtons}
        />
      );
      
      const ctaButton = wrapper.find('.android-mobile-expanded-cta-button');
      expect(ctaButton.prop('aria-label')).toBe('Click Me');
    });

    it('should handle CTA button with empty label', () => {
      const ctaButtons = [
        { id: '1', label: '' },
      ];
      
      const wrapper = mountWithIntl(
        <AndroidMobileExpanded
          {...defaultProps}
          enableCtas={true}
          ctaButtons={ctaButtons}
        />
      );
      
      const ctaButton = wrapper.find('.android-mobile-expanded-cta-button');
      expect(ctaButton.exists()).toBe(true);
      expect(ctaButton.find('.android-mobile-expanded-cta-button-text').text()).toBe('');
      expect(ctaButton.prop('aria-label')).toBe('');
    });
  });

  describe('PropTypes Validation', () => {
    it('should require icon prop', () => {
      const propsWithoutIcon = { ...defaultProps };
      delete propsWithoutIcon.icon;
      
      // PropTypes validation happens at runtime, but we can verify the component handles missing props
      // In a real scenario, this would be caught by PropTypes in development mode
      expect(() => {
        mountWithIntl(<AndroidMobileExpanded {...propsWithoutIcon} />);
      }).not.toThrow();
    });

    it('should require selectedBrowser prop', () => {
      const propsWithoutBrowser = { ...defaultProps };
      delete propsWithoutBrowser.selectedBrowser;
      
      // Component should still render, but PropTypes would warn in development
      expect(() => {
        mountWithIntl(<AndroidMobileExpanded {...propsWithoutBrowser} />);
      }).not.toThrow();
    });
  });
});

