@capillarytech/creatives-library 9.0.13 → 9.0.14-beta.0

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

@@ -0,0 +1,155 @@
+/**
+ * SMS cross-flow parity — the legacy (Classic) and new (Functional) FormBuilders
+ * must produce the SAME response for the same SMS content, in BOTH full mode and
+ * library mode. Each fixture (./fixtures/smsParityCases) is rendered through both
+ * flows and we assert Classic ≡ Functional ≡ the documented `expected`.
+ *
+ * Both flows are driven identically via the `startValidation` rising edge (the
+ * exact mechanism the container uses on Save). The legacy liquid API is mocked to
+ * resolve successfully so library-mode submits complete synchronously — this
+ * isolates FORM parity (validity + payload) from the external liquid service,
+ * which has its own coverage in sms.liquid.test.js.
+ */
+
+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 smsSchemaResponse } from '../../../../v2Containers/Sms/initialSchema';
+import { getChannelData } from '../../../../utils/commonUtils';
+import { SMS_PARITY_CASES } from './fixtures/smsParityCases';
+
+import ClassicFormBuilder from '../../Classic';
+import FunctionalFormBuilder from '../index';
+
+// TagList (rendered for the tag-list field) is auth-guarded; neutralize the route guard.
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+
+// updateCharCount fires Api.getUnsubscribeUrl on first use; stub it (plain fn so
+// resetMocks doesn't wipe the implementation).
+jest.mock('../../../../services/api', () => ({
+  ...jest.requireActual('../../../../services/api'),
+  getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
+}));
+
+// Make the (async) liquid validation resolve to success synchronously so a valid
+// library-mode save submits deterministically in BOTH flows. getChannelData stays real.
+jest.mock('../../../../utils/commonUtils', () => ({
+  ...jest.requireActual('../../../../utils/commonUtils'),
+  validateLiquidTemplateContent: (content, options) => {
+    if (options && typeof options.onSuccess === 'function') options.onSuccess(content);
+    return Promise.resolve(true);
+  },
+}));
+
+const baseDefinition = () => _.cloneDeep(smsSchemaResponse.metaEntities[0].definition);
+
+const buildFormData = ({ content, name, allowUnicode }) => {
+  const tab = { 'sms-editor': content, 'unicode-validity': allowUnicode, base: true, tabKey: 'k0' };
+  return { 'template-name': name, 0: tab, base: tab };
+};
+
+const buildProps = (flowCase, mode) => {
+  const onSubmit = jest.fn();
+  const onFormValidityChange = jest.fn();
+  return {
+    schema: baseDefinition(),
+    channel: 'SMS',
+    location: {
+      pathname: '/sms',
+      query: {
+        type: flowCase.embedded ? 'embedded' : false,
+        module: mode === 'library' ? 'library' : 'default',
+      },
+    },
+    usingTabContainer: true,
+    isFullMode: mode === 'full',
+    isEdit: true,
+    currentTab: 1,
+    tabCount: 1,
+    tabKey: '',
+    formData: buildFormData(flowCase),
+    startValidation: false,
+    checkValidation: false,
+    tags: [],
+    injectedTags: {},
+    onChange: jest.fn(),
+    onSubmit,
+    onFormValidityChange,
+    stopValidation: jest.fn(),
+    showLiquidErrorInFooter: jest.fn(),
+    setModalContent: jest.fn(),
+    handleCancelModal: jest.fn(),
+    parent: {},
+    _onSubmit: onSubmit,
+    _onFormValidityChange: onFormValidityChange,
+  };
+};
+
+// Render a flow, fire the Save (startValidation rising edge), and read back the
+// validity + submitted formData → normalized result for comparison.
+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 isValid = lastValidity[0];
+  const errorData = lastValidity[1] || {};
+  const submitted = props._onSubmit.mock.calls[0] ? props._onSubmit.mock.calls[0][0] : null;
+  const tabErr = errorData[0] || {};
+  return {
+    isValid: Boolean(isValid),
+    editorError: tabErr['sms-editor'] === undefined ? false : tabErr['sms-editor'],
+    unicodeError: Boolean(tabErr['unicode-validity']),
+    nameError: Boolean(errorData['template-name']),
+    submits: Boolean(submitted),
+    payload: submitted ? getChannelData('SMS', submitted, 'en') : null,
+  };
+};
+
+const normalize = (r) => ({
+  isValid: r.isValid,
+  editorError: r.editorError || false,
+  unicodeError: r.unicodeError,
+  nameError: r.nameError,
+  submits: r.submits,
+  payload: r.payload,
+});
+
+describe('SMS cross-flow parity (Classic ≡ Functional ≡ expected)', () => {
+  SMS_PARITY_CASES.forEach((flowCase) => {
+    flowCase.modes.forEach((mode) => {
+      it(`[${mode}] ${flowCase.id}: ${flowCase.description}`, () => {
+        const classic = normalize(runFlow(ClassicFormBuilder, flowCase, mode));
+        const functional = normalize(runFlow(FunctionalFormBuilder, flowCase, mode));
+
+        // 1) The two flows must agree with each other.
+        expect(functional).toEqual(classic);
+
+        // 2) ...and both must match the documented contract.
+        expect(functional).toEqual({
+          isValid: flowCase.expected.isValid,
+          editorError: flowCase.expected.editorError,
+          unicodeError: flowCase.expected.unicodeError,
+          nameError: flowCase.expected.nameError,
+          submits: flowCase.expected.submits,
+          payload: flowCase.expected.payload,
+        });
+      });
+    });
+  });
+});

package/v2Components/FormBuilder/Functional/tests/sms.liquid.test.js

@@ -0,0 +1,172 @@
+/**
+ * SMS liquid-pipeline parity (non-isFullMode / library + embedded mode).
+ *
+ * Mirrors Classic.onSubmitWrapper's `runLiquidValidation` branch: outside
+ * isFullMode, a liquid-supported channel runs liquid-tag extraction/validation
+ * before submitting. A clean result submits; a liquid/standard error is surfaced
+ * in the footer (showLiquidErrorInFooter) + stopValidation and blocks the submit.
+ *
+ * These exercise the bare FormBuilderShell (wrapped in injectIntl) so a mock
+ * getLiquidTags action can be injected as a prop — the connected default export
+ * would override it from Redux dispatch.
+ */
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import { waitFor } from '@testing-library/react';
+import _ from 'lodash';
+import { injectIntl } from 'react-intl';
+import { render, screen, fireEvent } from '../../../../utils/test-utils';
+import { response as smsSchemaResponse } from '../../../../v2Containers/Sms/initialSchema';
+import FormBuilderShell from '../FormBuilderShell';
+
+// TagList (the tag-list field) is an auth-guarded container; neutralize the guard
+// the same way the container/characterization tests do.
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+
+const Wrapped = injectIntl(FormBuilderShell);
+
+const buildSchema = () => _.cloneDeep(smsSchemaResponse.metaEntities[0].definition);
+
+const buildProps = (overrides = {}) => ({
+  formData: {},
+  channel: 'SMS',
+  location: { pathname: '/sms/create', query: { type: false, module: 'library' } },
+  usingTabContainer: true,
+  isFullMode: false, // <-- library/embedded: the liquid path is active
+  isEdit: false,
+  startValidation: false,
+  checkValidation: false,
+  tags: [],
+  injectedTags: {},
+  baseLanguage: 'en',
+  onChange: jest.fn(),
+  onSubmit: jest.fn(),
+  onFormValidityChange: jest.fn(),
+  stopValidation: jest.fn(),
+  showLiquidErrorInFooter: jest.fn(),
+  ...overrides,
+});
+
+const renderShell = (props) => {
+  const utils = render(<Wrapped {...props} />);
+  return { ...utils, rerenderWith: (next) => utils.rerender(<Wrapped {...next} />) };
+};
+
+const typeNameAndContent = () => {
+  fireEvent.change(screen.getByPlaceholderText('Enter template name'), { target: { value: 'My SMS' } });
+  fireEvent.change(screen.getByPlaceholderText('Please input sms template content.'), { target: { value: 'hello world' } });
+};
+
+describe('SMS liquid pipeline (non-isFullMode)', () => {
+  it('clean liquid result submits: getLiquidTags called with channel content, then onSubmit', async () => {
+    let liquidContent = null;
+    const getLiquidTags = jest.fn((content, cb) => {
+      liquidContent = content;
+      cb({ askAiraResponse: { errors: [] }, isError: false });
+    });
+    const props = buildProps({ schema: buildSchema(), actions: { getLiquidTags } });
+    const { rerenderWith } = renderShell(props);
+
+    typeNameAndContent();
+    rerenderWith({ ...props, startValidation: true });
+
+    await waitFor(() => expect(props.onSubmit).toHaveBeenCalledTimes(1));
+    // content fed to the liquid API == getChannelData('SMS', formData): `${body} ${name}`
+    expect(getLiquidTags).toHaveBeenCalledTimes(1);
+    expect(liquidContent).toBe('hello world My SMS');
+    // The footer is touched (Classic calls showLiquidErrorInFooter on every validate to
+    // clear standard errors when valid), but no actual error is ever surfaced.
+    props.showLiquidErrorInFooter.mock.calls.forEach(([arg]) => {
+      expect(arg.STANDARD_ERROR_MSG).toEqual([]);
+      expect(arg.LIQUID_ERROR_MSG || []).toEqual([]);
+    });
+  });
+
+  it('liquid error blocks submit: footer errors + stopValidation, no onSubmit', async () => {
+    const getLiquidTags = jest.fn((content, cb) => {
+      cb({ askAiraResponse: { errors: [{ message: 'Invalid liquid tag' }] }, isError: false });
+    });
+    const props = buildProps({ schema: buildSchema(), actions: { getLiquidTags } });
+    const { rerenderWith } = renderShell(props);
+
+    typeNameAndContent();
+    rerenderWith({ ...props, startValidation: true });
+
+    await waitFor(() => expect(props.showLiquidErrorInFooter).toHaveBeenCalled());
+    const footerArg = props.showLiquidErrorInFooter.mock.calls[props.showLiquidErrorInFooter.mock.calls.length - 1][0];
+    expect(footerArg.LIQUID_ERROR_MSG).toContain('Invalid liquid tag');
+    expect(props.stopValidation).toHaveBeenCalled();
+    expect(props.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('does NOT run the liquid pipeline when sync validation already failed (no getLiquidTags call)', async () => {
+    const getLiquidTags = jest.fn((content, cb) => cb({ askAiraResponse: { errors: [] }, isError: false }));
+    // Empty name + empty content -> sync-invalid; liquid must not run.
+    const props = buildProps({ schema: buildSchema(), actions: { getLiquidTags } });
+    const { rerenderWith } = renderShell(props);
+
+    rerenderWith({ ...props, startValidation: true });
+
+    await waitFor(() => expect(props.stopValidation).toHaveBeenCalled());
+    expect(getLiquidTags).not.toHaveBeenCalled();
+    expect(props.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('LIBRARY mode: brace error goes to the FOOTER only (unchanged old flow — no inline message)', async () => {
+    const getLiquidTags = jest.fn((content, cb) => cb({ askAiraResponse: { errors: [] }, isError: false }));
+    const props = buildProps({ schema: buildSchema(), actions: { getLiquidTags } }); // isFullMode: false
+    const { rerenderWith } = renderShell(props);
+
+    // Unbalanced braces in the SMS body.
+    fireEvent.change(screen.getByPlaceholderText('Enter template name'), { target: { value: 'My SMS' } });
+    fireEvent.change(screen.getByPlaceholderText('Please input sms template content.'), { target: { value: 'abc {{full_name' } });
+
+    // Trigger validation (Save/Done) — sync validation fails on the brace error.
+    rerenderWith({ ...props, startValidation: true });
+
+    // Library mode is unchanged: the brace message goes to the FOOTER...
+    await waitFor(() => {
+      const braceCall = props.showLiquidErrorInFooter.mock.calls.find(
+        ([arg]) => (arg.STANDARD_ERROR_MSG || []).includes('Invalid label, please close all curly braces'),
+      );
+      expect(braceCall).toBeTruthy();
+    });
+    // ...and NOT inline below the box.
+    expect(screen.queryByText('Invalid label, please close all curly braces')).toBeNull();
+    // sync-invalid -> the liquid API is never called, and nothing is submitted.
+    expect(getLiquidTags).not.toHaveBeenCalled();
+    expect(props.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('FULL mode: brace error shows INLINE below the box and NOT in the footer', async () => {
+    const props = buildProps({ schema: buildSchema(), isFullMode: true, actions: { getLiquidTags: jest.fn() } });
+    const { rerenderWith } = renderShell(props);
+    fireEvent.change(screen.getByPlaceholderText('Enter template name'), { target: { value: 'My SMS' } });
+    fireEvent.change(screen.getByPlaceholderText('Please input sms template content.'), { target: { value: 'abc {{full_name' } });
+    rerenderWith({ ...props, startValidation: true });
+
+    // Full mode: the brace message is shown INLINE below the box...
+    await waitFor(() => expect(screen.getByText('Invalid label, please close all curly braces')).toBeInTheDocument());
+    // ...and is never pushed to the footer (no showLiquidErrorInFooter call carries it).
+    const braceCall = props.showLiquidErrorInFooter.mock.calls.find(
+      ([arg]) => (arg.STANDARD_ERROR_MSG || []).includes('Invalid label, please close all curly braces'),
+    );
+    expect(braceCall).toBeUndefined();
+    expect(props.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('isFullMode bypasses the liquid pipeline entirely (direct submit, getLiquidTags untouched)', async () => {
+    const getLiquidTags = jest.fn();
+    const props = buildProps({ schema: buildSchema(), isFullMode: true, actions: { getLiquidTags } });
+    const { rerenderWith } = renderShell(props);
+
+    typeNameAndContent();
+    rerenderWith({ ...props, startValidation: true });
+
+    await waitFor(() => expect(props.onSubmit).toHaveBeenCalledTimes(1));
+    expect(getLiquidTags).not.toHaveBeenCalled();
+  });
+});

package/v2Components/FormBuilder/Functional/tests/sms.rollout.test.js

@@ -0,0 +1,122 @@
+/**
+ * SMS rollout-readiness parity tests — locks the remaining pre-rollout behaviors:
+ *   1. Embedded/library mode: template-name is not required (isEmbedded), and the
+ *      Shell renders whatever (container-trimmed) schema it is handed.
+ *   2. sms-count ref: the DivField forwards the container's ref so the container's
+ *      onTemplateContentChange can imperatively write the "N SMS (M characters)" text.
+ *   3. Parent-sync: a GENUINE external formData push (edit load / discard) re-hydrates,
+ *      while an echo of our own emitted data does not clobber what the user typed.
+ */
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import _ from 'lodash';
+import { render, screen, fireEvent } from '../../../../utils/test-utils';
+import { response as smsSchemaResponse } from '../../../../v2Containers/Sms/initialSchema';
+
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+
+// eslint-disable-next-line import/first
+import FunctionalFormBuilder from '../index';
+
+const buildSchema = () => _.cloneDeep(smsSchemaResponse.metaEntities[0].definition);
+
+const buildProps = (overrides = {}) => ({
+  formData: {},
+  channel: 'SMS',
+  location: { pathname: '/sms', query: { type: false, module: 'default' } },
+  usingTabContainer: true,
+  isFullMode: true,
+  isEdit: false,
+  startValidation: false,
+  checkValidation: false,
+  tags: [],
+  injectedTags: {},
+  onChange: jest.fn(),
+  onSubmit: jest.fn(),
+  onFormValidityChange: jest.fn(),
+  stopValidation: jest.fn(),
+  ...overrides,
+});
+
+const renderShell = (props) => {
+  const utils = render(<FunctionalFormBuilder {...props} />);
+  return { ...utils, rerenderWith: (next) => utils.rerender(<FunctionalFormBuilder {...next} />) };
+};
+
+const lastCall = (fn) => fn.mock.calls[fn.mock.calls.length - 1];
+
+describe('SMS rollout — embedded/library mode', () => {
+  it('is VALID with content but no template-name when embedded (matches Classic isEmbedded skip)', () => {
+    const props = buildProps({
+      schema: buildSchema(),
+      location: { pathname: '/sms', query: { type: 'embedded', module: 'library' } },
+      formData: { 'template-name': '', 0: { 'sms-editor': 'hello world', 'unicode-validity': false, base: true } },
+      isEdit: true,
+    });
+    renderShell(props);
+    const [isValid, errorData] = lastCall(props.onFormValidityChange);
+    expect(errorData['template-name']).toBe(false); // not required when embedded
+    expect(isValid).toBe(true);
+  });
+
+  it('renders only the fields present in a container-trimmed schema (no template-name input)', () => {
+    // Simulate the container's removeStandAlone having dropped the template-name field.
+    const schema = buildSchema();
+    const nameSection = schema.standalone.sections[0].childSections[1].childSections[0].childSections;
+    nameSection.splice(0, 1); // remove the template-name multicols row
+    renderShell(buildProps({
+      schema,
+      location: { pathname: '/sms', query: { type: 'embedded', module: 'library' } },
+    }));
+    expect(screen.queryByPlaceholderText('Enter template name')).toBeNull();
+    // the message editor still renders
+    expect(screen.getByPlaceholderText('Please input sms template content.')).toBeInTheDocument();
+  });
+});
+
+describe('SMS rollout — sms-count ref forwarding', () => {
+  it('forwards the container ref to the sms-count div so the counter text can be written imperatively', () => {
+    const smsCountRef = React.createRef();
+    renderShell(buildProps({ schema: buildSchema(), refs: { 'sms-count': smsCountRef } }));
+    expect(smsCountRef.current).toBeTruthy();
+    expect(smsCountRef.current.id).toBe('sms-count');
+    // The container writes the count via this ref (as onTemplateContentChange does);
+    // React must not clobber it because the div's React children are always ''.
+    smsCountRef.current.innerText = '1 SMS (11 characters)';
+    fireEvent.change(screen.getByPlaceholderText('Please input sms template content.'), { target: { value: 'hello world' } });
+    expect(smsCountRef.current.innerText).toBe('1 SMS (11 characters)');
+  });
+});
+
+describe('SMS rollout — parent-sync', () => {
+  it('re-hydrates on a GENUINE external formData push (edit load / discard)', () => {
+    const props = buildProps({ schema: buildSchema() });
+    const { rerenderWith } = renderShell(props);
+    expect(screen.getByPlaceholderText('Please input sms template content.')).toHaveValue('');
+
+    // Parent pushes saved data (e.g. edit load resolves, or Discard restores).
+    const tab0 = { 'sms-editor': 'Restored body', 'unicode-validity': false, base: true, tabKey: 'k1' };
+    rerenderWith({ ...props, isEdit: true, formData: { 'template-name': 'Restored', 0: tab0, base: tab0 } });
+
+    expect(screen.getByPlaceholderText('Enter template name')).toHaveValue('Restored');
+    expect(screen.getByPlaceholderText('Please input sms template content.')).toHaveValue('Restored body');
+  });
+
+  it('does NOT clobber user input when the parent echoes back our own emitted formData', () => {
+    const props = buildProps({ schema: buildSchema() });
+    const { rerenderWith } = renderShell(props);
+
+    const editor = screen.getByPlaceholderText('Please input sms template content.');
+    fireEvent.change(editor, { target: { value: 'typed by user' } });
+
+    // The container stores what we emitted and passes it straight back as formData.
+    const echoed = lastCall(props.onChange)[0];
+    rerenderWith({ ...props, formData: echoed });
+
+    // Still shows the user's text — the echo must be detected and ignored.
+    expect(screen.getByPlaceholderText('Please input sms template content.')).toHaveValue('typed by user');
+  });
+});