cap-creatives-ui 8.0.280 → 8.0.321

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

@@ -11,6 +11,8 @@ import {
 import '@testing-library/jest-dom';
 import { IntlProvider } from 'react-intl';
 import HTMLEditor from '../HTMLEditor';
+import { VALIDATION_SEVERITY } from '../constants';
+import { ISSUE_SOURCES } from '../utils/validationConstants';
 
 // Options to control CodeEditorPane mock behavior
 const mockCodeEditorOptions = {
@@ -19,6 +21,7 @@ const mockCodeEditorOptions = {
   setRef: true,
   navigateToLineThrows: false,
   includeNavigateToLine: true,
+  omitGetCursor: false,
 };
 
 
@@ -166,11 +169,14 @@ jest.mock('../components/CodeEditorPane', () => {
 
       const methods = {
         focus: jest.fn(),
-        getCursor: jest.fn(() => 0),
         getValue: jest.fn(() => value),
         setValue: jest.fn((newValue) => setValue(newValue)),
       };
 
+      if (!mockCodeEditorOptions.omitGetCursor) {
+        methods.getCursor = jest.fn(() => 0);
+      }
+
       if (mockCodeEditorOptions.includeNavigateToLine) {
         methods.navigateToLine = jest.fn(() => {
           if (mockCodeEditorOptions.navigateToLineThrows) {
@@ -199,7 +205,20 @@ jest.mock('../components/CodeEditorPane', () => {
     }
 
     return (
-      <div data-testid="code-editor-pane">
+      <div
+        data-testid="code-editor-pane"
+        data-tags={JSON.stringify(props.tags ?? null)}
+        data-injected-tags={JSON.stringify(props.injectedTags ?? null)}
+        data-location={JSON.stringify(props.location ?? null)}
+        data-event-context-tags={JSON.stringify(props.eventContextTags ?? null)}
+        data-wait-event-context-tags={JSON.stringify(props.waitEventContextTags ?? null)}
+        data-selected-offer-details={JSON.stringify(props.selectedOfferDetails ?? null)}
+        data-channel={JSON.stringify(props.channel ?? null)}
+        data-user-locale={props.userLocale ?? ''}
+        data-module-filter-enabled={String(!!props.moduleFilterEnabled)}
+        data-read-only={String(!!props.readOnly)}
+        data-is-fullscreen-mode={String(!!props.isFullscreenMode)}
+      >
         <textarea
           value={value}
           onChange={(e) => {
@@ -216,6 +235,18 @@ jest.mock('../components/CodeEditorPane', () => {
         >
           Trigger Context Change
         </button>
+        <button
+          onClick={() => props.onContextChange && props.onContextChange('ALL')}
+          data-testid="trigger-context-all"
+        >
+          Trigger Context ALL
+        </button>
+        <button
+          onClick={() => props.onContextChange && props.onContextChange(null)}
+          data-testid="trigger-context-null"
+        >
+          Trigger Context Null
+        </button>
         {validation && (
           <ValidationErrorDisplay
             validation={validation}
@@ -249,6 +280,9 @@ jest.mock('../components/ValidationErrorDisplay', () => function MockValidationE
       <button onClick={() => onErrorClick && onErrorClick({ line: null })}>
           Error without Line
       </button>
+      <button onClick={() => onErrorClick && onErrorClick(undefined)}>
+          Error undefined
+      </button>
     </div>
   );
 });
@@ -384,6 +418,195 @@ describe('HTMLEditor', () => {
     });
   });
 
+  describe('waitEventContextTags', () => {
+    const waitTags = {
+      blockA: {
+        eventName: 'Order Placed',
+        blockName: 'Wait',
+        tags: [{ tagName: 'wait.foo', label: 'Foo', profileId: 'p1', profileName: 'P1' }],
+      },
+    };
+
+    it('passes default empty object to CodeEditorPane when waitEventContextTags is omitted', () => {
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const pane = screen.getByTestId('code-editor-pane');
+      expect(pane).toHaveAttribute('data-wait-event-context-tags', JSON.stringify({}));
+      expect(pane).toHaveAttribute('data-is-fullscreen-mode', 'false');
+    });
+
+    it('forwards custom waitEventContextTags to the main CodeEditorPane', () => {
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} waitEventContextTags={waitTags} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const pane = screen.getByTestId('code-editor-pane');
+      expect(pane).toHaveAttribute('data-wait-event-context-tags', JSON.stringify(waitTags));
+    });
+
+    it('forwards the same waitEventContextTags to fullscreen CodeEditorPane when modal opens', () => {
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} waitEventContextTags={waitTags} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.click(screen.getByText('Toggle Fullscreen'));
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const panes = screen.getAllByTestId('code-editor-pane');
+      expect(panes.length).toBeGreaterThanOrEqual(2);
+      const expected = JSON.stringify(waitTags);
+      panes.forEach((pane) => {
+        expect(pane).toHaveAttribute('data-wait-event-context-tags', expected);
+      });
+      const mainPane = panes.find((el) => el.getAttribute('data-is-fullscreen-mode') === 'false');
+      const fsPane = panes.find((el) => el.getAttribute('data-is-fullscreen-mode') === 'true');
+      expect(mainPane).toBeTruthy();
+      expect(fsPane).toBeTruthy();
+    });
+
+    it('forwards waitEventContextTags for inapp variant to main and fullscreen CodeEditorPane', () => {
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} variant="inapp" waitEventContextTags={waitTags} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(screen.getByTestId('code-editor-pane')).toHaveAttribute(
+        'data-wait-event-context-tags',
+        JSON.stringify(waitTags),
+      );
+
+      fireEvent.click(screen.getByText('Toggle Fullscreen'));
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const panes = screen.getAllByTestId('code-editor-pane');
+      const expected = JSON.stringify(waitTags);
+      panes.forEach((pane) => {
+        expect(pane).toHaveAttribute('data-wait-event-context-tags', expected);
+      });
+    });
+
+    it('passes explicit null waitEventContextTags through to CodeEditorPane', () => {
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} waitEventContextTags={null} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(screen.getByTestId('code-editor-pane')).toHaveAttribute(
+        'data-wait-event-context-tags',
+        JSON.stringify(null),
+      );
+    });
+  });
+
+  /**
+   * Covers forwardRef destructuring / defaults for tag-related props (HTMLEditor.js ~93–101)
+   * merged with HTMLEditor.defaultProps and passed through to CodeEditorPane (~663–671).
+   */
+  describe('forwardRef tag-related props (HTMLEditor.js lines 93–101 → CodeEditorPane)', () => {
+    it('passes merged default tag-related props to CodeEditorPane when omitted on the instance', () => {
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const pane = screen.getByTestId('code-editor-pane');
+      expect(pane).toHaveAttribute('data-tags', JSON.stringify([]));
+      expect(pane).toHaveAttribute('data-injected-tags', JSON.stringify({}));
+      expect(pane).toHaveAttribute('data-location', JSON.stringify(null));
+      expect(pane).toHaveAttribute('data-event-context-tags', JSON.stringify([]));
+      expect(pane).toHaveAttribute('data-wait-event-context-tags', JSON.stringify({}));
+      expect(pane).toHaveAttribute('data-selected-offer-details', JSON.stringify([]));
+      expect(pane).toHaveAttribute('data-channel', JSON.stringify(null));
+      expect(pane).toHaveAttribute('data-user-locale', 'en');
+      expect(pane).toHaveAttribute('data-module-filter-enabled', 'true');
+      expect(pane).toHaveAttribute('data-read-only', 'false');
+    });
+
+    it('forwards explicit tag-related props from the forwardRef parameter list to CodeEditorPane', () => {
+      const tags = [{ id: 't1' }];
+      const injectedTags = { custom: { name: 'Custom' } };
+      const location = { query: { module: 'outbound' } };
+      const eventContextTags = [{ tagName: 'entryTrigger.x' }];
+      const waitEventContextTags = { block1: { eventName: 'E', blockName: 'B', tags: [] } };
+      const selectedOfferDetails = [{ type: 'coupon' }];
+
+      render(
+        <TestWrapper>
+          <HTMLEditor
+            {...defaultProps}
+            tags={tags}
+            injectedTags={injectedTags}
+            location={location}
+            eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
+            selectedOfferDetails={selectedOfferDetails}
+            channel="SMS"
+            userLocale="ja"
+            moduleFilterEnabled={false}
+            readOnly
+          />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const pane = screen.getByTestId('code-editor-pane');
+      expect(pane).toHaveAttribute('data-tags', JSON.stringify(tags));
+      expect(pane).toHaveAttribute('data-injected-tags', JSON.stringify(injectedTags));
+      expect(pane).toHaveAttribute('data-location', JSON.stringify(location));
+      expect(pane).toHaveAttribute('data-event-context-tags', JSON.stringify(eventContextTags));
+      expect(pane).toHaveAttribute('data-wait-event-context-tags', JSON.stringify(waitEventContextTags));
+      expect(pane).toHaveAttribute('data-selected-offer-details', JSON.stringify(selectedOfferDetails));
+      expect(pane).toHaveAttribute('data-channel', JSON.stringify('SMS'));
+      expect(pane).toHaveAttribute('data-user-locale', 'ja');
+      expect(pane).toHaveAttribute('data-module-filter-enabled', 'false');
+      expect(pane).toHaveAttribute('data-read-only', 'true');
+    });
+  });
+
   describe('Context Provider', () => {
     it('provides correct context value for email variant', () => {
       render(
@@ -1375,6 +1598,7 @@ describe('HTMLEditor', () => {
           debounceMs: 500,
           enableSanitization: true,
           securityLevel: 'standard',
+          isFullMode: true,
         },
         expect.any(Function),
         expect.any(Function)
@@ -2478,6 +2702,7 @@ describe('HTMLEditor', () => {
       mockCodeEditorOptions.setRef = true;
       mockCodeEditorOptions.navigateToLineThrows = false;
       mockCodeEditorOptions.includeNavigateToLine = true;
+      mockCodeEditorOptions.omitGetCursor = false;
 
       // Clear specific mocks instead of all to avoid breaking other mocks
       CapNotification.warning.mockClear();
@@ -3201,7 +3426,6 @@ describe('HTMLEditor', () => {
             onTagSelect={onTagSelect}
             onContextChange={onContextChange}
             globalActions={globalActions}
-            isLiquidEnabled={true}
             isFullMode={false}
             onErrorAcknowledged={onErrorAcknowledged}
             onValidationChange={onValidationChange}
@@ -3261,20 +3485,6 @@ describe('HTMLEditor', () => {
       expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
     });
 
-    it('should handle isLiquidEnabled prop', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor isLiquidEnabled={true} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
     it('should handle isFullMode prop', () => {
       render(
         <TestWrapper>
@@ -3481,6 +3691,7 @@ describe('HTMLEditor', () => {
             tags={null}
             injectedTags={null}
             eventContextTags={null}
+            waitEventContextTags={null}
             selectedOfferDetails={null}
             onTagContextChange={null}
             onTagSelect={null}
@@ -3506,6 +3717,7 @@ describe('HTMLEditor', () => {
           <HTMLEditor
             tags={[]}
             eventContextTags={[]}
+            waitEventContextTags={{}}
             selectedOfferDetails={[]}
           />
         </TestWrapper>
@@ -3555,4 +3767,703 @@ describe('HTMLEditor', () => {
       expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
     });
   });
+
+  /**
+   * Covers remaining HTMLEditor.js branches for 100% file coverage:
+   * useImperativeHandle getters (302–304), validation effects (350, 416, 440–441), onErrorAcknowledged (543).
+   */
+  describe('HTMLEditor full file coverage', () => {
+    beforeEach(() => {
+      mockCodeEditorOptions.omitGetCursor = false;
+      mockCodeEditorOptions.setRef = true;
+      mockCodeEditorOptions.includeInsertText = true;
+      mockCodeEditorOptions.insertTextThrows = false;
+
+      mockUseValidationImpl.mockReset();
+      mockUseValidationImpl.mockImplementation(() => ({
+        isValidating: false,
+        getAllIssues: () => [],
+        isClean: () => true,
+        summary: { totalErrors: 0, totalWarnings: 0 },
+      }));
+
+      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,
+      });
+    });
+
+    it('ref exposes getValidation, getContent, and isContentEmpty (lines 302–304)', async () => {
+      const ref = React.createRef();
+      const WrappedHTMLEditor = HTMLEditor.WrappedComponent || HTMLEditor;
+      const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
+      const { intl } = intlProvider.getChildContext();
+
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: false,
+        getAllIssues: () => [],
+        isClean: () => true,
+        summary: { totalErrors: 0, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <WrappedHTMLEditor
+            {...defaultProps}
+            intl={intl}
+            ref={ref}
+            initialContent="<p>hi</p>"
+          />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      });
+
+      expect(ref.current.getValidation()).toBeDefined();
+      expect(ref.current.getContent()).toBe('<p>Test content</p>');
+      expect(ref.current.isContentEmpty()).toBe(false);
+    });
+
+    it('skips main validation notify effect while isValidating is true (line 350)', () => {
+      const onValidationChange = jest.fn();
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: true,
+        hasBlockingErrors: false,
+        getAllIssues: () => [],
+        isClean: () => true,
+        summary: { totalErrors: 0, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(onValidationChange).toHaveBeenCalled();
+      const withComplete = onValidationChange.mock.calls.filter((c) => c[0]?.validationComplete === true);
+      expect(withComplete.length).toBe(0);
+    });
+
+    it('skips api validation errors effect while validation is still running (line 416)', () => {
+      const onValidationChange = jest.fn();
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: true,
+        hasBlockingErrors: false,
+        getAllIssues: () => [],
+        isClean: () => true,
+        summary: { totalErrors: 0, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor
+            {...defaultProps}
+            onValidationChange={onValidationChange}
+            apiValidationErrors={{ liquidErrors: ['x'], standardErrors: [] }}
+          />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      onValidationChange.mockClear();
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const afterClear = onValidationChange.mock.calls.filter((c) => c[0]?.validationComplete === true);
+      expect(afterClear.length).toBe(0);
+    });
+
+    it('api validation errors effect notifies parent when issue counts change (lines 440–441)', () => {
+      const onValidationChange = jest.fn();
+      let issues = [];
+
+      // Keep summary primitives stable so the main validation effect (line 343) does not re-run
+      // when only getAllIssues() starts returning API-style issues; the api-only effect (409)
+      // still runs because `validation` reference changes each render.
+      mockUseValidationImpl.mockImplementation(() => ({
+        isValidating: false,
+        hasBlockingErrors: false,
+        getAllIssues: () => issues,
+        isClean: () => issues.length === 0,
+        summary: { totalErrors: 0, totalWarnings: 0 },
+        lastValidated: { getTime: () => 0 },
+      }));
+
+      const { rerender } = render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      onValidationChange.mockClear();
+
+      issues = [{ rule: 'liquid-api-validation', message: 'API error', source: 'liquid' }];
+
+      rerender(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(onValidationChange).toHaveBeenCalled();
+      const lastCall = onValidationChange.mock.calls[onValidationChange.mock.calls.length - 1][0];
+      expect(lastCall.validationComplete).toBe(true);
+      expect(lastCall.issueCounts.errors).toBeGreaterThanOrEqual(1);
+    });
+
+    it('calls onErrorAcknowledged when user clicks a validation error (lines 542–543)', () => {
+      const onErrorAcknowledged = jest.fn();
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: false,
+        getAllIssues: () => [{ source: 'htmlhint', rule: 'rule1', message: 'E' }],
+        isClean: () => false,
+        summary: { totalErrors: 1, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onErrorAcknowledged={onErrorAcknowledged} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.click(screen.getByText('Error without Line'));
+      expect(onErrorAcknowledged).toHaveBeenCalled();
+    });
+
+    it('getIssueCounts covers isBlockingError branches (standard API, liquid error, sanitizer, warning)', async () => {
+      const ref = React.createRef();
+      const WrappedHTMLEditor = HTMLEditor.WrappedComponent || HTMLEditor;
+      const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
+      const { intl } = intlProvider.getChildContext();
+
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: false,
+        hasBlockingErrors: true,
+        getAllIssues: () => [
+          { rule: 'standard-api-validation', message: 'a' },
+          { source: ISSUE_SOURCES.LIQUID, severity: VALIDATION_SEVERITY.ERROR, message: 'b' },
+          { rule: 'sanitizer.invalidInput', message: 'c' },
+          { rule: 'html-warn', message: 'd' },
+        ],
+        isClean: () => false,
+        summary: { totalErrors: 4, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <WrappedHTMLEditor {...defaultProps} intl={intl} ref={ref} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      });
+
+      expect(ref.current.getIssueCounts()).toEqual({
+        errors: 3,
+        warnings: 1,
+        total: 4,
+      });
+    });
+
+    it('maps ALL context to DEFAULT in handleContextChange', () => {
+      const globalActions = { fetchSchemaForEntity: jest.fn() };
+      const location = { query: { type: 'full' } };
+
+      render(
+        <TestWrapper>
+          <HTMLEditor
+            {...defaultProps}
+            globalActions={globalActions}
+            location={location}
+            variant="email"
+          />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.click(screen.getByTestId('trigger-context-all'));
+
+      expect(globalActions.fetchSchemaForEntity).toHaveBeenCalledWith({
+        layout: 'EMAIL',
+        type: 'TAG',
+        context: 'default',
+        embedded: 'full',
+      });
+    });
+
+    it('email variant runs updateContent when initialContent differs from stored content', () => {
+      const updateContent = jest.fn();
+      require('../hooks/useEditorContent').useEditorContent = () => ({
+        content: '<p>Stale</p>',
+        updateContent,
+        saveContent: jest.fn(),
+        markAsSaved: jest.fn(),
+        isLoading: false,
+        isDirty: false,
+        hasContent: true,
+        getContentSize: jest.fn(() => 20),
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} initialContent="<p>Initial content</p>" />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(updateContent).toHaveBeenCalledWith('<p>Initial content</p>', true);
+    });
+
+    it('inapp variant runs updateContent when device content differs from initialContent string', () => {
+      const updateContent = jest.fn();
+      require('../hooks/useInAppContent').useInAppContent = () => ({
+        activeDevice: 'android',
+        keepContentSame: false,
+        updateContent,
+        saveContent: jest.fn(),
+        markAsSaved: jest.fn(),
+        switchDevice: jest.fn(),
+        toggleContentSync: jest.fn(),
+        getDeviceContent: () => '<p>android content</p>',
+        setDeviceContent: jest.fn(),
+        getContentSize: () => 20,
+        isLoading: false,
+        isDirty: false,
+        hasContent: true,
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor
+            {...defaultProps}
+            variant="inapp"
+            initialContent="<p>Initial content</p>"
+          />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(updateContent).toHaveBeenCalledWith('<p>Initial content</p>', true);
+    });
+
+    it('handleLabelInsert uses numeric cursor when getCursor is not a function', () => {
+      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
+      mockCodeEditorOptions.omitGetCursor = true;
+
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.click(screen.getByText('Insert Label (Null Position)'));
+
+      expect(CapNotification.success).toHaveBeenCalled();
+    });
+
+    it('handleValidationErrorClick with undefined error focuses editor when ref is set', () => {
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: false,
+        getAllIssues: () => [{ source: 'htmlhint', rule: 'rule1', message: 'E' }],
+        isClean: () => false,
+        summary: { totalErrors: 1, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.click(screen.getByText('Error undefined'));
+    });
+
+    it('handleValidationErrorClick skips editor when ref is not available', () => {
+      mockCodeEditorOptions.setRef = false;
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: false,
+        getAllIssues: () => [{ source: 'htmlhint', rule: 'rule1', message: 'E' }],
+        isClean: () => false,
+        summary: { totalErrors: 1, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onErrorAcknowledged={jest.fn()} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.click(screen.getByText('Error at Line 5'));
+    });
+
+    it('getIssueCounts treats nullish issues as non-blocking (isBlockingError issue || {})', async () => {
+      const ref = React.createRef();
+      const WrappedHTMLEditor = HTMLEditor.WrappedComponent || HTMLEditor;
+      const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
+      const { intl } = intlProvider.getChildContext();
+
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: false,
+        hasBlockingErrors: false,
+        getAllIssues: () => [undefined, null, {}],
+        isClean: () => false,
+        summary: { totalErrors: 0, totalWarnings: 3 },
+      });
+
+      render(
+        <TestWrapper>
+          <WrappedHTMLEditor {...defaultProps} intl={intl} ref={ref} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      });
+
+      expect(ref.current.getIssueCounts()).toEqual({
+        errors: 0,
+        warnings: 3,
+        total: 3,
+      });
+    });
+
+    it('handleContextChange uses embedded full when location.query is missing', () => {
+      const globalActions = { fetchSchemaForEntity: jest.fn() };
+      const location = { pathname: '/creatives' };
+
+      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: 'full',
+      });
+    });
+
+    it('handleSave succeeds when content.content is undefined', () => {
+      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
+      const onSave = jest.fn();
+
+      require('../hooks/useEditorContent').useEditorContent = () => ({
+        content: undefined,
+        updateContent: jest.fn(),
+        saveContent: jest.fn(),
+        markAsSaved: jest.fn(),
+        isLoading: false,
+        isDirty: false,
+        hasContent: false,
+        getContentSize: jest.fn(() => 0),
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onSave={onSave} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.click(screen.getByText('Save'));
+
+      expect(onSave).toHaveBeenCalledWith({ html: undefined, css: undefined, javascript: undefined });
+      expect(CapNotification.success).toHaveBeenCalled();
+    });
+
+    it('countIssuesBySeverity handles null allIssues from getAllIssues', async () => {
+      const ref = React.createRef();
+      const WrappedHTMLEditor = HTMLEditor.WrappedComponent || HTMLEditor;
+      const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
+      const { intl } = intlProvider.getChildContext();
+
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: false,
+        getAllIssues: () => null,
+        isClean: () => true,
+        summary: { totalErrors: 0, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <WrappedHTMLEditor {...defaultProps} intl={intl} ref={ref} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      });
+
+      expect(ref.current.getIssueCounts()).toEqual({
+        errors: 0,
+        warnings: 0,
+        total: 0,
+      });
+    });
+
+    it('handleContextChange lowercases null contextData to empty string', () => {
+      const globalActions = { fetchSchemaForEntity: jest.fn() };
+      const location = { query: { type: 'full' } };
+
+      render(
+        <TestWrapper>
+          <HTMLEditor
+            {...defaultProps}
+            globalActions={globalActions}
+            location={location}
+            variant="email"
+          />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.click(screen.getByTestId('trigger-context-null'));
+
+      expect(globalActions.fetchSchemaForEntity).toHaveBeenCalledWith({
+        layout: 'EMAIL',
+        type: 'TAG',
+        context: '',
+        embedded: 'full',
+      });
+    });
+
+    it('inapp initialContent object falls back to ANDROID when active device slot is missing', () => {
+      const updateContent = jest.fn();
+      require('../hooks/useInAppContent').useInAppContent = () => ({
+        activeDevice: 'android',
+        keepContentSame: false,
+        updateContent,
+        saveContent: jest.fn(),
+        markAsSaved: jest.fn(),
+        switchDevice: jest.fn(),
+        toggleContentSync: jest.fn(),
+        getDeviceContent: () => '<p>old</p>',
+        setDeviceContent: jest.fn(),
+        getContentSize: () => 20,
+        isLoading: false,
+        isDirty: false,
+        hasContent: true,
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor
+            {...defaultProps}
+            variant="inapp"
+            initialContent={{ ios: '<p>ios only</p>' }}
+          />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(updateContent).toHaveBeenCalledWith('', true);
+    });
+
+    it('inapp initialContent effect skips when updateContent is not available', () => {
+      require('../hooks/useInAppContent').useInAppContent = () => ({
+        activeDevice: 'android',
+        keepContentSame: false,
+        updateContent: undefined,
+        saveContent: jest.fn(),
+        markAsSaved: jest.fn(),
+        switchDevice: jest.fn(),
+        toggleContentSync: jest.fn(),
+        getDeviceContent: () => '<p>x</p>',
+        setDeviceContent: jest.fn(),
+        getContentSize: () => 20,
+        isLoading: false,
+        isDirty: false,
+        hasContent: true,
+      });
+
+      render(
+        <TestWrapper>
+          <HTMLEditor
+            {...defaultProps}
+            variant="inapp"
+            initialContent="<p>y</p>"
+          />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
+    });
+
+    it('uses default forwardRef props when only intl is supplied', () => {
+      const WrappedHTMLEditor = HTMLEditor.WrappedComponent || HTMLEditor;
+      const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
+      const { intl } = intlProvider.getChildContext();
+
+      render(
+        <TestWrapper>
+          <WrappedHTMLEditor intl={intl} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
+    });
+
+    it('main validation effect notifies when isContentEmpty changes (hasChanged branch)', () => {
+      const onValidationChange = jest.fn();
+      let hookContent = '';
+
+      require('../hooks/useEditorContent').useEditorContent = () => ({
+        content: hookContent,
+        updateContent: jest.fn(),
+        saveContent: jest.fn(),
+        markAsSaved: jest.fn(),
+        isLoading: false,
+        isDirty: false,
+        hasContent: !!hookContent,
+        getContentSize: jest.fn(() => hookContent.length),
+      });
+
+      const { rerender } = render(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      onValidationChange.mockClear();
+
+      hookContent = '<p>not empty</p>';
+
+      rerender(
+        <TestWrapper>
+          <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      expect(onValidationChange).toHaveBeenCalled();
+      const lastCall = onValidationChange.mock.calls[onValidationChange.mock.calls.length - 1][0];
+      expect(lastCall.isContentEmpty).toBe(false);
+    });
+  });
 });