@capillarytech/creatives-library 9.0.59 → 9.0.61-alpha.0

package/v2Components/FormBuilder/Functional/tests/mpushRenderers.test.js

@@ -1,376 +0,0 @@
-/**
- * Unit tests for the MPUSH field renderers — each renderer is invoked as a plain
- * function and its element tree inspected, exercising the conditional branches
- * (error gating, message resolution, value-resolution chains, upload handlers)
- * without mounting the heavy subtrees.
- */
-import {
-  MpushInputField, MpushTextAreaField, MpushCheckboxField, RadioGroupField,
-  SelectField, UploadField, MpushDivField, IconField, MobilePushPreviewField,
-  createMpushRegistry,
-} from '../renderers/mpushRenderers';
-import { TagListField } from '../renderers/smsRenderers';
-import { ERROR_VALUE } from '../channels/mobilepush/config';
-import { isAiContentBotDisabled } from '../../../../utils/common';
-
-jest.mock('../../../../utils/common', () => ({ isAiContentBotDisabled: jest.fn(() => true) }));
-
-const intl = { formatMessage: (d) => d.defaultMessage || d.id };
-
-const kids = (el) => {
-  const c = el.props.children;
-  return (Array.isArray(c) ? c : [c]).filter(Boolean);
-};
-
-describe('MpushInputField', () => {
-  const field = { id: 'secondary-cta-0-label', width: 18, errorMessage: 'Label required' };
-
-  it('message resolution: personalization > brace > schema errorMessage; hidden without checkValidation', () => {
-    const base = { field, onChange: () => {}, renderContext: { checkValidation: true, intl } };
-    expect(kids(MpushInputField({ ...base, value: '', error: true }))[0].props.errorMessage)
-      .toBe('Label required');
-    expect(kids(MpushInputField({ ...base, value: 'a {{b', error: ERROR_VALUE.BRACKET }))[0].props.errorMessage)
-      .toContain('curly braces');
-    expect(kids(MpushInputField({
-      ...base,
-      value: 'hi {{first_name}}',
-      error: true,
-      renderContext: { checkValidation: true, intl, restrictPersonalization: true },
-    }))[0].props.errorMessage).toContain('Personalization');
-    expect(kids(MpushInputField({
-      ...base, value: '', error: true, renderContext: { checkValidation: false, intl },
-    }))[0].props.errorMessage).toBe('');
-  });
-});
-
-describe('MpushTextAreaField', () => {
-  const field = { id: 'message-editor', width: 18, errorMessage: 'Message required' };
-
-  it('inline message shows only under checkValidation; AskAira renders when AI enabled', () => {
-    const base = { field, onChange: jest.fn(), renderContext: { checkValidation: true, intl } };
-    expect(kids(MpushTextAreaField({ ...base, value: '', error: true }))[0].props.errorMessage)
-      .toBe('Message required');
-    isAiContentBotDisabled.mockReturnValueOnce(false);
-    const el = MpushTextAreaField({ ...base, value: 'hi', error: false });
-    const bot = kids(el).find((c) => typeof c.props?.setText === 'function');
-    expect(bot).toBeTruthy();
-    bot.props.setText('generated');
-    expect(base.onChange).toHaveBeenCalledWith('generated');
-  });
-
-  it('falls back to AI-disabled when the flag reader throws', () => {
-    isAiContentBotDisabled.mockImplementationOnce(() => { throw new Error('no auth'); });
-    const el = MpushTextAreaField({
-      field, value: 'hi', error: false, onChange: () => {}, renderContext: { checkValidation: false, intl },
-    });
-    expect(kids(el).length).toBe(1); // textarea only, no bot
-  });
-});
-
-describe('MpushCheckboxField', () => {
-  const field = {
-    id: 'add-pri-cta', width: 18, submitAction: 'addPrimaryCta', errorMessage: 'err',
-  };
-
-  it('toggle commits the value AND fires the injected submit-action', () => {
-    const onChange = jest.fn();
-    const onEvent = jest.fn();
-    const el = MpushCheckboxField({
-      field, value: false, error: false, onChange, onEvent, renderContext: {},
-    });
-    kids(el)[0].props.onChange({ target: { checked: true } });
-    expect(onChange).toHaveBeenCalledWith(true);
-    expect(onEvent).toHaveBeenCalledWith('addPrimaryCta', true);
-  });
-
-  it('no submit-action => only the value commit; disabled + hoverText wraps in a tooltip', () => {
-    const onEvent = jest.fn();
-    const plain = MpushCheckboxField({
-      field: { id: 'x' }, value: false, error: false, onChange: () => {}, onEvent, renderContext: {},
-    });
-    kids(plain)[0].props.onChange({ target: { checked: true } });
-    expect(onEvent).not.toHaveBeenCalled();
-
-    const wrapped = MpushCheckboxField({
-      field: { ...field, disabled: true, hoverText: 'not configured' },
-      value: false,
-      error: false,
-      onChange: () => {},
-      renderContext: {},
-    });
-    expect(kids(wrapped)[0].props.title).toBe('not configured');
-  });
-});
-
-describe('RadioGroupField', () => {
-  const field = {
-    id: 'cta-deeplink', width: 18, options: ['Deeplink', 'External Link'], value: 'Deeplink', errorMessage: 'pick one',
-  };
-  const build = (legacyFormData, overrides = {}) => RadioGroupField({
-    field,
-    error: false,
-    onChange: () => {},
-    onEvent: () => {},
-    renderContext: { legacyFormData, activeTabIndex: 0, ...overrides },
-    ...overrides,
-  });
-
-  it('value resolution chain: tab value -> root value -> schema default (Classic handleSetRadioValue)', () => {
-    expect(kids(build({ 0: { 'cta-deeplink': 'External Link' } }))[0].props.value).toBe('External Link');
-    expect(kids(build({ 0: {}, 'cta-deeplink': 'External Link' }))[0].props.value).toBe('External Link');
-    expect(kids(build({ 0: { 'cta-deeplink': '' } }))[0].props.value).toBe('Deeplink'); // '' falls through
-  });
-
-  it('change commits the value and fires the injected onChange with the commit signature', () => {
-    const onChange = jest.fn();
-    const onEvent = jest.fn();
-    const el = RadioGroupField({
-      field, error: false, onChange, onEvent, renderContext: { legacyFormData: { 0: {} } },
-    });
-    kids(el)[0].props.onChange({ target: { value: 'External Link' } });
-    expect(onChange).toHaveBeenCalledWith('External Link');
-    expect(onEvent).toHaveBeenCalledWith('onChange', 'External Link');
-  });
-});
-
-describe('SelectField', () => {
-  const field = {
-    id: 'cta-deeplink-select', width: 18, options: [{ label: 'A', value: 'a' }], errorMessage: 'Select a deeplink',
-  };
-
-  it('formData `${id}-options` overrides the schema options; selection fires both callbacks', () => {
-    const onChange = jest.fn();
-    const onEvent = jest.fn();
-    const override = [{ label: 'B', value: 'b' }];
-    const el = SelectField({
-      field,
-      value: '',
-      error: false,
-      onChange,
-      onEvent,
-      renderContext: { legacyFormData: { 'cta-deeplink-select-options': override } },
-    });
-    const [select] = kids(el);
-    expect(select.props.options).toBe(override);
-    select.props.onSelect('b');
-    expect(onChange).toHaveBeenCalledWith('b');
-    expect(onEvent).toHaveBeenCalledWith('onSelect', 'b');
-  });
-
-  it('error span shows only under checkValidation', () => {
-    const base = { field, value: '', error: true, onChange: () => {}, onEvent: () => {} };
-    expect(kids(SelectField({ ...base, renderContext: { checkValidation: true } })).length).toBe(2);
-    expect(kids(SelectField({ ...base, renderContext: { checkValidation: false } })).length).toBe(1);
-  });
-});
-
-describe('UploadField', () => {
-  const field = {
-    id: 'image-upload', width: 6, label: 'Add image', showPreview: true,
-    supportedExtensions: '.png,.jpg', submitAction: 'onUpload',
-    previewProps: { placeholder: 'No image', errorMessage: 'Image required' },
-  };
-  // CapColumn > [WithLabel(preview), form > [input, CapButton]]
-  const parts = (el) => {
-    const [preview, form] = kids(el);
-    const [input, button] = kids(form);
-    return { preview, input, button };
-  };
-
-  it('error display honors checkValidation OR startValidation (the one Classic exception)', () => {
-    const base = { field, value: '', error: true, onEvent: () => {} };
-    expect(parts(UploadField({ ...base, renderContext: { startValidation: true } })).preview.props.ifError).toBe(true);
-    expect(parts(UploadField({ ...base, renderContext: { checkValidation: true } })).preview.props.ifError).toBe(true);
-    expect(parts(UploadField({ ...base, renderContext: {} })).preview.props.ifError).toBe(false);
-  });
-
-  it('file change: no file => no event; wrong extension fires the wrong-file event and CONTINUES (Classic parity)', () => {
-    const createObjectURL = jest.fn(() => 'blob:x');
-    window.URL.createObjectURL = createObjectURL;
-    window.URL.revokeObjectURL = jest.fn();
-    const onEvent = jest.fn();
-    const { input } = parts(UploadField({
-      field, value: '', error: false, onEvent, renderContext: {},
-    }));
-
-    input.props.onChange({ target: { files: [] } });
-    expect(onEvent).not.toHaveBeenCalled();
-
-    const file = { name: 'notes.txt', size: 100 };
-    input.props.onChange({ target: { files: [file], value: null } });
-    expect(onEvent).toHaveBeenCalledWith('onUpload', { file, type: 'wrong file' });
-    expect(createObjectURL).toHaveBeenCalledWith(file); // no early return
-  });
-
-  it('image load reports dimensions and the >5MB error flag, then releases the blob URL', () => {
-    window.URL.createObjectURL = jest.fn(() => 'blob:x');
-    const revokeObjectURL = jest.fn();
-    window.URL.revokeObjectURL = revokeObjectURL;
-    const images = [];
-    const RealImage = global.Image;
-    global.Image = class { constructor() { images.push(this); } };
-    try {
-      const onEvent = jest.fn();
-      const { input } = parts(UploadField({
-        field, value: '', error: false, onEvent, renderContext: {},
-      }));
-      const file = { name: 'big.png', size: 6e6 };
-      input.props.onChange({ target: { files: [file], value: null } });
-      const img = images[images.length - 1];
-      img.width = 300;
-      img.height = 200;
-      img.onload();
-      expect(onEvent).toHaveBeenCalledWith('onUpload', {
-        file, type: 'image', fileParams: { width: 300, height: 200, error: true },
-      });
-      expect(revokeObjectURL).toHaveBeenCalledWith('blob:x');
-      // failed image load: URL released, no event (Classic dispatches nothing)
-      input.props.onChange({ target: { files: [file], value: null } });
-      images[images.length - 1].onerror();
-      expect(revokeObjectURL).toHaveBeenCalledTimes(2);
-    } finally {
-      global.Image = RealImage;
-    }
-  });
-
-  it('the add-photo button opens the hidden file input (and no-ops when it is absent)', () => {
-    const { button } = parts(UploadField({
-      field, value: '', error: false, onEvent: () => {}, renderContext: {},
-    }));
-    const preventDefault = jest.fn();
-    button.props.onClick({ preventDefault }); // no #image-upload in DOM -> no-op branch
-    expect(preventDefault).toHaveBeenCalled();
-
-    const host = document.createElement('form');
-    host.id = 'image-upload';
-    const fileInput = document.createElement('input');
-    fileInput.id = 'fileName';
-    host.appendChild(fileInput);
-    document.body.appendChild(host);
-    const click = jest.spyOn(fileInput, 'click');
-    try {
-      button.props.onClick({ preventDefault: () => {} });
-      expect(click).toHaveBeenCalled();
-      button.props.onClick(); // the no-event guard branch
-      expect(click).toHaveBeenCalledTimes(2);
-    } finally {
-      document.body.removeChild(host);
-    }
-  });
-
-  it('renders the image when a value exists, the placeholder otherwise', () => {
-    const withImage = parts(UploadField({
-      field, value: 'https://cdn/img.png', error: false, onEvent: () => {}, renderContext: {},
-    }));
-    const withoutImage = parts(UploadField({
-      field, value: '', error: false, onEvent: () => {}, renderContext: {},
-    }));
-    expect(withImage.preview).toBeTruthy();
-    expect(withoutImage.preview).toBeTruthy();
-  });
-});
-
-describe('MpushDivField', () => {
-  const field = { id: 'copy-android-content', value: 'Copy content', submitAction: 'onClick' };
-
-  it('value resolves from the ACTIVE tab first; DOM id gets the pane suffix on pane 2', () => {
-    const el = MpushDivField({
-      field,
-      onEvent: () => {},
-      renderContext: { legacyFormData: { 0: { 'copy-android-content': 'from tab' } }, activeTabIndex: 0, paneTabIndex: 1 },
-    });
-    expect(el.props.children).toBe('from tab');
-    expect(el.props.id).toBe('copy-android-content2');
-    const androidPane = MpushDivField({
-      field, onEvent: () => {}, renderContext: { legacyFormData: {}, activeTabIndex: 0, paneTabIndex: 0 },
-    });
-    expect(androidPane.props.id).toBe('copy-android-content');
-    expect(androidPane.props.children).toBe('Copy content'); // schema fallback
-  });
-
-  it('click fires the submit-action; onInput takes the tail onChange path', () => {
-    const onEvent = jest.fn();
-    const el = MpushDivField({ field, onEvent, renderContext: {} });
-    el.props.onClick('payload');
-    expect(onEvent).toHaveBeenCalledWith('onClick', 'payload');
-    el.props.onInput({ stopPropagation: () => {}, target: { textContent: 'typed' } });
-    expect(onEvent).toHaveBeenCalledWith('onChange', 'typed');
-  });
-});
-
-describe('IconField', () => {
-  it('click fires the submit-action; no action => no event', () => {
-    const onEvent = jest.fn();
-    IconField({ field: { id: 'cta-deeplink-delete', submitAction: 'onDelete' }, onEvent })
-      .props.onClick('x');
-    expect(onEvent).toHaveBeenCalledWith('onDelete', 'x');
-    IconField({ field: { id: 'plain-icon' }, onEvent: jest.fn() }).props.onClick('x');
-    expect(onEvent).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('tag-list rendering (shared TagListField)', () => {
-  it('CLASSIC PARITY PIN: column takes field.width and field.style (semantic path, Classic.js:3730-3769)', () => {
-    // the container-spliced CTA tagLists position "Add label" via style
-    // (marginRight 24%/10%) — Classic's semantic tag-list case honors both.
-    const field = {
-      id: 'title-tagList',
-      label: 'Add label',
-      offset: 3,
-      style: { marginRight: '10%', display: 'flex', justifyContent: 'end', width: '100%' },
-    };
-    const el = TagListField({ field, onEvent: jest.fn(), renderContext: {} });
-    expect(el.props.span).toBe(''); // no width -> '' exactly like Classic
-    expect(el.props.offset).toBe(3);
-    expect(el.props.style).toEqual(field.style);
-    expect(el.props.children.props.label).toBe('Add label');
-  });
-
-  it('bridges onTagSelect through onEvent', () => {
-    const onEvent = jest.fn();
-    const el = TagListField({ field: { id: 'title-tagList' }, onEvent, renderContext: {} });
-    el.props.children.props.onTagSelect({ definition: { value: 'x' } });
-    expect(onEvent).toHaveBeenCalledWith('onTagSelect', { definition: { value: 'x' } });
-  });
-});
-
-describe('MobilePushPreviewField', () => {
-  const field = {
-    id: 'mobile-push-preview',
-    content: {
-      title: 'message-title', message: 'message-editor', secondaryCta1: 'secondary-cta-0-label', secondaryCta2: 'secondary-cta-1-label', appName: 'My App',
-    },
-  };
-
-  it('builds both platform contents from the ACTIVE tab (Classic quirk) with CTA labels', () => {
-    const el = MobilePushPreviewField({
-      field,
-      renderContext: {
-        intl,
-        activeTabIndex: 0,
-        legacyFormData: {
-          0: {
-            'message-title': 'T', 'message-editor': 'B', image: 'img.png', 'secondary-cta-0-label': 'Buy', 'secondary-cta-1-label': 'Skip',
-          },
-        },
-      },
-    });
-    const [preview] = kids(el);
-    expect(preview.props.content.androidContent).toEqual(preview.props.content.iosContent);
-    expect(preview.props.content.androidContent.header).toBe('T');
-    expect(preview.props.content.androidContent.actions).toEqual([{ label: 'Buy' }, { label: 'Skip' }]);
-    expect(preview.props.showDeviceToggle).toBe(false);
-  });
-
-  it('returns null when the active tab is absent', () => {
-    expect(MobilePushPreviewField({ field, renderContext: { legacyFormData: {} } })).toBeNull();
-  });
-});
-
-describe('createMpushRegistry', () => {
-  it('resolves every MPUSH field type to a renderer', () => {
-    const registry = createMpushRegistry();
-    ['input', 'textarea', 'checkbox', 'radioGroup', 'select', 'upload', 'div', 'icon', 'mobile-push-preview']
-      .forEach((type) => expect(registry.resolve(type)).toBeTruthy());
-  });
-});

package/v2Components/FormBuilder/Functional/tests/tabsContainer.test.js

@@ -1,110 +0,0 @@
-/**
- * Unit tests for TabsContainer — pane/key binding, unsupported-pane skipping,
- * locale-independent headers, and the tab-switch bridge.
- */
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import TabsContainer from '../layout/TabsContainer';
-
-const Stub = () => <span data-testid="stub" />;
-const registry = { resolve: () => Stub };
-
-const buildContext = (overrides = {}) => ({
-  registry,
-  state: { root: {}, tabs: [{ fields: {}, tabKey: 'kA' }, { fields: {}, tabKey: 'kI' }] },
-  errorData: {},
-  activeTabIndex: 0,
-  onFieldChange: () => {},
-  onFieldBlur: () => {},
-  onEvent: () => {},
-  onTabSwitch: jest.fn(),
-  intl: { locale: 'en', formatMessage: (d) => d.defaultMessage || d.id },
-  ...overrides,
-});
-
-const headerSection = (label) => ({
-  type: 'col-label',
-  inputFields: [{ id: `hdr-${label}`, type: 'div', value: label }],
-});
-
-const buildContainer = (overrides = {}) => ({
-  id: 'pane',
-  type: 'tabs',
-  panes: [
-    { sectionsHeaders: [headerSection('Android')], sections: [] },
-    { sectionsHeaders: [headerSection('iOS')], sections: [] },
-  ],
-  ...overrides,
-});
-
-describe('TabsContainer', () => {
-  it('renders nothing without panes', () => {
-    const { container } = render(<TabsContainer container={null} renderContext={buildContext()} />);
-    expect(container.textContent).toBe('');
-    const { container: c2 } = render(
-      <TabsContainer container={{ id: 'pane', type: 'tabs', panes: [] }} renderContext={buildContext()} />,
-    );
-    expect(c2.textContent).toBe('');
-  });
-
-  it('skips isSupported:false panes WITHOUT reserving a tab index (pane->tab binding shifts)', () => {
-    const container = buildContainer();
-    container.panes[0].isSupported = false;
-    const { container: dom } = render(
-      <TabsContainer container={container} renderContext={buildContext()} />,
-    );
-    // only the iOS pane renders, bound to tab 0 (key 'kA' — the shifted binding)
-    expect(dom.querySelectorAll('.ant-tabs-tab').length).toBe(1);
-  });
-
-  it('renders the tab-header sections for every locale (Classic has no locale gating)', () => {
-    const context = buildContext({ intl: { locale: 'ja-JP', formatMessage: (d) => d.id } });
-    const { queryAllByTestId } = render(
-      <TabsContainer container={buildContainer()} renderContext={context} />,
-    );
-    expect(queryAllByTestId('stub').length).toBeGreaterThan(0);
-  });
-
-  it('falls back to container.tabContent.sections when a pane has no sectionsHeaders', () => {
-    const container = buildContainer({
-      panes: [{ sections: [] }, { sections: [] }],
-      tabContent: { sections: [headerSection('shared')] },
-    });
-    const { getAllByTestId } = render(
-      <TabsContainer container={container} renderContext={buildContext()} />,
-    );
-    expect(getAllByTestId('stub').length).toBeGreaterThan(0);
-  });
-
-  it('a tab-header click routes through onTabSwitch with the clicked tabKey', () => {
-    const context = buildContext();
-    const { container: dom } = render(
-      <TabsContainer container={buildContainer()} renderContext={context} />,
-    );
-    fireEvent.click(dom.querySelectorAll('.ant-tabs-tab')[1]);
-    expect(context.onTabSwitch).toHaveBeenCalledWith(expect.objectContaining({ id: 'pane' }), 'kI');
-  });
-
-  it('an out-of-range active index falls back to the first pane key', () => {
-    const context = buildContext({
-      activeTabIndex: 5,
-      state: { root: {}, tabs: [{ fields: {} }, { fields: {} }] },
-    });
-    const { container: dom } = render(
-      <TabsContainer container={buildContainer()} renderContext={context} />,
-    );
-    expect(dom.querySelectorAll('.ant-tabs-tab-active').length).toBe(1);
-  });
-
-  it('key-less tabs fall back to the pane index for both pane keys and the active key', () => {
-    const context = buildContext({
-      state: { root: {}, tabs: [{ fields: {} }, { fields: {} }] },
-    });
-    const { container: dom } = render(
-      <TabsContainer container={buildContainer()} renderContext={context} />,
-    );
-    // both panes render and one is active — the fallback chains agree
-    expect(dom.querySelectorAll('.ant-tabs-tab').length).toBe(2);
-    expect(dom.querySelectorAll('.ant-tabs-tab-active').length).toBe(1);
-  });
-});