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

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 no content by default (empty strings)', () => {
+    it('has content by default', () => {
       render(<TestComponent />);
 
-      expect(screen.getByTestId('has-content')).toHaveTextContent('false');
+      expect(screen.getByTestId('has-content')).toHaveTextContent('true');
     });
   });
 
@@ -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,362 +781,5 @@ 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,10 +69,7 @@ export const useEditorContent = (
   } = options;
 
   // Unified content state
-  // 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 [content, setContent] = useState(initialContent || DEFAULT_CONTENT);
   const [isDirty, setIsDirty] = useState(false);
   const [lastSaved, setLastSaved] = useState(null);
   const [isAutoSaveEnabled, setIsAutoSaveEnabled] = useState(autoSave);
@@ -82,7 +79,7 @@ export const useEditorContent = (
   const validationDebounceRef = useRef(null);
   const autoSaveRef = useRef(null);
   const validationCallbackRef = useRef(null);
-  const lastContentRef = useRef(initialContentValue);
+  const lastContentRef = useRef(initialContent || DEFAULT_CONTENT);
 
   // Smart debouncing hooks
   const debouncedOnChange = useSmartDebounce(onChange || (() => {}), PERFORMANCE.PREVIEW_UPDATE_DEBOUNCE);