@capillarytech/creatives-library 9.0.13 → 9.0.14

package/v2Containers/CommunicationFlow/Tests/CommunicationFlowCard.test.js

@@ -0,0 +1,619 @@
+import React from 'react';
+
+jest.mock('../index', () => function MockCommunicationFlow({ onSave, onCancel, config }) {
+  return (
+    <div data-testid="comm-flow-mock" data-mode={config?.mode}>
+      <button
+        type="button"
+        data-testid="flow-save"
+        onClick={() => onSave({
+          contentItems: [{ channel: 'SMS', templateData: {} }],
+          communicationStrategy: 'SINGLE_TEMPLATE',
+          deliverySetting: { channelSetting: { SMS: {} } },
+          dynamicControls: {},
+        })}
+      >
+        Save
+      </button>
+      <button type="button" data-testid="flow-cancel" onClick={onCancel}>
+        Cancel
+      </button>
+    </div>
+  );
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapSlideBox', () => function MockCapSlideBox({ show, content, header }) {
+  if (!show) return null;
+  return (
+    <div data-testid="slide-box">
+      <div data-testid="slide-box-header">{header}</div>
+      <div data-testid="slide-box-content">{content}</div>
+    </div>
+  );
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapIcon', () => function MockCapIcon({ type, onClick, style }) {
+  return <span data-testid={`cap-icon-${type}`} role="button" onClick={onClick} style={style} />;
+});
+
+jest.mock('../utils/getContentBody', () => jest.fn());
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import CommunicationFlowCard from '../CommunicationFlowCard';
+import getContentBody from '../utils/getContentBody';
+
+beforeEach(() => {
+  getContentBody.mockReturnValue(<span data-testid="content-body">Content</span>);
+});
+
+const baseConfig = {
+  consumer: 'campaigns',
+  mode: 'create',
+  features: {},
+};
+
+function renderCard(props = {}) {
+  const merged = {
+    config: baseConfig,
+    initialData: null,
+    onSave: jest.fn(),
+    onCancel: jest.fn(),
+    onChange: jest.fn(),
+    cap: {},
+    ...props,
+  };
+  return render(
+    <IntlProvider locale="en" messages={{}} defaultLocale="en">
+      <CommunicationFlowCard {...merged} />
+    </IntlProvider>,
+  );
+}
+
+const makeSavedData = (overrides = {}) => ({
+  contentItems: [{ channel: 'SMS', templateData: {} }],
+  communicationStrategy: 'SINGLE_TEMPLATE',
+  messageType: null,
+  deliverySetting: { channelSetting: { SMS: { gsmSenderId: 'TEST_ID' } } },
+  dynamicControls: {},
+  ...overrides,
+});
+
+describe('CommunicationFlowCard', () => {
+  describe('empty state', () => {
+    it('renders Add creatives button when no initialData', () => {
+      renderCard();
+      expect(screen.getByText('Add creatives')).toBeInTheDocument();
+    });
+
+    it('does not render summary card when no initialData', () => {
+      renderCard();
+      expect(screen.queryByText('Message:')).not.toBeInTheDocument();
+    });
+
+    it('SlideBox is not shown initially', () => {
+      renderCard();
+      expect(screen.queryByTestId('slide-box')).not.toBeInTheDocument();
+    });
+
+    it('opens SlideBox when Add creatives button is clicked', () => {
+      renderCard();
+      fireEvent.click(screen.getByText('Add creatives'));
+      expect(screen.getByTestId('slide-box')).toBeInTheDocument();
+    });
+
+    it('shows CommunicationFlow in create mode when opened from empty state', () => {
+      renderCard();
+      fireEvent.click(screen.getByText('Add creatives'));
+      expect(screen.getByTestId('comm-flow-mock')).toHaveAttribute('data-mode', 'create');
+    });
+  });
+
+  describe('configured state (initialData provided)', () => {
+    it('renders summary card and hides empty card when initialData has contentItems', () => {
+      renderCard({ initialData: makeSavedData() });
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+      expect(screen.queryByText('Add creatives')).not.toBeInTheDocument();
+    });
+
+    it('shows strategy label from DEFAULT_COMMUNICATION_STRATEGY_OPTIONS', () => {
+      renderCard({ initialData: makeSavedData() });
+      expect(screen.getByText('Single template')).toBeInTheDocument();
+    });
+
+    it('shows strategy label from config.features.communicationStrategyData.options when provided', () => {
+      const config = {
+        ...baseConfig,
+        features: {
+          communicationStrategyData: {
+            options: [{ value: 'SINGLE_TEMPLATE', label: 'My Custom Strategy' }],
+          },
+        },
+      };
+      renderCard({ config, initialData: makeSavedData() });
+      expect(screen.getByText('My Custom Strategy')).toBeInTheDocument();
+    });
+
+    it('shows raw strategyValue when no matching option is found', () => {
+      renderCard({ initialData: makeSavedData({ communicationStrategy: 'UNKNOWN_STRATEGY' }) });
+      expect(screen.getByText('UNKNOWN_STRATEGY')).toBeInTheDocument();
+    });
+
+    it('shows empty strategy label without crashing when communicationStrategy is null', () => {
+      renderCard({ initialData: makeSavedData({ communicationStrategy: null }) });
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+    });
+
+    it('shows messageTypeLabel in parentheses when messageType matches a config option', () => {
+      const config = {
+        ...baseConfig,
+        features: {
+          messageTypeData: { options: [{ value: 'promotional', label: 'Promotional' }] },
+        },
+      };
+      renderCard({ config, initialData: makeSavedData({ messageType: 'promotional' }) });
+      expect(screen.getByText('(Promotional)')).toBeInTheDocument();
+    });
+
+    it('shows raw messageType in parentheses when no match is found in options', () => {
+      renderCard({ initialData: makeSavedData({ messageType: 'custom_type' }) });
+      expect(screen.getByText('(custom_type)')).toBeInTheDocument();
+    });
+
+    it('does not render messageType parenthetical when messageType is null', () => {
+      renderCard({
+        initialData: makeSavedData({
+          messageType: null,
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: null } } },
+        }),
+      });
+      expect(screen.queryByText(/\(.*\)/)).not.toBeInTheDocument();
+    });
+
+    it('calls getContentBody with the first content item', () => {
+      const item = { channel: 'SMS', templateData: { smsBody: 'Hi' } };
+      renderCard({ initialData: makeSavedData({ contentItems: [item] }) });
+      expect(getContentBody).toHaveBeenCalledWith(item);
+    });
+
+    it('renders the output of getContentBody', () => {
+      renderCard({ initialData: makeSavedData() });
+      expect(screen.getByTestId('content-body')).toBeInTheDocument();
+    });
+
+    it('shows Other controls section title', () => {
+      renderCard({ initialData: makeSavedData() });
+      expect(screen.getByText('Other controls')).toBeInTheDocument();
+    });
+  });
+
+  describe('channel config resolution', () => {
+    it('matches channelConfig by uppercase channel value', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'EMAIL', templateData: {} }],
+          deliverySetting: { channelSetting: { EMAIL: {} } },
+        }),
+      });
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+    });
+
+    it('matches channelConfig by channelProp when channel is lowercase', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'sms', templateData: {} }],
+          deliverySetting: { channelSetting: {} },
+        }),
+      });
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+    });
+
+    it('falls back to raw channel string when no channelConfig is found', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'UNKNOWN_CH', templateData: {} }],
+          deliverySetting: { channelSetting: {} },
+        }),
+      });
+      expect(screen.getByText('UNKNOWN_CH')).toBeInTheDocument();
+    });
+  });
+
+  describe('sender ID display', () => {
+    it('shows gsmSenderId for SMS with Sender ID label', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: 'CAPS_SMS' } } },
+        }),
+      });
+      expect(screen.getByText(/CAPS_SMS/)).toBeInTheDocument();
+      expect(screen.getByText(/Sender ID/)).toBeInTheDocument();
+    });
+
+    it('shows senderEmail for EMAIL with Sender ID label', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'EMAIL', templateData: {} }],
+          deliverySetting: { channelSetting: { EMAIL: { senderEmail: 'test@example.com' } } },
+        }),
+      });
+      expect(screen.getByText(/test@example.com/)).toBeInTheDocument();
+      expect(screen.getByText(/Sender ID/)).toBeInTheDocument();
+    });
+
+    it('shows sender (primary) for VIBER', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'VIBER', templateData: {} }],
+          deliverySetting: { channelSetting: { VIBER: { sender: 'ViberSender' } } },
+        }),
+      });
+      expect(screen.getByText(/ViberSender/)).toBeInTheDocument();
+    });
+
+    it('falls back to gsmSenderId for VIBER when sender is absent', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'VIBER', templateData: {} }],
+          deliverySetting: { channelSetting: { VIBER: { gsmSenderId: 'FallbackViber' } } },
+        }),
+      });
+      expect(screen.getByText(/FallbackViber/)).toBeInTheDocument();
+    });
+
+    it('shows senderMobNum for WHATSAPP with Sender number label', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'WHATSAPP', templateData: {} }],
+          deliverySetting: { channelSetting: { WHATSAPP: { senderMobNum: '+1234567890' } } },
+        }),
+      });
+      expect(screen.getByText(/\+1234567890/)).toBeInTheDocument();
+      expect(screen.getByText(/Sender number/)).toBeInTheDocument();
+    });
+
+    it('shows senderMobNum for RCS with Sender number label', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'RCS', templateData: {} }],
+          deliverySetting: { channelSetting: { RCS: { senderMobNum: '+9876543210' } } },
+        }),
+      });
+      expect(screen.getByText(/\+9876543210/)).toBeInTheDocument();
+      expect(screen.getByText(/Sender number/)).toBeInTheDocument();
+    });
+
+    it('falls back to rcsSender for RCS when senderMobNum is absent', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'RCS', templateData: {} }],
+          deliverySetting: { channelSetting: { RCS: { rcsSender: 'RCS_SENDER_ID' } } },
+        }),
+      });
+      expect(screen.getByText(/RCS_SENDER_ID/)).toBeInTheDocument();
+    });
+
+    it('shows zaloSenderId for ZALO', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'ZALO', templateData: {} }],
+          deliverySetting: { channelSetting: { ZALO: { zaloSenderId: 'ZALO_123' } } },
+        }),
+      });
+      expect(screen.getByText(/ZALO_123/)).toBeInTheDocument();
+    });
+
+    it('does not show sender ID for LINE (excluded from delivery settings)', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'LINE', templateData: {} }],
+          deliverySetting: { channelSetting: { LINE: { lineSenderId: 'LINE_ID' } } },
+        }),
+      });
+      expect(screen.queryByText(/LINE_ID/)).not.toBeInTheDocument();
+    });
+
+    it('does not show sender row when senderIdValue is null', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: null } } },
+        }),
+      });
+      expect(screen.queryByText(/Sender ID/)).not.toBeInTheDocument();
+    });
+
+    it('returns null sender for channels with no matching sender logic (e.g. MOBILEPUSH)', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ channel: 'MOBILEPUSH', templateData: {} }],
+          deliverySetting: { channelSetting: {} },
+        }),
+      });
+      expect(screen.queryByText(/Sender ID/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/Sender number/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('resolveValue edge cases (tested via sender ID)', () => {
+    it('resolves an array to its first element', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: ['FIRST', 'SECOND'] } } },
+        }),
+      });
+      expect(screen.getByText(/FIRST/)).toBeInTheDocument();
+    });
+
+    it('resolves an object with a .value property', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: { value: 'OBJ_VAL' } } } },
+        }),
+      });
+      expect(screen.getByText(/OBJ_VAL/)).toBeInTheDocument();
+    });
+
+    it('resolves an object with .label when .value is absent', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: { label: 'OBJ_LBL' } } } },
+        }),
+      });
+      expect(screen.getByText(/OBJ_LBL/)).toBeInTheDocument();
+    });
+
+    it('returns null for an object with neither .value nor .label', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: { other: 'x' } } } },
+        }),
+      });
+      expect(screen.queryByText(/Sender ID/)).not.toBeInTheDocument();
+    });
+
+    it('returns null for a null value', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: null } } },
+        }),
+      });
+      expect(screen.queryByText(/Sender ID/)).not.toBeInTheDocument();
+    });
+
+    it('returns null for an empty string value', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: '' } } },
+        }),
+      });
+      expect(screen.queryByText(/Sender ID/)).not.toBeInTheDocument();
+    });
+
+    it('returns null for an array whose first element is null', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: [null] } } },
+        }),
+      });
+      expect(screen.queryByText(/Sender ID/)).not.toBeInTheDocument();
+    });
+
+    it('returns null for an array whose first element is an empty string', () => {
+      renderCard({
+        initialData: makeSavedData({
+          deliverySetting: { channelSetting: { SMS: { gsmSenderId: [''] } } },
+        }),
+      });
+      expect(screen.queryByText(/Sender ID/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('dynamic controls', () => {
+    const makeControlConfig = (controls) => ({
+      ...baseConfig,
+      features: { dynamicControlsData: { controls } },
+    });
+
+    it('renders Yes for true dynamic control values', () => {
+      const controls = [{ key: 'sendToControlCustomers', label: 'Control Customers' }];
+      renderCard({
+        config: makeControlConfig(controls),
+        initialData: makeSavedData({ dynamicControls: { sendToControlCustomers: true } }),
+      });
+      expect(screen.getByText('Control Customers')).toBeInTheDocument();
+      expect(screen.getByText('Yes')).toBeInTheDocument();
+    });
+
+    it('renders No for false dynamic control values', () => {
+      const controls = [{ key: 'sendToControlCustomers', label: 'Control Customers' }];
+      renderCard({
+        config: makeControlConfig(controls),
+        initialData: makeSavedData({ dynamicControls: { sendToControlCustomers: false } }),
+      });
+      expect(screen.getByText('No')).toBeInTheDocument();
+    });
+
+    it('renders multiple control rows', () => {
+      const controls = [
+        { key: 'sendToControlCustomers', label: 'Label A' },
+        { key: 'sendToBrandPocs', label: 'Label B' },
+      ];
+      renderCard({
+        config: makeControlConfig(controls),
+        initialData: makeSavedData({
+          dynamicControls: { sendToControlCustomers: true, sendToBrandPocs: false },
+        }),
+      });
+      expect(screen.getByText('Label A')).toBeInTheDocument();
+      expect(screen.getByText('Label B')).toBeInTheDocument();
+    });
+
+    it('skips control keys not found in controls config', () => {
+      const controls = [{ key: 'knownKey', label: 'Known Label' }];
+      renderCard({
+        config: makeControlConfig(controls),
+        initialData: makeSavedData({ dynamicControls: { unknownKey: true } }),
+      });
+      expect(screen.queryByText('Known Label')).not.toBeInTheDocument();
+    });
+
+    it('falls back to DYNAMIC_CONTROLS_CONFIG when config.features.dynamicControlsData is absent', () => {
+      renderCard({
+        initialData: makeSavedData({ dynamicControls: { useTinyUrl: true } }),
+      });
+      expect(screen.getByText('Yes')).toBeInTheDocument();
+    });
+
+    it('renders no control rows when dynamicControls is an empty object', () => {
+      renderCard({ initialData: makeSavedData({ dynamicControls: {} }) });
+      expect(screen.queryByText('Yes')).not.toBeInTheDocument();
+      expect(screen.queryByText('No')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('edit icon opens SlideBox', () => {
+    it('opens SlideBox when edit icon is clicked on the summary card', () => {
+      renderCard({ initialData: makeSavedData() });
+      expect(screen.queryByTestId('slide-box')).not.toBeInTheDocument();
+      fireEvent.click(screen.getByTestId('cap-icon-edit'));
+      expect(screen.getByTestId('slide-box')).toBeInTheDocument();
+    });
+
+    it('shows CommunicationFlow in edit mode when opened via edit icon', () => {
+      renderCard({ initialData: makeSavedData() });
+      fireEvent.click(screen.getByTestId('cap-icon-edit'));
+      expect(screen.getByTestId('comm-flow-mock')).toHaveAttribute('data-mode', 'edit');
+    });
+  });
+
+  describe('handleSave', () => {
+    it('transitions to summary card view after save', () => {
+      renderCard();
+      fireEvent.click(screen.getByText('Add creatives'));
+      fireEvent.click(screen.getByTestId('flow-save'));
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+    });
+
+    it('closes SlideBox after save', () => {
+      renderCard();
+      fireEvent.click(screen.getByText('Add creatives'));
+      fireEvent.click(screen.getByTestId('flow-save'));
+      expect(screen.queryByTestId('slide-box')).not.toBeInTheDocument();
+    });
+
+    it('calls onSave prop with the saved data', () => {
+      const onSave = jest.fn();
+      renderCard({ onSave });
+      fireEvent.click(screen.getByText('Add creatives'));
+      fireEvent.click(screen.getByTestId('flow-save'));
+      expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+        contentItems: expect.any(Array),
+        communicationStrategy: 'SINGLE_TEMPLATE',
+      }));
+    });
+
+    it('does not throw when onSave prop is null', () => {
+      renderCard({ onSave: null });
+      fireEvent.click(screen.getByText('Add creatives'));
+      expect(() => fireEvent.click(screen.getByTestId('flow-save'))).not.toThrow();
+    });
+  });
+
+  describe('handleClose', () => {
+    it('closes SlideBox on cancel', () => {
+      renderCard();
+      fireEvent.click(screen.getByText('Add creatives'));
+      expect(screen.getByTestId('slide-box')).toBeInTheDocument();
+      fireEvent.click(screen.getByTestId('flow-cancel'));
+      expect(screen.queryByTestId('slide-box')).not.toBeInTheDocument();
+    });
+
+    it('calls onCancel prop when SlideBox is closed', () => {
+      const onCancel = jest.fn();
+      renderCard({ onCancel });
+      fireEvent.click(screen.getByText('Add creatives'));
+      fireEvent.click(screen.getByTestId('flow-cancel'));
+      expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not throw when onCancel prop is null', () => {
+      renderCard({ onCancel: null });
+      fireEvent.click(screen.getByText('Add creatives'));
+      expect(() => fireEvent.click(screen.getByTestId('flow-cancel'))).not.toThrow();
+    });
+  });
+
+  describe('SlideBox header', () => {
+    it('renders Add message title in the slidebox header', () => {
+      renderCard();
+      fireEvent.click(screen.getByText('Add creatives'));
+      expect(screen.getByText('Add message')).toBeInTheDocument();
+    });
+  });
+
+  describe('optional chaining safety', () => {
+    it('renders without crash when config.features is absent', () => {
+      renderCard({
+        config: { consumer: 'campaigns', mode: 'create' },
+        initialData: makeSavedData(),
+      });
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+    });
+
+    it('renders without crash when deliverySetting is absent from savedData', () => {
+      renderCard({
+        initialData: {
+          contentItems: [{ channel: 'SMS', templateData: {} }],
+          communicationStrategy: 'SINGLE_TEMPLATE',
+          dynamicControls: {},
+        },
+      });
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+    });
+
+    it('renders without crash when channelSetting is absent inside deliverySetting', () => {
+      renderCard({
+        initialData: {
+          contentItems: [{ channel: 'SMS', templateData: {} }],
+          communicationStrategy: 'SINGLE_TEMPLATE',
+          deliverySetting: {},
+          dynamicControls: {},
+        },
+      });
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+    });
+
+    it('treats contentItems=[] the same as no initialData (renders empty state)', () => {
+      renderCard({
+        initialData: {
+          contentItems: [],
+          communicationStrategy: 'SINGLE_TEMPLATE',
+          dynamicControls: {},
+        },
+      });
+      expect(screen.getByText('Add creatives')).toBeInTheDocument();
+    });
+
+    it('renders without crash when dynamicControls is absent from savedData', () => {
+      renderCard({
+        initialData: {
+          contentItems: [{ channel: 'SMS', templateData: {} }],
+          communicationStrategy: 'SINGLE_TEMPLATE',
+          deliverySetting: { channelSetting: {} },
+        },
+      });
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+    });
+
+    it('renders without crash when firstItem.channel is undefined', () => {
+      renderCard({
+        initialData: makeSavedData({
+          contentItems: [{ templateData: {} }],
+          deliverySetting: { channelSetting: {} },
+        }),
+      });
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+    });
+  });
+});

package/v2Containers/CommunicationFlow/Tests/DemoPage.test.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+let capturedProps = {};
+
+jest.mock('../index', () => ({
+  CommunicationFlowCard: function MockCommunicationFlowCard(props) {
+    capturedProps = props;
+    return <div data-testid="comm-flow-card" />;
+  },
+}));
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CommunicationFlowDemoPage from '../DemoPage';
+
+beforeEach(() => {
+  capturedProps = {};
+  jest.spyOn(console, 'log').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('CommunicationFlowDemoPage', () => {
+  it('renders without crashing', () => {
+    render(<CommunicationFlowDemoPage />);
+    expect(screen.getByTestId('comm-flow-card')).toBeInTheDocument();
+  });
+
+  it('passes config with consumer PROGRAM and create mode', () => {
+    render(<CommunicationFlowDemoPage />);
+    expect(capturedProps.config.consumer).toBe('PROGRAM');
+    expect(capturedProps.config.mode).toBe('create');
+    expect(capturedProps.config.useCCS).toBe(true);
+  });
+
+  it('passes config.features with the expected shape', () => {
+    render(<CommunicationFlowDemoPage />);
+    const { features } = capturedProps.config;
+    expect(features.messageTypeData).toEqual({ required: false });
+    expect(features.communicationStrategyData).toEqual({ required: true, disabled: false });
+    expect(features.contentTemplateData).toEqual({
+      required: true,
+      channelsToHide: [],
+      channelsToDisable: [],
+    });
+    expect(features.incentivesData).toEqual({ required: false });
+    expect(features.deliverySettingsData).toEqual({ required: false, deliverySettings: [{}] });
+    expect(features.showDynamicControls).toBe(true);
+  });
+
+  it('passes config.context with orgUnitId and campaignId', () => {
+    render(<CommunicationFlowDemoPage />);
+    expect(capturedProps.config.context).toEqual({ orgUnitId: '1231', campaignId: '456789' });
+  });
+
+  it('passes an onSave function prop', () => {
+    render(<CommunicationFlowDemoPage />);
+    expect(typeof capturedProps.onSave).toBe('function');
+  });
+
+  it('onSave logs the data via console.log', () => {
+    render(<CommunicationFlowDemoPage />);
+    const sampleData = { channel: 'SMS', contentItems: [] };
+    capturedProps.onSave(sampleData);
+    expect(console.log).toHaveBeenCalledWith('Save called with data:', sampleData);
+  });
+
+  it('renders without a wrapper div with inline styles', () => {
+    const { container } = render(<CommunicationFlowDemoPage />);
+    const wrapper = container.firstChild;
+    expect(wrapper.style.padding).toBe('');
+    expect(wrapper.style.maxWidth).toBe('');
+    expect(wrapper.style.margin).toBe('');
+  });
+});