@capillarytech/creatives-library 8.0.266-alpha.1 → 8.0.266

package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -1,14 +1,16 @@
-import _, { isEmpty, find } from 'lodash';
-import { renderHook, waitFor, act as reactAct } from '@testing-library/react';
+import React from 'react';
 import useEmailWrapper from '../hooks/useEmailWrapper';
 import { EmailWrapperMockData } from '../mockdata/mockdata';
+import _, { isEmpty, find } from 'lodash';
+import { renderHook, waitFor, act as reactAct } from '@testing-library/react';
 import { EMAIL_CREATE_MODES, STEPS } from '../constants';
+import { GA } from '@capillarytech/cap-ui-utils';
 import { gtmPush } from '../../../utils/gtmTrackers';
 
 // Mock dependencies
 jest.mock('lodash', () => ({
   ...jest.requireActual('lodash'),
-  isEmpty: jest.fn().mockImplementation((val) => {
+  isEmpty: jest.fn().mockImplementation(val => {
     if (val === null || val === undefined) return true;
     if (typeof val === 'object') return Object.keys(val).length === 0;
     if (typeof val === 'string') return val.trim().length === 0;
@@ -29,10 +31,6 @@ jest.mock('../../../utils/gtmTrackers', () => ({
   gtmPush: jest.fn(),
 }));
 
-jest.mock('../../../utils/common', () => ({
-  hasSupportCKEditor: jest.fn(() => true), // Default to legacy flow
-}));
-
 const mockStopTimer = jest.fn();
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
@@ -41,8 +39,8 @@ jest.mock('@capillarytech/cap-ui-utils', () => ({
     timeTracker: {
       startTimer: jest.fn(),
       stopTimer: jest.fn(),
-    },
-  },
+    }
+  }
 }));
 
 describe('useEmailWrapper', () => {
@@ -56,12 +54,12 @@ describe('useEmailWrapper', () => {
     gtmPush.mockClear();
     mockStopTimer.mockClear();
 
-    isEmpty.mockImplementation((val) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+    isEmpty.mockImplementation(val => {
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
 
     mockProps = {
       ...EmailWrapperMockData,
@@ -151,11 +149,13 @@ describe('useEmailWrapper', () => {
       result.current.onChange({ target: { value: EMAIL_CREATE_MODES.UPLOAD } });
     });
 
-    // onEmailModeChange is called with (mappedValue, value) - both are UPLOAD in this case
-    expect(mockProps.onEmailModeChange).toHaveBeenCalledWith(EMAIL_CREATE_MODES.UPLOAD, EMAIL_CREATE_MODES.UPLOAD);
+    expect(mockProps.onEmailModeChange).toHaveBeenCalledWith(EMAIL_CREATE_MODES.UPLOAD);
   });
 
   it('handles zip file upload correctly and calls success callbacks', () => {
+    const successCallback = mockProps.showNextStep;
+    const errorCallback = jest.fn();
+
     mockProps.templatesActions.handleZipUpload.mockImplementation((file, onSuccess, onError) => {
       onSuccess();
     });
@@ -168,7 +168,7 @@ describe('useEmailWrapper', () => {
     const mockFile = {
       name: 'test.zip',
       size: 1024 * 1024,
-      originFileObj: new Blob(['test data'], { type: 'application/zip' }),
+      originFileObj: new Blob(['test data'], { type: 'application/zip' })
     };
 
     reactAct(() => {
@@ -181,9 +181,9 @@ describe('useEmailWrapper', () => {
       expect.any(Function)
     );
 
+    // expect(mockStopTimer).toHaveBeenCalled();
     expect(gtmPush).toHaveBeenCalled();
-    // User must enter template name and click Continue in footer; no auto-advance after upload
-    expect(mockProps.showNextStep).not.toHaveBeenCalled();
+    expect(successCallback).toHaveBeenCalled();
     expect(mockCapNotificationError).not.toHaveBeenCalled();
     expect(result.current.modeContent).toEqual({ file: mockFile });
   });
@@ -201,7 +201,7 @@ describe('useEmailWrapper', () => {
     const mockFile = {
       name: 'test.zip',
       size: 1024 * 1024,
-      originFileObj: new Blob(['test data'], { type: 'application/zip' }),
+      originFileObj: new Blob(['test data'], { type: 'application/zip' })
     };
 
     reactAct(() => {
@@ -218,13 +218,13 @@ describe('useEmailWrapper', () => {
     const mockFile = {
       name: 'test.html',
       size: 1024,
-      originFileObj: new Blob([mockHtmlContent], { type: 'text/html' }),
+      originFileObj: new Blob([mockHtmlContent], { type: 'text/html' })
     };
 
     const mockReader = {
       onload: null,
       onerror: null,
-      readAsText: jest.fn(function () {
+      readAsText: jest.fn(function() {
         this.result = mockHtmlContent;
         if (this.onload) {
           this.onload();
@@ -257,13 +257,13 @@ describe('useEmailWrapper', () => {
   it('shows error for invalid file type during upload', () => {
     const { result } = renderHook(() => useEmailWrapper({
       ...mockProps,
-      isUploading: false,
+      isUploading: false
     }));
 
     const mockFile = {
       name: 'test.txt',
       size: 1024,
-      originFileObj: new Blob(['test data'], { type: 'text/plain' }),
+      originFileObj: new Blob(['test data'], { type: 'text/plain' })
     };
 
     reactAct(() => {
@@ -280,13 +280,13 @@ describe('useEmailWrapper', () => {
   it('shows error for oversized file during upload', () => {
     const { result } = renderHook(() => useEmailWrapper({
       ...mockProps,
-      isUploading: false,
+      isUploading: false
     }));
 
     const mockFile = {
       name: 'large_file.zip',
       size: 6 * 1024 * 1024,
-      originFileObj: new Blob(['large data'], { type: 'application/zip' }),
+      originFileObj: new Blob(['large data'], { type: 'application/zip' })
     };
 
     reactAct(() => {
@@ -294,7 +294,7 @@ describe('useEmailWrapper', () => {
     });
 
     expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({
-      key: "email-upload-error",
+       key: "email-upload-error",
     }));
     expect(mockProps.templatesActions.handleZipUpload).not.toHaveBeenCalled();
   });
@@ -302,21 +302,21 @@ describe('useEmailWrapper', () => {
   it('shows error if no file or originFileObj is provided for upload', () => {
     const { result } = renderHook(() => useEmailWrapper({
       ...mockProps,
-      isUploading: false,
+      isUploading: false
     }));
 
     reactAct(() => {
       result.current.useFileUpload({ file: null });
     });
     expect(mockCapNotificationError).toHaveBeenCalledTimes(1);
-    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error" }));
+    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error"}));
 
     mockCapNotificationError.mockClear();
     reactAct(() => {
-      result.current.useFileUpload({ file: { name: 'test.zip', size: 100 } });
+       result.current.useFileUpload({ file: { name: 'test.zip', size: 100 } });
     });
     expect(mockCapNotificationError).toHaveBeenCalledTimes(1);
-    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error" }));
+    expect(mockCapNotificationError).toHaveBeenCalledWith(expect.objectContaining({ key: "email-upload-error"}));
 
     expect(mockProps.templatesActions.handleZipUpload).not.toHaveBeenCalled();
     expect(mockProps.templatesActions.handleHtmlUpload).not.toHaveBeenCalled();
@@ -335,10 +335,6 @@ describe('useEmailWrapper', () => {
   });
 
   it('calls getDefaultBeeTemplates in useEffect when in EDITOR mode, TEMPLATE_SELECTION step, and no templates', () => {
-    // Ensure hasSupportCKEditor returns true for legacy flow
-    const { hasSupportCKEditor } = require('../../../utils/common');
-    hasSupportCKEditor.mockReturnValue(true);
-
     renderHook(() => useEmailWrapper({
       ...mockProps,
       step: STEPS.TEMPLATE_SELECTION,
@@ -371,9 +367,6 @@ describe('useEmailWrapper', () => {
   });
 
   it('calls setEdmTemplate/setBEETemplate in useEffect when in EDITOR mode and CREATE_TEMPLATE_CONTENT step', async () => {
-    // Ensure hasSupportCKEditor returns true for legacy flow
-    const { hasSupportCKEditor } = require('../../../utils/common');
-    hasSupportCKEditor.mockReturnValue(true);
     // 1. Setup
     const templateId = 'editorTemplate456';
     const mockTemplateData = { _id: templateId, name: 'Selected Editor Template' };
@@ -404,7 +397,7 @@ describe('useEmailWrapper', () => {
       // selectedCreateMode is initially '' from hook's useState
     };
     const { result, rerender } = renderHook((props) => useEmailWrapper(props), {
-      initialProps,
+        initialProps: initialProps
     });
 
     // 4. Simulate user selecting a template ID via the exposed callback (useEditor)
@@ -416,21 +409,17 @@ describe('useEmailWrapper', () => {
     expect(result.current.modeContent).toEqual({ id: templateId }); // State updated
     expect(mockProps.showNextStep).toHaveBeenCalledTimes(1); // User action effect
 
-    // Clear mocks after user action to isolate effect calls
-    mockProps.templatesActions.setEdmTemplate.mockClear();
-    mockProps.templatesActions.setBEETemplate.mockClear();
-
     // 5. Rerender with step changed to CREATE_TEMPLATE_CONTENT
     const createContentProps = {
       ...initialProps, // Base props
       step: STEPS.CREATE_TEMPLATE_CONTENT, // *** Change step ***
-      SelectedEdmDefaultTemplate: null, // *** Ensure this is null ***
+      SelectedEdmDefaultTemplate: null // *** Ensure this is null ***
       // The internal state `modeContent = { id: templateId }` persists
       // The internal state `selectedCreateMode = ''` also persists (not changed yet)
     };
 
     // Mock isEmpty just before rerender for the specific check inside the effect
-    isEmpty.mockImplementation((val) => {
+    isEmpty.mockImplementation(val => {
       // console.log('DEBUG: isEmpty called with', JSON.stringify(val)); // Optional debug
       // Return true ONLY for the 'SelectedEdmDefaultTemplate' check (which is null)
       if (val === null) return true;
@@ -445,48 +434,28 @@ describe('useEmailWrapper', () => {
 
     // 6. Wait for effects triggered by the rerender
     await reactAct(async () => {
-      // Allow React to process the rerender and run effects
-      await new Promise((resolve) => setTimeout(resolve, 10));
+      // Short pause allows React's scheduler to run effects
+      await new Promise(resolve => setTimeout(resolve, 0));
     });
 
+
     // Assert that the template setting actions were called as a result of the effect
-    // Note: The effect may run multiple times in React 18+ StrictMode or due to dependency changes
-    // We verify that it was called at least once with the correct data after clearing mocks
-    const setEdmTemplateCalls = mockProps.templatesActions.setEdmTemplate.mock.calls;
-    const setBEETemplateCalls = mockProps.templatesActions.setBEETemplate.mock.calls;
-    
-    // The effect should call handleEdmDefaultTemplateSelection, which calls both functions
-    // We expect at least 1 call each after clearing mocks (the effect call)
-    expect(setEdmTemplateCalls.length).toBeGreaterThanOrEqual(1);
-    expect(setBEETemplateCalls.length).toBeGreaterThanOrEqual(1);
-    
-    // Verify the first call after clearing was with the correct data
-    expect(setEdmTemplateCalls[0]).toEqual([mockTemplateData]);
-    expect(setBEETemplateCalls[0]).toEqual([mockTemplateData]);
-    
-    // If there are multiple calls (due to effect running twice), verify all are correct
-    if (setEdmTemplateCalls.length > 1) {
-      setEdmTemplateCalls.forEach((call) => {
-        expect(call).toEqual([mockTemplateData]);
-      });
-    }
-    if (setBEETemplateCalls.length > 1) {
-      setBEETemplateCalls.forEach((call) => {
-        expect(call).toEqual([mockTemplateData]);
-      });
-    }
+    expect(mockProps.templatesActions.setEdmTemplate).toHaveBeenCalledTimes(1);
+    expect(mockProps.templatesActions.setEdmTemplate).toHaveBeenCalledWith(mockTemplateData);
+    expect(mockProps.templatesActions.setBEETemplate).toHaveBeenCalledTimes(1);
+    expect(mockProps.templatesActions.setBEETemplate).toHaveBeenCalledWith(mockTemplateData);
   });
 
   it('sets selectedCreateMode in useEffect when in UPLOAD mode and CREATE_TEMPLATE_CONTENT step with EmailLayout', async () => {
     const initialRenderProps = {
-      ...mockProps,
-      step: STEPS.MODE_SELECTION,
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      EmailLayout: null,
-    };
+        ...mockProps,
+        step: STEPS.MODE_SELECTION,
+        emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
+        EmailLayout: null,
+      };
 
     const { result, rerender } = renderHook((props) => useEmailWrapper(props), {
-      initialProps: initialRenderProps,
+      initialProps: initialRenderProps
     });
 
     const rerenderProps = {
@@ -498,11 +467,11 @@ describe('useEmailWrapper', () => {
 
     // Reset isEmpty to default before setting the specific mock for the effect
     isEmpty.mockImplementation((val) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
     // Mock isEmpty specifically for the EmailLayout check inside the useEffect
     isEmpty.mockImplementationOnce(() => false); // Mock !isEmpty(EmailLayout) to be true
 
@@ -510,16 +479,16 @@ describe('useEmailWrapper', () => {
 
     // Wait for the effect to run, set selectedCreateMode, and isShowEmailCreate to update
     await waitFor(() => {
-      expect(result.current.isShowEmailCreate).toBe(true);
+        expect(result.current.isShowEmailCreate).toBe(true);
     });
 
     // Restore default isEmpty behavior after the specific mock is used
     isEmpty.mockImplementation((val) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
     isEmpty.mockClear(); // Clear any remaining mock state if needed
 
     expect(mockProps.templatesActions.setEdmTemplate).not.toHaveBeenCalled();
@@ -564,11 +533,11 @@ describe('useEmailWrapper', () => {
 
     // Reset isEmpty to default before setting the specific mock for the effect
     isEmpty.mockImplementation((val) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
     // Mock isEmpty specifically for the EmailLayout check inside the useEffect
     isEmpty.mockImplementationOnce(() => false); // Mock !isEmpty(EmailLayout) to be true
 
@@ -576,16 +545,16 @@ describe('useEmailWrapper', () => {
 
     // Wait for the effect to run, set selectedCreateMode, and isShowEmailCreate to update
     await waitFor(() => {
-      expect(result.current.isShowEmailCreate).toBe(true);
+        expect(result.current.isShowEmailCreate).toBe(true);
     });
 
     // Restore default isEmpty behavior after the specific mock is used
     isEmpty.mockImplementation((val) => {
-      if (val === null || val === undefined) return true;
-      if (typeof val === 'object') return Object.keys(val).length === 0;
-      if (typeof val === 'string') return val.trim().length === 0;
-      return !val;
-    });
+        if (val === null || val === undefined) return true;
+        if (typeof val === 'object') return Object.keys(val).length === 0;
+        if (typeof val === 'string') return val.trim().length === 0;
+        return !val;
+     });
     isEmpty.mockClear(); // Clear any remaining mock state if needed
 
     // --- Case 3: EDITOR mode selected, Template becomes available -> true (via effect) ---
@@ -594,11 +563,11 @@ describe('useEmailWrapper', () => {
     find.mockReturnValue(mockTemplate); // Ensure find is mocked for this case
 
     const editorPropsInitial = {
-      ...mockProps,
-      step: STEPS.TEMPLATE_SELECTION,
-      emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
-      CmsTemplates: [mockTemplate],
-      SelectedEdmDefaultTemplate: null,
+        ...mockProps,
+        step: STEPS.TEMPLATE_SELECTION,
+        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
+        CmsTemplates: [mockTemplate],
+        SelectedEdmDefaultTemplate: null,
     };
     rerender(editorPropsInitial);
 
@@ -610,12 +579,12 @@ describe('useEmailWrapper', () => {
     expect(result.current.modeContent).toEqual({ id: templateId });
 
     const editorPropsFinal = {
-      ...mockProps, // Use fresh props base
-      step: STEPS.CREATE_TEMPLATE_CONTENT, // Move to the create step
-      emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
-      CmsTemplates: [mockTemplate],
-      SelectedEdmDefaultTemplate: null, // Template not yet selected in props
-      // modeContent state ({id: templateId}) should persist internally from the reactAct call
+        ...mockProps, // Use fresh props base
+        step: STEPS.CREATE_TEMPLATE_CONTENT, // Move to the create step
+        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
+        CmsTemplates: [mockTemplate],
+        SelectedEdmDefaultTemplate: null, // Template not yet selected in props
+        // modeContent state ({id: templateId}) should persist internally from the reactAct call
     };
 
     // Mock isEmpty specifically for the check within the useEffect triggered by rerender
@@ -629,487 +598,4 @@ describe('useEmailWrapper', () => {
     find.mockClear();
     isEmpty.mockClear();
   });
-
-  describe('New Flow (hasSupportCKEditor = false) - Editor Type Determination', () => {
-    let newFlowMockProps;
-    let mockEmailActions;
-
-    beforeEach(() => {
-      const { hasSupportCKEditor } = require('../../../utils/common');
-      hasSupportCKEditor.mockReturnValue(false); // New flow
-
-      mockEmailActions = {
-        getTemplateDetails: jest.fn(),
-        getCmsAccounts: jest.fn(),
-      };
-
-      newFlowMockProps = {
-        ...mockProps,
-        emailActions: mockEmailActions,
-        Email: {
-          templateDetails: null,
-          BEETemplate: null,
-          getTemplateDetailsInProgress: false,
-          isBeeEnabled: true,
-        },
-        location: {
-          pathname: '/email/create',
-          query: {},
-        },
-        params: {},
-        templateData: null,
-      };
-    });
-
-    describe('Create Flow', () => {
-      it('should set HTML editor when HTML_EDITOR mode is selected', async () => {
-        const { result } = renderHook((props) => useEmailWrapper(props), {
-          initialProps: newFlowMockProps,
-        });
-
-        // Select HTML Editor mode
-        reactAct(() => {
-          result.current.onChange({ target: { value: EMAIL_CREATE_MODES.HTML_EDITOR } });
-        });
-
-        await waitFor(() => {
-          const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('HTML');
-          expect(emailProps.selectedEditorMode).toBe(EMAIL_CREATE_MODES.HTML_EDITOR);
-        });
-      });
-    });
-
-    describe('Edit Flow - HTML Editor Template', () => {
-      it('should call getTemplateDetails and set HTML editor for HTML template', async () => {
-        const templateId = 'html-template-123';
-        const htmlTemplateData = {
-          _id: templateId,
-          name: 'HTML Template',
-          versions: {
-            base: {
-              activeTab: 'en',
-              en: {
-                is_drag_drop: false,
-                html_content: '<html><body>Test</body></html>',
-              },
-            },
-          },
-        };
-
-        const editProps = {
-          ...newFlowMockProps,
-          params: { id: templateId },
-          location: {
-            pathname: `/email/edit/${templateId}`,
-            query: { id: templateId },
-          },
-          Email: {
-            ...newFlowMockProps.Email,
-            templateDetails: null,
-            getTemplateDetailsInProgress: false,
-          },
-        };
-
-        const { result, rerender } = renderHook((props) => useEmailWrapper(props), {
-          initialProps: editProps,
-        });
-
-        // Verify getTemplateDetails is called
-        await waitFor(() => {
-          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
-        });
-
-        // Simulate template data loaded
-        rerender({
-          ...editProps,
-          Email: {
-            ...editProps.Email,
-            templateDetails: htmlTemplateData,
-            getTemplateDetailsInProgress: false,
-          },
-        });
-
-        await waitFor(() => {
-          const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('HTML');
-          expect(emailProps.selectedEditorMode).toBe(EMAIL_CREATE_MODES.HTML_EDITOR);
-        });
-      });
-
-      it('should detect HTML template from templateData prop (library mode)', async () => {
-        const htmlTemplateData = {
-          _id: 'html-template-456',
-          name: 'HTML Template',
-          base: {
-            is_drag_drop: false,
-            html_content: '<html><body>Test</body></html>',
-          },
-        };
-
-        const editProps = {
-          ...newFlowMockProps,
-          templateData: htmlTemplateData,
-          location: {
-            pathname: '/email/edit',
-            query: { type: 'embedded', module: 'library' },
-          },
-        };
-
-        const { result } = renderHook((props) => useEmailWrapper(props), {
-          initialProps: editProps,
-        });
-
-        await waitFor(() => {
-          const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('HTML');
-          expect(emailProps.selectedEditorMode).toBe(EMAIL_CREATE_MODES.HTML_EDITOR);
-        });
-      });
-    });
-
-    describe('Edit Flow - BEE Editor Template', () => {
-      it('should call getTemplateDetails and set BEE editor for BEE template', async () => {
-        const templateId = 'bee-template-123';
-        const beeTemplateData = {
-          _id: templateId,
-          name: 'BEE Template',
-          versions: {
-            base: {
-              activeTab: 'en',
-              en: {
-                is_drag_drop: true,
-                drag_drop_id: 'drag-drop-123',
-              },
-            },
-          },
-        };
-
-        const editProps = {
-          ...newFlowMockProps,
-          params: { id: templateId },
-          location: {
-            pathname: `/email/edit/${templateId}`,
-            query: { id: templateId },
-          },
-          Email: {
-            ...newFlowMockProps.Email,
-            templateDetails: null,
-            getTemplateDetailsInProgress: false,
-            isBeeEnabled: true,
-          },
-        };
-
-        const { result, rerender } = renderHook((props) => useEmailWrapper(props), {
-          initialProps: editProps,
-        });
-
-        // Verify getTemplateDetails is called
-        await waitFor(() => {
-          expect(mockEmailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
-        });
-
-        // Simulate template data loaded
-        rerender({
-          ...editProps,
-          Email: {
-            ...editProps.Email,
-            templateDetails: beeTemplateData,
-            getTemplateDetailsInProgress: false,
-            isBeeEnabled: true,
-          },
-        });
-
-        await waitFor(() => {
-          const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('BEE');
-          expect(emailProps.selectedEditorMode).toBe(null);
-        });
-      });
-
-      it('should detect BEE template from templateData prop with base.is_drag_drop (library mode)', async () => {
-        const beeTemplateData = {
-          _id: 'bee-template-456',
-          name: 'BEE Template',
-          base: {
-            is_drag_drop: true,
-            drag_drop_id: 'drag-drop-456',
-          },
-        };
-
-        const editProps = {
-          ...newFlowMockProps,
-          templateData: beeTemplateData,
-          location: {
-            pathname: '/email/edit',
-            query: { type: 'embedded', module: 'library' },
-          },
-          Email: {
-            ...newFlowMockProps.Email,
-            isBeeEnabled: true,
-          },
-        };
-
-        const { result } = renderHook((props) => useEmailWrapper(props), {
-          initialProps: editProps,
-        });
-
-        await waitFor(() => {
-          const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('BEE');
-          expect(emailProps.selectedEditorMode).toBe(null);
-        });
-      });
-
-      it('should detect BEE template with language-specific is_drag_drop (actual API format)', async () => {
-        // This matches the actual API response format shown by the user
-        const beeTemplateData = {
-          _id: 'bee-template-lang',
-          name: 'BEE Template',
-          versions: {
-            base: {
-              activeTab: 'en',
-              en: {
-                is_drag_drop: true,
-                drag_drop_id: '',
-                lang_id: 69,
-                iso_code: 'en',
-                language: 'English',
-              },
-            },
-          },
-        };
-
-        const editProps = {
-          ...newFlowMockProps,
-          templateData: beeTemplateData,
-          Email: {
-            ...newFlowMockProps.Email,
-            isBeeEnabled: true,
-          },
-        };
-
-        const { result } = renderHook((props) => useEmailWrapper(props), {
-          initialProps: editProps,
-        });
-
-        await waitFor(() => {
-          const emailProps = result.current.emailProps;
-          expect(emailProps.editor).toBe('BEE');
-          expect(emailProps.selectedEditorMode).toBe(null);
-        });
-      });
-
-      it('should fallback to HTML editor if BEE template but BEE is disabled', async () => {
-        const beeTemplateData = {
-          _id: 'bee-template-disabled',
-          name: 'BEE Template',
-          versions: {
-            base: {
-              activeTab: 'en',
-              en: {
-                is_drag_drop: true,
-              },
-            },
-          },
-        };
-
-        const editProps = {
-          ...newFlowMockProps,
-          templateData: beeTemplateData,
-          Email: {
-            ...newFlowMockProps.Email,
-            isBeeEnabled: false, // BEE disabled
-          },
-        };
-
-        const { result } = renderHook((props) => useEmailWrapper(props), {
-          initialProps: editProps,
-        });
-
-        await waitFor(() => {
-          const emailProps = result.current.emailProps;
-          // Should fallback to HTML editor when BEE is disabled
-          expect(emailProps.editor).toBe('HTML');
-          expect(emailProps.selectedEditorMode).toBe(EMAIL_CREATE_MODES.HTML_EDITOR);
-        });
-      });
-    });
-
-    describe('Edit Flow - API Call Verification', () => {
-      it('should NOT call getTemplateDetails if template data already exists', async () => {
-        const templateId = 'existing-template';
-        const existingTemplateData = {
-          _id: templateId,
-          name: 'Existing Template',
-          versions: {
-            base: {
-              activeTab: 'en',
-              en: {
-                is_drag_drop: false,
-              },
-            },
-          },
-        };
-
-        const editProps = {
-          ...newFlowMockProps,
-          params: { id: templateId },
-          Email: {
-            ...newFlowMockProps.Email,
-            templateDetails: existingTemplateData, // Already loaded
-            getTemplateDetailsInProgress: false,
-          },
-        };
-
-        renderHook((props) => useEmailWrapper(props), {
-          initialProps: editProps,
-        });
-
-        // Wait a bit to ensure effect runs
-        await waitFor(() => {
-          // Should NOT call getTemplateDetails since data already exists
-          expect(mockEmailActions.getTemplateDetails).not.toHaveBeenCalled();
-        }, { timeout: 1000 });
-      });
-
-      it('should NOT call getTemplateDetails if templateData prop is provided', async () => {
-        const templateData = {
-          _id: 'prop-template',
-          base: {
-            is_drag_drop: false,
-          },
-        };
-
-        const editProps = {
-          ...newFlowMockProps,
-          params: { id: 'prop-template' },
-          templateData, // Provided via prop
-          Email: {
-            ...newFlowMockProps.Email,
-            templateDetails: null,
-          },
-        };
-
-        renderHook((props) => useEmailWrapper(props), {
-          initialProps: editProps,
-        });
-
-        // Wait a bit to ensure effect runs
-        await waitFor(() => {
-          // Should NOT call getTemplateDetails since templateData prop is provided
-          expect(mockEmailActions.getTemplateDetails).not.toHaveBeenCalled();
-        }, { timeout: 1000 });
-      });
-
-      it('should NOT call getTemplateDetails if already loading', async () => {
-        const templateId = 'loading-template';
-
-        const editProps = {
-          ...newFlowMockProps,
-          params: { id: templateId },
-          Email: {
-            ...newFlowMockProps.Email,
-            templateDetails: null,
-            getTemplateDetailsInProgress: true, // Already loading
-          },
-        };
-
-        renderHook((props) => useEmailWrapper(props), {
-          initialProps: editProps,
-        });
-
-        // Wait a bit to ensure effect runs
-        await waitFor(() => {
-          // Should NOT call getTemplateDetails since already loading
-          expect(mockEmailActions.getTemplateDetails).not.toHaveBeenCalled();
-        }, { timeout: 1000 });
-      });
-    });
-  });
-
-  describe('getStepFromTemplateStep (tested indirectly through behavior)', () => {
-    it('should handle numeric step 1 (MODE_SELECTION)', () => {
-      const { result } = renderHook(() => useEmailWrapper({
-        ...mockProps,
-        step: 1,
-      }));
-
-      // When step is 1 (MODE_SELECTION), isShowEmailCreate should be false
-      // This tests that getStepFromTemplateStep converts 1 to MODE_SELECTION
-      expect(result.current.isShowEmailCreate).toBe(false);
-    });
-
-    it('should handle numeric step 2 (TEMPLATE_SELECTION)', () => {
-      const { result } = renderHook(() => useEmailWrapper({
-        ...mockProps,
-        step: 2,
-        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
-      }));
-
-      // When step is 2 (TEMPLATE_SELECTION), isShowEmailCreate should be false
-      expect(result.current.isShowEmailCreate).toBe(false);
-    });
-
-    it('should handle numeric step 3 (CREATE_TEMPLATE_CONTENT)', () => {
-      const { result } = renderHook(() => useEmailWrapper({
-        ...mockProps,
-        step: 3,
-        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
-        SelectedEdmDefaultTemplate: { id: 'template1' },
-      }));
-
-      // When step is 3 (CREATE_TEMPLATE_CONTENT) and template is selected, isShowEmailCreate should be true
-      expect(result.current.isShowEmailCreate).toBe(true);
-    });
-
-    it('should handle string step value', () => {
-      const { result } = renderHook(() => useEmailWrapper({
-        ...mockProps,
-        step: STEPS.CREATE_TEMPLATE_CONTENT,
-        emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
-        SelectedEdmDefaultTemplate: { id: 'template1' },
-      }));
-
-      // String step should work the same way
-      expect(result.current.isShowEmailCreate).toBe(true);
-    });
-
-    it('should default to MODE_SELECTION when step is null or undefined', () => {
-      const { result: result1 } = renderHook(() => useEmailWrapper({
-        ...mockProps,
-        step: null,
-      }));
-
-      // Should default to MODE_SELECTION behavior
-      expect(result1.current.isShowEmailCreate).toBe(false);
-
-      const { result: result2 } = renderHook(() => useEmailWrapper({
-        ...mockProps,
-        step: undefined,
-      }));
-
-      expect(result2.current.isShowEmailCreate).toBe(false);
-    });
-  });
-
-  describe('Template mode selection logic', () => {
-    it('should set HTML_EDITOR mode when HTML_EDITOR is selected and supportCKEditor is false', () => {
-      const { hasSupportCKEditor } = require('../../../utils/common');
-      hasSupportCKEditor.mockReturnValueOnce(false);
-
-      const { result } = renderHook(() => useEmailWrapper({
-        ...mockProps,
-        emailCreateMode: EMAIL_CREATE_MODES.HTML_EDITOR,
-        modeContent: { id: 'mode1' },
-        step: STEPS.CREATE_TEMPLATE_CONTENT,
-      }));
-
-      expect(result.current.emailProps.selectedEditorMode).toBe(EMAIL_CREATE_MODES.HTML_EDITOR);
-    });
-
-    // Note: DRAG_DROP and EDITOR mode selection logic is complex and depends on multiple conditions
-    // These are tested through integration tests and actual component usage
-    // The logic is covered in existing tests that test the full flow
-  });
-});
+});