@capillarytech/creatives-library 8.0.236-alpha.4 → 8.0.236-alpha.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.236-alpha.4",
+  "version": "8.0.236-alpha.6",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js

@@ -10,22 +10,32 @@ import '@testing-library/jest-dom';
 import { IntlProvider } from 'react-intl';
 import HTMLEditor from '../HTMLEditor';
 
+// Options to control CodeEditorPane mock behavior
+const mockCodeEditorOptions = {
+  includeInsertText: true,
+  insertTextThrows: false,
+  setRef: true,
+  navigateToLineThrows: false,
+  includeNavigateToLine: true,
+};
+
+
 // Mock useLayoutEffect to behave like useEffect in tests
 React.useLayoutEffect = React.useEffect;
 
 // Mock browser APIs
 global.IntersectionObserver = class IntersectionObserver {
-  constructor() {}
-  disconnect() {}
-  observe() {}
-  unobserve() {}
+  constructor() { }
+  disconnect() { }
+  observe() { }
+  unobserve() { }
 };
 
 global.ResizeObserver = class ResizeObserver {
-  constructor() {}
-  disconnect() {}
-  observe() {}
-  unobserve() {}
+  constructor() { }
+  disconnect() { }
+  observe() { }
+  unobserve() { }
 };
 
 // Setup window.matchMedia mock
@@ -132,19 +142,42 @@ jest.mock('../components/SplitContainer', () => {
   };
 });
 
+
 jest.mock('../components/CodeEditorPane', () => {
   const React = require('react');
   return React.forwardRef(function MockCodeEditorPane(props, ref) {
     const [value, setValue] = React.useState('');
 
-    React.useImperativeHandle(ref, () => ({
-      insertText: jest.fn(),
-      focus: jest.fn(),
-      getCursor: jest.fn(() => 0),
-      getValue: jest.fn(() => value),
-      setValue: jest.fn((newValue) => setValue(newValue)),
-      navigateToLine: jest.fn(),
-    }));
+    React.useImperativeHandle(ref, () => {
+      if (!mockCodeEditorOptions.setRef) {
+        return null;
+      }
+
+      const methods = {
+        focus: jest.fn(),
+        getCursor: jest.fn(() => 0),
+        getValue: jest.fn(() => value),
+        setValue: jest.fn((newValue) => setValue(newValue)),
+      };
+
+      if (mockCodeEditorOptions.includeNavigateToLine) {
+        methods.navigateToLine = jest.fn(() => {
+          if (mockCodeEditorOptions.navigateToLineThrows) {
+            throw new Error('Navigation failed');
+          }
+        });
+      }
+
+      if (mockCodeEditorOptions.includeInsertText) {
+        methods.insertText = jest.fn(() => {
+          if (mockCodeEditorOptions.insertTextThrows) {
+            throw new Error('Insert failed');
+          }
+        });
+      }
+
+      return methods;
+    });
 
     return (
       <div data-testid="code-editor-pane">
@@ -158,6 +191,12 @@ jest.mock('../components/CodeEditorPane', () => {
           }}
           data-testid="editor-textarea"
         />
+        <button
+          onClick={() => props.onContextChange && props.onContextChange('test-context')}
+          data-testid="trigger-context-change"
+        >
+          Trigger Context Change
+        </button>
       </div>
     );
   });
@@ -480,7 +519,7 @@ describe('HTMLEditor', () => {
       // This test covers lines 104-109 in HTMLEditor.js
       const mockUseInAppContent = require('../hooks/useInAppContent').useInAppContent;
       const originalUseInAppContent = jest.requireActual('../hooks/useInAppContent').useInAppContent;
-      
+
       let capturedInitialContent = null;
       jest.spyOn(require('../hooks/useInAppContent'), 'useInAppContent').mockImplementation((initialContent) => {
         capturedInitialContent = initialContent;
@@ -542,7 +581,7 @@ describe('HTMLEditor', () => {
 
       const mockUseInAppContent = require('../hooks/useInAppContent').useInAppContent;
       const originalUseInAppContent = jest.requireActual('../hooks/useInAppContent').useInAppContent;
-      
+
       let capturedInitialContent = null;
       jest.spyOn(require('../hooks/useInAppContent'), 'useInAppContent').mockImplementation((initialContent) => {
         capturedInitialContent = initialContent;
@@ -930,7 +969,7 @@ describe('HTMLEditor', () => {
   describe('Error Handling', () => {
     it('handles missing editorRef gracefully', () => {
       // Mock console.warn to avoid noise in tests
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => { });
 
       render(
         <TestWrapper>
@@ -1399,8 +1438,8 @@ describe('HTMLEditor', () => {
             <div className="html-editor html-editor--email">
               <CustomToolbar
                 onLabelInsert={handleLabelInsert}
-                onToggleFullscreen={() => {}}
-                onSave={() => {}}
+                onToggleFullscreen={() => { }}
+                onSave={() => { }}
               />
               <div data-testid="split-container">
                 <div data-testid="code-editor-pane" ref={editorRef}>
@@ -1970,7 +2009,7 @@ describe('HTMLEditor', () => {
       // Wait for component to render - might be in loading state
       const toolbar = screen.queryByTestId('editor-toolbar');
       const loading = screen.queryByText('Initializing HTML Editor...');
-      
+
       // Component should render (either loaded or loading)
       expect(toolbar || loading).toBeTruthy();
     });
@@ -1999,7 +2038,7 @@ describe('HTMLEditor', () => {
       // Wait for component to render
       const deviceToggle = screen.queryByTestId('device-toggle');
       const loading = screen.queryByText('Initializing HTML Editor...');
-      
+
       // Component should render (either loaded or loading)
       expect(deviceToggle || loading).toBeTruthy();
     });
@@ -2075,7 +2114,7 @@ describe('HTMLEditor', () => {
       const insertButton = screen.queryByText('Insert Label (Null Position)');
       if (insertButton) {
         fireEvent.click(insertButton);
-        
+
         // Should attempt to insert via editor ref
         // The mock editor has insertText method, so it should work
         expect(CapNotification.success).toHaveBeenCalled();
@@ -2314,6 +2353,8 @@ describe('HTMLEditor', () => {
     });
 
     it('focuses editor when navigateToLine is not available', () => {
+      mockCodeEditorOptions.includeNavigateToLine = false;
+
       mockUseValidationImpl.mockReturnValueOnce({
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', line: 5, column: 10, severity: 'error' }],
@@ -2337,5 +2378,345 @@ describe('HTMLEditor', () => {
       expect(codeEditorPane || loading).toBeTruthy();
     });
   });
+
+
+  describe('Additional Coverage Tests', () => {
+    const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
+
+    beforeEach(() => {
+      // Reset options to default
+      mockCodeEditorOptions.includeInsertText = true;
+      mockCodeEditorOptions.insertTextThrows = false;
+      mockCodeEditorOptions.setRef = true;
+      mockCodeEditorOptions.navigateToLineThrows = false;
+      mockCodeEditorOptions.includeNavigateToLine = true;
+
+      // Clear specific mocks instead of all to avoid breaking other mocks
+      CapNotification.warning.mockClear();
+      CapNotification.error.mockClear();
+      CapNotification.success.mockClear();
+
+      // Restore hooks that might have been corrupted by Loading State Coverage tests
+      // This is necessary because Loading State Coverage tests modify the require cache
+      // and do not restore the original mocks
+      require('../hooks/useEditorContent').useEditorContent = () => ({
+        content: '<p>Test content</p>',
+        updateContent: jest.fn(),
+        saveContent: jest.fn(),
+        markAsSaved: jest.fn(),
+        isLoading: false,
+        isDirty: false,
+        hasContent: true,
+        getContentSize: jest.fn(() => 20)
+      });
+
+      require('../hooks/useInAppContent').useInAppContent = () => ({
+        content: '<p>Android content</p>',
+        deviceContent: {
+          android: '<p>Android content</p>',
+          ios: '<p>iOS content</p>'
+        },
+        activeDevice: 'android',
+        keepContentSame: false,
+        updateContent: jest.fn(),
+        saveContent: jest.fn(),
+        markAsSaved: jest.fn(),
+        switchDevice: jest.fn(),
+        toggleContentSync: jest.fn(),
+        getDeviceContent: (device) => `<p>${device} content</p>`,
+        setDeviceContent: jest.fn(),
+        getContentSize: () => 20,
+        isLoading: false,
+        isDirty: false,
+        hasContent: true
+      });
+
+      require('../hooks/useLayoutState').useLayoutState = () => ({
+        splitSizes: [50, 50],
+        splitSize: 50,
+        viewMode: 'desktop',
+        mobileWidth: 375,
+        isFullscreen: false,
+        isResizing: false,
+        updateSplitSizes: jest.fn(),
+        setSplitSize: jest.fn(),
+        setViewMode: jest.fn(),
+        toggleViewMode: jest.fn(),
+        setMobileWidth: jest.fn(),
+        toggleFullscreen: jest.fn(),
+        resetLayout: jest.fn(),
+        setResizingState: jest.fn(),
+        handleResize: jest.fn(),
+        handleKeyboardShortcut: jest.fn(),
+        isMobileView: false,
+        isDesktopView: true,
+        minPaneSize: 20,
+        maxPaneSize: 80,
+        gutterSize: 10
+      });
+    });
+
+    describe('handleContextChange', () => {
+      it('calls onContextChange prop when provided', () => {
+        const onContextChange = jest.fn();
+        const globalActions = { fetchSchemaForEntity: jest.fn() };
+
+        render(
+          <TestWrapper>
+            <HTMLEditor
+              {...defaultProps}
+              onContextChange={onContextChange}
+              globalActions={globalActions}
+            />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        fireEvent.click(screen.getByTestId('trigger-context-change'));
+
+        expect(onContextChange).toHaveBeenCalledWith('test-context');
+        expect(globalActions.fetchSchemaForEntity).not.toHaveBeenCalled();
+      });
+
+      it('calls globalActions.fetchSchemaForEntity when onContextChange is NOT provided', () => {
+        const globalActions = { fetchSchemaForEntity: jest.fn() };
+        const location = { query: { type: 'embedded' } };
+
+        render(
+          <TestWrapper>
+            <HTMLEditor
+              {...defaultProps}
+              globalActions={globalActions}
+              location={location}
+              variant="email"
+            />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        fireEvent.click(screen.getByTestId('trigger-context-change'));
+
+        expect(globalActions.fetchSchemaForEntity).toHaveBeenCalledWith({
+          layout: 'EMAIL',
+          type: 'TAG',
+          context: 'test-context',
+          embedded: 'embedded',
+        });
+      });
+
+      it('handles INAPP variant in handleContextChange', () => {
+        const globalActions = { fetchSchemaForEntity: jest.fn() };
+        const location = { query: { type: 'full' } };
+
+        render(
+          <TestWrapper>
+            <HTMLEditor
+              {...defaultProps}
+              globalActions={globalActions}
+              location={location}
+              variant="inapp"
+            />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        fireEvent.click(screen.getByTestId('trigger-context-change'));
+
+        expect(globalActions.fetchSchemaForEntity).toHaveBeenCalledWith({
+          layout: 'SMS', // INAPP uses SMS layout
+          type: 'TAG',
+          context: 'test-context',
+          embedded: 'full',
+        });
+      });
+
+      it('handles missing globalActions or location', () => {
+        const globalActions = { fetchSchemaForEntity: jest.fn() };
+
+        // Case 1: No globalActions
+        const { unmount } = render(
+          <TestWrapper>
+            <HTMLEditor
+              {...defaultProps}
+              globalActions={null}
+              location={{}}
+            />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        fireEvent.click(screen.getByTestId('trigger-context-change'));
+        expect(globalActions.fetchSchemaForEntity).not.toHaveBeenCalled();
+        unmount();
+
+        // Case 2: No location
+        render(
+          <TestWrapper>
+            <HTMLEditor
+              {...defaultProps}
+              globalActions={globalActions}
+              location={null}
+            />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        fireEvent.click(screen.getByTestId('trigger-context-change'));
+        expect(globalActions.fetchSchemaForEntity).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('handleLabelInsert', () => {
+      it('shows warning when editor is not ready (position null, no editor)', () => {
+        mockCodeEditorOptions.setRef = false;
+
+        render(
+          <TestWrapper>
+            <HTMLEditor {...defaultProps} />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        // Click the button that passes null position
+        const insertButton = screen.getByText('Insert Label (Null Position)');
+        fireEvent.click(insertButton);
+
+        expect(CapNotification.warning).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: 'Failed to insert label',
+            description: 'Editor is not ready. Please try again.',
+          })
+        );
+      });
+
+      it('shows error when editor method insertText is not available', () => {
+        mockCodeEditorOptions.includeInsertText = false;
+
+        render(
+          <TestWrapper>
+            <HTMLEditor {...defaultProps} />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        const insertButton = screen.getByText('Insert Label (Null Position)');
+        fireEvent.click(insertButton);
+
+        // Should show error when method is missing
+        expect(CapNotification.error).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: 'Failed to insert label',
+          })
+        );
+      });
+
+      it('successfully inserts label when position is null', () => {
+        mockCodeEditorOptions.includeInsertText = true;
+
+        render(
+          <TestWrapper>
+            <HTMLEditor {...defaultProps} />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        const insertButton = screen.getByText('Insert Label (Null Position)');
+        fireEvent.click(insertButton);
+
+        expect(CapNotification.success).toHaveBeenCalled();
+      });
+
+      it('shows error when insertText throws', () => {
+        mockCodeEditorOptions.includeInsertText = true;
+        mockCodeEditorOptions.insertTextThrows = true;
+
+        render(
+          <TestWrapper>
+            <HTMLEditor {...defaultProps} />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        const insertButton = screen.getByText('Insert Label (Null Position)');
+        fireEvent.click(insertButton);
+
+        expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
+          description: 'Insert failed'
+        }));
+      });
+
+      it('shows success notification when position is provided (handled by CodeEditorPane)', () => {
+        render(
+          <TestWrapper>
+            <HTMLEditor {...defaultProps} />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        // Click the button that passes a position
+        const insertButton = screen.getByText('Insert Label');
+        fireEvent.click(insertButton);
+
+        expect(CapNotification.success).toHaveBeenCalled();
+      });
+    });
+
+    describe('handleValidationErrorClick', () => {
+      it('handles error when navigateToLine throws', () => {
+        mockCodeEditorOptions.navigateToLineThrows = true;
+
+        mockUseValidationImpl.mockReturnValueOnce({
+          isValidating: false,
+          getAllIssues: () => [{ message: 'Test error', line: 5, column: 10, severity: 'error' }],
+          isClean: () => false,
+          summary: { totalErrors: 1, totalWarnings: 0 }
+        });
+
+        render(
+          <TestWrapper>
+            <HTMLEditor {...defaultProps} />
+          </TestWrapper>
+        );
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        // Click error button
+        const errorButton = screen.getByText('Error at Line 5');
+        fireEvent.click(errorButton);
+      });
+    });
+  });
 });
 

package/v2Components/HtmlEditor/components/CodeEditorPane/_codeEditorPane.scss

@@ -40,7 +40,7 @@
     overflow: auto;
     position: relative;
     height: 100%;
-    max-height: 31.25rem;
+    max-height: 34.25rem;
     background-color: $CAP_G01;
   }
 
@@ -150,7 +150,7 @@
   .codemirror-wrapper {
     position: relative;
     height: 100%;
-    max-height: 31.25rem;
+    max-height: 34.25rem;
     background-color: $CAP_G01;
     border-radius: 0;
     overflow: hidden;

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

@@ -926,20 +926,24 @@ describe('useInAppContent', () => {
 
   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]: 'initial android',
-        [DEVICE_TYPES.IOS]: 'initial ios',
+        [DEVICE_TYPES.ANDROID]: '',  // Start with empty
+        [DEVICE_TYPES.IOS]: '',
       };
 
       const { rerender } = render(
         <TestComponent initialContent={initialContent} />
       );
 
-      expect(screen.getByTestId('android-content')).toHaveTextContent('initial android');
+      // 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]: 'initial ios',
+        [DEVICE_TYPES.IOS]: '',
       };
 
       rerender(<TestComponent initialContent={updatedContent} />);
@@ -948,19 +952,21 @@ describe('useInAppContent', () => {
     });
 
     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]: 'initial android',
-        [DEVICE_TYPES.IOS]: 'initial ios',
+        [DEVICE_TYPES.ANDROID]: '',
+        [DEVICE_TYPES.IOS]: '',  // Start with empty
       };
 
       const { rerender } = render(
         <TestComponent initialContent={initialContent} />
       );
 
-      expect(screen.getByTestId('ios-content')).toHaveTextContent('initial ios');
+      expect(screen.getByTestId('ios-content')).toHaveTextContent('');
 
+      // Transition from empty to meaningful content - this SHOULD update
       const updatedContent = {
-        [DEVICE_TYPES.ANDROID]: 'initial android',
+        [DEVICE_TYPES.ANDROID]: '',
         [DEVICE_TYPES.IOS]: 'updated ios',
       };
 
@@ -970,18 +976,20 @@ describe('useInAppContent', () => {
     });
 
     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]: 'initial android',
-        [DEVICE_TYPES.IOS]: 'initial ios',
+        [DEVICE_TYPES.ANDROID]: '',
+        [DEVICE_TYPES.IOS]: '',
       };
 
       const { rerender } = render(
         <TestComponent initialContent={initialContent} />
       );
 
-      expect(screen.getByTestId('android-content')).toHaveTextContent('initial android');
-      expect(screen.getByTestId('ios-content')).toHaveTextContent('initial ios');
+      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',
@@ -1016,6 +1024,8 @@ describe('useInAppContent', () => {
     });
 
     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',
@@ -1026,17 +1036,18 @@ describe('useInAppContent', () => {
       );
 
       const updatedContent = {
-        [DEVICE_TYPES.IOS]: 'updated ios',
+        [DEVICE_TYPES.IOS]: 'updated ios',  // Android is undefined
       };
 
       rerender(<TestComponent initialContent={updatedContent} />);
 
-      // Android shouldn't change when newAndroidContent is undefined
+      // 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('updated ios');
+      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',
@@ -1047,26 +1058,28 @@ describe('useInAppContent', () => {
       );
 
       const updatedContent = {
-        [DEVICE_TYPES.ANDROID]: 'updated android',
+        [DEVICE_TYPES.ANDROID]: 'updated android',  // iOS is undefined
       };
 
       rerender(<TestComponent initialContent={updatedContent} />);
 
-      // iOS shouldn't change when newIosContent is undefined
-      expect(screen.getByTestId('android-content')).toHaveTextContent('updated android');
+      // 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]: 'initial',
-        [DEVICE_TYPES.IOS]: 'initial',
+        [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',