@capillarytech/creatives-library 8.0.345-alpha.12 → 8.0.345-alpha.13

package/v2Components/SmsFallback/tests/smsFallbackHandlers.test.js

@@ -1,304 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { SmsFallback } from '../index';
-import * as Api from '../../../services/api';
-import { useLocalTemplateList } from '../useLocalTemplateList';
-
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: (node) => node,
-}));
-
-jest.mock('../../../services/api', () => ({
-  getTemplateDetails: jest.fn(),
-}));
-
-jest.mock('../useLocalTemplateList', () => ({
-  useLocalTemplateList: jest.fn(),
-}));
-
-jest.mock('../../../v2Containers/Templates/actions', () => ({
-  getLocalSmsTemplates: jest.fn(() => ({ type: 'LOCAL_SMS' })),
-}));
-
-const mockSmsFallbackLocalSelector = jest.fn((props) => (
-  <div data-testid="sms-fallback-selector-mock" data-hidden={String(props.hidden)} />
-));
-jest.mock('../SmsFallbackLocalSelector', () => ({
-  __esModule: true,
-  default: (props) => mockSmsFallbackLocalSelector(props),
-}));
-
-const mockSmsTraiEdit = jest.fn(() => <div data-testid="sms-trai-edit-mock" />);
-jest.mock('../../../v2Containers/SmsTrai/Edit', () => ({
-  __esModule: true,
-  default: (props) => mockSmsTraiEdit(props),
-}));
-
-const mockSmsWrapper = jest.fn(() => <div data-testid="sms-wrapper-mock" />);
-jest.mock('../../../v2Containers/SmsWrapper', () => ({
-  __esModule: true,
-  default: (props) => mockSmsWrapper(props),
-}));
-
-jest.mock('../../../v2Containers/Templates/TemplatesActionBar', () => ({
-  __esModule: true,
-  default: ({ children }) => <div data-testid="templates-action-bar">{children}</div>,
-}));
-
-jest.mock('@capillarytech/cap-ui-library/CapRow', () => (props) => <div {...props} />);
-jest.mock('@capillarytech/cap-ui-library/CapHeader', () => (props) => (
-  <div className={props.className}>
-    {props.prefix || null}
-    <div>{props.title}</div>
-    <div>{props.description}</div>
-  </div>
-));
-jest.mock('@capillarytech/cap-ui-library/CapHeading', () => (props) => <div>{props.children}</div>);
-jest.mock('@capillarytech/cap-ui-library/CapButton', () => (props) => (
-  <button type="button" {...props}>
-    {props.children}
-  </button>
-));
-jest.mock('@capillarytech/cap-ui-library/CapIcon', () => (props) => <span {...props} />);
-jest.mock('@capillarytech/cap-ui-library/CapDropdown', () => (props) => (
-  <div>
-    {props.children}
-    {props.overlay}
-  </div>
-));
-jest.mock('@capillarytech/cap-ui-library/CapMenu', () => {
-  const Menu = ({ children }) => <div>{children}</div>;
-  Menu.Item = ({ children, onClick }) => (
-    <button type="button" onClick={onClick}>
-      {children}
-    </button>
-  );
-  return Menu;
-});
-jest.mock('@capillarytech/cap-ui-library/CapCustomCard', () => ({
-  CapCustomCardList: ({ cardList }) => (
-    <div data-testid="custom-card">
-      <div>{cardList?.[0]?.title}</div>
-      <div>{cardList?.[0]?.content}</div>
-      <div>{cardList?.[0]?.extra}</div>
-    </div>
-  ),
-}));
-jest.mock('@capillarytech/cap-ui-library/CapSlideBox', () => (props) => (
-  <div data-testid="cap-slidebox">
-    {props.header}
-    {props.content}
-  </div>
-));
-jest.mock('@capillarytech/cap-ui-library', () => ({
-  CapLabel: ({ children }) => <span>{children}</span>,
-  CapIcons: {
-    backIcon: (props) => <span data-testid="cap-icons-back" {...props} />,
-  },
-  CapRadio: {
-    CapRadioGroup: ({ children }) => <div>{children}</div>,
-    Button: ({ children, value }) => <button type="button" data-value={value}>{children}</button>,
-  },
-}));
-
-const intl = { formatMessage: (m) => m.defaultMessage || m.id || '' };
-
-/** Last jest mock invocation (Node <16 has no Array.prototype.at on mock.calls). */
-const lastMockCall = (mockFn) => {
-  const { calls } = mockFn.mock;
-  return calls[calls.length - 1];
-};
-
-const buildList = () => ({
-  templates: [],
-  totalCount: 0,
-  loading: false,
-  page: 1,
-  search: '',
-  setSearch: jest.fn(),
-  loadMore: jest.fn(),
-  reset: jest.fn(),
-  canLoadMore: false,
-});
-
-const renderComp = (extraProps = {}) => {
-  const props = {
-    dispatch: jest.fn(),
-    value: null,
-    onChange: jest.fn(),
-    smsRegister: 'DLT',
-    selectedOfferDetails: {},
-    channelsToHide: ['email'],
-    sectionTitle: null,
-    intl,
-    showAsCard: true,
-    disableSelectTemplate: false,
-    eventContextTags: [],
-    isFullMode: false,
-    onRcsFallbackEditorStateChange: jest.fn(),
-    isRcsEditFlow: false,
-    ...extraProps,
-  };
-  return { ...render(<SmsFallback {...props} />), props };
-};
-
-describe('SmsFallback handlers', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    useLocalTemplateList.mockReturnValue(buildList());
-    Api.getTemplateDetails.mockResolvedValue({ response: {} });
-  });
-
-  it('opens selector and forwards embedded SMS save payload', async () => {
-    const { props } = renderComp();
-    fireEvent.click(screen.getByRole('button'));
-
-    const selectorProps = lastMockCall(mockSmsFallbackLocalSelector)[0];
-    selectorProps.getCreativesData({
-      channel: 'SMS',
-      messageBody: 'Body',
-      templateConfigs: { templateName: 'N', templateId: 9, template: 'Body' },
-    });
-
-    await waitFor(() => {
-      expect(props.onChange).toHaveBeenCalled();
-    });
-  });
-
-  it('ignores embedded non-SMS payload in getCreativesData', () => {
-    const { props } = renderComp();
-    fireEvent.click(screen.getByRole('button'));
-    const selectorProps = lastMockCall(mockSmsFallbackLocalSelector)[0];
-    selectorProps.getCreativesData({ channel: 'RCS' });
-    expect(props.onChange).not.toHaveBeenCalled();
-  });
-
-  it('selects template without id and opens edit with pending data', async () => {
-    renderComp();
-    fireEvent.click(screen.getByRole('button'));
-    const selectorProps = lastMockCall(mockSmsFallbackLocalSelector)[0];
-    selectorProps.onSelectTemplate({
-      name: 'No id template',
-      versions: { base: { 'sms-editor': 'raw-content' } },
-    });
-
-    await waitFor(() => {
-      expect(mockSmsTraiEdit).toHaveBeenCalled();
-    });
-  });
-
-  it('fetches template details for selected template id and opens edit', async () => {
-    renderComp();
-    fireEvent.click(screen.getByRole('button'));
-    const selectorProps = lastMockCall(mockSmsFallbackLocalSelector)[0];
-    await selectorProps.onSelectTemplate({
-      _id: 'temp-1',
-      name: 'Server template',
-    });
-
-    expect(Api.getTemplateDetails).toHaveBeenCalledWith({ id: 'temp-1', channel: 'Sms' });
-    await waitFor(() => {
-      expect(mockSmsTraiEdit).toHaveBeenCalled();
-    });
-  });
-
-  it('falls back to selected template when details fetch fails', async () => {
-    Api.getTemplateDetails.mockRejectedValueOnce(new Error('x'));
-    renderComp();
-    fireEvent.click(screen.getByRole('button'));
-    const selectorProps = lastMockCall(mockSmsFallbackLocalSelector)[0];
-    await selectorProps.onSelectTemplate({
-      _id: 'temp-2',
-      name: 'Fallback template',
-      versions: { base: { 'sms-editor': 'body' } },
-    });
-
-    await waitFor(() => {
-      expect(mockSmsTraiEdit).toHaveBeenCalled();
-    });
-  });
-
-  it('saves edit form from inline editor without closing when skipCloseOnSave true', async () => {
-    const onChange = jest.fn();
-    renderComp({
-      onChange,
-      value: {
-        templateName: 'Existing',
-        content: 'Old',
-        templateContent: 'Old',
-        unicodeValidity: true,
-      },
-      showAsCard: false,
-    });
-
-    const editProps = lastMockCall(mockSmsTraiEdit)[0];
-    editProps.getFormSubscriptionData({
-      versions: { base: { 'sms-editor': 'New body', 'unicode-validity': false } },
-    });
-
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith(
-        expect.objectContaining({
-          content: 'New body',
-          templateContent: 'New body',
-          unicodeValidity: false,
-        }),
-      );
-    });
-  });
-
-  it('renders selector when internal view is set through open action', () => {
-    renderComp({ value: null });
-    fireEvent.click(screen.getByRole('button'));
-    const selectorProps = lastMockCall(mockSmsFallbackLocalSelector)[0];
-    expect(selectorProps.hidden).toBe(false);
-    expect(selectorProps.fetchDetailsLoading).toBe(false);
-  });
-
-  it('passes create view hook callbacks to SmsWrapper', async () => {
-    const onChange = jest.fn();
-    /* Non-DLT so SmsWrapper mounts SmsCreate, not SmsTraiCreate (DLT + library forces Trai flow). */
-    renderComp({ onChange, smsRegister: 'REGISTERED' });
-    fireEvent.click(screen.getByRole('button'));
-    const selectorProps = lastMockCall(mockSmsFallbackLocalSelector)[0];
-    selectorProps.filterContent.props.onCtaClick();
-
-    await waitFor(() => {
-      expect(screen.getByTestId('cap-slidebox')).toBeInTheDocument();
-      expect(mockSmsWrapper).toHaveBeenCalled();
-    });
-
-    const wrapperProps = lastMockCall(mockSmsWrapper)[0];
-    wrapperProps.getFormSubscriptionData({
-      validity: true,
-      value: { base: { 'sms-editor': 'created text', 'template-name': 'created', 'unicode-validity': true } },
-    });
-
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith(
-        expect.objectContaining({
-          templateName: 'created',
-          content: 'created text',
-          templateContent: 'created text',
-        }),
-      );
-    });
-  });
-
-  it('does not save create payload when validity is false', async () => {
-    const onChange = jest.fn();
-    renderComp({ onChange, smsRegister: 'REGISTERED' });
-    fireEvent.click(screen.getByRole('button'));
-    const selectorProps = lastMockCall(mockSmsFallbackLocalSelector)[0];
-    selectorProps.filterContent.props.onCtaClick();
-    await waitFor(() => {
-      expect(mockSmsWrapper).toHaveBeenCalled();
-    });
-    const wrapperProps = lastMockCall(mockSmsWrapper)[0];
-    wrapperProps.getFormSubscriptionData({ validity: false, value: { base: { 'sms-editor': 'x' } } });
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});
-

package/v2Components/SmsFallback/tests/smsFallbackUi.test.js

@@ -1,197 +0,0 @@
-/**
- * Additional SmsFallback UI coverage (props, layout branches, interaction flows) for Sonar new-code metrics.
- */
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { Provider } from 'react-redux';
-import { createStore } from 'redux';
-import { IntlProvider } from 'react-intl';
-import SmsFallback from '../index';
-import smsFallbackMessages from '../messages';
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useDispatch: () => jest.fn(),
-}));
-
-jest.mock('../../../services/api', () => ({
-  getTemplateDetails: jest.fn().mockResolvedValue({ response: {} }),
-}));
-
-jest.mock('../../../v2Containers/Templates/utils/smsTemplatesListApi', () => ({
-  fetchSmsTemplatesListPage: jest.fn().mockResolvedValue({ templates: [], totalCount: 0 }),
-}));
-
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: (node) => node,
-}));
-
-// Render CapDropdown overlay inline — rc-trigger appends to the DOM directly and
-// bypasses the createPortal mock, so the overlay would never appear in JSDOM otherwise.
-jest.mock('@capillarytech/cap-ui-library/CapDropdown', () => ({
-  __esModule: true,
-  default: ({ overlay, children }) => (
-    <span>
-      {children}
-      {overlay}
-    </span>
-  ),
-}));
-
-// Render localTemplatesFilterContent (the TemplatesActionBar with "Create new") so that
-// tests can interact with the CTA button. It arrives nested inside localTemplatesConfig,
-// not as a top-level prop.
-jest.mock('../../../v2Containers/CreativesContainer', () => ({
-  __esModule: true,
-  default: ({ localTemplatesConfig }) => (
-    <div data-testid="sms-fallback-creatives-container">
-      {localTemplatesConfig?.localTemplatesFilterContent}
-    </div>
-  ),
-}));
-
-jest.mock('../../../v2Containers/SmsTrai/Edit', () => ({
-  __esModule: true,
-  default: () => <div data-testid="sms-trai-edit-mock">SmsTraiEdit</div>,
-}));
-
-jest.mock('../../../v2Containers/SmsWrapper', () => ({
-  __esModule: true,
-  default: () => <div data-testid="sms-wrapper-mock">SmsWrapper</div>,
-}));
-
-const intlMessages = Object.keys(smsFallbackMessages).reduce((acc, key) => {
-  const m = smsFallbackMessages[key];
-  acc[m.id] = m.defaultMessage;
-  return acc;
-}, {});
-
-const renderSmsFallback = (props = {}) => {
-  const store = createStore((state = {}) => state);
-  return render(
-    <Provider store={store}>
-      <IntlProvider locale="en" messages={intlMessages}>
-        <SmsFallback
-          onChange={jest.fn()}
-          smsRegister={props.smsRegister ?? 'DLT'}
-          isFullMode={props.isFullMode ?? true}
-          {...props}
-        />
-      </IntlProvider>
-    </Provider>
-  );
-};
-
-describe('SmsFallback UI branches', () => {
-  it('renders inline editor when value exists and showAsCard is false', () => {
-    const { container } = renderSmsFallback({
-      value: {
-        templateName: 'T',
-        content: 'C',
-        templateContent: 'C',
-      },
-      showAsCard: false,
-    });
-    expect(container.querySelector('.sms-fallback-inline-editor')).toBeTruthy();
-    expect(screen.getByTestId('sms-trai-edit-mock')).toBeInTheDocument();
-  });
-
-  it('disables Select template when disableSelectTemplate is true', () => {
-    renderSmsFallback({ value: null, disableSelectTemplate: true });
-    expect(
-      screen.getByRole('button', { name: smsFallbackMessages.selectTemplate.defaultMessage })
-    ).toBeDisabled();
-  });
-
-  it('uses custom sectionTitle when provided', () => {
-    renderSmsFallback({ value: null, sectionTitle: 'Custom SMS section' });
-    expect(screen.getByText('Custom SMS section')).toBeInTheDocument();
-  });
-
-  it('uses sectionTitleWithoutOptional when value is set and sectionTitle omitted', () => {
-    renderSmsFallback({
-      value: { templateName: 'N', content: 'x' },
-      showAsCard: true,
-    });
-    expect(
-      screen.getByText(smsFallbackMessages.sectionTitleWithoutOptional.defaultMessage)
-    ).toBeInTheDocument();
-  });
-});
-
-describe('SmsFallback interaction flows', () => {
-  it('open → selector visible → close → selector gone', async () => {
-    renderSmsFallback({ value: null });
-
-    // Portal not rendered before opening
-    expect(screen.queryByTestId('sms-fallback-creatives-container')).not.toBeInTheDocument();
-
-    fireEvent.click(
-      screen.getByRole('button', { name: smsFallbackMessages.selectTemplate.defaultMessage }),
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('sms-fallback-creatives-container')).toBeInTheDocument();
-    });
-  });
-
-  it('open → click create new → SmsWrapper rendered inside slidebox', async () => {
-    // Non-DLT so the CTA label is "Create new" (not "Upload new") and SmsWrapper is used
-    renderSmsFallback({ value: null, smsRegister: 'REGISTERED', isFullMode: false });
-
-    fireEvent.click(
-      screen.getByRole('button', { name: smsFallbackMessages.selectTemplate.defaultMessage }),
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('sms-fallback-creatives-container')).toBeInTheDocument();
-    });
-
-    fireEvent.click(
-      screen.getByRole('button', { name: smsFallbackMessages.createNew.defaultMessage }),
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('sms-wrapper-mock')).toBeInTheDocument();
-    });
-
-    // Selector should still be mounted (hidden behind slidebox) — not unmounted
-    expect(screen.getByTestId('sms-fallback-creatives-container')).toBeInTheDocument();
-  });
-
-  it('value present → card shown → edit option → SmsTraiEdit rendered', async () => {
-    const { container } = renderSmsFallback({
-      value: { templateName: 'My SMS', content: 'Hello', templateContent: 'Hello' },
-      showAsCard: true,
-    });
-
-    // Card should display the template name
-    expect(screen.getByText('My SMS')).toBeInTheDocument();
-
-    // The "more" trigger is a CapIcon rendered as an <i> (no accessible role) — query by class.
-    fireEvent.click(container.querySelector('.cap-icon-v2-more'));
-    // CapMenu.Item renders as <li> — find by visible text.
-    fireEvent.click(screen.getByText(smsFallbackMessages.editTemplate.defaultMessage));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('sms-trai-edit-mock')).toBeInTheDocument();
-    });
-  });
-
-  it('value present → remove clears the value', async () => {
-    const onChange = jest.fn();
-    const { container } = renderSmsFallback({
-      onChange,
-      value: { templateName: 'To Remove', content: 'x', templateContent: 'x' },
-      showAsCard: true,
-    });
-
-    fireEvent.click(container.querySelector('.cap-icon-v2-more'));
-    // CapMenu.Item renders as <li> — find by visible text.
-    fireEvent.click(screen.getByText(smsFallbackMessages.removeTemplate.defaultMessage));
-
-    expect(onChange).toHaveBeenCalledWith(null);
-  });
-});