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

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

@@ -5,51 +5,33 @@
  */
 
 import React from 'react';
-import {
-  render, screen, fireEvent, act, waitFor,
-} from '@testing-library/react';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
 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
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation((query) => ({
+  value: jest.fn().mockImplementation(query => ({
     matches: false,
     media: query,
     onchange: null,
@@ -106,97 +88,60 @@ window.getComputedStyle = jest.fn(() => ({
 jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
   warning: jest.fn(),
   error: jest.fn(),
-  success: jest.fn(),
+  success: jest.fn()
 }));
 
 // Mock components
-jest.mock('../components/EditorToolbar', () => function MockEditorToolbar(props) {
-  return (
-    <div data-testid="editor-toolbar">
-      <button onClick={props.onToggleFullscreen}>Toggle Fullscreen</button>
-      <button onClick={() => props.onLabelInsert && props.onLabelInsert('test-label', 10)}>
+jest.mock('../components/EditorToolbar', () => {
+  return function MockEditorToolbar(props) {
+    return (
+      <div data-testid="editor-toolbar">
+        <button onClick={props.onToggleFullscreen}>Toggle Fullscreen</button>
+        <button onClick={() => props.onLabelInsert && props.onLabelInsert('test-label', 10)}>
           Insert Label
-      </button>
-      <button onClick={() => props.onLabelInsert && props.onLabelInsert('test-label', null)}>
-          Insert Label (Null Position)
-      </button>
-      <button onClick={() => props.onSave && props.onSave()}>
+        </button>
+        <button onClick={() => props.onSave && props.onSave()}>
           Save
-      </button>
-    </div>
-  );
+        </button>
+      </div>
+    );
+  };
 });
 
-jest.mock('../components/DeviceToggle', () => function MockDeviceToggle(props) {
-  return (
-    <div data-testid="device-toggle">
-      <button onClick={() => props.onDeviceChange && props.onDeviceChange('android')}>
+jest.mock('../components/DeviceToggle', () => {
+  return function MockDeviceToggle(props) {
+    return (
+      <div data-testid="device-toggle">
+        <button onClick={() => props.onDeviceChange && props.onDeviceChange('android')}>
           Android
-      </button>
-      <button onClick={() => props.onDeviceChange && props.onDeviceChange('ios')}>
+        </button>
+        <button onClick={() => props.onDeviceChange && props.onDeviceChange('ios')}>
           iOS
-      </button>
-    </div>
-  );
+        </button>
+      </div>
+    );
+  };
 });
 
-jest.mock('../components/SplitContainer', () => function MockSplitContainer({ children }) {
-  return <div data-testid="split-container">{children}</div>;
+jest.mock('../components/SplitContainer', () => {
+  return function MockSplitContainer({ children }) {
+    return <div data-testid="split-container">{children}</div>;
+  };
 });
 
-
 jest.mock('../components/CodeEditorPane', () => {
   const React = require('react');
-  const { useEditorContext } = require('../components/common/EditorContext');
-  return React.forwardRef((props, ref) => {
+  return React.forwardRef(function MockCodeEditorPane(props, ref) {
     const [value, setValue] = React.useState('');
-    // Get validation from context
-    let validation = null;
-    try {
-      const context = useEditorContext();
-      validation = context?.validation;
-    } catch (e) {
-      // Context not available, use props or null
-    }
-
-    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;
-    });
 
-    // Import ValidationErrorDisplay mock - use dynamic require to get the mocked version
-    let ValidationErrorDisplay;
-    try {
-      ValidationErrorDisplay = require('../components/ValidationErrorDisplay');
-    } catch (e) {
-      ValidationErrorDisplay = () => null;
-    }
+    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(),
+    }));
 
     return (
       <div data-testid="code-editor-pane">
@@ -210,47 +155,36 @@ 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>
-        {validation && (
-          <ValidationErrorDisplay
-            validation={validation}
-            onErrorClick={props.onErrorClick}
-          />
-        )}
       </div>
     );
   });
 });
 
-jest.mock('../components/PreviewPane', () => function MockPreviewPane(props) {
-  return (
-    <div data-testid="preview-pane" data-fullscreen={props.isFullscreenMode}>
+jest.mock('../components/PreviewPane', () => {
+  return function MockPreviewPane(props) {
+    return (
+      <div data-testid="preview-pane" data-fullscreen={props.isFullscreenMode}>
         Preview Content
-    </div>
-  );
+      </div>
+    );
+  };
 });
 
-jest.mock('../components/ValidationErrorDisplay', () => function MockValidationErrorDisplay({ validation, onErrorClick }) {
-  // Match actual component behavior: check if validation has errors
-  if (!validation || validation.isValidating) return null;
-  const allIssues = validation.getAllIssues?.() || [];
-  if (allIssues.length === 0) return null;
-  return (
-    <div data-testid="validation-error-display">
-      <div>Validation Errors</div>
-      <button onClick={() => onErrorClick && onErrorClick({ line: 5, column: 10 })}>
+jest.mock('../components/ValidationErrorDisplay', () => {
+  return function MockValidationErrorDisplay({ validation, onErrorClick }) {
+    if (!validation || validation.isClean?.()) return null;
+    return (
+      <div data-testid="validation-error-display">
+        <div>Validation Errors</div>
+        <button onClick={() => onErrorClick && onErrorClick({ line: 5, column: 10 })}>
           Error at Line 5
-      </button>
-      <button onClick={() => onErrorClick && onErrorClick({ line: null })}>
+        </button>
+        <button onClick={() => onErrorClick && onErrorClick({ line: null })}>
           Error without Line
-      </button>
-    </div>
-  );
+        </button>
+      </div>
+    );
+  };
 });
 
 // Mock hooks - Return complete hook objects with all required methods
@@ -263,8 +197,8 @@ jest.mock('../hooks/useEditorContent', () => ({
     isLoading: false,
     isDirty: false,
     hasContent: true,
-    getContentSize: jest.fn(() => 20),
-  }),
+    getContentSize: jest.fn(() => 20)
+  })
 }));
 
 jest.mock('../hooks/useInAppContent', () => ({
@@ -272,7 +206,7 @@ jest.mock('../hooks/useInAppContent', () => ({
     content: '<p>Android content</p>',
     deviceContent: {
       android: '<p>Android content</p>',
-      ios: '<p>iOS content</p>',
+      ios: '<p>iOS content</p>'
     },
     activeDevice: 'android',
     keepContentSame: false,
@@ -286,8 +220,8 @@ jest.mock('../hooks/useInAppContent', () => ({
     getContentSize: () => 20,
     isLoading: false,
     isDirty: false,
-    hasContent: true,
-  }),
+    hasContent: true
+  })
 }));
 
 jest.mock('../hooks/useLayoutState', () => ({
@@ -319,8 +253,8 @@ jest.mock('../hooks/useLayoutState', () => ({
     // Layout constraints
     minPaneSize: 20,
     maxPaneSize: 80,
-    gutterSize: 10,
-  }),
+    gutterSize: 10
+  })
 }));
 
 // Mock useValidation - need to use a variable that gets assigned in the factory
@@ -331,11 +265,11 @@ jest.mock('../hooks/useValidation', () => {
     isValidating: false,
     getAllIssues: () => [],
     isClean: () => true,
-    summary: { totalErrors: 0, totalWarnings: 0 },
+    summary: { totalErrors: 0, totalWarnings: 0 }
   }));
 
   return {
-    useValidation: (...args) => mockUseValidationImpl(...args),
+    useValidation: (...args) => mockUseValidationImpl(...args)
   };
 });
 
@@ -363,7 +297,7 @@ describe('HTMLEditor', () => {
     initialContent: '<p>Initial content</p>',
     onChange: jest.fn(),
     onSave: jest.fn(),
-    variant: 'email',
+    variant: 'email'
   };
 
   describe('Loading State', () => {
@@ -433,7 +367,7 @@ describe('HTMLEditor', () => {
 
       // Context should reflect fullscreen mode change
       const previewPanes = screen.getAllByTestId('preview-pane');
-      expect(previewPanes.some((pane) => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
+      expect(previewPanes.some(pane => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
     });
   });
 
@@ -539,44 +473,10 @@ describe('HTMLEditor', () => {
       expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
     });
 
-    it('converts string initialContent to device-specific format for inapp variant', () => {
-      // 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;
-        return originalUseInAppContent(initialContent, {});
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            variant="inapp"
-            initialContent="<p>String content</p>"
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Verify that string content was converted to device-specific format
-      expect(capturedInitialContent).toEqual({
-        android: '<p>String content</p>',
-        ios: '<p>String content</p>',
-      });
-
-      jest.restoreAllMocks();
-    });
-
     it('handles object initialContent for inapp variant', () => {
       const deviceContent = {
         android: '<p>Android content</p>',
-        ios: '<p>iOS content</p>',
+        ios: '<p>iOS content</p>'
       };
 
       render(
@@ -596,42 +496,6 @@ describe('HTMLEditor', () => {
       expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
     });
 
-    it('uses provided device-specific content for inapp variant', () => {
-      // This test covers lines 110-113 in HTMLEditor.js
-      const deviceContent = {
-        android: '<p>Android content</p>',
-        ios: '<p>iOS content</p>',
-      };
-
-      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;
-        return originalUseInAppContent(initialContent, {});
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            variant="inapp"
-            initialContent={deviceContent}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Verify that object content was passed as-is
-      expect(capturedInitialContent).toEqual(deviceContent);
-
-      jest.restoreAllMocks();
-    });
-
     it('handles inapp variant with layoutType', () => {
       render(
         <TestWrapper>
@@ -686,7 +550,7 @@ describe('HTMLEditor', () => {
       // Should open fullscreen modal - now there are 2 preview panes (main + fullscreen modal)
       const previewPanes = screen.getAllByTestId('preview-pane');
       expect(previewPanes.length).toBeGreaterThan(1);
-      expect(previewPanes.some((pane) => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
+      expect(previewPanes.some(pane => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
     });
 
     it('renders fullscreen modal with correct components', () => {
@@ -704,7 +568,7 @@ describe('HTMLEditor', () => {
       fireEvent.click(toggleButton);
 
       const previewPanes = screen.getAllByTestId('preview-pane');
-      expect(previewPanes.some((pane) => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
+      expect(previewPanes.some(pane => pane.getAttribute('data-fullscreen') === 'true')).toBe(true);
     });
 
     it('renders fullscreen modal for inapp variant', () => {
@@ -742,7 +606,7 @@ describe('HTMLEditor', () => {
       fireEvent.click(toggleButton);
 
       // Should have multiple preview panes
-      const previewPanes = screen.getAllByTestId('preview-pane');
+      let previewPanes = screen.getAllByTestId('preview-pane');
       expect(previewPanes.length).toBeGreaterThan(1);
 
       // Close fullscreen (button should still be available to close)
@@ -803,7 +667,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       render(
@@ -824,7 +688,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [],
         isClean: () => true,
-        summary: { totalErrors: 0, totalWarnings: 0 },
+        summary: { totalErrors: 0, totalWarnings: 0 }
       });
 
       render(
@@ -845,7 +709,7 @@ describe('HTMLEditor', () => {
     it('handles readOnly prop', () => {
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} readOnly />
+          <HTMLEditor {...defaultProps} readOnly={true} />
         </TestWrapper>
       );
 
@@ -993,7 +857,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>
@@ -1020,7 +884,7 @@ describe('HTMLEditor', () => {
           focus: jest.fn(),
           getCursor: jest.fn(() => 0),
           // Missing insertText method
-        },
+        }
       };
 
       // Mock the ref to return an editor without insertText
@@ -1055,7 +919,7 @@ describe('HTMLEditor', () => {
           insertText: jest.fn(() => { throw new Error('Insert failed'); }),
           focus: jest.fn(),
           getCursor: jest.fn(() => 0),
-        },
+        }
       };
 
       const TestComponent = () => {
@@ -1121,7 +985,7 @@ describe('HTMLEditor', () => {
         current: {
           navigateToLine: jest.fn(() => { throw new Error('Navigation failed'); }),
           focus: jest.fn(),
-        },
+        }
       };
 
       const TestComponent = () => {
@@ -1206,8 +1070,8 @@ describe('HTMLEditor', () => {
             onContentChange={jest.fn()}
             className="test-class"
             readOnly={false}
-            showFullscreenButton
-            autoSave
+            showFullscreenButton={true}
+            autoSave={true}
             autoSaveInterval={30000}
           />
         </TestWrapper>
@@ -1239,7 +1103,7 @@ describe('HTMLEditor', () => {
         <TestWrapper>
           <HTMLEditor
             variant="inapp"
-            autoSave
+            autoSave={true}
             autoSaveInterval={15000}
             onSave={jest.fn()}
             onContentChange={jest.fn()}
@@ -1276,10 +1140,10 @@ describe('HTMLEditor', () => {
           enableRealTime: true,
           debounceMs: 500,
           enableSanitization: true,
-          securityLevel: 'standard',
+          securityLevel: 'standard'
         }),
         expect.any(Function), // formatSanitizerMessage
-        expect.any(Function) // formatValidatorMessage
+        expect.any(Function)  // formatValidatorMessage
       );
     });
 
@@ -1302,10 +1166,10 @@ describe('HTMLEditor', () => {
           enableRealTime: true,
           debounceMs: 500,
           enableSanitization: true,
-          securityLevel: 'standard',
+          securityLevel: 'standard'
         }),
         expect.any(Function), // formatSanitizerMessage
-        expect.any(Function) // formatValidatorMessage
+        expect.any(Function)  // formatValidatorMessage
       );
     });
 
@@ -1371,7 +1235,7 @@ describe('HTMLEditor', () => {
           enableRealTime: true,
           debounceMs: 500,
           enableSanitization: true,
-          securityLevel: 'standard',
+          securityLevel: 'standard'
         },
         expect.any(Function),
         expect.any(Function)
@@ -1462,8 +1326,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}>
@@ -1561,7 +1425,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       // Create a custom validation display that triggers the error click handler
@@ -1637,7 +1501,7 @@ describe('HTMLEditor', () => {
         current: {
           navigateToLine: jest.fn(),
           focus: jest.fn(),
-        },
+        }
       };
 
       // Mock validation to show errors
@@ -1645,7 +1509,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       const TestComponent = () => {
@@ -1679,7 +1543,7 @@ describe('HTMLEditor', () => {
         current: {
           focus: jest.fn(),
           // Missing navigateToLine method
-        },
+        }
       };
 
       const TestComponent = () => {
@@ -1759,64 +1623,41 @@ describe('HTMLEditor', () => {
   });
 
   describe('Loading State Coverage (Lines 343-349)', () => {
-    it('shows loading state when content is null', () => {
-      // Temporarily override the mock to return null content
-      const originalUseEditorContent = require('../hooks/useEditorContent').useEditorContent;
-      require('../hooks/useEditorContent').useEditorContent = jest.fn(() => null);
-      require('../hooks/useLayoutState').useLayoutState = jest.fn(() => ({
-        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,
-      }));
+    // Create separate test components to isolate mock effects
+    const LoadingTestComponent = ({ mockContent = null, mockLayout = null }) => {
+      // Mock the hooks inline for this specific test
+      const useEditorContentMock = jest.fn(() => mockContent);
+      const useInAppContentMock = jest.fn(() => mockContent);
+      const useLayoutStateMock = jest.fn(() => mockLayout);
+
+      // Replace the hooks temporarily
+      React.useMemo(() => {
+        require('../hooks/useEditorContent').useEditorContent = useEditorContentMock;
+        require('../hooks/useInAppContent').useInAppContent = useInAppContentMock;
+        require('../hooks/useLayoutState').useLayoutState = useLayoutStateMock;
+      }, []);
+
+      return <HTMLEditor {...defaultProps} />;
+    };
 
+    it('shows loading state when content is null', () => {
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} />
+          <LoadingTestComponent mockContent={null} mockLayout={{ splitSizes: [50, 50] }} />
         </TestWrapper>
       );
 
       // Should show loading state
       expect(screen.getByText('Initializing HTML Editor...')).toBeInTheDocument();
-
-      // Restore original mock
-      require('../hooks/useEditorContent').useEditorContent = originalUseEditorContent;
     });
 
     it('shows loading state when layout is null', () => {
-      // Temporarily override the mock to return null layout
-      require('../hooks/useLayoutState').useLayoutState = jest.fn(() => null);
-      require('../hooks/useEditorContent').useEditorContent = jest.fn(() => ({
-        content: '<p>Test</p>',
-        updateContent: jest.fn(),
-        saveContent: jest.fn(),
-        markAsSaved: jest.fn(),
-        isLoading: false,
-        isDirty: false,
-        hasContent: true,
-        getContentSize: jest.fn(() => 20),
-      }));
-
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} />
+          <LoadingTestComponent
+            mockContent={{ content: '<p>Test</p>' }}
+            mockLayout={null}
+          />
         </TestWrapper>
       );
 
@@ -1825,12 +1666,9 @@ describe('HTMLEditor', () => {
     });
 
     it('shows loading state when both content and layout are null', () => {
-      require('../hooks/useEditorContent').useEditorContent = jest.fn(() => null);
-      require('../hooks/useLayoutState').useLayoutState = jest.fn(() => null);
-
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} />
+          <LoadingTestComponent mockContent={null} mockLayout={null} />
         </TestWrapper>
       );
 
@@ -1838,43 +1676,12 @@ describe('HTMLEditor', () => {
     });
 
     it('renders normally when both content and layout are available', () => {
-      require('../hooks/useEditorContent').useEditorContent = jest.fn(() => ({
-        content: '<p>Test</p>',
-        updateContent: jest.fn(),
-        saveContent: jest.fn(),
-        markAsSaved: jest.fn(),
-        isLoading: false,
-        isDirty: false,
-        hasContent: true,
-        getContentSize: jest.fn(() => 20),
-      }));
-      require('../hooks/useLayoutState').useLayoutState = jest.fn(() => ({
-        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,
-      }));
-
       render(
         <TestWrapper>
-          <HTMLEditor {...defaultProps} />
+          <LoadingTestComponent
+            mockContent={{ content: '<p>Test</p>' }}
+            mockLayout={{ splitSizes: [50, 50] }}
+          />
         </TestWrapper>
       );
 
@@ -1895,7 +1702,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       render(
@@ -1927,7 +1734,7 @@ describe('HTMLEditor', () => {
         isValidating: false,
         getAllIssues: () => [{ message: 'Test error', severity: 'error' }],
         isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
+        summary: { totalErrors: 1, totalWarnings: 0 }
       });
 
       render(
@@ -1998,811 +1805,5 @@ describe('HTMLEditor', () => {
       unmount();
     });
   });
+});
 
-  describe('handleContextChange Coverage', () => {
-    it('calls onContextChange when provided instead of making API call', () => {
-      const onContextChange = jest.fn();
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={onContextChange}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Wait for component to render
-      const codeEditorPane = screen.queryByTestId('code-editor-pane');
-      if (!codeEditorPane) {
-        // Component might be in loading state, wait a bit more
-        act(() => {
-          jest.runAllTimers();
-        });
-      }
-
-      // The CodeEditorPane would call onContextChange
-      // We verify that onContextChange is passed and would be called
-      expect(onContextChange).toBeDefined();
-
-      // If onContextChange is provided, globalActions.fetchSchemaForEntity should not be called
-      // This is tested by ensuring onContextChange is used instead
-    });
-
-    it('makes API call when onContextChange is not provided but globalActions is available', () => {
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={null}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Wait for component to render
-      const toolbar = screen.queryByTestId('editor-toolbar');
-      if (!toolbar) {
-        act(() => {
-          jest.runAllTimers();
-        });
-      }
-
-      // The handleContextChange would be called by CodeEditorPane
-      // We verify globalActions is available
-      expect(globalActions.fetchSchemaForEntity).toBeDefined();
-    });
-
-    it('does not make API call when globalActions is not available', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={null}
-            globalActions={null}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // 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();
-    });
-
-    it('uses SMS layout for INAPP variant in handleContextChange', () => {
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            variant="inapp"
-            onContextChange={null}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // 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();
-    });
-
-    it('handles context change with ALL context type', () => {
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={null}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Component should render
-      const toolbar = screen.queryByTestId('editor-toolbar');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      expect(toolbar || loading).toBeTruthy();
-    });
-
-    it('handles context change with embedded type', () => {
-      const globalActions = {
-        fetchSchemaForEntity: jest.fn(),
-      };
-
-      render(
-        <TestWrapper>
-          <HTMLEditor
-            {...defaultProps}
-            onContextChange={null}
-            globalActions={globalActions}
-            location={{ query: { type: 'embedded', module: 'test' } }}
-          />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Component should render
-      const toolbar = screen.queryByTestId('editor-toolbar');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      expect(toolbar || loading).toBeTruthy();
-    });
-  });
-
-  describe('handleLabelInsert Coverage', () => {
-    it('handles label insert when position is null and editor is ready', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Wait for component to render
-      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();
-      }
-
-      const codeEditorPane = screen.queryByTestId('code-editor-pane');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      expect(codeEditorPane || loading).toBeTruthy();
-    });
-
-    it('shows warning when editor is not available for label insert', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Mock CodeEditorPane to return null ref
-      jest.doMock('../components/CodeEditorPane', () => {
-        const React = require('react');
-        return React.forwardRef(() => {
-          // Return null ref
-          React.useImperativeHandle(null, () => null);
-          return <div data-testid="code-editor-pane">Editor</div>;
-        });
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const insertButton = screen.queryByText('Insert Label (Null Position)');
-      if (insertButton) {
-        fireEvent.click(insertButton);
-        // Should show warning when editor is null
-        expect(CapNotification.warning).toHaveBeenCalled();
-      }
-    });
-
-    it('shows error when editor does not have insertText method', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Mock CodeEditorPane to return editor without insertText
-      jest.doMock('../components/CodeEditorPane', () => {
-        const React = require('react');
-        return React.forwardRef((props, ref) => {
-          React.useImperativeHandle(ref, () => ({
-            focus: jest.fn(),
-            getCursor: jest.fn(() => 0),
-            // No insertText method
-          }));
-          return <div data-testid="code-editor-pane">Editor</div>;
-        });
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const insertButton = screen.queryByText('Insert Label (Null Position)');
-      if (insertButton) {
-        fireEvent.click(insertButton);
-        // Should show error when insertText is not available
-        expect(CapNotification.error).toHaveBeenCalled();
-      }
-    });
-
-    it('handles label insert when position is provided (already inserted)', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Simulate label insert with position (already inserted by CodeEditorPane)
-      // This would call handleLabelInsert with a valid position
-      const insertButton = screen.queryByText('Insert Label');
-      if (insertButton) {
-        fireEvent.click(insertButton);
-        // Should show success notification
-        expect(CapNotification.success).toHaveBeenCalled();
-      }
-    });
-
-    it('handles error during label insert', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Mock CodeEditorPane to throw error on insertText
-      jest.doMock('../components/CodeEditorPane', () => {
-        const React = require('react');
-        return React.forwardRef((props, ref) => {
-          React.useImperativeHandle(ref, () => ({
-            insertText: jest.fn(() => {
-              throw new Error('Insert failed');
-            }),
-            focus: jest.fn(),
-            getCursor: jest.fn(() => 0),
-          }));
-          return <div data-testid="code-editor-pane">Editor</div>;
-        });
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const insertButton = screen.queryByText('Insert Label (Null Position)');
-      if (insertButton) {
-        fireEvent.click(insertButton);
-        // Should show error notification
-        expect(CapNotification.error).toHaveBeenCalled();
-      }
-    });
-  });
-
-  describe('handleSave Coverage', () => {
-    it('calls onSave callback when save is triggered', () => {
-      const onSave = jest.fn();
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} onSave={onSave} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const saveButton = screen.queryByText('Save');
-      if (saveButton) {
-        fireEvent.click(saveButton);
-        // onSave should be called
-        expect(onSave).toHaveBeenCalled();
-      } else {
-        // Component might be in loading state
-        const loading = screen.queryByText('Initializing HTML Editor...');
-        expect(loading).toBeTruthy();
-      }
-    });
-
-    it('shows success notification on save', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-      const onSave = jest.fn();
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} onSave={onSave} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const saveButton = screen.queryByText('Save');
-      if (saveButton) {
-        fireEvent.click(saveButton);
-        expect(CapNotification.success).toHaveBeenCalled();
-      }
-    });
-
-    it('handles save error gracefully', () => {
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-      const onSave = jest.fn(() => {
-        throw new Error('Save failed');
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} onSave={onSave} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const saveButton = screen.queryByText('Save');
-      if (saveButton) {
-        fireEvent.click(saveButton);
-        expect(CapNotification.error).toHaveBeenCalled();
-      }
-    });
-  });
-
-  describe('handleValidationErrorClick Coverage', () => {
-    it('navigates to error line when editor has navigateToLine method', () => {
-      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 on error
-      const errorButton = screen.queryByText('Error at Line 5');
-      if (errorButton) {
-        fireEvent.click(errorButton);
-      }
-
-      // Should attempt to navigate to line
-      const codeEditorPane = screen.queryByTestId('code-editor-pane');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      expect(codeEditorPane || loading).toBeTruthy();
-    });
-
-    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',
-        }],
-        isClean: () => false,
-        summary: { totalErrors: 1, totalWarnings: 0 },
-      });
-
-      render(
-        <TestWrapper>
-          <HTMLEditor {...defaultProps} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      // Component should render
-      const codeEditorPane = screen.queryByTestId('code-editor-pane');
-      const loading = screen.queryByText('Initializing HTML Editor...');
-      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);
-      });
-    });
-  });
-});