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

package/v2Components/FormBuilder/tests/mpush.characterization.test.js

@@ -1,459 +0,0 @@
-/**
- * MOBILEPUSH characterization (golden) tests — FormBuilder V3 migration, PR6a.
- *
- * These tests pin the CURRENT behavior of the FormBuilder monolith
- * (app/v2Components/FormBuilder/Classic.js) for the MOBILEPUSH channel, using
- * the real bundled layout schemas (app/v2Containers/MobilePush/initialSchema.js,
- * textSchema + imageSchema). They are the parity gate for the functional
- * rewrite: the new implementation must keep every assertion here green.
- *
- * Behavior is pinned as-is, including quirks (the single-platform modal's early
- * return that skips validity emission AND stopValidation; the string-typed
- * 'tagBracketCountMismatchError' error value; writes scoping to currentTab).
- * Do not "fix" expectations here — if the monolith changes, that is the regression.
- */
-
-import React from 'react';
-import { injectIntl } from 'react-intl';
-import '@testing-library/jest-dom';
-import _ from 'lodash';
-import { Provider } from 'react-redux';
-import { Router } from 'react-router-dom';
-import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
-// Import Classic directly, NOT the entry-gated ../index (the gate could route
-// MOBILEPUSH to the Functional build based on feature access).
-import FormBuilder from '../Classic';
-import history from '../../../utils/history';
-import { initialReducer } from '../../../initialReducer';
-import {
-  render, screen, fireEvent, waitFor, act,
-} from '../../../utils/test-utils';
-import { response as mpushSchemaResponse } from '../../../v2Containers/MobilePush/initialSchema';
-
-// Same harness facts as the SMS suite: neutralize the auth-guarded TagList wrapper…
-jest.mock('redux-auth-wrapper/history4/redirect', () => ({
-  connectedRouterRedirect: jest.fn(() => (Component) => Component),
-}));
-// …and stub the impure unsubscribe-url call with a plain function (resetMocks-safe).
-jest.mock('../../../services/api', () => ({
-  ...jest.requireActual('../../../services/api'),
-  getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
-}));
-
-const ComponentToRender = injectIntl(FormBuilder);
-
-/**
- * Mimics the MobilePush containers' injectEvents step: walks the standalone
- * sections AND the tabs container (panes + headers), gluing capture handlers
- * onto every node with supportedEvents — including the container itself
- * (onTabChange). Handlers record args + `this` (the monolith rebinds to
- * props.parent), which the rewrite's parent bridge must preserve.
- */
-const injectHandlers = (schema) => {
-  const registry = {};
-  const attach = (field) => {
-    if (!field || !field.id || !field.supportedEvents) return;
-    field.injectedEvents = {};
-    field.supportedEvents.forEach((event) => {
-      const record = { calls: [], contexts: [] };
-      registry[`${field.id}:${event}`] = record;
-      field.injectedEvents[event] = function capture(...args) {
-        record.calls.push(args);
-        record.contexts.push(this);
-      };
-    });
-  };
-  const walkSection = (section) => {
-    if (!section) return;
-    if (section.type === 'parent') {
-      (section.childSections || []).forEach(walkSection);
-    } else if (section.type === 'multicols') {
-      (section.inputFields || []).forEach((row) => (row.cols || []).forEach(attach));
-      (section.actionFields || []).forEach((row) => (row.cols || []).forEach(attach));
-    } else if (section.type === 'col-label') {
-      (section.inputFields || []).forEach(attach);
-      (section.actionFields || []).forEach(attach);
-    }
-  };
-  ((schema.standalone && schema.standalone.sections) || []).forEach(walkSection);
-  (schema.containers || []).forEach((container) => {
-    attach(container);
-    (container.panes || []).forEach((pane) => {
-      (pane.sections || []).forEach(walkSection);
-      (pane.sectionsHeaders || []).forEach(walkSection);
-    });
-  });
-  return registry;
-};
-
-const buildMpushSchema = (variant = 'textSchema') => {
-  const schema = _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition[variant]);
-  const registry = injectHandlers(schema);
-  return { schema, registry };
-};
-
-const buildProps = (overrides = {}) => ({
-  formData: {},
-  location: { pathname: '/mobilepush/create/text', query: { type: false, module: 'default' } },
-  usingTabContainer: true,
-  isFullMode: true,
-  isEdit: false,
-  startValidation: false,
-  checkValidation: false,
-  currentTab: 1,
-  tabCount: 2,
-  tabKey: '',
-  tags: [],
-  injectedTags: {},
-  onChange: jest.fn(),
-  onSubmit: jest.fn(),
-  onFormValidityChange: jest.fn(),
-  stopValidation: jest.fn(),
-  showLiquidErrorInFooter: jest.fn(),
-  setModalContent: jest.fn(),
-  handleCancelModal: jest.fn(),
-  ...overrides,
-});
-
-const renderMpush = (props) => {
-  const store = configureStore({}, initialReducer, history);
-  const ui = (p) => (
-    <Router history={history}>
-      <Provider store={store}>
-        <div className="mobilepush-wrapper">
-          <ComponentToRender {...p} />
-        </div>
-      </Provider>
-    </Router>
-  );
-  const utils = render(ui(props));
-  return { ...utils, rerenderWith: (next) => utils.rerender(ui(next)) };
-};
-
-const lastCall = (mockFn) => mockFn.mock.calls[mockFn.mock.calls.length - 1];
-
-// GOLDEN (pinned by these tests): despite the pane objects carrying
-// forceRender:true, CapTab keeps ONLY the ACTIVE pane's fields in the DOM.
-// Android and iOS share the same placeholder strings, so on the Android tab
-// these queries resolve to the Android inputs; after switching, to the iOS ones.
-const titleInput = () => screen.getByPlaceholderText('Please input message title name.');
-const editorInput = () => screen.getByPlaceholderText('Please input mobile push template content.');
-
-const fillAndroid = ({ title = 'A title', message = 'A message' } = {}) => {
-  fireEvent.change(titleInput(), { target: { value: title } });
-  fireEvent.change(editorInput(), { target: { value: message } });
-};
-
-// Switch to the iOS pane the way a user does: click the tab header. Classic then
-// runs its setTimeout(0) DOM scan (.mobilepush-wrapper .ant-tabs-tab-active) to
-// derive the 1-based index and notify the container's injected onTabChange.
-//
-// GOLDEN QUIRK (pinned by seedTabs below): pane keys are `formData[i].tabKey ||
-// index`. In the pure create flow only tab 0 gets a tabKey (_.uniqueId()), and in
-// a fresh module uniqueId() returns "1" while the iOS pane falls back to index 1 —
-// the keys COLLIDE and antd treats the iOS tab as already-active, so clicking it
-// does nothing. Production only escapes this because the app-wide uniqueId counter
-// has advanced. Tests (and real hydration flows) must supply distinct tabKeys.
-const seedTabs = { 0: { base: true, tabKey: 'tab-android' }, 1: { tabKey: 'tab-ios' } };
-
-const clickIosTab = async () => {
-  fireEvent.click(screen.getByText('iOS'));
-  await waitFor(
-    () => expect(document.getElementById('message-editor2')).toBeInTheDocument(),
-    { timeout: 3000 },
-  );
-};
-
-const typeTemplateName = (name = 'My Push', placeholder = 'Enter template name*') => {
-  jest.useFakeTimers();
-  fireEvent.change(screen.getByPlaceholderText(placeholder), { target: { value: name } });
-  act(() => { jest.advanceTimersByTime(350); });
-  jest.useRealTimers();
-};
-
-describe('MPUSH characterization — mount & rendering census (textSchema)', () => {
-  it('renders the standalone fields, both tab headers, and ONLY the active (Android) pane fields', () => {
-    const { schema } = buildMpushSchema();
-    renderMpush(buildProps({ schema }));
-
-    expect(screen.getByPlaceholderText('Enter template name*')).toBeInTheDocument();
-    expect(screen.getByText('Save')).toBeInTheDocument();
-    // Both tab HEADERS exist…
-    expect(screen.getByText('Android')).toBeInTheDocument();
-    expect(screen.getByText('iOS')).toBeInTheDocument();
-    // …but only the ACTIVE pane's fields are in the DOM (pinned Classic behavior:
-    // the pane objects say forceRender:true, yet CapTab mounts the active pane only).
-    expect(screen.getAllByPlaceholderText('Please input message title name.')).toHaveLength(1);
-    expect(document.getElementById('message-editor')).toBeInTheDocument();
-    expect(document.getElementById('message-editor2')).toBeNull();
-    // Android pane extras: copy-from-iOS link + CTA checkbox
-    expect(screen.getByText('Copy Title and Content From IOS')).toBeInTheDocument();
-    expect(screen.getByText('Add action link to content')).toBeInTheDocument();
-    // The iOS pane's copy link is NOT mounted while Android is active
-    expect(screen.queryByText('Copy Title and Content From Android')).toBeNull();
-  });
-
-  it('clicking the iOS tab header swaps the mounted pane and notifies the injected onTabChange with the 1-based index', async () => {
-    const { schema, registry } = buildMpushSchema();
-    const parentSentinel = { iAmTheContainer: true };
-    renderMpush(buildProps({ schema, parent: parentSentinel, formData: _.cloneDeep(seedTabs) }));
-
-    await clickIosTab();
-
-    // GOLDEN: panes are lazy-mounted but PERSIST once visited — after switching,
-    // the Android editor is still in the DOM (hidden), alongside the iOS pane.
-    expect(document.getElementById('message-editor')).toBeInTheDocument();
-    expect(screen.getByText('Copy Title and Content From Android')).toBeInTheDocument();
-    const record = registry['pane:onTabChange'];
-    await waitFor(() => expect(record.calls.length).toBeGreaterThan(0));
-    expect(record.calls[record.calls.length - 1][0]).toBe(2); // 1-based: 2 = iOS
-    expect(record.contexts[0]).toBe(parentSentinel);
-  });
-
-  it('mount validation reports invalid: template-name at ROOT, message errors under tab indices', () => {
-    const { schema } = buildMpushSchema();
-    const props = buildProps({ schema });
-    renderMpush(props);
-
-    expect(props.onFormValidityChange).toHaveBeenCalled();
-    const [isValid, errorData] = lastCall(props.onFormValidityChange);
-    expect(isValid).toBe(false);
-    expect(errorData['template-name']).toBe(true);
-    expect(errorData[0]['message-editor']).toBe(true);
-    expect(errorData[0]['message-title']).toBe(true);
-  });
-});
-
-describe('MPUSH characterization — onChange contract', () => {
-  it('typing in the Android editor writes formData[0], mirrors the base alias, and emits onChange(formData, tabCount, 1, field)', () => {
-    const { schema } = buildMpushSchema();
-    const props = buildProps({ schema });
-    renderMpush(props);
-
-    fireEvent.change(editorInput(), { target: { value: 'hello android' } });
-
-    expect(props.onChange).toHaveBeenCalled();
-    const [formData, tabCount, currentTab, fieldSchema] = lastCall(props.onChange);
-    // QUIRK (pinned): Classic emits this.state.tabCount, which starts at 1 in the
-    // create flow and is only mirrored from the prop in edit-mode formData syncs —
-    // so create-flow MPUSH emits tabCount 1 even though the containers pass tabCount={2}.
-    expect(tabCount).toBe(1);
-    expect(currentTab).toBe(1);
-    expect(fieldSchema.id).toBe('message-editor');
-    expect(formData[0]['message-editor']).toBe('hello android');
-    // base is an ALIAS of tab 0 and mirrors the write
-    expect(formData[0].base).toBe(true);
-    expect(formData.base['message-editor']).toBe('hello android');
-  });
-
-  it('after switching to the iOS tab, writes land in tab 1 and onChange carries currentTab=2', async () => {
-    const { schema } = buildMpushSchema();
-    const props = buildProps({ schema, formData: _.cloneDeep(seedTabs) });
-    renderMpush(props);
-
-    await clickIosTab();
-    // Classic derives currentTab from a setTimeout(0) DOM scan; give it a tick.
-    await waitFor(() => {
-      fireEvent.change(document.getElementById('message-editor2'), { target: { value: 'ios body' } });
-      const [formData, , currentTab] = lastCall(props.onChange);
-      expect(currentTab).toBe(2);
-      expect(formData[1]['message-editor2']).toBe('ios body');
-    });
-  });
-});
-
-describe('MPUSH characterization — save flow (startValidation rising edge, full mode)', () => {
-  it('both platforms filled + template name => valid, submits the RAW full formData (no getChannelData)', async () => {
-    const { schema } = buildMpushSchema();
-    const props = buildProps({ schema, formData: _.cloneDeep(seedTabs) });
-    const { rerenderWith } = renderMpush(props);
-
-    typeTemplateName('My Push');
-    fillAndroid();
-    await clickIosTab();
-    await waitFor(() => {
-      fireEvent.change(document.getElementById('message-title2'), { target: { value: 'I title' } });
-      fireEvent.change(document.getElementById('message-editor2'), { target: { value: 'I message' } });
-      const [formData] = lastCall(props.onChange);
-      expect(formData[1]['message-editor2']).toBe('I message');
-    });
-
-    // GOLDEN QUIRK: Classic re-mirrors ANY non-empty formData prop that differs
-    // from its state (componentWillReceiveProps) — a stale parent copy clobbers
-    // typed values. Real containers survive only because they refresh their copy
-    // from every onChange; the test must do the same when re-rendering.
-    const latestEmitted = lastCall(props.onChange)[0];
-    rerenderWith({ ...props, formData: latestEmitted, startValidation: true });
-
-    const [isValid] = lastCall(props.onFormValidityChange);
-    expect(isValid).toBe(true);
-    expect(props.onSubmit).toHaveBeenCalledTimes(1);
-    const [submitted] = lastCall(props.onSubmit);
-    expect(submitted['template-name']).toBe('My Push');
-    expect(submitted[0]['message-editor']).toBe('A message');
-    expect(submitted[1]['message-editor2']).toBe('I message');
-    // GOLDEN: base is created as a reference alias of tab 0 at init, but Classic's
-    // update path lets the two diverge into separate objects with MIRRORED content.
-    // The container-observable contract is value equality, not reference identity.
-    expect(submitted.base).toStrictEqual(submitted[0]);
-  });
-
-  it('QUIRK: iOS empty + saving from the Android tab => setModalContent("android"), and NOTHING else runs (no onSubmit, no stopValidation, no validity emission)', () => {
-    const { schema } = buildMpushSchema();
-    const props = buildProps({ schema });
-    const { rerenderWith } = renderMpush(props);
-
-    typeTemplateName('My Push');
-    fillAndroid();
-    props.onFormValidityChange.mockClear();
-
-    rerenderWith({ ...props, startValidation: true });
-
-    expect(props.setModalContent).toHaveBeenCalledWith('android');
-    expect(props.onSubmit).not.toHaveBeenCalled();
-    // the early return skips BOTH the save callback and stopValidation
-    expect(props.stopValidation).not.toHaveBeenCalled();
-    expect(props.onFormValidityChange).not.toHaveBeenCalled();
-  });
-
-  it('confirming the single-platform modal (Yes, id=android) submits the full formData', () => {
-    const { schema } = buildMpushSchema();
-    const props = buildProps({ schema });
-    const { rerenderWith } = renderMpush(props);
-
-    typeTemplateName('My Push');
-    fillAndroid();
-    rerenderWith({ ...props, startValidation: true });
-    expect(props.setModalContent).toHaveBeenCalledWith('android');
-
-    // The container reacts to setModalContent by passing the modal back down.
-    rerenderWith({
-      ...props,
-      startValidation: true,
-      showModal: true,
-      modal: {
-        title: 'Alert!', body: 'IOS template is not configured', type: 'confirm', id: 'android',
-      },
-    });
-    fireEvent.click(screen.getByText('Yes'));
-
-    expect(props.onSubmit).toHaveBeenCalledTimes(1);
-    const [submitted] = lastCall(props.onSubmit);
-    expect(submitted[0]['message-editor']).toBe('A message');
-  });
-
-  it('brace mismatch in the Android editor blocks save with the STRING error value + bracket-error (both platforms present => no modal detour)', () => {
-    // Hydrate BOTH tabs via the formData prop (edit flow) so the single-platform
-    // modal path cannot swallow the validity emission.
-    const { schema } = buildMpushSchema();
-    const tab0 = {
-      'message-title': 'A title', 'message-editor': 'abc {{full_name', base: true, tabKey: 'ka',
-    };
-    const tab1 = { 'message-title2': 'I title', 'message-editor2': 'I message', tabKey: 'ki' };
-    const props = buildProps({
-      schema,
-      isEdit: true,
-      formData: {
-        'template-name': 'My Push', 0: tab0, 1: tab1, base: tab0,
-      },
-    });
-    const { rerenderWith } = renderMpush(props);
-
-    rerenderWith({ ...props, startValidation: true });
-
-    const [isValid, errorData] = lastCall(props.onFormValidityChange);
-    expect(isValid).toBe(false);
-    expect(errorData[0]['message-editor']).toBe('tagBracketCountMismatchError');
-    expect(errorData[0]['bracket-error']).toBe('tagBracketCountMismatchError');
-    expect(props.onSubmit).not.toHaveBeenCalled();
-    expect(props.stopValidation).toHaveBeenCalled();
-  });
-
-  it('embedded mode drops the template-name requirement', () => {
-    const { schema } = buildMpushSchema();
-    const props = buildProps({
-      schema,
-      location: { pathname: '/mobilepush/create/text', query: { type: 'embedded', module: 'campaigns' } },
-    });
-    renderMpush(props);
-
-    const [, errorData] = lastCall(props.onFormValidityChange);
-    expect(errorData['template-name']).toBe(false);
-  });
-});
-
-describe('MPUSH characterization — container handler contract', () => {
-  it('clicking Save invokes the injected saveFormData handler with `this` rebound to props.parent and val.id as second arg', () => {
-    const { schema, registry } = buildMpushSchema();
-    const parentSentinel = { iAmTheContainer: true };
-    renderMpush(buildProps({ schema, parent: parentSentinel }));
-
-    fireEvent.click(screen.getByText('Save'));
-
-    const record = registry['save-button:saveFormData'];
-    expect(record.calls).toHaveLength(1);
-    expect(record.calls[0][1]).toBe('save-button');
-    expect(record.contexts[0]).toBe(parentSentinel);
-  });
-
-  it('clicking the copy-content div invokes its injected onClick with `this` rebound to props.parent', () => {
-    const { schema, registry } = buildMpushSchema();
-    const parentSentinel = { iAmTheContainer: true };
-    renderMpush(buildProps({ schema, parent: parentSentinel }));
-
-    fireEvent.click(screen.getByText('Copy Title and Content From IOS'));
-
-    const record = registry['copy-iphone-content:onClick'];
-    expect(record.calls).toHaveLength(1);
-    expect(record.calls[0][1]).toBe('copy-iphone-content');
-    expect(record.contexts[0]).toBe(parentSentinel);
-  });
-});
-
-describe('MPUSH characterization — edit-mode hydration', () => {
-  it('renders saved template data passed via the formData prop without overwriting it', async () => {
-    const { schema } = buildMpushSchema();
-    const tab0 = {
-      'message-title': 'Saved A title', 'message-editor': 'Saved A body', base: true, tabKey: 'ka',
-    };
-    const tab1 = { 'message-title2': 'Saved I title', 'message-editor2': 'Saved I body', tabKey: 'ki' };
-    const props = buildProps({
-      schema,
-      isEdit: true,
-      formData: {
-        'template-name': 'Saved name', 0: tab0, 1: tab1, base: tab0,
-      },
-    });
-    renderMpush(props);
-
-    expect(screen.getByPlaceholderText('Enter template name*')).toHaveValue('Saved name');
-    expect(titleInput()).toHaveValue('Saved A title');
-    expect(editorInput()).toHaveValue('Saved A body');
-    // iOS pane values render after switching tabs; GOLDEN: the field values bind
-    // one tick AFTER the pane mounts, because Classic derives currentTab from its
-    // setTimeout(0) DOM scan and only then re-renders values from formData[1].
-    await clickIosTab();
-    await waitFor(() => {
-      expect(document.getElementById('message-title2')).toHaveValue('Saved I title');
-      expect(document.getElementById('message-editor2')).toHaveValue('Saved I body');
-    });
-  });
-});
-
-describe('MPUSH characterization — imageSchema', () => {
-  it('seeds the image field and REQUIRES it: filled platforms still fail with errorData[0].image', () => {
-    const { schema } = buildMpushSchema('imageSchema');
-    const props = buildProps({ schema, location: { pathname: '/mobilepush/create/image', query: { type: false, module: 'default' } } });
-    const { rerenderWith } = renderMpush(props);
-
-    typeTemplateName('My Push', 'Enter template name'); // imageSchema has no asterisk
-    fillAndroid();
-
-    rerenderWith({ ...props, startValidation: true });
-
-    const [isValid, errorData] = lastCall(props.onFormValidityChange);
-    expect(isValid).toBe(false);
-    expect(errorData[0].image).toBe(true);
-    expect(props.onSubmit).not.toHaveBeenCalled();
-  });
-});