@capillarytech/creatives-library 8.0.271 → 8.0.272

package/v2Components/HtmlEditor/constants.js

@@ -4,29 +4,32 @@
  * Centralized constants for the HTML Editor component
  */
 
+// Documentation URL for Liquid / HTML editor
+export const HTML_EDITOR_DOC_URL = 'https://docs.capillarytech.com/docs/configure-email#html-editor-validation-messages-and-warnings';
+
 // HTML Editor Variants
 export const HTML_EDITOR_VARIANTS = {
   EMAIL: 'email',
-  INAPP: 'inapp'
+  INAPP: 'inapp',
 };
 
 // Device Types (for InApp variant)
 export const DEVICE_TYPES = {
   ANDROID: 'android',
-  IOS: 'ios'
+  IOS: 'ios',
 };
 
 // Editor languages
 export const EDITOR_LANGUAGES = {
   HTML: 'html',
   CSS: 'css',
-  JAVASCRIPT: 'javascript'
+  JAVASCRIPT: 'javascript',
 };
 
 // Preview modes
 export const PREVIEW_MODES = {
   DESKTOP: 'desktop',
-  MOBILE: 'mobile'
+  MOBILE: 'mobile',
 };
 
 // Device specifications for mobile preview
@@ -38,7 +41,7 @@ export const DEVICE_PRESETS = {
     devicePixelRatio: 2.75,
     userAgent: 'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36',
     platform: 'android',
-    model: 'Pixel 7'
+    model: 'Pixel 7',
   },
   IPHONE: {
     key: 'iphone',
@@ -47,30 +50,43 @@ export const DEVICE_PRESETS = {
     devicePixelRatio: 3,
     userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)',
     platform: 'ios',
-    model: 'iPhone 15'
-  }
+    model: 'iPhone 15',
+  },
 };
 
 // Validation severity levels
 export const VALIDATION_SEVERITY = {
   ERROR: 'error',
   WARNING: 'warning',
-  INFO: 'info'
+  INFO: 'info',
 };
 
+/**
+ * Rule Group #1: Input & Sanitization Errors.
+ * ONLY these rules are treated as BLOCKING ERROR for Save/Update/Preview/Test.
+ * All other rule groups (HTML/CSS/Liquid, compatibility, security, etc.) are WARNING only.
+ * Backward compatibility: CKEditor legacy templates (unclosed CSS, indentation, etc.) must never block.
+ */
+export const BLOCKING_ERROR_RULE_IDS = [
+  'sanitizer.invalidInput',
+  'sanitizer.invalidInputNonEmpty',
+  'sanitizer.sanitizationFailed',
+  'sanitizer.dangerousProtocolDetected',
+];
+
 // Validation types
 export const VALIDATION_TYPES = {
   HTML: 'html',
   CSS: 'css',
   JAVASCRIPT: 'javascript',
-  SECURITY: 'security'
+  SECURITY: 'security',
 };
 
 // Error types for preview
 export const PREVIEW_ERROR_TYPES = {
   RUNTIME: 'runtime',
   RENDER: 'render',
-  SECURITY: 'security'
+  SECURITY: 'security',
 };
 
 // Performance thresholds
@@ -79,7 +95,7 @@ export const PERFORMANCE = {
   VALIDATION_DEBOUNCE: 500, // ms
   AUTO_SAVE_INTERVAL: 30000, // ms
   MAX_CONTENT_LENGTH: 100000, // characters
-  PERFORMANCE_WARNING_THRESHOLD: 50000 // characters
+  PERFORMANCE_WARNING_THRESHOLD: 50000, // characters
 };
 
 // Layout constraints
@@ -89,7 +105,7 @@ export const LAYOUT = {
   DEFAULT_SPLIT_SIZES: [50, 50], // [left, right] percentages
   GUTTER_SIZE: 8, // pixels
   MOBILE_BREAKPOINT: 768, // pixels
-  MOBILE_WIDTH_DEFAULT: 375 // pixels
+  MOBILE_WIDTH_DEFAULT: 375, // pixels
 };
 
 
@@ -105,7 +121,7 @@ export const CODEMIRROR_CONFIG = {
   FOLD_GUTTER: true,
   SEARCH_ENABLED: true,
   AUTOCOMPLETE_ENABLED: true,
-  LINT_ENABLED: true
+  LINT_ENABLED: true,
 };
 
 // HTML validation rules (HTMLHint)
@@ -126,7 +142,7 @@ export const HTML_VALIDATION_RULES = {
   'inline-style-disabled': false,
   'inline-script-disabled': false,
   'space-tab-mixed-disabled': 'space',
-  'spec-char-escape': true
+  'spec-char-escape': true,
 };
 
 // CSS validation rules
@@ -137,7 +153,7 @@ export const CSS_VALIDATION_RULES = {
   'declaration-colon-space-after': 'always',
   'declaration-colon-space-before': 'never',
   'block-closing-brace-newline-after': 'always',
-  'block-opening-brace-space-before': 'always'
+  'block-opening-brace-space-before': 'always',
 };
 
 // JavaScript validation rules (ESLint-style)
@@ -148,7 +164,7 @@ export const JS_VALIDATION_RULES = {
   'no-console': 'warn',
   'semi': ['error', 'always'],
   'quotes': ['error', 'single'],
-  'indent': ['error', 2]
+  'indent': ['error', 2],
 };
 
 // Keyboard shortcuts
@@ -163,7 +179,7 @@ export const KEYBOARD_SHORTCUTS = {
   FIND: 'Ctrl+F',
   FIND_MAC: 'Cmd+F',
   REPLACE: 'Ctrl+H',
-  REPLACE_MAC: 'Cmd+Option+F'
+  REPLACE_MAC: 'Cmd+Option+F',
 };
 
 // Feature flags
@@ -176,7 +192,7 @@ export const FEATURES = {
   KEYBOARD_SHORTCUTS: true,
   ERROR_RECOVERY: true,
   PERFORMANCE_MONITORING: true,
-  ACCESSIBILITY_FEATURES: true
+  ACCESSIBILITY_FEATURES: true,
 };
 
 // Animation durations (ms)
@@ -186,7 +202,7 @@ export const ANIMATIONS = {
   SLOW: 500,
   PANEL_RESIZE: 200,
   FADE_IN: 300,
-  SLIDE_IN: 250
+  SLIDE_IN: 250,
 };
 
 // Z-index layers
@@ -195,7 +211,7 @@ export const Z_INDEX = {
   OVERLAY: 1000,
   MODAL: 1050,
   FULLSCREEN: 9999,
-  TOOLTIP: 10000
+  TOOLTIP: 10000,
 };
 
 // Default HTML content template
@@ -239,3 +255,12 @@ export const DEFAULT_HTML_CONTENT = `<!DOCTYPE html>
     </script>
 </body>
 </html>`;
+
+// Constants for tag API calls
+export const TAG = 'TAG';
+export const EMBEDDED = 'embedded';
+export const DEFAULT = 'default';
+export const FULL = 'full';
+export const ALL = 'all';
+export const SMS = 'SMS';
+export const EMAIL = 'EMAIL';

package/v2Components/HtmlEditor/hooks/__tests__/useInAppContent.test.js

@@ -76,7 +76,7 @@ describe('useInAppContent', () => {
 
     it('initializes with custom content for Android', () => {
       const customContent = {
-        [DEVICE_TYPES.ANDROID]: '<p>Custom Android</p>'
+        [DEVICE_TYPES.ANDROID]: '<p>Custom Android</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -86,7 +86,7 @@ describe('useInAppContent', () => {
 
     it('initializes with custom content for iOS', () => {
       const customContent = {
-        [DEVICE_TYPES.IOS]: '<p>Custom iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>Custom iOS</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -97,7 +97,7 @@ describe('useInAppContent', () => {
     it('initializes with custom content for both devices', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -112,10 +112,10 @@ describe('useInAppContent', () => {
       expect(screen.getByTestId('active-device')).toHaveTextContent(DEVICE_TYPES.ANDROID);
     });
 
-    it('has content by default', () => {
+    it('has no content by default (empty strings)', () => {
       render(<TestComponent />);
 
-      expect(screen.getByTestId('has-content')).toHaveTextContent('true');
+      expect(screen.getByTestId('has-content')).toHaveTextContent('false');
     });
   });
 
@@ -152,7 +152,7 @@ describe('useInAppContent', () => {
     it('updates current content when switching devices', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android Content</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS Content</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS Content</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -220,7 +220,7 @@ describe('useInAppContent', () => {
     it('updates only current device when sync is disabled', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       let inAppState;
@@ -254,7 +254,7 @@ describe('useInAppContent', () => {
       expect(mockOnChange).toHaveBeenCalled();
       expect(mockOnChange).toHaveBeenCalledWith(
         expect.objectContaining({
-          [DEVICE_TYPES.ANDROID]: '<p>New</p>'
+          [DEVICE_TYPES.ANDROID]: '<p>New</p>',
         }),
         DEVICE_TYPES.ANDROID
       );
@@ -294,7 +294,7 @@ describe('useInAppContent', () => {
     it('syncs content to both devices when sync is enabled', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -457,7 +457,7 @@ describe('useInAppContent', () => {
   describe('Content Queries', () => {
     it('reports hasContent as true for non-empty content', () => {
       const customContent = {
-        [DEVICE_TYPES.ANDROID]: '<p>Content</p>'
+        [DEVICE_TYPES.ANDROID]: '<p>Content</p>',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -468,7 +468,7 @@ describe('useInAppContent', () => {
     it('reports hasContent as false for empty content', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '',
-        [DEVICE_TYPES.IOS]: ''
+        [DEVICE_TYPES.IOS]: '',
       };
 
       let inAppState;
@@ -487,7 +487,7 @@ describe('useInAppContent', () => {
 
     it('calculates content size correctly', () => {
       const customContent = {
-        [DEVICE_TYPES.ANDROID]: '12345'
+        [DEVICE_TYPES.ANDROID]: '12345',
       };
 
       render(<TestComponent initialContent={customContent} />);
@@ -498,7 +498,7 @@ describe('useInAppContent', () => {
     it('returns 0 size for empty content', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '',
-        [DEVICE_TYPES.IOS]: ''
+        [DEVICE_TYPES.IOS]: '',
       };
 
       let inAppState;
@@ -518,7 +518,7 @@ describe('useInAppContent', () => {
     it('getDeviceContent returns content for specific device', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       let inAppState;
@@ -655,7 +655,7 @@ describe('useInAppContent', () => {
     it('handles very large content', () => {
       const largeContent = 'a'.repeat(100000);
       const customContent = {
-        [DEVICE_TYPES.ANDROID]: largeContent
+        [DEVICE_TYPES.ANDROID]: largeContent,
       };
 
       let inAppState;
@@ -698,7 +698,7 @@ describe('useInAppContent', () => {
     it('switches device and updates content', () => {
       const customContent = {
         [DEVICE_TYPES.ANDROID]: '<p>Android</p>',
-        [DEVICE_TYPES.IOS]: '<p>iOS</p>'
+        [DEVICE_TYPES.IOS]: '<p>iOS</p>',
       };
 
       let inAppState;
@@ -781,5 +781,362 @@ describe('useInAppContent', () => {
       expect(mockOnSave).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('setDeviceContent Coverage', () => {
+    it('sets content for specific device when sync is disabled', () => {
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.setDeviceContent(DEVICE_TYPES.ANDROID, '<p>Android Only</p>');
+      });
+
+      expect(screen.getByTestId('android-content')).toHaveTextContent('<p>Android Only</p>');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('');
+    });
+
+    it('sets content for both devices when sync is enabled', () => {
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      // Enable sync first
+      act(() => {
+        inAppState.toggleContentSync(true);
+      });
+
+      // Then set content
+      act(() => {
+        inAppState.setDeviceContent(DEVICE_TYPES.ANDROID, '<p>Synced Content</p>');
+      });
+
+      expect(screen.getByTestId('android-content')).toHaveTextContent('<p>Synced Content</p>');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('<p>Synced Content</p>');
+    });
+
+    it('warns when setting content for invalid device', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.setDeviceContent('InvalidDevice', '<p>Content</p>');
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Invalid device type')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('warns when setting non-string content', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.setDeviceContent(DEVICE_TYPES.ANDROID, 123);
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('content must be a string')
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Edge Cases Coverage', () => {
+    it('handles updateContent with non-string input', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.updateContent(123);
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('newContent must be a string')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles switchDevice with invalid device type', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      let inAppState;
+      render(<TestComponent onStateChange={(state) => { inAppState = state; }} />);
+
+      act(() => {
+        inAppState.switchDevice('InvalidDevice');
+      });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Invalid device type')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles auto-save with content length below minimum', () => {
+      const onSave = jest.fn();
+      let inAppState;
+      render(
+        <TestComponent
+          options={{ autoSave: true, autoSaveInterval: 100, onSave }}
+          onStateChange={(state) => { inAppState = state; }}
+        />
+      );
+
+      act(() => {
+        inAppState.updateContent(''); // Empty content
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      // onSave should not be called for empty content
+      expect(onSave).not.toHaveBeenCalled();
+    });
+
+    it('handles auto-save interval below minimum', () => {
+      const onSave = jest.fn();
+      let inAppState;
+      render(
+        <TestComponent
+          options={{ autoSave: true, autoSaveInterval: 500, onSave }} // Below 1000ms minimum
+          onStateChange={(state) => { inAppState = state; }}
+        />
+      );
+
+      act(() => {
+        inAppState.updateContent('<p>Content</p>');
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+
+      // onSave should not be called when interval is below minimum
+      expect(onSave).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('setDeviceContent State Updates (L95-L109)', () => {
+    it('updates Android content when newAndroidContent differs from current', () => {
+      // With the fix, initialContent effect only runs on first load or when transitioning from empty to content
+      // After initial load, changing initialContent won't update content (prevents overriding user edits)
+      const initialContent = {
+        [DEVICE_TYPES.ANDROID]: '',  // Start with empty
+        [DEVICE_TYPES.IOS]: '',
+      };
+
+      const { rerender } = render(
+        <TestComponent initialContent={initialContent} />
+      );
+
+      // Initially empty
+      expect(screen.getByTestId('android-content')).toHaveTextContent('');
+
+      // Transition from empty to meaningful content - this SHOULD update
+      const updatedContent = {
+        [DEVICE_TYPES.ANDROID]: 'updated android',
+        [DEVICE_TYPES.IOS]: '',
+      };
+
+      rerender(<TestComponent initialContent={updatedContent} />);
+
+      expect(screen.getByTestId('android-content')).toHaveTextContent('updated android');
+    });
+
+    it('updates iOS content when newIosContent differs from current', () => {
+      // With the fix, initialContent effect only runs on first load or when transitioning from empty to content
+      const initialContent = {
+        [DEVICE_TYPES.ANDROID]: '',
+        [DEVICE_TYPES.IOS]: '',  // Start with empty
+      };
+
+      const { rerender } = render(
+        <TestComponent initialContent={initialContent} />
+      );
+
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('');
+
+      // Transition from empty to meaningful content - this SHOULD update
+      const updatedContent = {
+        [DEVICE_TYPES.ANDROID]: '',
+        [DEVICE_TYPES.IOS]: 'updated ios',
+      };
+
+      rerender(<TestComponent initialContent={updatedContent} />);
+
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('updated ios');
+    });
+
+    it('updates both Android and iOS content when both differ', () => {
+      // With the fix, initialContent effect only runs on first load or when transitioning from empty to content
+      const initialContent = {
+        [DEVICE_TYPES.ANDROID]: '',
+        [DEVICE_TYPES.IOS]: '',
+      };
+
+      const { rerender } = render(
+        <TestComponent initialContent={initialContent} />
+      );
+
+      expect(screen.getByTestId('android-content')).toHaveTextContent('');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('');
+
+      // Transition from empty to meaningful content - this SHOULD update
+      const updatedContent = {
+        [DEVICE_TYPES.ANDROID]: 'updated android',
+        [DEVICE_TYPES.IOS]: 'updated ios',
+      };
+
+      rerender(<TestComponent initialContent={updatedContent} />);
+
+      expect(screen.getByTestId('android-content')).toHaveTextContent('updated android');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('updated ios');
+    });
+
+    it('does not update when content is the same', () => {
+      const initialContent = {
+        [DEVICE_TYPES.ANDROID]: 'same android',
+        [DEVICE_TYPES.IOS]: 'same ios',
+      };
+
+      const { rerender } = render(
+        <TestComponent initialContent={initialContent} />
+      );
+
+      const sameContent = {
+        [DEVICE_TYPES.ANDROID]: 'same android',
+        [DEVICE_TYPES.IOS]: 'same ios',
+      };
+
+      rerender(<TestComponent initialContent={sameContent} />);
+
+      // Content should remain the same
+      expect(screen.getByTestId('android-content')).toHaveTextContent('same android');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('same ios');
+    });
+
+    it('handles undefined newAndroidContent gracefully', () => {
+      // With the fix, after initial load, rerendering with different initialContent won't update
+      // This test now verifies that content persists even when initialContent changes
+      const initialContent = {
+        [DEVICE_TYPES.ANDROID]: 'initial android',
+        [DEVICE_TYPES.IOS]: 'initial ios',
+      };
+
+      const { rerender } = render(
+        <TestComponent initialContent={initialContent} />
+      );
+
+      const updatedContent = {
+        [DEVICE_TYPES.IOS]: 'updated ios',  // Android is undefined
+      };
+
+      rerender(<TestComponent initialContent={updatedContent} />);
+
+      // With the fix, content should NOT change after initial load (prevents overriding user edits)
+      expect(screen.getByTestId('android-content')).toHaveTextContent('initial android');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('initial ios');
+    });
+
+    it('handles undefined newIosContent gracefully', () => {
+      // With the fix, after initial load, rerendering with different initialContent won't update
+      const initialContent = {
+        [DEVICE_TYPES.ANDROID]: 'initial android',
+        [DEVICE_TYPES.IOS]: 'initial ios',
+      };
+
+      const { rerender } = render(
+        <TestComponent initialContent={initialContent} />
+      );
+
+      const updatedContent = {
+        [DEVICE_TYPES.ANDROID]: 'updated android',  // iOS is undefined
+      };
+
+      rerender(<TestComponent initialContent={updatedContent} />);
+
+      // With the fix, content should NOT change after initial load (prevents overriding user edits)
+      expect(screen.getByTestId('android-content')).toHaveTextContent('initial android');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('initial ios');
+    });
+
+    it('returns updated content object when changes are made', () => {
+      // Test that the transition from empty to content works correctly
+      const initialContent = {
+        [DEVICE_TYPES.ANDROID]: '',
+        [DEVICE_TYPES.IOS]: '',
+      };
+
+      const { rerender } = render(
+        <TestComponent initialContent={initialContent} />
+      );
+
+      // Transition from empty to content - this SHOULD update
+      const updatedContent = {
+        [DEVICE_TYPES.ANDROID]: 'updated',
+        [DEVICE_TYPES.IOS]: 'updated',
+      };
+
+      rerender(<TestComponent initialContent={updatedContent} />);
+
+      expect(screen.getByTestId('android-content')).toHaveTextContent('updated');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('updated');
+    });
+
+    it('returns previous content object when no changes', () => {
+      const initialContent = {
+        [DEVICE_TYPES.ANDROID]: 'same',
+        [DEVICE_TYPES.IOS]: 'same',
+      };
+
+      let firstRender = true;
+      let previousState;
+
+      const TestObserver = ({ initialContent, onStateChange }) => {
+        const inAppState = useInAppContent(initialContent);
+
+        React.useEffect(() => {
+          if (firstRender) {
+            previousState = inAppState.deviceContent;
+            firstRender = false;
+          } else {
+            // Check if object reference is the same
+            onStateChange?.(inAppState, previousState);
+          }
+        });
+
+        return (
+          <div>
+            <div data-testid="android-content">{inAppState.deviceContent[DEVICE_TYPES.ANDROID]}</div>
+            <div data-testid="ios-content">{inAppState.deviceContent[DEVICE_TYPES.IOS]}</div>
+          </div>
+        );
+      };
+
+      const onStateChange = jest.fn();
+      const { rerender } = render(
+        <TestObserver initialContent={initialContent} onStateChange={onStateChange} />
+      );
+
+      const sameContent = {
+        [DEVICE_TYPES.ANDROID]: 'same',
+        [DEVICE_TYPES.IOS]: 'same',
+      };
+
+      rerender(<TestObserver initialContent={sameContent} onStateChange={onStateChange} />);
+
+      // Content should be the same
+      expect(screen.getByTestId('android-content')).toHaveTextContent('same');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('same');
+    });
+  });
 });