@capillarytech/creatives-library 9.0.59 → 9.0.60

package/v2Components/FormBuilder/Functional/tests/mpush.crossFlowParity.test.js

@@ -1,430 +0,0 @@
-/**
- * MOBILEPUSH cross-flow parity — the legacy (Classic) and new (Functional)
- * FormBuilders are rendered through the SAME edit-hydrated save flows and we
- * assert Classic ≡ Functional ≡ the documented `expected`.
- *
- * The flows hydrate both platform tabs via the formData prop (like the Edit
- * container / a fresh host push), then raise startValidation — the container's
- * "Done/Save" contract. Compared per case: validity, the error shapes the
- * containers pattern on (string vs boolean values included), the single-platform
- * modal prompt, the submitted payload shape, and the footer's tab argument.
- */
-
-import React from 'react';
-import '@testing-library/jest-dom';
-import _ from 'lodash';
-import { Router } from 'react-router-dom';
-import { render, act } from '../../../../utils/test-utils';
-import history from '../../../../utils/history';
-import { response as mpushSchemaResponse } from '../../../../v2Containers/MobilePush/initialSchema';
-
-import ClassicFormBuilder from '../../Classic';
-import FunctionalFormBuilder from '../index';
-
-// TagList (rendered for the tag-list fields) is auth-guarded; neutralize the route guard.
-jest.mock('redux-auth-wrapper/history4/redirect', () => ({
-  connectedRouterRedirect: jest.fn(() => (Component) => Component),
-}));
-
-// Stub the impure unsubscribe-url call (plain fn so resetMocks doesn't wipe it).
-jest.mock('../../../../services/api', () => ({
-  ...jest.requireActual('../../../../services/api'),
-  getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
-}));
-
-// Make the MPUSH liquid pipeline resolve synchronously and identically for both
-// flows (Classic's validateFormBuilderMPush and the adapter's runSubmitPipeline
-// both import validateMobilePushContent from commonUtils). It reproduces the
-// util's observable contract: an initial clearing onError, then onSuccess with a
-// single tab's JSON — which BOTH implementations must ignore in favor of the
-// full formData.
-jest.mock('../../../../utils/commonUtils', () => ({
-  ...jest.requireActual('../../../../utils/commonUtils'),
-  validateMobilePushContent: (formData, options = {}) => {
-    if (typeof options.onError === 'function') options.onError({ standardErrors: [], liquidErrors: [] });
-    if (typeof options.onSuccess === 'function') options.onSuccess(JSON.stringify(formData[0] || {}), 'android');
-    return true;
-  },
-}));
-
-const definitionFor = (variant) => _.cloneDeep(
-  mpushSchemaResponse.metaEntities[0].definition[variant],
-);
-
-// Production-faithful dynamic-CTA splice: when a template carries CTA fields, the
-// containers have ALSO spliced the matching schema rows (getSchemaForFormData /
-// commonMethods). Hydrating the formData without the schema rows is a state no
-// container produces — Classic's mount re-init drops schema-unknown tab fields.
-const spliceCtaRows = (schema) => {
-  const inputFields = schema.containers[0].panes[0]
-    .sections[0].childSections[0].childSections[0].inputFields;
-  inputFields.push(
-    {
-      identifier: 'cta-deeplink-select',
-      cols: [{
-        id: 'cta-deeplink-select', type: 'select', options: [], width: 12, supportedEvents: ['onSelect'],
-      }],
-    },
-    {
-      cols: [{
-        id: 'custom-value-userId-cta-deeplink-select', type: 'input', width: 12, supportedEvents: [],
-      }],
-    },
-  );
-  return schema;
-};
-
-const buildFormData = ({
-  android = {}, ios = {}, name = 'My Push', omitIos = false,
-}) => {
-  const tab0 = { ...android, base: true, tabKey: 'tab-android' };
-  const tab1 = omitIos ? { tabKey: 'tab-ios' } : { ...ios, tabKey: 'tab-ios' };
-  return {
-    'template-name': name, 0: tab0, 1: tab1, base: tab0,
-  };
-};
-
-const buildProps = (flowCase, mode) => {
-  const onSubmit = jest.fn();
-  const onFormValidityChange = jest.fn();
-  const setModalContent = jest.fn();
-  const showLiquidErrorInFooter = jest.fn();
-  const schema = definitionFor(flowCase.variant || 'textSchema');
-  return {
-    schema: flowCase.mutateSchema ? flowCase.mutateSchema(schema) : schema,
-    location: {
-      pathname: '/mobilepush/create/text',
-      query: { type: flowCase.embedded ? 'embedded' : false, module: 'default' },
-    },
-    usingTabContainer: true,
-    isFullMode: mode === 'full',
-    isEdit: true,
-    currentTab: 1,
-    tabCount: 2,
-    tabKey: '',
-    formData: buildFormData(flowCase),
-    startValidation: false,
-    checkValidation: false,
-    tags: [],
-    injectedTags: {},
-    actions: { getLiquidTags: jest.fn() },
-    onChange: jest.fn(),
-    onSubmit,
-    onFormValidityChange,
-    stopValidation: jest.fn(),
-    showLiquidErrorInFooter,
-    setModalContent,
-    handleCancelModal: jest.fn(),
-    parent: {},
-    _onSubmit: onSubmit,
-    _onFormValidityChange: onFormValidityChange,
-    _setModalContent: setModalContent,
-    _showLiquidErrorInFooter: showLiquidErrorInFooter,
-  };
-};
-
-const runFlow = (FlowComponent, flowCase, mode) => {
-  const props = buildProps(flowCase, mode);
-  const ui = (p) => (
-    <Router history={history}>
-      <FlowComponent {...p} />
-    </Router>
-  );
-  const utils = render(ui(props));
-  act(() => {
-    utils.rerender(ui({ ...props, startValidation: true }));
-  });
-  utils.unmount();
-
-  const vCalls = props._onFormValidityChange.mock.calls;
-  const lastValidity = vCalls[vCalls.length - 1] || [];
-  const errorData = lastValidity[1] || {};
-  const submitted = props._onSubmit.mock.calls[0] ? props._onSubmit.mock.calls[0][0] : null;
-  const modalCalls = props._setModalContent.mock.calls;
-  const footerCalls = props._showLiquidErrorInFooter.mock.calls;
-  const aErr = errorData[0] || {};
-  const iErr = errorData[1] || {};
-  return {
-    isValid: Boolean(lastValidity[0]),
-    nameError: Boolean(errorData['template-name']),
-    aEditorError: aErr['message-editor'] === undefined ? false : aErr['message-editor'],
-    aTitleError: aErr['message-title'] === undefined ? false : aErr['message-title'],
-    aBracketError: aErr['bracket-error'] || false,
-    iEditorError: iErr['message-editor2'] === undefined ? false : iErr['message-editor2'],
-    imageError: Boolean(aErr.image),
-    ctaSelectError: Boolean(aErr['cta-deeplink-select']),
-    customValueError: Boolean(aErr['custom-value-userId-cta-deeplink-select']),
-    modalPrompt: modalCalls.length ? modalCalls[modalCalls.length - 1][0] : null,
-    submits: Boolean(submitted),
-    submittedName: submitted ? submitted['template-name'] : null,
-    submittedAEditor: submitted ? submitted[0]['message-editor'] : null,
-    submittedIEditor: submitted && submitted[1] ? submitted[1]['message-editor2'] : null,
-    footerTabArg: footerCalls.length ? footerCalls[footerCalls.length - 1][1] : null,
-  };
-};
-
-const PARITY_CASES = [
-  {
-    title: 'both platforms valid',
-    modes: ['full', 'library'],
-    android: { 'message-title': 'A title', 'message-editor': 'A body' },
-    ios: { 'message-title2': 'I title', 'message-editor2': 'I body' },
-    expected: {
-      submits: true, submittedName: 'My Push', submittedAEditor: 'A body', submittedIEditor: 'I body', modalPrompt: null,
-    },
-    // GOLDEN QUIRK: in library mode the liquid pipeline's initial CLEARING
-    // onError fires onFormValidityChange(false) before onSuccess submits — so the
-    // LAST validity emission is false even though the save goes through. Full
-    // mode has no pipeline and stays true.
-    expectedByMode: {
-      full: { isValid: true },
-      library: { isValid: false },
-    },
-  },
-  {
-    title: 'android only, saving from the Android tab => single-platform prompt, nothing else',
-    modes: ['full', 'library'],
-    android: { 'message-title': 'A title', 'message-editor': 'A body' },
-    omitIos: true,
-    expected: { modalPrompt: 'android', submits: false },
-  },
-  {
-    title: 'brace mismatch in the Android editor (both platforms present)',
-    modes: ['full', 'library'],
-    android: { 'message-title': 'A title', 'message-editor': 'abc {{full_name' },
-    ios: { 'message-title2': 'I title', 'message-editor2': 'I body' },
-    expected: {
-      isValid: false,
-      submits: false,
-      aEditorError: 'tagBracketCountMismatchError',
-      aBracketError: 'tagBracketCountMismatchError',
-      modalPrompt: null,
-    },
-  },
-  {
-    title: 'missing Android title clears platform validity; missing template name (full) flags the root',
-    modes: ['full'],
-    name: '',
-    android: { 'message-editor': 'A body' },
-    ios: { 'message-title2': 'I title', 'message-editor2': 'I body' },
-    expected: {
-      isValid: false, nameError: true, aTitleError: true, submits: false, modalPrompt: null,
-    },
-  },
-  {
-    title: 'embedded android-only: template name not required, closed iOS tab skipped — but the single-platform prompt STILL fires',
-    modes: ['full'],
-    embedded: true,
-    name: '',
-    android: { 'message-title': 'A title', 'message-editor': 'A body' },
-    omitIos: true,
-    // GOLDEN QUIRK: the embedded validation skip does NOT suppress the
-    // single-platform modal (Classic.js:1171-1204 runs regardless of mode), so an
-    // embedded android-only save prompts instead of submitting directly. The last
-    // validity emission is the mount-time one (valid — the empty tab is skipped).
-    expected: {
-      isValid: true, nameError: false, submits: false, modalPrompt: 'android',
-    },
-  },
-  {
-    title: 'empty CTA deeplink select + empty custom-value key block the save',
-    modes: ['full'],
-    mutateSchema: spliceCtaRows,
-    android: {
-      'message-title': 'A title',
-      'message-editor': 'A body',
-      'cta-deeplink-select': '',
-      'custom-value-userId-cta-deeplink-select': '',
-    },
-    ios: { 'message-title2': 'I title', 'message-editor2': 'I body' },
-    expected: {
-      isValid: false, ctaSelectError: true, customValueError: true, submits: false, modalPrompt: null,
-    },
-  },
-  {
-    title: 'imageSchema: empty image on a filled template blocks the save',
-    modes: ['full'],
-    variant: 'imageSchema',
-    android: { 'message-title': 'A title', 'message-editor': 'A body', image: '' },
-    ios: { 'message-title2': 'I title', 'message-editor2': 'I body', image: '' },
-    expected: {
-      isValid: false, imageError: true, submits: false, modalPrompt: null,
-    },
-  },
-];
-
-describe('MPUSH cross-flow parity (Classic ≡ Functional ≡ expected)', () => {
-  PARITY_CASES.forEach((flowCase) => {
-    flowCase.modes.forEach((mode) => {
-      it(`${flowCase.title} [${mode} mode]`, () => {
-        const classic = runFlow(ClassicFormBuilder, flowCase, mode);
-        const functional = runFlow(FunctionalFormBuilder, flowCase, mode);
-
-        // Functional must match Classic on every compared field…
-        expect(functional).toEqual(classic);
-        // …and both must match the documented expectation.
-        const expected = { ...flowCase.expected, ...(flowCase.expectedByMode || {})[mode] };
-        Object.keys(expected).forEach((key) => {
-          expect({ key, value: classic[key] }).toEqual({ key, value: expected[key] });
-        });
-      });
-    });
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Background validity maintenance — the Create/Done gate.
-//
-// Classic's validateForm tail ALWAYS emits onFormValidityChange (Classic.js:1361)
-// and validateForm runs on every deep-unequal parent formData push
-// (Classic.js:516-537, MOBILEPUSH unconditionally) — with checkValidation still
-// false, so nothing displays. The MobilePush containers gate their save flows on
-// the validity maintained this way (Create/index.js:101 returns early on
-// !state.isFormValid in library mode), so a missing emission makes the Create
-// button do nothing. This block reproduces the reported user flow: fill Android,
-// copy the content to iOS (the container's copyAndroidContent clone-and-push),
-// then Create.
-// ---------------------------------------------------------------------------
-describe('MPUSH cross-flow parity — background validity on parent pushes (Create gate)', () => {
-  const androidOnly = {
-    name: 'My Push',
-    android: { 'message-title': 'A title', 'message-editor': 'A body' },
-    ios: {},
-  };
-  const bothFilled = {
-    name: 'My Push',
-    android: { 'message-title': 'A title', 'message-editor': 'A body' },
-    ios: { 'message-title2': 'A title', 'message-editor2': 'A body' },
-  };
-
-  const runCopyPushFlow = (FlowComponent, { save }) => {
-    const props = buildProps(androidOnly, 'full');
-    const ui = (p) => (
-      <Router history={history}>
-        <FlowComponent {...p} />
-      </Router>
-    );
-    const utils = render(ui(props));
-    const emissionsBeforePush = props._onFormValidityChange.mock.calls.length;
-    // copyAndroidContent: the container clones its formData, writes the iOS
-    // values, and setStates -> a deep-unequal formData prop push. No save yet.
-    act(() => {
-      utils.rerender(ui({ ...props, formData: buildFormData(bothFilled) }));
-    });
-    const vCalls = props._onFormValidityChange.mock.calls;
-    const result = {
-      emittedOnPush: vCalls.length > emissionsBeforePush,
-      validityAfterPush: vCalls.length ? Boolean(vCalls[vCalls.length - 1][0]) : null,
-      submits: false,
-      submitted: null,
-    };
-    if (save) {
-      act(() => {
-        utils.rerender(ui({ ...props, formData: buildFormData(bothFilled), startValidation: true }));
-      });
-      result.submits = props._onSubmit.mock.calls.length > 0;
-      result.submitted = props._onSubmit.mock.calls[0] ? props._onSubmit.mock.calls[0][0] : null;
-    }
-    utils.unmount();
-    return result;
-  };
-
-  it('a deep-unequal parent push (copy-content) re-validates and emits validity(true) BEFORE any save', () => {
-    const classic = runCopyPushFlow(ClassicFormBuilder, { save: false });
-    const functional = runCopyPushFlow(FunctionalFormBuilder, { save: false });
-    expect(classic.emittedOnPush).toBe(true);
-    expect(functional.emittedOnPush).toBe(true);
-    expect(classic.validityAfterPush).toBe(true);
-    expect(functional.validityAfterPush).toBe(true);
-  });
-
-  it('the reported user flow — fill Android, copy to iOS, Create — submits in both implementations', () => {
-    const classic = runCopyPushFlow(ClassicFormBuilder, { save: true });
-    const functional = runCopyPushFlow(FunctionalFormBuilder, { save: true });
-    expect(classic.submits).toBe(true);
-    expect(functional.submits).toBe(true);
-    expect(classic.submitted[1]['message-editor2']).toBe('A body');
-    expect(functional.submitted[1]['message-editor2']).toBe('A body');
-    expect(functional.submitted['template-name']).toBe(classic.submitted['template-name']);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Edit hydration — asynchronous template arrival.
-//
-// The real Edit container mounts the FormBuilder BEFORE the template details
-// arrive (empty formData), then pushes the setEditState-shaped formData:
-// base alias, base:true on tab 0, and NO tabKeys (Edit/index.js:983-986 — the
-// tabKey lines are commented out). Classic survives because resetTabKeys
-// assigns fresh keys on the push (Classic.js:453-461); the engine's HYDRATE
-// must guarantee the same (CapTab panes are keyed by tabKey — a key-less
-// hydrate would leave no pane active and the fields would simply not render).
-// ---------------------------------------------------------------------------
-describe('MPUSH cross-flow parity — edit hydration (async template arrival)', () => {
-  const editFormData = () => {
-    const android = {
-      'message-title': 'Saved A title',
-      'message-editor': 'Saved A body',
-      base: true,
-    };
-    const ios = {
-      'message-title2': 'Saved I title',
-      'message-editor2': 'Saved I body',
-    };
-    return {
-      'template-name': 'Saved push', 0: android, 1: ios, base: android,
-    };
-  };
-
-  const runEditSequence = (FlowComponent, { save }) => {
-    const props = buildProps({ android: {}, ios: {}, name: '' }, 'full');
-    props.formData = {}; // mount BEFORE the template details arrive
-    const ui = (p) => (
-      <Router history={history}>
-        <FlowComponent {...p} />
-      </Router>
-    );
-    const utils = render(ui(props));
-    act(() => {
-      utils.rerender(ui({ ...props, formData: editFormData() }));
-    });
-    const editor = document.getElementById('message-editor');
-    const title = document.getElementById('message-title');
-    const result = {
-      titleValue: title ? title.value : '(no #message-title in DOM)',
-      editorValue: editor ? editor.value : '(no #message-editor in DOM)',
-      submitted: null,
-    };
-    if (save) {
-      act(() => {
-        utils.rerender(ui({ ...props, formData: editFormData(), startValidation: true }));
-      });
-      result.submitted = props._onSubmit.mock.calls[0] ? props._onSubmit.mock.calls[0][0] : null;
-    }
-    utils.unmount();
-    return result;
-  };
-
-  it('the pushed template populates the visible fields in both implementations', () => {
-    const classic = runEditSequence(ClassicFormBuilder, { save: false });
-    const functional = runEditSequence(FunctionalFormBuilder, { save: false });
-    expect(classic.titleValue).toBe('Saved A title');
-    expect(functional.titleValue).toBe('Saved A title');
-    expect(classic.editorValue).toBe('Saved A body');
-    expect(functional.editorValue).toBe('Saved A body');
-  });
-
-  it('edit-then-save round-trips the hydrated values in both implementations', () => {
-    const classic = runEditSequence(ClassicFormBuilder, { save: true });
-    const functional = runEditSequence(FunctionalFormBuilder, { save: true });
-    expect(classic.submitted).toBeTruthy();
-    expect(functional.submitted).toBeTruthy();
-    ['template-name'].forEach((key) => {
-      expect(functional.submitted[key]).toEqual(classic.submitted[key]);
-    });
-    expect(functional.submitted[0]['message-editor']).toBe('Saved A body');
-    expect(classic.submitted[0]['message-editor']).toBe('Saved A body');
-    expect(functional.submitted[1]['message-editor2']).toBe('Saved I body');
-    expect(classic.submitted[1]['message-editor2']).toBe('Saved I body');
-  });
-});