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

package/v2Containers/InApp/__tests__/InAppHTMLEditor.test.js

@@ -1,376 +0,0 @@
-/**
- * InApp HTMLEditor Integration Tests
- *
- * Tests for InApp container integration with HTMLEditor component
- */
-
-// Mock redux-auth-wrapper to prevent location.pathname.replace errors
-jest.mock('redux-auth-wrapper/history4/redirect', () => ({
-  connectedRouterRedirect: jest.fn((config) => (Component) => Component),
-}));
-
-// Mock Auth for hasInAppEditorFeatureEnabled - must be before other mocks
-jest.mock('@capillarytech/cap-ui-utils', () => ({
-  ...jest.requireActual('@capillarytech/cap-ui-utils'),
-  Auth: {
-    hasFeatureAccess: jest.fn(() => false), // Return false so hasInAppEditorFeatureEnabled returns true
-  },
-  GA: {
-    initialize: jest.fn(),
-    getCallerName: jest.fn(() => 'test'),
-    tracker: {
-      trackException: jest.fn(),
-    },
-    timeTracker: {
-      stopTimer: jest.fn(),
-      startTimer: jest.fn(),
-    },
-    setCustomDimension: jest.fn(),
-  },
-}));
-
-// Mock hasInAppEditorFeatureEnabled
-jest.mock('../../../utils/common', () => ({
-  ...jest.requireActual('../../../utils/common'),
-  hasInAppEditorFeatureEnabled: jest.fn(() => true),
-  hasLiquidSupportFeature: jest.fn(() => false),
-}));
-
-// Mock HTMLEditor component - must be before imports
-jest.mock('../../../v2Components/HtmlEditor', () => {
-  const React = require('react');
-  const MockHTMLEditor = function MockHTMLEditor({ variant, initialContent, onContentChange, onSave, 'data-test': dataTest }) {
-    return React.createElement('div', { 'data-testid': dataTest || 'html-editor' },
-      React.createElement('div', { 'data-testid': 'html-editor-variant' }, variant),
-      React.createElement('div', { 'data-testid': 'html-editor-initial-android' }, initialContent?.android || ''),
-      React.createElement('div', { 'data-testid': 'html-editor-initial-ios' }, initialContent?.ios || ''),
-      React.createElement('button', {
-        'data-testid': 'html-editor-change-button',
-        onClick: () => {
-          if (onContentChange) {
-            onContentChange({
-              android: '<p>Updated Android HTML</p>',
-              ios: '<p>Updated iOS HTML</p>',
-            });
-          }
-        }
-      }, 'Simulate Content Change'),
-      React.createElement('button', {
-        'data-testid': 'html-editor-save-button',
-        onClick: () => {
-          if (onSave) {
-            onSave({
-              android: '<p>Saved Android HTML</p>',
-              ios: '<p>Saved iOS HTML</p>',
-            });
-          }
-        }
-      }, 'Simulate Save')
-    );
-  };
-  MockHTMLEditor.displayName = 'MockHTMLEditor';
-  return {
-    __esModule: true,
-    default: MockHTMLEditor,
-  };
-});
-
-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 { Provider } from 'react-redux';
-import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
-import history from '../../../utils/history';
-import { initialReducer } from '../../../initialReducer';
-import { InApp } from '../index';
-import { INAPP_EDITOR_TYPES } from '../../InAppWrapper/constants';
-
-
-// Mock other dependencies
-jest.mock('../../../v2Components/CapDeviceContent', () => {
-  return function MockCapDeviceContent() {
-    return <div data-testid="cap-device-content">Device Content</div>;
-  };
-});
-
-jest.mock('../../../v2Components/TemplatePreview', () => {
-  return function MockTemplatePreview() {
-    return <div data-testid="template-preview">Template Preview</div>;
-  };
-});
-
-let store;
-beforeAll(() => {
-  store = configureStore({}, initialReducer, history);
-});
-
-const defaultProps = {
-  intl: {
-    formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id),
-  },
-  actions: {
-    createInAppTemplate: jest.fn(),
-    editTemplate: jest.fn(),
-    getTemplateDetails: jest.fn(),
-    resetEditTemplate: jest.fn(),
-    clearCreateResponse: jest.fn(),
-  },
-  globalActions: {
-    fetchSchemaForEntity: jest.fn(),
-    getLiquidTags: jest.fn(),
-  },
-  isFullMode: true,
-  onCreateComplete: jest.fn(),
-  params: {},
-  templateData: null,
-  editData: {
-    templateDetails: null,
-  },
-  accountData: {
-    selectedWeChatAccount: {
-      sourceAccountIdentifier: 'test-account',
-      id: 'account-123',
-      name: 'Test Account',
-      configs: {
-        android: '1',
-        ios: '1',
-        accessToken: 'test-token',
-        deeplink: '{}',
-      },
-    },
-  },
-  location: {
-    pathname: '/inapp/create',
-    query: {},
-    search: '',
-  },
-  getDefaultTags: null,
-  supportedTags: [],
-  metaEntities: {
-    tags: {
-      standard: [],
-    },
-  },
-  injectedTags: [],
-  getFormData: jest.fn(),
-  selectedOfferDetails: null,
-  currentOrgDetails: {
-    accessibleFeatures: [],
-  },
-  fetchingLiquidValidation: false,
-  getTemplateDetailsInProgress: false,
-  isEditInApp: false,
-};
-
-// Create stable defaultData objects outside renderComponent to avoid reference changes
-const createStableDefaultData = (editorType) => {
-  if (!editorType) return {};
-  return { 'editor-type': editorType };
-};
-
-const renderComponent = (props = {}) => {
-  const mergedProps = { ...defaultProps, ...props };
-  // Ensure defaultData is always an object and stable
-  if (!mergedProps.defaultData) {
-    mergedProps.defaultData = {};
-  } else if (mergedProps.defaultData['editor-type']) {
-    // Create a stable reference for defaultData
-    mergedProps.defaultData = createStableDefaultData(mergedProps.defaultData['editor-type']);
-  }
-  return render(
-    <Provider store={store}>
-      <IntlProvider locale="en" messages={{}}>
-        <InApp {...mergedProps} />
-      </IntlProvider>
-    </Provider>
-  );
-};
-
-describe('InApp HTMLEditor Integration', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Template Name Editing', () => {
-    test('should not truncate template name when editing', async () => {
-      const showTemplateNameMock = jest.fn();
-      renderComponent({
-        defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR, 'template-name': 'abcd' },
-        showTemplateName: showTemplateNameMock,
-      });
-
-      // Wait for HTML editor to render
-      await waitFor(() => {
-        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
-      });
-
-      // Verify showTemplateName was called with the template name
-      // The template name input is handled by the wrapper, not the InApp component
-      // So we verify that the callback was set up correctly
-      expect(showTemplateNameMock).toBeDefined();
-    });
-
-    test('should preserve template name when showTemplateName callback is provided', async () => {
-      const showTemplateNameMock = jest.fn();
-      renderComponent({
-        defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR, 'template-name': 'test' },
-        showTemplateName: showTemplateNameMock,
-      });
-
-      // Wait for HTML editor to render
-      await waitFor(() => {
-        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
-      });
-
-      // Verify the component renders correctly with template name
-      // The template name is managed by the wrapper component
-      expect(showTemplateNameMock).toBeDefined();
-    });
-  });
-
-  describe('TAG API Calls', () => {
-    test('should only make one TAG API call when HTML Editor is used', async () => {
-      const fetchSchemaForEntityMock = jest.fn();
-      
-      renderComponent({
-        defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR },
-        globalActions: {
-          ...defaultProps.globalActions,
-          fetchSchemaForEntity: fetchSchemaForEntityMock,
-        },
-      });
-
-      // Wait for component to mount and initialize
-      await waitFor(() => {
-        // Component should be rendered
-        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
-      });
-
-      // Wait a bit for all useEffects to complete
-      await waitFor(() => {
-        // After isHTMLTemplate is set to true, fetchSchemaForEntity should not be called again
-        // The initial call might happen before isHTMLTemplate is set, but subsequent calls should not happen
-        // For HTML Editor, tags should only be fetched via handleOnTagsContextChange
-      }, { timeout: 1000 });
-
-      // For HTML Editor, fetchSchemaForEntity should not be called after isHTMLTemplate is set
-      // (It might be called once initially before isHTMLTemplate is set, but that's acceptable)
-      // The key is that it's not called multiple times
-      const callCount = fetchSchemaForEntityMock.mock.calls.length;
-      // Allow 0 or 1 calls (1 if it was called before isHTMLTemplate was set)
-      expect(callCount).toBeLessThanOrEqual(1);
-    });
-
-    test('should make TAG API call only once when handleOnTagsContextChange is called', async () => {
-      const fetchSchemaForEntityMock = jest.fn();
-      
-      // We need to access the handler, but since it's internal, we'll test via HTMLEditor's onContextChange
-      renderComponent({
-        defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR },
-        globalActions: {
-          ...defaultProps.globalActions,
-          fetchSchemaForEntity: fetchSchemaForEntityMock,
-        },
-      });
-
-      await waitFor(() => {
-        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
-      });
-
-      // Wait a bit for all useEffects to complete
-      await waitFor(() => {
-        // After isHTMLTemplate is set to true, fetchSchemaForEntity should not be called again
-      }, { timeout: 1000 });
-
-      // Simulate context change from HTMLEditor (which would call onContextChange)
-      // Since we can't directly access the handler, we verify the behavior
-      // by checking that fetchSchemaForEntity is not called multiple times
-      // (It might be called once initially before isHTMLTemplate is set, but that's acceptable)
-      const callCount = fetchSchemaForEntityMock.mock.calls.length;
-      expect(callCount).toBeLessThanOrEqual(1);
-    });
-  });
-
-  describe('Content Preservation on Layout Change', () => {
-    test('should preserve HTML content when layout type changes', async () => {
-      const { container } = renderComponent({
-        defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR },
-      });
-
-      await waitFor(() => {
-        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
-      });
-
-      // Simulate content being added
-      const changeButton = screen.getByTestId('html-editor-change-button');
-      act(() => {
-        fireEvent.click(changeButton);
-      });
-
-      // Get the layout radio buttons
-      const layoutRadios = container.querySelectorAll('input[type="radio"]');
-      expect(layoutRadios.length).toBeGreaterThan(0);
-
-      // Change layout type
-      if (layoutRadios.length > 1) {
-        act(() => {
-          fireEvent.change(layoutRadios[1], { target: { value: 'HEADER' } });
-        });
-
-        // Content should still be present in the editor
-        // The HTMLEditor should preserve content via initialContent prop
-        await waitFor(() => {
-          const editor = screen.getByTestId('inapp-html-editor');
-          expect(editor).toBeInTheDocument();
-        });
-      }
-    });
-  });
-
-  describe('Layout Labels', () => {
-    test('should use correct layout labels in constants', () => {
-      const { INAPP_LAYOUT_DETAILS, INAPP_MESSAGE_LAYOUT_TYPES } = require('../constants');
-      
-      // Verify that HEADER maps to Top banner
-      expect(INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER).toBe('HEADER');
-      expect(INAPP_LAYOUT_DETAILS.HEADER).toBeDefined();
-      
-      // Verify that FOOTER maps to Bottom banner
-      expect(INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER).toBe('FOOTER');
-      expect(INAPP_LAYOUT_DETAILS.FOOTER).toBeDefined();
-    });
-  });
-
-  describe('Device Content Support', () => {
-    test('should allow creating template with Android-only content when both devices supported', async () => {
-      renderComponent({
-        defaultData: { 'editor-type': INAPP_EDITOR_TYPES.HTML_EDITOR },
-        accountData: {
-          selectedWeChatAccount: {
-            ...defaultProps.accountData.selectedWeChatAccount,
-            configs: {
-              android: '1',
-              ios: '1',
-            },
-          },
-        },
-      });
-
-      await waitFor(() => {
-        expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
-      });
-
-      // Simulate adding content only for Android
-      const changeButton = screen.getByTestId('html-editor-change-button');
-      act(() => {
-        fireEvent.click(changeButton);
-      });
-
-      // Done button should be enabled (not disabled)
-      // We can't directly test isDisableDone, but we can verify the component renders
-      expect(screen.getByTestId('inapp-html-editor')).toBeInTheDocument();
-    });
-  });
-});
-