@capillarytech/creatives-library 9.0.56 → 9.0.57-alpha.1

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

@@ -0,0 +1,306 @@
+/**
+ * MPUSH engine additions — unit tests for the tab machinery built in Phase 2:
+ * SET_ACTIVE_TAB, hydrate tab-position preservation, multi-tab seeding from a
+ * tabs-container schema, and reconcileFormState (the CTA-splice / schema-swap path).
+ */
+import formReducer, {
+  createInitialState,
+  hydrate,
+  setActiveTab,
+} from '../core/store/formReducer';
+import initializeFormState, { reconcileFormState } from '../core/schema/initializeFormState';
+
+const field = (id, type = 'input', extra = {}) => ({ id, type, ...extra });
+
+const multicols = (cols) => ({ type: 'multicols', inputFields: [{ cols }] });
+
+const tabsSchema = ({ androidCols, iosCols, standaloneCols = [] } = {}) => ({
+  channel: 'MOBILEPUSH',
+  standalone: { sections: [multicols(standaloneCols)] },
+  containers: [{
+    id: 'pane',
+    type: 'tabs',
+    panes: [
+      { isSupported: true, sections: [multicols(androidCols)] },
+      { isSupported: true, sections: [multicols(iosCols)] },
+    ],
+  }],
+});
+
+const baseSchema = () => tabsSchema({
+  standaloneCols: [field('template-name', 'input', { standalone: true })],
+  androidCols: [field('message-title'), field('message-editor', 'textarea'), field('add-pri-cta', 'checkbox')],
+  iosCols: [field('message-title2'), field('message-editor2', 'textarea')],
+});
+
+describe('formReducer — SET_ACTIVE_TAB', () => {
+  const twoTabState = () => ({
+    ...createInitialState('MOBILEPUSH'),
+    tabs: [{ fields: {}, base: true, tabKey: 'a' }, { fields: {}, tabKey: 'b' }],
+  });
+
+  it('switches the active tab (0-based)', () => {
+    const next = formReducer(twoTabState(), setActiveTab(1));
+    expect(next.meta.activeTabIndex).toBe(1);
+  });
+
+  it('is an identity no-op when unchanged or out of range', () => {
+    const state = twoTabState();
+    expect(formReducer(state, setActiveTab(0))).toBe(state);
+    expect(formReducer(state, setActiveTab(2))).toBe(state);
+    expect(formReducer(state, setActiveTab(-1))).toBe(state);
+    expect(formReducer(state, setActiveTab('1'))).toBe(state);
+  });
+
+  it('HYDRATE preserves the user’s tab position when the incoming state has it defaulted', () => {
+    const onIos = formReducer(twoTabState(), setActiveTab(1));
+    const incoming = {
+      ...createInitialState('MOBILEPUSH'),
+      tabs: [{ fields: { x: '1' }, base: true, tabKey: 'a' }, { fields: {}, tabKey: 'b' }],
+    };
+    const next = formReducer(onIos, hydrate(incoming));
+    expect(next.meta.activeTabIndex).toBe(1); // still on iOS
+    expect(next.tabs[0].fields.x).toBe('1'); // but carries the new data
+  });
+
+  it('HYDRATE falls back to the incoming position when the previous tab no longer exists', () => {
+    const onIos = formReducer(twoTabState(), setActiveTab(1));
+    const singleTab = { ...createInitialState('MOBILEPUSH'), tabs: [{ fields: {}, base: true, tabKey: 'a' }] };
+    const next = formReducer(onIos, hydrate(singleTab));
+    expect(next.meta.activeTabIndex).toBe(0);
+  });
+
+  // Classic guarantees hydrated formData always has tab keys (resetTabKeys on
+  // every edit/parent push, Classic.js:453-461). Edit's setEditState builds tabs
+  // WITHOUT tabKeys (Edit/index.js:983-986); CapTab panes are keyed by them, so
+  // a key-less hydrate would render no active pane (the edit-hydration bug).
+  it('HYDRATE preserves the existing tabKey at the same position when the incoming tab has none', () => {
+    const incoming = {
+      ...createInitialState('MOBILEPUSH'),
+      tabs: [
+        { fields: { 'message-editor': 'Saved A body' }, base: true }, // no tabKey (Edit shape)
+        { fields: { 'message-editor2': 'Saved I body' } },
+      ],
+    };
+    const next = formReducer(twoTabState(), hydrate(incoming));
+    expect(next.tabs[0].tabKey).toBe('a');
+    expect(next.tabs[1].tabKey).toBe('b');
+    expect(next.tabs[0].fields['message-editor']).toBe('Saved A body');
+  });
+
+  it('HYDRATE assigns fresh, distinct tabKeys when neither side has one', () => {
+    const incoming = {
+      ...createInitialState('MOBILEPUSH'),
+      tabs: [{ fields: {}, base: true }, { fields: {} }],
+    };
+    const next = formReducer(createInitialState('MOBILEPUSH'), hydrate(incoming));
+    expect(next.tabs[0].tabKey).toBeTruthy();
+    expect(next.tabs[1].tabKey).toBeTruthy();
+    expect(next.tabs[0].tabKey).not.toBe(next.tabs[1].tabKey);
+  });
+
+  it('HYDRATE keeps incoming tabKeys untouched (identity when nothing to fill)', () => {
+    const incoming = {
+      ...createInitialState('MOBILEPUSH'),
+      tabs: [{ fields: {}, base: true, tabKey: 'k0' }, { fields: {}, tabKey: 'k1' }],
+    };
+    const next = formReducer(twoTabState(), hydrate(incoming));
+    expect(next.tabs[0].tabKey).toBe('k0');
+    expect(next.tabs[1].tabKey).toBe('k1');
+  });
+});
+
+describe('initializeFormState — tabs-container seeding', () => {
+  it('seeds one tab per pane; pane fields go to their own tab; standalone to root', () => {
+    const state = initializeFormState(baseSchema(), { generateId: (() => { let i = 0; return () => `k${i++}`; })() });
+    expect(state.tabs).toHaveLength(2);
+    expect(state.tabs[0].base).toBe(true);
+    expect(state.tabs[0].tabKey).toBe('k0');
+    expect(state.tabs[1].base).toBeUndefined();
+    expect(state.tabs[0].fields).toEqual({ 'message-title': '', 'message-editor': '', 'add-pri-cta': false });
+    expect(state.tabs[1].fields).toEqual({ 'message-title2': '', 'message-editor2': '' });
+    expect(state.root).toEqual({ 'template-name': '' });
+    expect(state.errors.tabs).toHaveLength(2);
+  });
+
+  it('keeps the single-tab (SMS) shape when the schema has no containers', () => {
+    const state = initializeFormState({
+      channel: 'SMS',
+      standalone: { sections: [multicols([field('template-name', 'input', { standalone: true }), field('sms-editor', 'textarea')])] },
+    });
+    expect(state.tabs).toHaveLength(1);
+    expect(state.tabs[0].fields).toEqual({ 'sms-editor': '' });
+    expect(state.root).toEqual({ 'template-name': '' });
+  });
+});
+
+describe('reconcileFormState — runtime schema mutation (CTA splices / schema swap)', () => {
+  const initial = () => {
+    const state = initializeFormState(baseSchema(), { generateId: (() => { let i = 0; return () => `k${i++}`; })() });
+    state.root['template-name'] = 'My Push';
+    state.tabs[0].fields['message-title'] = 'typed title';
+    state.tabs[0].fields['add-pri-cta'] = true;
+    return state;
+  };
+
+  it('seeds newly-spliced fields while preserving every typed value and tabKey', () => {
+    const grown = tabsSchema({
+      standaloneCols: [field('template-name', 'input', { standalone: true })],
+      androidCols: [
+        field('message-title'), field('message-editor', 'textarea'), field('add-pri-cta', 'checkbox'),
+        field('cta-deeplink', 'radioGroup', { value: 'Deeplink' }), field('cta-deeplink-select', 'select'),
+      ],
+      iosCols: [field('message-title2'), field('message-editor2', 'textarea')],
+    });
+    const next = reconcileFormState(initial(), grown);
+    expect(next.tabs[0].fields['message-title']).toBe('typed title'); // preserved
+    expect(next.tabs[0].fields['add-pri-cta']).toBe(true); // preserved
+    expect(next.tabs[0].fields['cta-deeplink']).toBe('Deeplink'); // seeded (schema default)
+    expect(next.tabs[0].fields['cta-deeplink-select']).toBe(''); // seeded
+    expect(next.tabs[0].tabKey).toBe('k0'); // stable (resetTabKeys=false parity)
+    expect(next.errors.tabs[0]['cta-deeplink-select']).toBe(false); // error map pre-seeded
+    expect(next.root['template-name']).toBe('My Push');
+  });
+
+  it('QUIRK: prunes root keys the schema no longer knows — but always restores template-name', () => {
+    const state = initial();
+    state.root['mobilepush-template'] = 'tpl-1'; // schema-known only in the loyalty variant
+    const withoutStandalone = tabsSchema({
+      standaloneCols: [], // host deleted the standalone section (removeStandAlone)
+      androidCols: [field('message-title'), field('message-editor', 'textarea'), field('add-pri-cta', 'checkbox')],
+      iosCols: [field('message-title2'), field('message-editor2', 'textarea')],
+    });
+    const next = reconcileFormState(state, withoutStandalone);
+    expect(next.root['template-name']).toBe('My Push'); // restored despite pruning
+    expect(next.root['mobilepush-template']).toBeUndefined(); // pruned (not in schema walk)
+  });
+
+  it('prunes tab fields the schema no longer knows (Classic.js:1889-1897), keeping name/imagePreview/image', () => {
+    // Load-bearing for the CTA radio flows: switching Deeplink <-> External Link
+    // REPLACES the cta-deeplink-select row — the orphaned seeded-'' key must go,
+    // or validateMobilePush's empty rule fails a form Classic saves
+    // ("Validation failed for android" toast on the create press).
+    const state = initial();
+    state.tabs[0].fields['custom-value-userId-cta-deeplink-select'] = '42'; // schema row was removed
+    state.tabs[0].fields['cta-deeplink-select'] = ''; // orphaned seed after radio switch
+    state.tabs[0].fields.image = 'https://cdn/img.png'; // exception list survivor
+    state.errors.tabs = [{ 'cta-deeplink-select': true }, {}];
+    const next = reconcileFormState(state, baseSchema());
+    expect(next.tabs[0].fields['custom-value-userId-cta-deeplink-select']).toBeUndefined();
+    expect(next.tabs[0].fields['cta-deeplink-select']).toBeUndefined();
+    expect(next.tabs[0].fields.image).toBe('https://cdn/img.png');
+    expect(next.tabs[0].fields['message-title']).toBe('typed title'); // schema-known values kept
+    // pruned fields lose their error flags too — a re-spliced field starts fresh
+    expect(next.errors.tabs[0]['cta-deeplink-select']).toBeUndefined();
+  });
+
+  it('preserves meta (activeTabIndex) across reconciles', () => {
+    const state = { ...initial(), meta: { channel: 'MOBILEPUSH', baseTabIndex: 0, activeTabIndex: 1 } };
+    const next = reconcileFormState(state, baseSchema());
+    expect(next.meta.activeTabIndex).toBe(1);
+  });
+
+  it('prune keep-set follows Classic formElements rules per section type', () => {
+    // parent -> col-label: kept even when onlyDisplay; template-label-/tagList- excluded.
+    // multicols: onlyDisplay cols NOT collected (their values are pruned).
+    const schema = {
+      channel: 'MOBILEPUSH',
+      containers: [{
+        id: 'pane',
+        type: 'tabs',
+        panes: [{
+          sections: [
+            {
+              type: 'parent',
+              childSections: [{
+                type: 'col-label',
+                inputFields: [
+                  { id: 'kept-label-field', type: 'div', onlyDisplay: true },
+                  { id: 'template-label-x', type: 'div' },
+                  { id: 'tagList-y', type: 'tag-list' },
+                ],
+              }],
+            },
+            multicols([field('message-title'), { id: 'display-only', type: 'div', onlyDisplay: true }]),
+          ],
+        }, { sections: [] }],
+      }],
+    };
+    const state = initial();
+    state.tabs[0].fields['kept-label-field'] = 'stays'; // col-label + onlyDisplay => kept
+    state.tabs[0].fields['display-only'] = 'goes'; // multicols + onlyDisplay => pruned
+    state.tabs[0].fields['tagList-y'] = 'goes'; // excluded id => pruned
+    const next = reconcileFormState(state, schema);
+    expect(next.tabs[0].fields['kept-label-field']).toBe('stays');
+    expect(next.tabs[0].fields['display-only']).toBeUndefined();
+    expect(next.tabs[0].fields['tagList-y']).toBeUndefined();
+    expect(next.tabs[0].fields['message-title']).toBe('typed title');
+  });
+
+  it('falls back to a fresh initializeFormState when there is no prior state', () => {
+    const next = reconcileFormState(null, baseSchema());
+    expect(next.tabs.length).toBe(2);
+    expect(next.tabs[0].fields['message-title']).toBe('');
+    expect(next.tabs[0].base).toBe(true);
+  });
+
+  it('keeps the channel and tab names when the schema omits them', () => {
+    const state = initial();
+    state.tabs[0].name = 'Android';
+    const schema = baseSchema();
+    delete schema.channel;
+    const next = reconcileFormState(state, schema);
+    expect(next.meta.channel).toBe('MOBILEPUSH'); // preserved from state
+    expect(next.tabs[0].name).toBe('Android');
+  });
+
+  it('CLASSIC PARITY PIN: pane sectionsHeaders are NOT in the prune keep-set', () => {
+    // Classic's initializeContainers walks pane.sections only — header fields are
+    // never seeded and never in formElements, so a header-key value is dropped on
+    // every re-init. Deliberate: do NOT add sectionsHeaders to collectFormElements
+    // (every real header field is an onlyDisplay label; see initialSchema).
+    const schema = baseSchema();
+    schema.containers[0].panes[0].sectionsHeaders = [
+      multicols([field('header-input')]), // hypothetical non-display header field
+    ];
+    const state = initial();
+    state.tabs[0].fields['header-input'] = 'typed';
+    const next = reconcileFormState(state, schema);
+    expect(next.tabs[0].fields['header-input']).toBeUndefined();
+  });
+
+  it('seeds a newly-spliced checkbox with false (defaultValueFor)', () => {
+    const grown = baseSchema();
+    grown.containers[0].panes[0].sections.push(multicols([field('add-sec-cta-2', 'checkbox')]));
+    const next = reconcileFormState(initial(), grown);
+    expect(next.tabs[0].fields['add-sec-cta-2']).toBe(false);
+  });
+});
+
+describe('formReducer — guards', () => {
+  it('RECONCILE_SCHEMA without a reconciler or schema is an identity no-op', () => {
+    const state = createInitialState('MOBILEPUSH');
+    expect(formReducer(state, { type: 'fb/RECONCILE_SCHEMA', schema: {} })).toBe(state);
+    expect(formReducer(state, { type: 'fb/RECONCILE_SCHEMA', reconciler: () => ({}) })).toBe(state);
+  });
+
+  it('unknown actions and SET_ACTIVE_TAB on an empty tab list are identity no-ops', () => {
+    const state = createInitialState('MOBILEPUSH');
+    expect(formReducer(state, { type: 'fb/UNKNOWN' })).toBe(state);
+    expect(formReducer(state, setActiveTab(1))).toBe(state); // no tabs -> only 0 allowed
+  });
+
+  it('HYDRATE fills only the key-less tabs in a mixed-key push', () => {
+    const prev = {
+      ...createInitialState('MOBILEPUSH'),
+      tabs: [{ fields: {}, tabKey: 'keep-a' }, { fields: {}, tabKey: 'keep-b' }],
+    };
+    const incoming = {
+      ...createInitialState('MOBILEPUSH'),
+      tabs: [{ fields: {}, tabKey: 'pushed-a' }, { fields: {} }],
+    };
+    const next = formReducer(prev, hydrate(incoming));
+    expect(next.tabs[0].tabKey).toBe('pushed-a'); // incoming key untouched
+    expect(next.tabs[1].tabKey).toBe('keep-b'); // key-less slot preserved from prev
+  });
+});

package/v2Components/FormBuilder/Functional/tests/mpush.libraryValidity.parity.test.js

@@ -0,0 +1,127 @@
+/**
+ * Library/embedded-mode validity parity — the campaigns-host Done/Preview gate.
+ *
+ * The container's isFormValid must track typing: Classic re-validates every change
+ * via the container round-trip (onChange -> container setState -> CWRP deep-unequal
+ * formData push -> validateForm -> onFormValidityChange, Classic.js:516-537), and the
+ * library-mode Done click early-returns on !state.isFormValid (Create/index.js:117).
+ * The shell mirrors this with a background validity emission on every field change
+ * under features.validateOnExternalChange (display stays gated on checkValidation).
+ *
+ * Also pins onContentValidityChange ({isContentEmpty}) — the footer's live
+ * Done/Preview-and-Test disable signal (CreativesContainer handleContentValidityChange).
+ */
+import React from 'react';
+import '@testing-library/jest-dom';
+import _ from 'lodash';
+import { Router } from 'react-router-dom';
+import { render, act, fireEvent } from '../../../../utils/test-utils';
+import history from '../../../../utils/history';
+import { response as mpushSchemaResponse } from '../../../../v2Containers/MobilePush/initialSchema';
+import { Create } from '../../../../v2Containers/MobilePush/Create';
+
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+jest.mock('../../../../services/api', () => ({
+  ...jest.requireActual('../../../../services/api'),
+  getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
+}));
+
+const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
+
+const intl = {
+  formatMessage: (d) => (d && (d.defaultMessage || d.id)) || '',
+  locale: 'en',
+};
+
+const selectedAccount = {
+  id: 'acc-1',
+  name: 'Acc',
+  sourceTypeName: 'SOME_SDK',
+  sourceAccountIdentifier: 'lic-1',
+  configs: { android: '1', ios: '1', deeplink: '[]' },
+};
+
+const buildProps = () => ({
+  intl,
+  params: { mode: 'text' },
+  route: { name: 'create' },
+  location: { pathname: '/mobilepush/create/text', query: { module: 'default', type: 'embedded' } },
+  router: { push: jest.fn() },
+  isFullMode: false,
+  isGetFormData: false,
+  isLoadingMetaEntities: false,
+  metaEntities: {},
+  Create: { createTemplateInProgress: false },
+  Edit: {},
+  Templates: { selectedWeChatAccount: selectedAccount },
+  actions: new Proxy({}, { get: (t, n) => { if (!t[n]) t[n] = jest.fn(); return t[n]; } }), // eslint-disable-line no-param-reassign
+  globalActions: {
+    fetchSchemaForEntity: jest.fn(),
+    addMessageToQueue: jest.fn(),
+    setInjectedTags: jest.fn(),
+  },
+  getFormLibraryData: jest.fn(),
+  onValidationFail: jest.fn(),
+  showLiquidErrorInFooter: jest.fn(),
+  onPersonalizationTokensChange: jest.fn(),
+  onContentValidityChange: jest.fn(),
+  getLiquidTags: jest.fn(),
+  injectedTags: {},
+});
+
+const setNativeValue = (el, value) => {
+  const proto = Object.getPrototypeOf(el);
+  Object.getOwnPropertyDescriptor(proto, 'value').set.call(el, value);
+};
+const typeInto = (id, value) => {
+  const el = document.getElementById(id);
+  if (!el) throw new Error(`no #${id} in DOM`);
+  setNativeValue(el, value);
+  fireEvent.change(el, { target: { value } });
+  fireEvent.blur(el);
+};
+
+describe.each([
+  ['Classic', 'false'],
+  ['Functional', 'true'],
+])('library-mode validity parity — %s', (flow, flagValue) => {
+  beforeEach(() => {
+    window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', flagValue);
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+    window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_MPUSH');
+  });
+
+  it('isFormValid flips true after typing valid content (Done gate) and content-emptiness reports live', () => {
+    let containerRef = null;
+    const props = buildProps();
+    const ui = (p) => (
+      <Router history={history}>
+        <Create ref={(r) => { if (r) containerRef = r; }} {...p} />
+      </Router>
+    );
+    const utils = render(ui(props));
+    const meta = { layouts: [{ definition: fullDefinition() }], tags: { standard: [] } };
+    act(() => { utils.rerender(ui({ ...props, metaEntities: meta })); });
+    act(() => { jest.runOnlyPendingTimers(); });
+
+    // mount: empty form — invalid, content empty
+    expect(containerRef.state.isFormValid).toBe(false);
+    expect(props.onContentValidityChange).toHaveBeenCalledWith({ isContentEmpty: true });
+
+    act(() => { typeInto('message-title', 'Hello title'); });
+    act(() => { typeInto('message-editor', 'Hello body'); });
+    act(() => { jest.advanceTimersByTime(1000); }); // flush debounced emissions
+
+    // the Done gate must see the typed content: valid + non-empty
+    expect(containerRef.state.isFormValid).toBe(true);
+    const contentCalls = props.onContentValidityChange.mock.calls.map((c) => c[0]);
+    expect(contentCalls[contentCalls.length - 1]).toEqual({ isContentEmpty: false });
+
+    utils.unmount();
+  });
+});

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

@@ -0,0 +1,164 @@
+/**
+ * Shell event-bridge branches under MPUSH: discardValues local re-init,
+ * onTagSelect signature, tab-switch bridging, tags-change background validity,
+ * and the container-owned confirmation modal (Cancel path).
+ */
+import React from 'react';
+import '@testing-library/jest-dom';
+import _ from 'lodash';
+import { Router } from 'react-router-dom';
+import { render, act, fireEvent } from '../../../../utils/test-utils';
+import history from '../../../../utils/history';
+import { response as mpushSchemaResponse } from '../../../../v2Containers/MobilePush/initialSchema';
+import FunctionalFormBuilder from '../index';
+
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+jest.mock('../../../../services/api', () => ({
+  ...jest.requireActual('../../../../services/api'),
+  getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
+}));
+
+const buildFormData = () => ({
+  'template-name': 'My Push',
+  0: {
+    'message-title': 'T A', 'message-editor': 'B A', base: true, tabKey: 'tab-android',
+  },
+  1: { 'message-title2': 'T I', 'message-editor2': 'B I', tabKey: 'tab-ios' },
+});
+
+// textSchema with injectable event divs in the android pane + container events.
+const buildSchema = ({ onDiscard, onTagSelect, onTabChange } = {}) => {
+  const schema = _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition.textSchema);
+  const container = schema.containers[0];
+  container.injectedEvents = { onTabChange: onTabChange || jest.fn() };
+  const inputFields = container.panes[0]
+    .sections[0].childSections[0].childSections[0].inputFields;
+  inputFields.push(
+    {
+      cols: [{
+        id: 'discard-div', type: 'div', value: 'Discard', submitAction: 'discardValues', injectedEvents: { discardValues: onDiscard || jest.fn() },
+      }],
+    },
+    {
+      cols: [{
+        id: 'tagsel-div', type: 'div', value: 'Tags', submitAction: 'onTagSelect', injectedEvents: { onTagSelect: onTagSelect || jest.fn() },
+      }],
+    },
+  );
+  return schema;
+};
+
+const buildProps = (schema, overrides = {}) => ({
+  channel: 'MOBILEPUSH',
+  schema,
+  location: { pathname: '/mobilepush/create/text', query: { type: false, module: 'default' } },
+  usingTabContainer: true,
+  isFullMode: true,
+  currentTab: 1,
+  tabCount: 2,
+  tabKey: '',
+  formData: buildFormData(),
+  startValidation: false,
+  checkValidation: false,
+  tags: [],
+  injectedTags: {},
+  actions: { getLiquidTags: jest.fn() },
+  onChange: jest.fn(),
+  onSubmit: jest.fn(),
+  onFormValidityChange: jest.fn(),
+  stopValidation: jest.fn(),
+  showLiquidErrorInFooter: jest.fn(),
+  setModalContent: jest.fn(),
+  handleCancelModal: jest.fn(),
+  parent: {},
+  ...overrides,
+});
+
+const mount = (props) => {
+  const ui = (p) => (
+    <Router history={history}>
+      <FunctionalFormBuilder {...p} />
+    </Router>
+  );
+  const utils = render(ui(props));
+  return { ...utils, ui };
+};
+
+describe('MPUSH shell event bridge', () => {
+  it('discardValues: notifies the container with the tail signature and re-emits validity from the re-initialized state', () => {
+    const onDiscard = jest.fn();
+    const props = buildProps(buildSchema({ onDiscard }));
+    mount(props);
+    const emissionsBefore = props.onFormValidityChange.mock.calls.length;
+
+    act(() => { fireEvent.click(document.getElementById('discard-div')); });
+
+    expect(onDiscard).toHaveBeenCalledWith(expect.anything(), 'discard-div');
+    // the re-init validity emission: an empty template is invalid
+    const calls = props.onFormValidityChange.mock.calls;
+    expect(calls.length).toBeGreaterThan(emissionsBefore);
+    expect(calls[calls.length - 1][0]).toBe(false);
+  });
+
+  it('onTagSelect bridges with (data, 1-based currentTab, field)', () => {
+    const onTagSelect = jest.fn();
+    const props = buildProps(buildSchema({ onTagSelect }));
+    mount(props);
+    act(() => { fireEvent.click(document.getElementById('tagsel-div')); });
+    expect(onTagSelect).toHaveBeenCalledWith(
+      expect.anything(), 1, expect.objectContaining({ id: 'tagsel-div' }),
+    );
+  });
+
+  it('a tab-header click dispatches the switch and bridges onTabChange with the 1-based index', () => {
+    const onTabChange = jest.fn();
+    const props = buildProps(buildSchema({ onTabChange }));
+    mount(props);
+    const headers = document.querySelectorAll('.ant-tabs-tab');
+    act(() => { fireEvent.click(headers[1]); });
+    expect(onTabChange).toHaveBeenCalledWith(2);
+  });
+
+  it('a genuine tags-catalog change re-validates and emits (deep-compared, not identity)', () => {
+    const props = buildProps(buildSchema());
+    const { rerender, ui } = mount(props);
+    const before = props.onFormValidityChange.mock.calls.length;
+    // same content, new array identity -> NO extra emission
+    act(() => { rerender(ui({ ...props, tags: [] })); });
+    const afterEcho = props.onFormValidityChange.mock.calls.length;
+    // changed content -> one background emission (TagList dialect: {definition})
+    const tag = { definition: { value: 'first_name', label: { en: 'First name' } } };
+    act(() => { rerender(ui({ ...props, tags: [tag] })); });
+    expect(props.onFormValidityChange.mock.calls.length).toBeGreaterThan(afterEcho);
+    expect(afterEcho).toBe(before);
+  });
+
+  it('the confirmation modal Cancel routes to the container handleCancelModal', () => {
+    const props = buildProps(buildSchema(), {
+      showModal: true,
+      modal: { id: 'android', title: 'Alert', body: 'iOS not configured', type: 'confirm' },
+    });
+    mount(props);
+    // the MODAL's footer cancel — not the schema's own cancel-button field
+    const footer = document.querySelector('.ant-modal-footer');
+    expect(footer).toBeTruthy();
+    const [cancel] = footer.querySelectorAll('button');
+    expect(cancel.textContent).toBe('Cancel'); // Classic's footer labels (messages.cancel/yes)
+    act(() => { fireEvent.click(cancel); });
+    expect(props.handleCancelModal).toHaveBeenCalled();
+  });
+
+  // Classic seeds the container's formData copy on init (initialiseForm ->
+  // resetTabKeys -> onChange, Classic.js:1906-1911, 740-748); the copy-content
+  // handlers read that copy before any user input.
+  it('emits the seeded legacy formData (onChange) on init', () => {
+    const props = buildProps(buildSchema(), { formData: {} });
+    mount(props);
+    expect(props.onChange).toHaveBeenCalled();
+    const [legacy] = props.onChange.mock.calls[0];
+    expect(legacy[0]).toEqual(expect.objectContaining({ 'message-title': '' }));
+    expect(legacy[1]).toEqual(expect.objectContaining({ 'message-title2': '' }));
+  });
+});