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

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

@@ -0,0 +1,723 @@
+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);
+    });
+  });
+});
+