@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

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

@@ -1,723 +0,0 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mountWithIntl, shallowWithIntl } from '../../../../../helpers/intl-enzym-test-helpers';
-import PreviewControls from '../PreviewControls';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import { LAYOUT_MODE, SELECT_WIDTH, OS_OPTIONS, BROWSER_OPTIONS, STATE_OPTIONS } from '../constants';
-import { getBrowserOptionsForOS } from '../config/notificationMappings';
-
-describe('PreviewControls', () => {
-  const mockOnOSChange = jest.fn();
-  const mockOnBrowserChange = jest.fn();
-  const mockOnStateChange = jest.fn();
-
-  const defaultProps = {
-    selectedOS: 'macOS',
-    selectedBrowser: 'Chrome',
-    selectedState: 'Collapsed',
-    osOptions: OS_OPTIONS,
-    browserOptions: BROWSER_OPTIONS,
-    stateOptions: STATE_OPTIONS,
-    onOSChange: mockOnOSChange,
-    onBrowserChange: mockOnBrowserChange,
-    onStateChange: mockOnStateChange,
-    layoutMode: LAYOUT_MODE.NEW_ROW,
-    showStateDropdown: true,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Basic Rendering', () => {
-    it('should render correctly with default props', () => {
-      const wrapper = shallowWithIntl(<PreviewControls {...defaultProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should render OS and Browser dropdowns', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
-      const selects = wrapper.find(CapSelect.CapCustomSelect);
-      expect(selects.length).toBeGreaterThanOrEqual(2);
-    });
-
-    it('should render State dropdown when showStateDropdown is true', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const selects = wrapper.find(CapSelect.CapCustomSelect);
-      expect(selects.length).toBe(3);
-    });
-
-    it('should not render State dropdown when showStateDropdown is false', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={false} />);
-      const selects = wrapper.find(CapSelect.CapCustomSelect);
-      expect(selects.length).toBe(2);
-    });
-
-    it('should render with minimal required props', () => {
-      const minimalProps = {
-        selectedOS: 'macOS',
-        selectedBrowser: 'Chrome',
-        osOptions: OS_OPTIONS,
-        browserOptions: BROWSER_OPTIONS,
-        onOSChange: mockOnOSChange,
-        onBrowserChange: mockOnBrowserChange,
-        stateOptions: [],
-      };
-      const wrapper = shallowWithIntl(<PreviewControls {...minimalProps} />);
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('Layout Modes', () => {
-    describe('NEW_ROW layout mode', () => {
-      it('should render in newRow layout mode by default', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} />);
-        const rows = wrapper.find(CapRow);
-        expect(rows.length).toBeGreaterThanOrEqual(1);
-      });
-
-      it('should render OS and Browser in first row', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} />);
-        const firstRow = wrapper.find(CapRow).first();
-        const osColumn = firstRow.find('.preview-control-os');
-        const browserColumn = firstRow.find('.preview-control-browser');
-        expect(osColumn.exists()).toBe(true);
-        expect(browserColumn.exists()).toBe(true);
-      });
-
-      it('should render State in separate row when showStateDropdown is true', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} showStateDropdown={true} />);
-        const stateRow = wrapper.find('.preview-controls-state');
-        expect(stateRow.exists()).toBe(true);
-        const stateColumn = stateRow.find('.preview-control-state');
-        expect(stateColumn.exists()).toBe(true);
-      });
-
-      it('should use full width for selects in newRow mode', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} />);
-        const selects = wrapper.find(CapSelect.CapCustomSelect);
-        selects.forEach((select) => {
-          expect(select.prop('width')).toBe(SELECT_WIDTH.FULL);
-        });
-      });
-    });
-
-    describe('INLINE layout mode', () => {
-      it('should render in inline layout mode', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.INLINE} />);
-        const rows = wrapper.find(CapRow);
-        expect(rows.length).toBeGreaterThanOrEqual(1);
-      });
-
-      it('should render State in same row structure when inline', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.INLINE} showStateDropdown={true} />);
-        const stateRow = wrapper.find(CapRow).filterWhere((row) => row.find('.preview-control-state').exists());
-        expect(stateRow.exists()).toBe(true);
-      });
-
-      it('should use full width for selects in inline mode', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.INLINE} />);
-        const selects = wrapper.find(CapSelect.CapCustomSelect);
-        selects.forEach((select) => {
-          expect(select.prop('width')).toBe(SELECT_WIDTH.FULL);
-        });
-      });
-    });
-
-    describe('COMPACT layout mode', () => {
-      it('should render in compact layout mode', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} />);
-        const compactContainer = wrapper.find('.preview-controls-compact');
-        expect(compactContainer.exists()).toBe(true);
-      });
-
-      it('should render all controls in compact container', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={true} />);
-        const compactContainer = wrapper.find('.preview-controls-compact');
-        const controls = compactContainer.find('.preview-control');
-        expect(controls.length).toBe(3);
-      });
-
-      it('should use compact width for selects in compact mode', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} />);
-        const selects = wrapper.find(CapSelect.CapCustomSelect);
-        selects.forEach((select) => {
-          expect(select.prop('width')).toBe(SELECT_WIDTH.COMPACT);
-        });
-      });
-
-      it('should render State dropdown in compact mode when showStateDropdown is true', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={true} />);
-        const stateControl = wrapper.find('.preview-control-state');
-        expect(stateControl.exists()).toBe(true);
-      });
-
-      it('should not render State dropdown in compact mode when showStateDropdown is false', () => {
-        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={false} />);
-        const stateControl = wrapper.find('.preview-control-state');
-        expect(stateControl.exists()).toBe(false);
-      });
-    });
-  });
-
-  describe('Option Switching - OS Changes', () => {
-    it('should call onOSChange when OS is changed', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
-      expect(mockOnOSChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('should reset Browser to first available option when OS changes', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      
-      // Change OS to Windows
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      // Browser should be reset to first available option for Windows
-      const windowsBrowserOptions = getBrowserOptionsForOS('Windows');
-      expect(mockOnBrowserChange).toHaveBeenCalledWith(windowsBrowserOptions[0].value);
-    });
-
-    it('should reset State to first available option when OS changes and showStateDropdown is true', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      // State should be reset to first option
-      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
-    });
-
-    it('should not reset State when OS changes if showStateDropdown is false', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={false} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      expect(mockOnStateChange).not.toHaveBeenCalled();
-    });
-
-    it('should handle OS change when browserOptions is empty', () => {
-      const props = {
-        ...defaultProps,
-        browserOptions: [],
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
-      // onBrowserChange will be called with first option from getBrowserOptionsForOS
-      // even if browserOptions prop is empty, because the handler uses getBrowserOptionsForOS
-      const windowsBrowserOptions = getBrowserOptionsForOS('Windows');
-      if (windowsBrowserOptions && windowsBrowserOptions.length > 0) {
-        expect(mockOnBrowserChange).toHaveBeenCalledWith(windowsBrowserOptions[0].value);
-      }
-    });
-
-    it('should handle OS change when onBrowserChange is not provided', () => {
-      const props = {
-        ...defaultProps,
-        onBrowserChange: undefined,
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
-      // Should not throw error
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should handle OS change when stateOptions is empty', () => {
-      const props = {
-        ...defaultProps,
-        stateOptions: [],
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
-      // onStateChange should not be called if no state options
-      expect(mockOnStateChange).not.toHaveBeenCalled();
-    });
-
-    it('should handle OS change when onStateChange is not provided', () => {
-      const props = {
-        ...defaultProps,
-        onStateChange: undefined,
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
-      // Should not throw error
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('Option Switching - Browser Changes', () => {
-    it('should call onBrowserChange when Browser is changed', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      
-      act(() => {
-        browserSelect.prop('onChange')('Firefox');
-      });
-
-      expect(mockOnBrowserChange).toHaveBeenCalledWith('Firefox');
-      expect(mockOnBrowserChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('should reset State to first available option when Browser changes and showStateDropdown is true', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      
-      act(() => {
-        browserSelect.prop('onChange')('Firefox');
-      });
-
-      // State should be reset to first option
-      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
-    });
-
-    it('should not reset State when Browser changes if showStateDropdown is false', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={false} />);
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      
-      act(() => {
-        browserSelect.prop('onChange')('Firefox');
-      });
-
-      expect(mockOnStateChange).not.toHaveBeenCalled();
-    });
-
-    it('should handle Browser change when stateOptions is empty', () => {
-      const props = {
-        ...defaultProps,
-        stateOptions: [],
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      
-      act(() => {
-        browserSelect.prop('onChange')('Firefox');
-      });
-
-      expect(mockOnBrowserChange).toHaveBeenCalledWith('Firefox');
-      // onStateChange should not be called if no state options
-      expect(mockOnStateChange).not.toHaveBeenCalled();
-    });
-
-    it('should handle Browser change when onStateChange is not provided', () => {
-      const props = {
-        ...defaultProps,
-        onStateChange: undefined,
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      
-      act(() => {
-        browserSelect.prop('onChange')('Firefox');
-      });
-
-      expect(mockOnBrowserChange).toHaveBeenCalledWith('Firefox');
-      // Should not throw error
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('Option Switching - State Changes', () => {
-    it('should call onStateChange when State is changed', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
-      
-      act(() => {
-        stateSelect.prop('onChange')('Expanded');
-      });
-
-      expect(mockOnStateChange).toHaveBeenCalledWith('Expanded');
-      expect(mockOnStateChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not call onStateChange when State dropdown is not shown', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={false} />);
-      // State select should not exist
-      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).filterWhere(
-        (select) => select.prop('options') === STATE_OPTIONS
-      );
-      expect(stateSelect.exists()).toBe(false);
-    });
-  });
-
-  describe('Cascading Dropdown Behavior', () => {
-    it('should cascade reset Browser and State when OS changes', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      // OS change should trigger browser reset
-      const windowsBrowserOptions = getBrowserOptionsForOS('Windows');
-      expect(mockOnBrowserChange).toHaveBeenCalledWith(windowsBrowserOptions[0].value);
-      
-      // OS change should trigger state reset
-      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
-    });
-
-    it('should cascade reset State when Browser changes', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      
-      act(() => {
-        browserSelect.prop('onChange')('Firefox');
-      });
-
-      // Browser change should trigger state reset
-      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
-    });
-
-    it('should maintain cascading behavior across multiple OS changes', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      // First OS change
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-      
-      jest.clearAllMocks();
-      
-      // Second OS change
-      act(() => {
-        osSelect.prop('onChange')('iOS');
-      });
-
-      // Should still cascade
-      const iosBrowserOptions = getBrowserOptionsForOS('iOS');
-      expect(mockOnBrowserChange).toHaveBeenCalledWith(iosBrowserOptions[0].value);
-      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
-    });
-  });
-
-  describe('Props and Values', () => {
-    it('should pass correct selectedOS value to OS select', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedOS="Windows" />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      expect(osSelect.prop('value')).toBe('Windows');
-    });
-
-    it('should pass correct selectedBrowser value to Browser select', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedBrowser="Firefox" />);
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      expect(browserSelect.prop('value')).toBe('Firefox');
-    });
-
-    it('should pass correct selectedState value to State select', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedState="Expanded" showStateDropdown={true} />);
-      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
-      expect(stateSelect.prop('value')).toBe('Expanded');
-    });
-
-    it('should pass correct osOptions to OS select', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      expect(osSelect.prop('options')).toBe(OS_OPTIONS);
-    });
-
-    it('should pass correct browserOptions to Browser select', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      expect(browserSelect.prop('options')).toBe(BROWSER_OPTIONS);
-    });
-
-    it('should pass correct stateOptions to State select', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
-      expect(stateSelect.prop('options')).toBe(STATE_OPTIONS);
-    });
-  });
-
-  describe('CSS Classes', () => {
-    it('should apply correct CSS classes in newRow layout', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} />);
-      const osColumn = wrapper.find('.preview-control-os');
-      const browserColumn = wrapper.find('.preview-control-browser');
-      expect(osColumn.exists()).toBe(true);
-      expect(browserColumn.exists()).toBe(true);
-    });
-
-    it('should apply correct CSS classes in compact layout', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} />);
-      const compactContainer = wrapper.find('.preview-controls-compact');
-      expect(compactContainer.exists()).toBe(true);
-      
-      const osControl = compactContainer.find('.preview-control-os');
-      const browserControl = compactContainer.find('.preview-control-browser');
-      expect(osControl.exists()).toBe(true);
-      expect(browserControl.exists()).toBe(true);
-    });
-
-    it('should apply preview-control class to each control in compact mode', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={true} />);
-      const controls = wrapper.find('.preview-control');
-      expect(controls.length).toBe(3);
-      expect(controls.at(0).hasClass('preview-control-os')).toBe(true);
-      expect(controls.at(1).hasClass('preview-control-browser')).toBe(true);
-      expect(controls.at(2).hasClass('preview-control-state')).toBe(true);
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle empty osOptions array', () => {
-      const props = {
-        ...defaultProps,
-        osOptions: [],
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} />);
-      expect(wrapper.exists()).toBe(true);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      expect(osSelect.prop('options')).toEqual([]);
-    });
-
-    it('should handle empty browserOptions array', () => {
-      const props = {
-        ...defaultProps,
-        browserOptions: [],
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} />);
-      expect(wrapper.exists()).toBe(true);
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      expect(browserSelect.prop('options')).toEqual([]);
-    });
-
-    it('should handle empty stateOptions array', () => {
-      const props = {
-        ...defaultProps,
-        stateOptions: [],
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
-      expect(wrapper.exists()).toBe(true);
-      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
-      expect(stateSelect.prop('options')).toEqual([]);
-    });
-
-    it('should handle undefined selectedState', () => {
-      const props = {
-        ...defaultProps,
-        selectedState: undefined,
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
-      expect(wrapper.exists()).toBe(true);
-      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
-      expect(stateSelect.prop('value')).toBeUndefined();
-    });
-
-    it('should handle rapid option changes', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-        browserSelect.prop('onChange')('Firefox');
-        stateSelect.prop('onChange')('Expanded');
-      });
-
-      expect(mockOnOSChange).toHaveBeenCalled();
-      expect(mockOnBrowserChange).toHaveBeenCalled();
-      expect(mockOnStateChange).toHaveBeenCalled();
-    });
-
-    it('should handle all OS options', () => {
-      OS_OPTIONS.forEach((osOption) => {
-        const props = {
-          ...defaultProps,
-          selectedOS: osOption.value,
-        };
-        const wrapper = mountWithIntl(<PreviewControls {...props} />);
-        const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-        expect(osSelect.prop('value')).toBe(osOption.value);
-      });
-    });
-
-    it('should handle all Browser options', () => {
-      BROWSER_OPTIONS.forEach((browserOption) => {
-        const props = {
-          ...defaultProps,
-          selectedBrowser: browserOption.value,
-        };
-        const wrapper = mountWithIntl(<PreviewControls {...props} />);
-        const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
-        expect(browserSelect.prop('value')).toBe(browserOption.value);
-      });
-    });
-
-    it('should handle all State options', () => {
-      STATE_OPTIONS.forEach((stateOption) => {
-        const props = {
-          ...defaultProps,
-          selectedState: stateOption.value,
-        };
-        const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
-        const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
-        expect(stateSelect.prop('value')).toBe(stateOption.value);
-      });
-    });
-  });
-
-  describe('Stability in Different Layout Modes', () => {
-    it('should maintain functionality when switching from newRow to compact', () => {
-      const props = {
-        ...defaultProps,
-        selectedOS: 'Windows',
-        layoutMode: LAYOUT_MODE.NEW_ROW,
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} />);
-      const osSelect1 = wrapper.find(CapSelect.CapCustomSelect).first();
-      expect(osSelect1.prop('value')).toBe('Windows');
-      
-      wrapper.setProps({ layoutMode: LAYOUT_MODE.COMPACT });
-      wrapper.update();
-      
-      const osSelect2 = wrapper.find(CapSelect.CapCustomSelect).first();
-      expect(osSelect2.prop('value')).toBe('Windows');
-    });
-
-    it('should maintain functionality when switching from compact to inline', () => {
-      const props = {
-        ...defaultProps,
-        selectedBrowser: 'Firefox',
-        layoutMode: LAYOUT_MODE.COMPACT,
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} />);
-      const browserSelect1 = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      expect(browserSelect1.prop('value')).toBe('Firefox');
-      
-      wrapper.setProps({ layoutMode: LAYOUT_MODE.INLINE });
-      wrapper.update();
-      
-      const browserSelect2 = wrapper.find(CapSelect.CapCustomSelect).at(1);
-      expect(browserSelect2.prop('value')).toBe('Firefox');
-    });
-
-    it('should maintain functionality when toggling showStateDropdown', () => {
-      const props = {
-        ...defaultProps,
-        selectedState: 'Expanded',
-        showStateDropdown: true,
-      };
-      const wrapper = mountWithIntl(<PreviewControls {...props} />);
-      const stateSelect1 = wrapper.find(CapSelect.CapCustomSelect).at(2);
-      expect(stateSelect1.prop('value')).toBe('Expanded');
-      
-      wrapper.setProps({ showStateDropdown: false });
-      wrapper.update();
-      
-      const stateSelect2 = wrapper.find(CapSelect.CapCustomSelect).filterWhere(
-        (select) => select.prop('options') === STATE_OPTIONS
-      );
-      expect(stateSelect2.exists()).toBe(false);
-      
-      wrapper.setProps({ showStateDropdown: true, selectedState: 'Expanded' });
-      wrapper.update();
-      
-      const stateSelect3 = wrapper.find(CapSelect.CapCustomSelect).at(2);
-      expect(stateSelect3.prop('value')).toBe('Expanded');
-    });
-  });
-
-  describe('Integration with getBrowserOptionsForOS', () => {
-    it('should use getBrowserOptionsForOS to get browser options when OS changes', () => {
-      const getBrowserOptionsForOSSpy = jest.spyOn(require('../config/notificationMappings'), 'getBrowserOptionsForOS');
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      expect(getBrowserOptionsForOSSpy).toHaveBeenCalledWith('Windows');
-      getBrowserOptionsForOSSpy.mockRestore();
-    });
-
-    it('should handle OS that returns all browsers (macOS)', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedOS="macOS" />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('macOS');
-      });
-
-      const macBrowserOptions = getBrowserOptionsForOS('macOS');
-      expect(mockOnBrowserChange).toHaveBeenCalledWith(macBrowserOptions[0].value);
-    });
-
-    it('should handle OS that excludes Safari (Windows)', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedOS="Windows" />);
-      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
-      
-      act(() => {
-        osSelect.prop('onChange')('Windows');
-      });
-
-      const windowsBrowserOptions = getBrowserOptionsForOS('Windows');
-      expect(windowsBrowserOptions.some(opt => opt.value === 'Safari')).toBe(false);
-      expect(mockOnBrowserChange).toHaveBeenCalledWith(windowsBrowserOptions[0].value);
-    });
-  });
-
-  describe('FormattedMessage Integration', () => {
-    it('should render FormattedMessage for operatingSystem label', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
-      const osLabel = wrapper.find('.preview-control-os').find('CapLabel');
-      expect(osLabel.exists()).toBe(true);
-    });
-
-    it('should render FormattedMessage for browser label', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
-      const browserLabel = wrapper.find('.preview-control-browser').find('CapLabel');
-      expect(browserLabel.exists()).toBe(true);
-    });
-
-    it('should render FormattedMessage for state label when showStateDropdown is true', () => {
-      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
-      const stateLabel = wrapper.find('.preview-control-state').find('CapLabel');
-      expect(stateLabel.exists()).toBe(true);
-    });
-  });
-});
-