@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.10

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');
+    });
+  });
 });
 

package/v2Components/HtmlEditor/hooks/useEditorContent.js

@@ -69,7 +69,10 @@ export const useEditorContent = (
   } = options;
 
   // Unified content state
-  const [content, setContent] = useState(initialContent || DEFAULT_CONTENT);
+  // Use DEFAULT_CONTENT only if initialContent is null or undefined (not empty string)
+  // This allows explicitly passing empty string for empty content
+  const initialContentValue = initialContent == null ? DEFAULT_CONTENT : initialContent;
+  const [content, setContent] = useState(initialContentValue);
   const [isDirty, setIsDirty] = useState(false);
   const [lastSaved, setLastSaved] = useState(null);
   const [isAutoSaveEnabled, setIsAutoSaveEnabled] = useState(autoSave);
@@ -79,7 +82,7 @@ export const useEditorContent = (
   const validationDebounceRef = useRef(null);
   const autoSaveRef = useRef(null);
   const validationCallbackRef = useRef(null);
-  const lastContentRef = useRef(initialContent || DEFAULT_CONTENT);
+  const lastContentRef = useRef(initialContentValue);
 
   // Smart debouncing hooks
   const debouncedOnChange = useSmartDebounce(onChange || (() => {}), PERFORMANCE.PREVIEW_UPDATE_DEBOUNCE);