@capillarytech/creatives-library 9.0.56-betaa.0 → 9.0.56

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

@@ -1,282 +0,0 @@
-/**
- * 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 { 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: (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(() => {
-    window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', flagValue);
-  });
-  afterEach(() => {
-    window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_MPUSH');
-  });
-
-  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);
-    });
-  }
-});

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

@@ -1,141 +0,0 @@
-/**
- * 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: '' } }),
-}));
-
-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(() => {
-    window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_MPUSH');
-  });
-
-  it('Functional path (flag on) populates the fields', () => {
-    window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', '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', () => {
-    window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', 'false');
-    const r = runEditContainer();
-    expect(r.titleValue).toBe('Saved A title');
-    expect(r.editorValue).toBe('Saved A body');
-  });
-});