@capillarytech/creatives-library 8.0.246-alpha.0 → 8.0.246

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

@@ -1,1605 +0,0 @@
-/**
- * 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(),
-    }));
-
-    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(),
-    }));
-
-    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 HTML errors
-      mockGetAllIssues.mockReturnValue([{
-        type: 'error',
-        message: 'HTML validation error',
-        line: 1,
-        column: 1,
-        rule: 'html-error',
-        severity: 'error',
-        source: 'htmlhint',
-      }]);
-
-      // 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 label errors
-      mockGetAllIssues.mockReturnValue([{
-        type: 'error',
-        message: 'tag must be paired',
-        line: 1,
-        column: 1,
-        rule: 'tag-pair',
-        severity: 'error',
-        source: 'htmlhint',
-      }]);
-
-      // 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 liquid errors (client-side, not API)
-      mockGetAllIssues.mockReturnValue([{
-        type: 'error',
-        message: 'Liquid syntax error',
-        line: 1,
-        column: 1,
-        rule: 'liquid-syntax',
-        severity: 'error',
-        source: 'liquid-validator',
-      }]);
-
-      // 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
-    });
-  });
-});