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

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

@@ -0,0 +1,376 @@
+/**
+ * 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();
+    });
+  });
+});
+