@capillarytech/creatives-library 9.0.61-alpha.3 → 9.0.62

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

@@ -0,0 +1,430 @@
+/**
+ * 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');
+  });
+});