@capillarytech/creatives-library 8.0.249 → 8.0.250-alpha.0

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -0,0 +1,1749 @@
+/**
+ * EmailHTMLEditor Component Tests
+ *
+ * Comprehensive tests to cover all uncovered lines in EmailHTMLEditor component
+ */
+
+import React from 'react';
+import {
+  render, screen, fireEvent, waitFor, act,
+} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import EmailHTMLEditor from '../EmailHTMLEditor';
+import { validateLiquidTemplateContent } from '../../../../utils/commonUtils';
+import { validateTags } from '../../../../utils/tagValidations';
+import { isEmailUnsubscribeTagMandatory } from '../../../../utils/common';
+
+// Mock dependencies
+jest.mock('../../../../utils/commonUtils', () => ({
+  validateLiquidTemplateContent: jest.fn(),
+}));
+
+jest.mock('../../../../utils/tagValidations', () => ({
+  validateTags: jest.fn(),
+}));
+
+// Create mutable mock for hasLiquidSupportFeature
+let mockHasLiquidSupportFeature = jest.fn(() => true);
+jest.mock('../../../../utils/common', () => ({
+  hasLiquidSupportFeature: (...args) => mockHasLiquidSupportFeature(...args),
+  isEmailUnsubscribeTagMandatory: jest.fn(() => false),
+}));
+
+jest.mock('../../../../utils/history', () => ({
+  push: jest.fn(),
+}));
+
+jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
+  error: jest.fn(),
+  success: jest.fn(),
+  warning: jest.fn(),
+}));
+
+// Create mutable mock functions that can be controlled in tests
+let mockGetAllIssues = jest.fn(() => []);
+let mockGetValidationState = jest.fn(() => ({
+  isValidating: false,
+  hasErrors: false,
+  issueCounts: {
+    html: 0, label: 0, liquid: 0, total: 0,
+  },
+}));
+
+// Mock HtmlEditor - it exports a lazy-loaded component by default
+jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
+  const React = require('react');
+  const MockHTMLEditor = React.forwardRef((props, ref) => {
+    React.useImperativeHandle(ref, () => ({
+      getAllIssues: () => mockGetAllIssues(),
+      getValidationState: () => mockGetValidationState(),
+      getValidation: () => mockGetValidationState(),
+      isContentEmpty: () => !props.initialContent || (typeof props.initialContent === 'string' && props.initialContent.trim() === ''),
+      getIssueCounts: () => {
+        const issues = mockGetAllIssues();
+        return {
+          html: issues.filter(i => i.source === 'htmlhint' || i.source === 'css-validator').length,
+          label: issues.filter(i => i.rule === 'tag-pair' || i.message?.includes('tag must be paired')).length,
+          liquid: issues.filter(i => i.source === 'liquid-validator').length,
+          total: issues.length,
+        };
+      },
+    }));
+
+    return (
+      <div data-testid="html-editor">
+        <button
+          onClick={() => props.onContentChange && props.onContentChange('<p>New content</p>')}
+          data-testid="trigger-content-change"
+        >
+          Change Content
+        </button>
+        <button
+          onClick={() => props.onSave && props.onSave()}
+          data-testid="trigger-save"
+        >
+          Save
+        </button>
+        <button
+          onClick={() => props.onErrorAcknowledged && props.onErrorAcknowledged()}
+          data-testid="trigger-error-acknowledged"
+        >
+          Acknowledge Error
+        </button>
+        <button
+          onClick={() => props.onValidationChange && props.onValidationChange({
+            isContentEmpty: false,
+            issueCounts: {
+              html: 0, label: 0, liquid: 0, total: 0,
+            },
+            validationComplete: true,
+            hasErrors: false,
+          })}
+          data-testid="trigger-validation-change"
+        >
+          Validation Change
+        </button>
+      </div>
+    );
+  });
+  MockHTMLEditor.displayName = 'MockHTMLEditor';
+  return MockHTMLEditor;
+});
+
+// Also mock the main index.js which exports the lazy version
+jest.mock('../../../../v2Components/HtmlEditor', () => {
+  const React = require('react');
+  const MockHTMLEditor = React.forwardRef((props, ref) => {
+    React.useImperativeHandle(ref, () => ({
+      getAllIssues: () => mockGetAllIssues(),
+      getValidationState: () => mockGetValidationState(),
+      getValidation: () => mockGetValidationState(),
+      isContentEmpty: () => !props.initialContent || (typeof props.initialContent === 'string' && props.initialContent.trim() === ''),
+      getIssueCounts: () => {
+        const issues = mockGetAllIssues();
+        return {
+          html: issues.filter(i => i.source === 'htmlhint' || i.source === 'css-validator').length,
+          label: issues.filter(i => i.rule === 'tag-pair' || i.message?.includes('tag must be paired')).length,
+          liquid: issues.filter(i => i.source === 'liquid-validator').length,
+          total: issues.length,
+        };
+      },
+    }));
+
+    return (
+      <div data-testid="html-editor">
+        <button
+          onClick={() => props.onContentChange && props.onContentChange('<p>New content</p>')}
+          data-testid="trigger-content-change"
+        >
+          Change Content
+        </button>
+        <button
+          onClick={() => props.onSave && props.onSave()}
+          data-testid="trigger-save"
+        >
+          Save
+        </button>
+        <button
+          onClick={() => props.onErrorAcknowledged && props.onErrorAcknowledged()}
+          data-testid="trigger-error-acknowledged"
+        >
+          Acknowledge Error
+        </button>
+        <button
+          onClick={() => props.onValidationChange && props.onValidationChange({
+            isContentEmpty: false,
+            issueCounts: {
+              html: 0, label: 0, liquid: 0, total: 0,
+            },
+            validationComplete: true,
+            hasErrors: false,
+          })}
+          data-testid="trigger-validation-change"
+        >
+          Validation Change
+        </button>
+      </div>
+    );
+  });
+  MockHTMLEditor.displayName = 'MockHTMLEditor';
+  return {
+    __esModule: true,
+    default: MockHTMLEditor,
+  };
+});
+
+jest.mock('../../../../v2Components/CapTagListWithInput', () => {
+  const React = require('react');
+  return function MockCapTagListWithInput(props) {
+    const [value, setValue] = React.useState(props.inputValue || '');
+    React.useEffect(() => {
+      setValue(props.inputValue || '');
+    }, [props.inputValue]);
+    return (
+      <div data-testid="cap-tag-list-input">
+        <input
+          id="template-subject"
+          data-testid="subject-input"
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+            if (props.inputOnChange) {
+              props.inputOnChange(e);
+            }
+          }}
+          placeholder={props.inputPlaceholder}
+        />
+        <button
+          onClick={() => props.onTagSelect && props.onTagSelect('customer.name')}
+          data-testid="trigger-tag-select"
+        >
+          Select Tag
+        </button>
+        <button
+          onClick={() => props.onContextChange && props.onContextChange('default')}
+          data-testid="trigger-context-change"
+        >
+          Change Context
+        </button>
+      </div>
+    );
+  };
+});
+
+// Mock browser APIs
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() { }
+
+  disconnect() { }
+
+  observe() { }
+
+  unobserve() { }
+};
+
+global.ResizeObserver = class ResizeObserver {
+  constructor() { }
+
+  disconnect() { }
+
+  observe() { }
+
+  unobserve() { }
+};
+
+// Mock useLayoutEffect to behave like useEffect in tests
+React.useLayoutEffect = React.useEffect;
+
+// Mock browser APIs
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+  unobserve() { }
+};
+
+global.ResizeObserver = class ResizeObserver {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+  unobserve() { }
+};
+
+// Mock useLayoutEffect to behave like useEffect in tests
+React.useLayoutEffect = React.useEffect;
+
+// Mock browser APIs
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+  unobserve() { }
+};
+
+global.ResizeObserver = class ResizeObserver {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+  unobserve() { }
+};
+
+// Setup window.matchMedia mock
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// Mock enquire.js for Ant Design responsive behavior
+jest.mock('enquire.js', () => ({
+  register: jest.fn(),
+  unregister: jest.fn(),
+}));
+
+// Mock Ant Design's responsive observer
+jest.mock('antd/lib/_util/responsiveObserve', () => ({
+  subscribe: jest.fn(() => jest.fn()), // Return unsubscribe function
+  unsubscribe: jest.fn(),
+  responsiveMap: {
+    xs: '(max-width: 575px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+    xxl: '(min-width: 1600px)',
+  },
+}));
+
+// Mock enquire.js for Ant Design responsive behavior
+jest.mock('enquire.js', () => ({
+  register: jest.fn(),
+  unregister: jest.fn(),
+}));
+
+// Mock Ant Design's responsive observer
+jest.mock('antd/lib/_util/responsiveObserve', () => ({
+  subscribe: jest.fn(() => jest.fn()), // Return unsubscribe function
+  unsubscribe: jest.fn(),
+  responsiveMap: {
+    xs: '(max-width: 575px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+    xxl: '(min-width: 1600px)',
+  },
+}));
+
+// Setup window.matchMedia mock (duplicate - keeping for compatibility)
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const defaultProps = {
+  intl: {
+    formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id || ''),
+    locale: 'en',
+  },
+  location: { query: {} },
+  params: {},
+  getDefaultTags: 'default',
+  supportedTags: [],
+  metaEntities: {},
+  injectedTags: {},
+  globalActions: {
+    getLiquidTags: jest.fn(),
+    fetchSchemaForEntity: jest.fn(),
+  },
+  loadingTags: false,
+  eventContextTags: [],
+  forwardedTags: {},
+  selectedOfferDetails: [],
+  currentOrgDetails: {
+    basic_details: {
+      base_language: 'en',
+      languages: {
+        en: { lang_id: '1', language: 'English' },
+      },
+    },
+  },
+  isReadOnly: false,
+  fetchingLiquidTags: false,
+  createTemplateInProgress: false,
+  fetchingCmsData: false,
+  Email: {},
+  emailActions: {
+    transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+    createTemplate: jest.fn((obj, callback) => callback({ templateId: { _id: '123', versions: {} } })),
+    getTemplateDetails: jest.fn(),
+    clearAllValues: jest.fn(),
+  },
+  isFullMode: true,
+  templateName: 'Test Template',
+  showTemplateName: jest.fn(),
+  onFormDataChange: jest.fn(),
+  isGetFormData: false,
+  getFormdata: jest.fn(),
+  templateData: null,
+  EmailLayout: null,
+  getLiquidTags: jest.fn((content, callback) => callback({ askAiraResponse: { data: [] }, isError: false })),
+  showLiquidErrorInFooter: jest.fn(),
+  onValidationFail: jest.fn(),
+  setIsLoadingContent: jest.fn(),
+  forwardedRef: null,
+  moduleType: null,
+  onHtmlEditorValidationStateChange: jest.fn(),
+};
+
+const renderWithIntl = (props = {}) => {
+  const mergedProps = { ...defaultProps, ...props };
+  return render(
+    <IntlProvider locale="en" messages={{}}>
+      <EmailHTMLEditor {...mergedProps} />
+    </IntlProvider>
+  );
+};
+
+describe('EmailHTMLEditor', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    validateLiquidTemplateContent.mockResolvedValue(true);
+    validateTags.mockReturnValue({ valid: true });
+    isEmailUnsubscribeTagMandatory.mockReturnValue(false);
+    // Reset mock functions
+    mockGetAllIssues.mockReturnValue([]);
+    mockGetValidationState.mockReturnValue({
+      isValidating: false,
+      hasErrors: false,
+      issueCounts: {
+        html: 0, label: 0, liquid: 0, total: 0,
+      },
+    });
+    // Reset hasLiquidSupportFeature mock to return true by default
+    mockHasLiquidSupportFeature.mockReturnValue(true);
+  });
+
+  describe('Component Rendering', () => {
+    it('renders without crashing', () => {
+      renderWithIntl();
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('renders subject input field', () => {
+      renderWithIntl();
+      expect(screen.getByTestId('subject-input')).toBeInTheDocument();
+    });
+
+    it('renders with loading state', () => {
+      renderWithIntl({ loadingTags: true });
+      // Component should render even when loading
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+  });
+
+  describe('Content Initialization', () => {
+    it('initializes with empty content in create mode', () => {
+      renderWithIntl({ isGetFormData: false });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('initializes with EmailLayout content in create mode', () => {
+      const EmailLayout = '<p>Uploaded content</p>';
+      renderWithIntl({ EmailLayout, isGetFormData: false });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('initializes with EmailLayout object content', () => {
+      const EmailLayout = { html: '<p>Object content</p>' };
+      renderWithIntl({ EmailLayout, isGetFormData: false });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('handles template data prop in edit mode', () => {
+      const templateData = {
+        base: {
+          'template-content': '<p>Template content</p>',
+          "subject": 'Test Subject',
+        },
+        name: 'Test Template',
+      };
+      renderWithIntl({
+        templateData,
+        params: { id: '123' },
+        Email: { templateDetails: { _id: '123' } },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('handles template data with versions structure', () => {
+      const templateData = {
+        versions: {
+          base: {
+            activeTab: 'en',
+            en: {
+              'template-content': '<p>Version content</p>',
+            },
+            subject: 'Version Subject',
+          },
+        },
+        name: 'Version Template',
+      };
+      renderWithIntl({
+        templateData,
+        params: { id: '123' },
+        Email: { templateDetails: { _id: '123' } },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('handles Redux template data in edit mode', () => {
+      const Email = {
+        templateDetails: {
+          _id: '123',
+          name: 'Redux Template',
+          versions: {
+            base: {
+              activeTab: 'en',
+              en: {
+                'template-content': '<p>Redux content</p>',
+              },
+              subject: 'Redux Subject',
+            },
+          },
+        },
+        getTemplateDetailsInProgress: false,
+        fetchingCmsData: false,
+      };
+      renderWithIntl({
+        Email,
+        params: { id: '123' },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('handles BEETemplate from Redux', () => {
+      const Email = {
+        BEETemplate: {
+          _id: '123',
+          name: 'BEE Template',
+          base: {
+            'template-content': '<p>BEE content</p>',
+            "subject": 'BEE Subject',
+          },
+        },
+        getTemplateDetailsInProgress: false,
+        fetchingCmsData: false,
+      };
+      renderWithIntl({
+        Email,
+        params: { id: '123' },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('fetches template details when template ID changes', () => {
+      const emailActions = {
+        ...defaultProps.emailActions,
+        getTemplateDetails: jest.fn(),
+      };
+      const { rerender } = renderWithIntl({
+        Email: { templateDetails: null, getTemplateDetailsInProgress: false, fetchingCmsData: false },
+        params: { id: '123' },
+        emailActions,
+      });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            Email={{ templateDetails: null, getTemplateDetailsInProgress: false, fetchingCmsData: false }}
+            params={{ id: '456' }}
+            emailActions={emailActions}
+          />
+        </IntlProvider>
+      );
+
+      // Should trigger fetch for new template ID
+      expect(emailActions.getTemplateDetails).toHaveBeenCalled();
+    });
+  });
+
+  describe('Subject Handling', () => {
+    it('updates subject on input change', () => {
+      renderWithIntl();
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'New Subject' } });
+      expect(input.value).toBe('New Subject');
+    });
+
+    it('clears subject error when subject is entered', () => {
+      renderWithIntl();
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      // Error should be cleared
+    });
+
+    it('inserts tag into subject field', () => {
+      renderWithIntl({ subject: 'Hello ' });
+      const tagButton = screen.getByTestId('trigger-tag-select');
+
+      // Mock input element with selection
+      const input = document.getElementById('template-subject');
+      if (input) {
+        Object.defineProperty(input, 'selectionStart', { value: 6, writable: true });
+        Object.defineProperty(input, 'selectionEnd', { value: 6, writable: true });
+      }
+
+      fireEvent.click(tagButton);
+      // Tag should be inserted
+    });
+
+    it('handles tag insertion when input has no selection', () => {
+      renderWithIntl({ subject: 'Hello' });
+      const tagButton = screen.getByTestId('trigger-tag-select');
+
+      const input = document.getElementById('template-subject');
+      if (input) {
+        Object.defineProperty(input, 'selectionStart', { value: undefined, writable: true });
+        Object.defineProperty(input, 'selectionEnd', { value: undefined, writable: true });
+      }
+
+      fireEvent.click(tagButton);
+      // Tag should be appended
+    });
+
+    it('handles tag insertion when input element is not found', () => {
+      renderWithIntl({ subject: 'Hello' });
+      const tagButton = screen.getByTestId('trigger-tag-select');
+
+      // Remove input element
+      const input = document.getElementById('template-subject');
+      if (input) {
+        input.remove();
+      }
+
+      fireEvent.click(tagButton);
+      // Should handle gracefully
+    });
+  });
+
+  describe('Content Change Handling', () => {
+    it('updates content when HTMLEditor changes', () => {
+      renderWithIntl();
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Content should be updated
+    });
+
+    it('validates tags on content change', () => {
+      validateTags.mockClear();
+      // Need to provide tags via metaEntities or supportedTags
+      renderWithIntl({
+        metaEntities: {
+          tags: {
+            standard: [{ name: 'customer.name' }],
+          },
+        },
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // validateTags is called in handleContentChange when tags.length > 0
+      expect(validateTags).toHaveBeenCalledWith(
+        expect.objectContaining({
+          content: '<p>New content</p>',
+          tagsParam: [{ name: 'customer.name' }],
+        })
+      );
+    });
+
+    it('sets tag validation error when validation fails', () => {
+      validateTags.mockReturnValue({ valid: false, missingTags: ['tag1'] });
+      validateTags.mockClear();
+      renderWithIntl({
+        metaEntities: {
+          tags: {
+            standard: [{ name: 'customer.name' }],
+          },
+        },
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // validateTags should be called
+      expect(validateTags).toHaveBeenCalled();
+    });
+
+    it('clears tag validation error when validation passes', () => {
+      validateTags.mockReturnValue({ valid: true });
+      validateTags.mockClear();
+      renderWithIntl({
+        metaEntities: {
+          tags: {
+            standard: [{ name: 'customer.name' }],
+          },
+        },
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // validateTags should be called
+      expect(validateTags).toHaveBeenCalled();
+    });
+  });
+
+  describe('Validation State Handling', () => {
+    it('handles validation state change from HTMLEditor', () => {
+      const onHtmlEditorValidationStateChange = jest.fn();
+      renderWithIntl({ onHtmlEditorValidationStateChange });
+      const validationButton = screen.getByTestId('trigger-validation-change');
+      fireEvent.click(validationButton);
+      expect(onHtmlEditorValidationStateChange).toHaveBeenCalled();
+    });
+
+    it('handles error acknowledgment', () => {
+      const onHtmlEditorValidationStateChange = jest.fn();
+      renderWithIntl({ onHtmlEditorValidationStateChange });
+      const ackButton = screen.getByTestId('trigger-error-acknowledged');
+      fireEvent.click(ackButton);
+      // Error should be acknowledged
+    });
+
+    it('resets error acknowledgment when new errors appear', () => {
+      const onHtmlEditorValidationStateChange = jest.fn();
+      renderWithIntl({ onHtmlEditorValidationStateChange });
+      const validationButton = screen.getByTestId('trigger-validation-change');
+
+      // First, set validation with errors
+      fireEvent.click(validationButton);
+
+      // Then trigger validation change with errors
+      const htmlEditor = screen.getByTestId('html-editor');
+      const triggerValidationWithErrors = htmlEditor.querySelector('[data-testid="trigger-validation-change"]');
+      if (triggerValidationWithErrors) {
+        // Mock validation change with errors
+        const mockValidationChange = jest.fn((state) => {
+          if (state.hasErrors) {
+            onHtmlEditorValidationStateChange({
+              ...state,
+              errorsAcknowledged: false,
+            });
+          }
+        });
+        // This would be called by HTMLEditor internally
+      }
+    });
+
+    it('prevents duplicate validation state updates', () => {
+      const onHtmlEditorValidationStateChange = jest.fn();
+      renderWithIntl({ onHtmlEditorValidationStateChange });
+      const validationButton = screen.getByTestId('trigger-validation-change');
+
+      // Click multiple times with same state
+      fireEvent.click(validationButton);
+      fireEvent.click(validationButton);
+      fireEvent.click(validationButton);
+
+      // Should only notify once for same state
+    });
+  });
+
+  describe('Save Functionality', () => {
+    it('blocks save when subject is empty', async () => {
+      const onValidationFail = jest.fn();
+      // Component initializes with empty subject state, so when isGetFormData becomes true, save should be blocked
+      renderWithIntl({ onValidationFail, isGetFormData: true });
+      await waitFor(() => {
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('blocks save when subject is only whitespace', async () => {
+      const onValidationFail = jest.fn();
+      // Component uses internal state, so we need to set subject via input change first
+      const { rerender } = renderWithIntl({ onValidationFail, isGetFormData: false });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: '   ' } });
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData={true} />
+        </IntlProvider>
+      );
+      await waitFor(() => {
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('blocks save when there are HTML validation errors', async () => {
+      const onValidationFail = jest.fn();
+      // Mock getAllIssues to return BLOCKING errors (sanitizer errors or client-side Liquid errors)
+      // HTML/label errors are now warnings and don't block save
+      mockGetAllIssues.mockReturnValue([{
+        type: 'error',
+        message: 'Sanitization failed',
+        line: 1,
+        column: 1,
+        rule: 'sanitizer.sanitizationFailed',
+        severity: 'error',
+        source: 'sanitizer',
+      }]);
+      // Also update getValidationState to return hasErrors: true (this is what handleSave checks)
+      mockGetValidationState.mockReturnValue({
+        isValidating: false,
+        hasErrors: true,
+        issueCounts: {
+          html: 0, label: 0, liquid: 0, total: 1,
+        },
+      });
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        onValidationFail,
+        isGetFormData: false,
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData={true} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('blocks save when there are label validation errors', async () => {
+      const onValidationFail = jest.fn();
+      // Mock getAllIssues to return BLOCKING errors (sanitizer errors or client-side Liquid errors)
+      // Label errors (tag-pair) are now warnings and don't block save
+      mockGetAllIssues.mockReturnValue([{
+        type: 'error',
+        message: 'Invalid input detected',
+        line: 1,
+        column: 1,
+        rule: 'sanitizer.invalidInput',
+        severity: 'error',
+        source: 'sanitizer',
+      }]);
+      // Also update getValidationState to return hasErrors: true (this is what handleSave checks)
+      mockGetValidationState.mockReturnValue({
+        isValidating: false,
+        hasErrors: true,
+        issueCounts: {
+          html: 0, label: 0, liquid: 0, total: 1,
+        },
+      });
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        onValidationFail,
+        isGetFormData: false,
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData={true} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('blocks save when there are liquid validation errors', async () => {
+      const onValidationFail = jest.fn();
+      // Mock getAllIssues to return client-side Liquid errors (these ARE blocking)
+      mockGetAllIssues.mockReturnValue([{
+        type: 'error',
+        message: 'Unclosed Liquid tag',
+        line: 1,
+        column: 1,
+        rule: 'liquid-syntax',
+        severity: 'error',
+        source: 'liquid-validator',
+      }]);
+      // Also update getValidationState to return hasErrors: true (this is what handleSave checks)
+      mockGetValidationState.mockReturnValue({
+        isValidating: false,
+        hasErrors: true,
+        issueCounts: {
+          html: 0, label: 0, liquid: 1, total: 1,
+        },
+      });
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        onValidationFail,
+        isGetFormData: false,
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData={true} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('blocks save when unsubscribe tag is mandatory and missing', async () => {
+      isEmailUnsubscribeTagMandatory.mockReturnValue(true);
+      const onValidationFail = jest.fn();
+      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
+
+      // Set subject via input and content via HTMLEditor mock
+      const { rerender } = renderWithIntl({
+        onValidationFail,
+        isGetFormData: false,
+        moduleType: 'OUTBOUND',
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      // Trigger content change to set htmlContent
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData={true} moduleType="OUTBOUND" />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(CapNotification.error).toHaveBeenCalled();
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('allows save when unsubscribe tag is present', () => {
+      isEmailUnsubscribeTagMandatory.mockReturnValue(true);
+      renderWithIntl({
+        isGetFormData: true,
+        subject: 'Valid Subject',
+        htmlContent: '<p>Content {{unsubscribe}}</p>',
+        moduleType: 'OUTBOUND',
+      });
+      // Should proceed with save
+    });
+
+    it('blocks save for non-liquid orgs when tag validation fails', async () => {
+      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
+      validateTags.mockReturnValue({
+        valid: false,
+        unsupportedTags: ['tag1'],
+        missingTags: ['tag2'],
+      });
+      const onValidationFail = jest.fn();
+      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        onValidationFail,
+        isGetFormData: false,
+        metaEntities: {
+          tags: {
+            standard: [{ name: 'customer.name' }],
+          },
+        },
+        getLiquidTags: null, // No liquid tags for non-liquid org
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData={true} metaEntities={{
+            tags: {
+              standard: [{ name: 'customer.name' }],
+            },
+          }} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(CapNotification.error).toHaveBeenCalled();
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('allows save for liquid orgs even when tag validation fails', async () => {
+      validateTags.mockReturnValue({
+        valid: false,
+        unsupportedTags: ['tag1'],
+      });
+      const getLiquidTags = jest.fn((content, callback) => {
+        callback({ askAiraResponse: { data: [] }, isError: false });
+      });
+      validateLiquidTemplateContent.mockResolvedValue(true);
+      // Ensure no HTML/Label/Liquid errors from HtmlEditor
+      mockGetAllIssues.mockReturnValue([]);
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        isFullMode: true,
+        metaEntities: {
+          tags: {
+            standard: [{ name: 'customer.name' }],
+          },
+        },
+        isLiquidEnabled: true,
+        getLiquidTags,
+      });
+      const input = screen.getByTestId('subject-input');
+      await act(async () => {
+        fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      // Wait a bit for state updates
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      });
+      // Now trigger save
+      await act(async () => {
+        rerender(
+          <IntlProvider locale="en" messages={{}}>
+            <EmailHTMLEditor {...defaultProps} isGetFormData={true} isFullMode={true} metaEntities={{
+              tags: {
+                standard: [{ name: 'customer.name' }],
+              },
+            }} getLiquidTags={getLiquidTags} />
+          </IntlProvider>
+        );
+      });
+      // Should proceed to liquid validation (tag validation fails but liquid orgs continue)
+      await waitFor(() => {
+        expect(validateLiquidTemplateContent).toHaveBeenCalled();
+      }, { timeout: 5000 });
+    });
+
+    it('validates liquid content before saving when liquid is enabled', async () => {
+      validateLiquidTemplateContent.mockResolvedValue(true);
+      const getLiquidTags = jest.fn((content, callback) => {
+        callback({ askAiraResponse: { data: [] }, isError: false });
+      });
+      // Ensure no HTML/Label/Liquid errors from HtmlEditor
+      mockGetAllIssues.mockReturnValue([]);
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        isFullMode: true,
+        isLiquidEnabled: true,
+        getLiquidTags,
+      });
+      const input = screen.getByTestId('subject-input');
+      await act(async () => {
+        fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      // Wait a bit for state updates
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      });
+      // Now trigger save
+      await act(async () => {
+        rerender(
+          <IntlProvider locale="en" messages={{}}>
+            <EmailHTMLEditor {...defaultProps} isGetFormData={true} isFullMode={true} getLiquidTags={getLiquidTags} />
+          </IntlProvider>
+        );
+      });
+
+      await waitFor(() => {
+        expect(validateLiquidTemplateContent).toHaveBeenCalled();
+      }, { timeout: 5000 });
+    });
+
+    it('handles liquid validation errors', async () => {
+      validateLiquidTemplateContent.mockImplementation((content, options) => {
+        options.onError({
+          standardErrors: ['Standard error'],
+          liquidErrors: ['Liquid error'],
+        });
+        return Promise.resolve(false);
+      });
+
+      const showLiquidErrorInFooter = jest.fn();
+      const onValidationFail = jest.fn();
+      const getLiquidTags = jest.fn((content, callback) => {
+        callback({ askAiraResponse: { errors: [{ message: 'Error' }] }, isError: true });
+      });
+      // Ensure no HTML/Label/Liquid errors from HtmlEditor
+      mockGetAllIssues.mockReturnValue([]);
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        isFullMode: true,
+        isLiquidEnabled: true,
+        getLiquidTags,
+        showLiquidErrorInFooter,
+        onValidationFail,
+      });
+      const input = screen.getByTestId('subject-input');
+      await act(async () => {
+        fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      // Wait a bit for state updates
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      });
+      // Now trigger save
+      await act(async () => {
+        rerender(
+          <IntlProvider locale="en" messages={{}}>
+            <EmailHTMLEditor {...defaultProps} isGetFormData={true} isFullMode={true} getLiquidTags={getLiquidTags} showLiquidErrorInFooter={showLiquidErrorInFooter} onValidationFail={onValidationFail} />
+          </IntlProvider>
+        );
+      });
+
+      await waitFor(() => {
+        expect(validateLiquidTemplateContent).toHaveBeenCalled();
+      }, { timeout: 5000 });
+      await waitFor(() => {
+        expect(showLiquidErrorInFooter).toHaveBeenCalled();
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 5000 });
+    });
+
+    it('proceeds with save after successful liquid validation', async () => {
+      validateLiquidTemplateContent.mockImplementation((content, options) => {
+        options.onSuccess();
+        return Promise.resolve(true);
+      });
+
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: {} } });
+        }),
+      };
+      const getLiquidTags = jest.fn((content, callback) => {
+        callback({ askAiraResponse: { data: [] }, isError: false });
+      });
+      // Ensure no HTML/Label/Liquid errors from HtmlEditor
+      mockGetAllIssues.mockReturnValue([]);
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        isFullMode: true,
+        isLiquidEnabled: true,
+        getLiquidTags,
+        emailActions,
+        templateName: 'New Template',
+      });
+      const input = screen.getByTestId('subject-input');
+      await act(async () => {
+        fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      await act(async () => {
+        fireEvent.click(changeButton);
+      });
+      // Wait a bit for state updates
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      });
+      // Now trigger save
+      await act(async () => {
+        rerender(
+          <IntlProvider locale="en" messages={{}}>
+            <EmailHTMLEditor {...defaultProps} isGetFormData={true} isFullMode={true} getLiquidTags={getLiquidTags} emailActions={emailActions} templateName="New Template" />
+          </IntlProvider>
+        );
+      });
+
+      await waitFor(() => {
+        expect(validateLiquidTemplateContent).toHaveBeenCalled();
+      }, { timeout: 5000 });
+
+      await waitFor(() => {
+        expect(emailActions.createTemplate).toHaveBeenCalled();
+      }, { timeout: 5000 });
+    });
+
+    it('saves in full mode with create template', async () => {
+      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: {} } });
+        }),
+      };
+      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        templateName: 'New Template',
+        emailActions,
+        getLiquidTags: null, // No liquid tags for non-liquid org
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData={true} templateName="New Template" emailActions={emailActions} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(emailActions.createTemplate).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('saves in full mode with edit template', async () => {
+      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: {} } });
+        }),
+      };
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        params: { id: '123' },
+        Email: {
+          templateDetails: {
+            _id: '123',
+            name: 'Existing Template',
+            versions: {
+              base: {
+                activeTab: 'en',
+                en: { 'template-content': '<p>Old</p>' },
+                tabKey: 'existing-key',
+              },
+            },
+          },
+          getTemplateDetailsInProgress: false,
+          fetchingCmsData: false,
+        },
+        emailActions,
+        getLiquidTags: null, // No liquid tags for non-liquid org
+      });
+      // Wait for content to load from template data
+      await waitFor(() => {
+        expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData={true} params={{ id: '123' }} Email={{
+            templateDetails: {
+              _id: '123',
+              name: 'Existing Template',
+              versions: {
+                base: {
+                  activeTab: 'en',
+                  en: { 'template-content': '<p>Old</p>' },
+                  tabKey: 'existing-key',
+                },
+              },
+            },
+            getTemplateDetailsInProgress: false,
+            fetchingCmsData: false,
+          }} emailActions={emailActions} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(emailActions.createTemplate).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('handles create template error response', async () => {
+      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ error: 'Template name already exists' });
+        }),
+      };
+      const onValidationFail = jest.fn();
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        templateName: 'New Template',
+        emailActions,
+        onValidationFail,
+        getLiquidTags: null, // No liquid tags for non-liquid org
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData={true} templateName="New Template" emailActions={emailActions} onValidationFail={onValidationFail} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('handles create template success with getFormdata', async () => {
+      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: { base: {} } } });
+        }),
+      };
+      const getFormdata = jest.fn();
+      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        templateName: 'New Template',
+        emailActions,
+        getFormdata,
+        getLiquidTags: null, // No liquid tags for non-liquid org
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData={true} templateName="New Template" emailActions={emailActions} getFormdata={getFormdata} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(getFormdata).toHaveBeenCalled();
+        expect(CapNotification.success).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('handles create template success without getFormdata', async () => {
+      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: {} } });
+        }),
+      };
+      const history = require('../../../../utils/history');
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        templateName: 'New Template',
+        emailActions,
+        getFormdata: null,
+        location: { query: { module: 'default' } },
+        getLiquidTags: null, // No liquid tags for non-liquid org
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData={true} templateName="New Template" emailActions={emailActions} getFormdata={null} location={{ query: { module: 'default' } }} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(history.push).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('saves in library mode with getFormdata', async () => {
+      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
+      const getFormdata = jest.fn();
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        isFullMode: false,
+        getFormdata,
+        location: { query: { module: 'library' } },
+        getLiquidTags: null, // No liquid tags for non-liquid org
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData={true} isFullMode={false} getFormdata={getFormdata} location={{ query: { module: 'library' } }} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(getFormdata).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+
+    it('saves in library mode without library module', async () => {
+      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
+      const getFormdata = jest.fn();
+
+      // Set subject and content via component interactions
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        isFullMode: false,
+        getFormdata,
+        location: { query: { module: 'default' } },
+        getLiquidTags: null, // No liquid tags for non-liquid org
+      });
+      const input = screen.getByTestId('subject-input');
+      fireEvent.change(input, { target: { value: 'Valid Subject' } });
+      const changeButton = screen.getByTestId('trigger-content-change');
+      fireEvent.click(changeButton);
+      // Now trigger save
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData={true} isFullMode={false} getFormdata={getFormdata} location={{ query: { module: 'default' } }} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(getFormdata).toHaveBeenCalled();
+      }, { timeout: 3000 });
+    });
+  });
+
+  describe('Tag Context Change', () => {
+    it('handles tag context change', () => {
+      const globalActions = {
+        fetchSchemaForEntity: jest.fn(),
+      };
+
+      renderWithIntl({ globalActions });
+      const contextButton = screen.getByTestId('trigger-context-change');
+      fireEvent.click(contextButton);
+      expect(globalActions.fetchSchemaForEntity).toHaveBeenCalled();
+    });
+
+    it('handles embedded mode context change', () => {
+      const globalActions = {
+        fetchSchemaForEntity: jest.fn(),
+      };
+
+      renderWithIntl({
+        globalActions,
+        location: { query: { type: 'embedded', module: 'test' } },
+      });
+      const contextButton = screen.getByTestId('trigger-context-change');
+      fireEvent.click(contextButton);
+      expect(globalActions.fetchSchemaForEntity).toHaveBeenCalled();
+    });
+  });
+
+  describe('Template Name Handling', () => {
+    it('calls showTemplateName in create mode', () => {
+      const showTemplateName = jest.fn();
+      renderWithIntl({
+        showTemplateName,
+        templateName: 'New Template',
+        isFullMode: true,
+      });
+      expect(showTemplateName).toHaveBeenCalled();
+    });
+
+    it('calls showTemplateName in edit mode', () => {
+      const showTemplateName = jest.fn();
+      renderWithIntl({
+        showTemplateName,
+        params: { id: '123' },
+        Email: {
+          templateDetails: {
+            _id: '123',
+            name: 'Existing Template',
+          },
+        },
+        isFullMode: true,
+      });
+      expect(showTemplateName).toHaveBeenCalled();
+    });
+
+    it('handles form data change', () => {
+      const onFormDataChange = jest.fn();
+      const showTemplateName = jest.fn();
+      renderWithIntl({
+        onFormDataChange,
+        showTemplateName,
+        isFullMode: true,
+      });
+      // Form data change would be triggered by showTemplateName callback
+    });
+  });
+
+  describe('Loading State Management', () => {
+    it('manages loading state based on API calls', () => {
+      const { rerender } = renderWithIntl({ loadingTags: true });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} loadingTags={false} />
+        </IntlProvider>
+      );
+      // Loading should be updated
+    });
+
+    it('stops loading when all APIs complete', () => {
+      const setIsLoadingContent = jest.fn();
+      renderWithIntl({
+        loadingTags: false,
+        fetchingLiquidTags: false,
+        createTemplateInProgress: false,
+        fetchingCmsData: false,
+        tags: [],
+        setIsLoadingContent,
+      });
+      // Loading should stop
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles missing globalActions', () => {
+      renderWithIntl({ globalActions: null });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('handles missing emailActions', () => {
+      renderWithIntl({ emailActions: null });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('handles missing getLiquidTags with globalActions fallback', () => {
+      const globalActions = {
+        getLiquidTags: jest.fn((content, callback) => {
+          callback({ askAiraResponse: { data: [] }, isError: false });
+        }),
+      };
+      renderWithIntl({
+        getLiquidTags: null,
+        globalActions,
+        isLiquidEnabled: true,
+        isGetFormData: true,
+        subject: 'Valid Subject',
+        htmlContent: '<p>Content</p>',
+      });
+      // Should use globalActions.getLiquidTags
+    });
+
+    it('handles empty template data gracefully', () => {
+      renderWithIntl({
+        templateData: {},
+        params: { id: '123' },
+      });
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+
+    it('handles template switching', () => {
+      const { rerender } = renderWithIntl({
+        params: { id: '123' },
+        Email: {
+          templateDetails: { _id: '123', name: 'Template 1' },
+          getTemplateDetailsInProgress: false,
+          fetchingCmsData: false,
+        },
+      });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            params={{ id: '456' }}
+            Email={{
+              templateDetails: { _id: '456', name: 'Template 2' },
+              getTemplateDetailsInProgress: false,
+              fetchingCmsData: false,
+            }}
+          />
+        </IntlProvider>
+      );
+      // Should handle template switch
+    });
+
+    it('handles isGetFormData trigger', () => {
+      const onValidationFail = jest.fn();
+      const { rerender } = renderWithIntl({
+        isGetFormData: false,
+        onValidationFail,
+        subject: 'Valid Subject',
+        htmlContent: '<p>Content</p>',
+      });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            isGetFormData
+            onValidationFail={onValidationFail}
+            subject="Valid Subject"
+            htmlContent="<p>Content</p>"
+          />
+        </IntlProvider>
+      );
+      // Should trigger save
+    });
+
+    it('handles isGetFormData reset', () => {
+      const { rerender } = renderWithIntl({
+        isGetFormData: true,
+        subject: 'Valid Subject',
+        htmlContent: '<p>Content</p>',
+      });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            isGetFormData={false}
+            subject="Valid Subject"
+            htmlContent="<p>Content</p>"
+          />
+        </IntlProvider>
+      );
+      // Should reset ref
+    });
+  });
+
+  describe('useImperativeHandle methods', () => {
+    // Note: These methods are tested indirectly through component integration
+    // Direct ref testing requires proper component mounting which can be complex in test environment
+    // The methods are covered through integration tests and actual usage
+    
+    it('should expose ref methods when component is mounted', async () => {
+      const ref = React.createRef();
+      const currentOrgDetails = {
+        basic_details: {
+          base_language: 'en',
+        },
+      };
+
+      render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor
+            {...defaultProps}
+            ref={ref}
+            currentOrgDetails={currentOrgDetails}
+            subject="Test Subject"
+            htmlContent="<p>Test Content</p>"
+          />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      }, { timeout: 3000 });
+
+      // Verify ref methods exist
+      expect(typeof ref.current?.getFormDataForPreview).toBe('function');
+      expect(typeof ref.current?.getContentForPreview).toBe('function');
+      expect(typeof ref.current?.getValidationState).toBe('function');
+      expect(typeof ref.current?.isContentEmpty).toBe('function');
+      expect(typeof ref.current?.getIssueCounts).toBe('function');
+    });
+  });
+
+  describe('Template data extraction', () => {
+    // Note: Template data extraction is tested indirectly through component behavior
+    // Direct testing requires complex effect timing and state management
+    // The extraction logic is covered through integration tests
+    
+    it('should handle templateDataProp in library mode', () => {
+      const templateDataProp = {
+        'template-content': '<p>Library Content</p>',
+        emailSubject: 'Library Subject',
+      };
+
+      // Component should render without errors when templateData is provided
+      renderWithIntl({
+        isFullMode: false,
+        templateData: templateDataProp,
+      });
+
+      // Verify component renders
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
+  });
+
+  describe('setIsLoadingContent callback', () => {
+    it('should call setIsLoadingContent when uploaded content is available', async () => {
+      const setIsLoadingContent = jest.fn();
+      const EmailLayout = {
+        'template-content': '<p>Uploaded Content</p>',
+      };
+
+      renderWithIntl({
+        setIsLoadingContent,
+        EmailLayout,
+      });
+
+      await waitFor(() => {
+        expect(setIsLoadingContent).toHaveBeenCalledWith(false);
+      });
+    });
+
+    it('should call setIsLoadingContent when template data is loaded', async () => {
+      const setIsLoadingContent = jest.fn();
+      const templateDataProp = {
+        'template-content': '<p>Template Content</p>',
+        emailSubject: 'Template Subject',
+      };
+
+      renderWithIntl({
+        setIsLoadingContent,
+        isFullMode: false,
+        templateData: templateDataProp,
+      });
+
+      await waitFor(() => {
+        expect(setIsLoadingContent).toHaveBeenCalledWith(false);
+      });
+    });
+  });
+});