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

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

@@ -0,0 +1,320 @@
+/**
+ * MPUSH CTA flows parity — the REAL (unconnected) MobilePush Create container
+ * over the REAL gated FormBuilder, driving the CTA surface end-to-end through
+ * the DOM the way a user does:
+ *
+ *   fill both platforms -> "Add action link to content" (add-pri-cta)
+ *   -> deeplink option with/without params | External Link radio switch
+ *   -> press Create (isGetFormData transition, full mode)
+ *
+ * Pins manual-QA fix #5: switching the link-type radio Deeplink <-> External
+ * Link REPLACES the `cta-deeplink-select` schema row with `cta-deeplink-text`.
+ * Classic's initialiseForm PRUNES formData keys that left the schema walk
+ * (Classic.js:1889-1897); before reconcileFormState ported that prune, the
+ * orphaned seeded-'' `cta-deeplink-select` failed validateMobilePush's empty
+ * rule and the container toasted "Validation error / Validation failed for
+ * android" on a form Classic saves.
+ *
+ * Outcome contract per flow: NO validation stop (onValidationFail), and the
+ * save proceeds — createTemplate fires, or the single-platform confirm modal
+ * opens (a legitimate Classic outcome when the iOS tab stayed empty).
+ */
+import React from 'react';
+import '@testing-library/jest-dom';
+import _ from 'lodash';
+import { notification } from 'antd';
+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: '' } }),
+}));
+
+// The gate is purely org-flag controlled — drive the flow via the flag reader.
+let mockMpushFlag = false;
+jest.mock('../../../../utils/common', () => ({
+  ...jest.requireActual('../../../../utils/common'),
+  hasNewFormBuilderEnabledForMpush: () => mockMpushFlag,
+}));
+
+const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
+
+const intl = {
+  formatMessage: (descriptor) => (descriptor && (descriptor.defaultMessage || descriptor.id)) || '',
+  locale: 'en',
+};
+
+const DEEPLINKS = JSON.stringify([
+  { name: 'Home Page', link: 'app://home', keys: ['user_id'] },
+  { name: 'Offers Page', link: 'app://offers', keys: [] },
+]);
+
+const selectedAccount = {
+  id: 'acc-1',
+  name: 'Acc',
+  sourceTypeName: 'SOME_SDK',
+  sourceAccountIdentifier: 'lic-1',
+  configs: { android: '1', ios: '1', deeplink: DEEPLINKS },
+};
+
+const buildProps = (overrides = {}) => ({
+  intl,
+  params: { mode: 'text' },
+  route: { name: 'create' },
+  location: { pathname: '/mobilepush/create/text', query: { module: 'default' } },
+  router: { push: jest.fn() },
+  isFullMode: true,
+  isGetFormData: false,
+  isLoadingMetaEntities: false,
+  metaEntities: {},
+  Create: { createTemplateInProgress: false },
+  Edit: {},
+  Templates: { selectedWeChatAccount: selectedAccount },
+  // Any missing action becomes a jest.fn on demand (the container calls several).
+  actions: new Proxy({}, { get: (target, name) => {
+    if (!target[name]) target[name] = jest.fn(); // eslint-disable-line no-param-reassign
+    return target[name];
+  } }),
+  globalActions: {
+    fetchSchemaForEntity: jest.fn(),
+    addMessageToQueue: jest.fn(),
+    setInjectedTags: jest.fn(),
+  },
+  showTemplateName: jest.fn(),
+  getFormLibraryData: jest.fn(),
+  onValidationFail: jest.fn(),
+  showLiquidErrorInFooter: jest.fn(),
+  onPersonalizationTokensChange: jest.fn(),
+  injectedTags: {},
+  defaultData: { 'template-name': 'cta_test_1' },
+  ...overrides,
+});
+
+const setNativeValue = (el, value) => {
+  const proto = Object.getPrototypeOf(el);
+  const setter = Object.getOwnPropertyDescriptor(proto, 'value').set;
+  setter.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);
+};
+
+const runCreateFlow = ({
+  optionLabel = 'Offers Page', fillCustomValue = false, useCopy = false, iosCta = false,
+  externalLink = false,
+} = {}) => {
+  const props = buildProps();
+  let containerRef = null;
+  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 }));
+  });
+
+  // 1. fill mandatory fields (template-name comes via defaultData in full mode).
+  act(() => { typeInto('message-title', 'Hello title'); });
+  act(() => { typeInto('message-editor', 'Hello body'); });
+  const tabHeaders = () => Array.from(document.querySelectorAll('.ant-tabs-tab'));
+  if (useCopy) {
+    // the user's habitual step: switch to iOS, "copy content from Android"
+    act(() => { fireEvent.click(tabHeaders()[1]); });
+    const copyLink = document.getElementById('copy-android-content2')
+      || document.getElementById('copy-android-content');
+    if (!copyLink) throw new Error('no copy-android-content link found');
+    act(() => { fireEvent.click(copyLink); });
+    act(() => { fireEvent.click(tabHeaders()[0]); });
+  } else {
+    act(() => { fireEvent.click(tabHeaders()[1]); }); // switch to iOS
+    act(() => { typeInto('message-title2', 'Hello ios title'); });
+    act(() => { typeInto('message-editor2', 'Hello ios body'); });
+    act(() => { fireEvent.click(tabHeaders()[0]); }); // back to Android
+  }
+
+  if (iosCta) {
+    // run the whole CTA flow on the iOS pane instead (suffixed ids)
+    act(() => { fireEvent.click(tabHeaders()[1]); });
+  }
+  const ctaCheckboxId = iosCta ? 'add-pri-cta-ios' : 'add-pri-cta';
+  const selectId = iosCta ? 'cta-deeplink2-select' : 'cta-deeplink-select';
+  const customValueId = iosCta
+    ? 'custom-value-user_id-cta-deeplink2-select'
+    : 'custom-value-user_id-cta-deeplink-select';
+
+  // 2. click "Add action link to content" — the checkbox carries no DOM id in
+  // either flow, so find it by label text inside the right platform pane.
+  const pane = document.querySelectorAll('.ant-tabs-tabpane')[iosCta ? 1 : 0] || document;
+  const label = Array.from(pane.querySelectorAll('label'))
+    .find((l) => /action link/i.test(l.textContent || ''));
+  const cb = (label && label.querySelector('input[type="checkbox"]'))
+    || pane.querySelector('input[type="checkbox"]');
+  if (!cb) throw new Error(`no ${ctaCheckboxId} checkbox found`);
+  act(() => { fireEvent.click(cb); });
+
+  // the deeplink dropdown must have been spliced in
+  let selectHost = document.getElementById(selectId);
+  const info = { selectRendered: Boolean(selectHost) };
+
+  if (externalLink) {
+    // switch the link-type radio to "External Link": the dropdown row must be
+    // REPLACED by a text input (container onLinkTypeChange splice)
+    const radios = Array.from(pane.querySelectorAll('input[type="radio"]'));
+    const external = radios.find((rd) => rd.value === 'External Link');
+    if (!external) throw new Error(`no External Link radio (found ${radios.map((rd) => rd.value)})`);
+    act(() => { fireEvent.click(external); });
+    selectHost = document.getElementById(selectId);
+    info.selectStillRendered = Boolean(selectHost);
+    const textId = iosCta ? 'cta-deeplink2-text' : 'cta-deeplink-text';
+    info.externalInputRendered = Boolean(document.getElementById(textId));
+    if (info.externalInputRendered) {
+      act(() => { typeInto(textId, 'https://example.com/offer'); });
+    }
+  }
+
+  // 3. open the CapSelect and choose the requested option
+  if (selectHost && !externalLink) {
+    const trigger = selectHost.querySelector('.ant-select-selector')
+      || selectHost.closest('.ant-select')?.querySelector('.ant-select-selector')
+      || selectHost;
+    act(() => { fireEvent.mouseDown(trigger); });
+    const options = Array.from(document.querySelectorAll('.ant-select-item-option'));
+    const wanted = options.find((o) => o.textContent.includes(optionLabel));
+    if (wanted) act(() => { fireEvent.click(wanted); });
+    info.pickedOption = Boolean(wanted);
+  }
+
+  // For a deeplink with params, the containers splice in a custom-value input.
+  const customInput = document.getElementById(customValueId);
+  info.customInputRendered = Boolean(customInput);
+  if (customInput && fillCustomValue) {
+    act(() => { typeInto(customValueId, '42'); });
+  }
+
+  // 4. press Create: isGetFormData transition in full mode -> startValidation
+  act(() => {
+    utils.rerender(ui({ ...props, metaEntities: meta, isGetFormData: true }));
+  });
+
+  const result = {
+    ...info,
+    createCalled: props.actions.createTemplate.mock.calls.length,
+    validationFailCalled: props.onValidationFail.mock.calls.length,
+    modalShown: containerRef ? containerRef.state.showModal : null,
+    errorTab0: containerRef
+      ? Object.entries(containerRef.state.errorData?.[0] || {}).filter(([, v]) => v === true).map(([k]) => k)
+      : null,
+  };
+  utils.unmount();
+  return result;
+};
+
+// Success = the save flow proceeds: either createTemplate fired, or the
+// single-platform confirm modal opened. A validation STOP (onValidationFail)
+// is the bug class this suite pins.
+const expectSaveProceeds = (r) => {
+  expect(r.validationFailCalled).toBe(0);
+  expect(r.createCalled + (r.modalShown ? 1 : 0)).toBeGreaterThanOrEqual(1);
+};
+
+const expectDeeplinkPicked = (r) => {
+  expect(r.selectRendered).toBe(true);
+  expect(r.pickedOption).toBe(true);
+};
+
+describe.each([
+  ['Classic', 'false'],
+  ['Functional', 'true'],
+])('CTA flows parity — %s', (flow, flagValue) => {
+  beforeEach(() => {
+    mockMpushFlag = flagValue === 'true';
+  });
+  afterEach(() => {
+    mockMpushFlag = false;
+  });
+
+  it('deeplink option WITHOUT params: no extra input, save proceeds', () => {
+    const r = runCreateFlow({ optionLabel: 'Offers Page' });
+    expectDeeplinkPicked(r);
+    expect(r.customInputRendered).toBe(false);
+    expectSaveProceeds(r);
+  });
+
+  it('deeplink option WITH params: custom-value input renders, save proceeds', () => {
+    const r = runCreateFlow({ optionLabel: 'Home Page', fillCustomValue: true });
+    expectDeeplinkPicked(r);
+    expect(r.customInputRendered).toBe(true);
+    expectSaveProceeds(r);
+  });
+
+  it('copy-content flow + CTA: save proceeds', () => {
+    const r = runCreateFlow({ optionLabel: 'Offers Page', useCopy: true });
+    expectDeeplinkPicked(r);
+    expectSaveProceeds(r);
+  });
+
+  it('External Link radio: dropdown replaced by text input, orphaned select key does not fail validation', () => {
+    const r = runCreateFlow({ externalLink: true });
+    expect(r.selectRendered).toBe(true);
+    expect(r.selectStillRendered).toBe(false);
+    expect(r.externalInputRendered).toBe(true);
+    expectSaveProceeds(r);
+  });
+
+  // iOS-pane CTA runs only on the Functional flow: Classic's tab switching scans
+  // the real DOM (Classic.js:2526-2551), which a jsdom tab-header click does not
+  // drive, so its container-side splice targets the wrong pane in this harness
+  // (artifact, not a product behavior).
+  if (flow === 'Functional') {
+    it('iOS-pane CTA (suffixed ids): save proceeds', () => {
+      const r = runCreateFlow({ optionLabel: 'Offers Page', iosCta: true });
+      expectDeeplinkPicked(r);
+      expectSaveProceeds(r);
+    });
+  }
+
+  // Copy with EMPTY source fields must warn ("Cannot copy empty field values."):
+  // the container handler reads its own formData copy (Create/index.js:1456-1465),
+  // seeded by the builder's init onChange push (Classic.js:1906-1911 -> 740-748).
+  it('copy from Android with empty fields shows the cannot-copy warning', () => {
+    const warnSpy = jest.spyOn(notification, 'warning').mockImplementation(() => {});
+    try {
+      const props = buildProps();
+      const ui = (p) => (
+        <Router history={history}>
+          <Create {...p} />
+        </Router>
+      );
+      const utils = render(ui(props));
+      const meta = { layouts: [{ definition: fullDefinition() }], tags: { standard: [] } };
+      act(() => {
+        utils.rerender(ui({ ...props, metaEntities: meta }));
+      });
+      act(() => { fireEvent.click(document.querySelectorAll('.ant-tabs-tab')[1]); });
+      const copyLink = document.getElementById('copy-android-content2')
+        || document.getElementById('copy-android-content');
+      if (!copyLink) throw new Error('no copy-android-content link found');
+      act(() => { fireEvent.click(copyLink); });
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      expect(warnSpy.mock.calls[0][0].description).toBe('Cannot copy empty field values.');
+      utils.unmount();
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+});

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

@@ -0,0 +1,148 @@
+/**
+ * MPUSH edit parity — the REAL (unconnected) MobilePush Edit container driving
+ * the REAL gated FormBuilder, with prop transitions exactly like production:
+ *   mount (account selected, no metaEntities yet)
+ *   -> metaEntities arrive (fullSchema + schema set, Edit CWRP 227-249)
+ *   -> templateDetails arrive (handleEditSchemaOnPropsChange -> setEditState
+ *      -> getSchemaForFormData -> injectEvents -> formData/tabCount setStates)
+ *
+ * This pins the bug the synthetic shell-level harnesses could NOT see: the
+ * container's internal setState cascade commits the shell BEFORE a prior
+ * dispatch has rendered, so a shell-side reconcile computed from stateRef was
+ * STALE and clobbered the just-hydrated template (fields rendered but empty).
+ * Fixed by running reconciliation inside the reducer (reconcileSchema action)
+ * and emitting background validity from the settled state.
+ */
+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 { Edit } from '../../../../v2Containers/MobilePush/Edit';
+
+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: '' } }),
+}));
+
+// The gate is purely org-flag controlled — drive the flow via the flag reader.
+let mockMpushFlag = false;
+jest.mock('../../../../utils/common', () => ({
+  ...jest.requireActual('../../../../utils/common'),
+  hasNewFormBuilderEnabledForMpush: () => mockMpushFlag,
+}));
+
+const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
+
+const intl = {
+  formatMessage: (descriptor) => (descriptor && (descriptor.defaultMessage || descriptor.id)) || '',
+  locale: 'en',
+};
+
+const templateDetails = () => ({
+  name: 'test_push_12',
+  mode: 'text',
+  definition: { mode: 'text' },
+  versions: {
+    base: {
+      ANDROID: { title: 'Saved A title', message: 'Saved A body' },
+      IOS: { title: 'Saved I title', message: 'Saved I body' },
+    },
+  },
+});
+
+const selectedAccount = {
+  id: 'acc-1',
+  name: 'Acc',
+  configs: { android: '1', ios: '1', deeplink: '[]' },
+};
+
+const buildProps = (overrides = {}) => ({
+  intl,
+  params: { id: '123' },
+  location: { pathname: '/mobilepush/edit/123', query: { module: 'default' } },
+  router: { push: jest.fn() },
+  isFullMode: true,
+  isLoadingMetaEntities: false,
+  metaEntities: {},
+  templateDetails: null,
+  Edit: { weCrmAccounts: [] },
+  Create: {},
+  Templates: { selectedWeChatAccount: selectedAccount },
+  // Any missing action becomes a jest.fn on demand (the container calls several).
+  actions: new Proxy({}, { get: (target, name) => {
+    if (!target[name]) target[name] = jest.fn(); // eslint-disable-line no-param-reassign
+    return target[name];
+  } }),
+  globalActions: {
+    fetchSchemaForEntity: jest.fn(),
+    addMessageToQueue: jest.fn(),
+    setInjectedTags: jest.fn(),
+  },
+  showTemplateName: jest.fn(),
+  getFormLibraryData: jest.fn(),
+  onValidationFail: jest.fn(),
+  showLiquidErrorInFooter: jest.fn(),
+  onPersonalizationTokensChange: jest.fn(),
+  injectedTags: {},
+  ...overrides,
+});
+
+const read = () => {
+  const editor = document.getElementById('message-editor');
+  const title = document.getElementById('message-title');
+  return {
+    titleValue: title ? title.value : '(no #message-title in DOM)',
+    editorValue: editor ? editor.value : '(no #message-editor in DOM)',
+  };
+};
+
+const runEditContainer = () => {
+  const props = buildProps();
+  const ui = (p) => (
+    <Router history={history}>
+      <Edit {...p} />
+    </Router>
+  );
+  const utils = render(ui(props));
+  // metaEntities arrive (bundled schema)
+  act(() => {
+    utils.rerender(ui({ ...props, metaEntities: { layouts: [{ definition: fullDefinition() }], tags: { standard: [] } } }));
+  });
+  // template details arrive
+  act(() => {
+    utils.rerender(ui({
+      ...props,
+      metaEntities: { layouts: [{ definition: fullDefinition() }], tags: { standard: [] } },
+      templateDetails: templateDetails(),
+    }));
+  });
+  const result = read();
+  utils.unmount();
+  return result;
+};
+
+describe('SCRATCH v3: REAL Edit container over the gated FormBuilder', () => {
+  afterEach(() => {
+    mockMpushFlag = false;
+  });
+
+  it('Functional path (flag on) populates the fields', () => {
+    mockMpushFlag = true;
+    const r = runEditContainer();
+    expect(r.titleValue).toBe('Saved A title');
+    expect(r.editorValue).toBe('Saved A body');
+  });
+
+  it('Classic path (flag off) populates the fields', () => {
+    mockMpushFlag = false;
+    const r = runEditContainer();
+    expect(r.titleValue).toBe('Saved A title');
+    expect(r.editorValue).toBe('Saved A body');
+  });
+});