@capillarytech/creatives-library 9.0.59 → 9.0.61-alpha.0

package/v2Components/FormBuilder/Functional/renderers/mpushRenderers.js

@@ -1,448 +0,0 @@
-/**
- * MOBILEPUSH field renderers — presentational mirrors of Classic's render cases.
- * Prop contract: { field, value, error, resolvedError, onChange, onBlur, onEvent, renderContext }.
- * ButtonField/TagListField are reused from the SMS set; the rest are MPUSH variants
- * where Classic's behavior differs by channel (each notes its Classic lines).
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapImage from '@capillarytech/cap-ui-library/CapImage';
-import CapRadio from '@capillarytech/cap-ui-library/CapRadio';
-import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
-import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
-import { FONT_COLOR_04, FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
-import UnifiedPreview from '../../../CommonTestAndPreview/UnifiedPreview';
-import { ANDROID } from '../../../CommonTestAndPreview/constants';
-import { MOBILE_PUSH } from '../../../../v2Containers/CreativesContainer/constants';
-import globalMessages from '../../../../v2Containers/Cap/messages';
-import formMessages from '../../messages';
-import { isAiContentBotDisabled } from '../../../../utils/common';
-import { hasPersonalizationTags } from '../../../../utils/commonUtils';
-import { createFieldRegistry } from '../core/schema/fieldRegistry';
-import { ALLOWED_IMAGE_EXTENSIONS, FIELD_TYPE } from '../constants';
-import { ButtonField, TagListField } from './smsRenderers';
-import { ERROR_VALUE } from '../channels/mobilepush/config';
-
-const { TextArea } = CapInput;
-
-
-const dataFieldPropTypes = {
-  field: PropTypes.object.isRequired,
-  value: PropTypes.any,
-  error: PropTypes.any,
-  onChange: PropTypes.func.isRequired,
-  renderContext: PropTypes.object.isRequired,
-};
-const dataFieldDefaultProps = {
-  value: undefined,
-  error: undefined,
-};
-
-const formatSafe = (intl, descriptor) => (intl?.formatMessage ? intl.formatMessage(descriptor) : '');
-
-// Classic gates every field-error display on checkValidation (pre-save silence).
-const shouldShowError = (renderContext, error) => Boolean(renderContext?.checkValidation && error);
-
-/** Classic input-case error message: personalization > brace > schema errorMessage. */
-const resolveInputMessage = (field, value, error, renderContext) => {
-  const { intl, restrictPersonalization } = renderContext || {};
-  if (restrictPersonalization && value && hasPersonalizationTags(String(value))) {
-    return formatSafe(intl, formMessages.personalizationTagsErrorMessage);
-  }
-  if (error === ERROR_VALUE.BRACKET) {
-    return formatSafe(intl, globalMessages.unbalanacedCurlyBraces);
-  }
-  return field.errorMessage || '';
-};
-
-export const MpushInputField = ({
-  field, value, error, onChange, onBlur, renderContext,
-}) => {
-  const showError = shouldShowError(renderContext, error);
-  const message = showError ? resolveInputMessage(field, value, error, renderContext) : '';
-  return (
-    <CapColumn key={field.id} span={field.width} offset={field.offset} style={field.style || {}}>
-      <CapInput
-        id={field.id}
-        label={field.label}
-        placeholder={field.placeholder}
-        errorMessage={message}
-        className={`input-primary chart-name-input${showError ? ' error' : ''}`}
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
-        disabled={field.disabled}
-        size={field.size || 'default'}
-      />
-    </CapColumn>
-  );
-};
-
-MpushInputField.propTypes = { ...dataFieldPropTypes, onBlur: PropTypes.func };
-MpushInputField.defaultProps = { ...dataFieldDefaultProps, onBlur: undefined };
-
-export const MpushTextAreaField = ({
-  field, value, error, onChange, renderContext,
-}) => {
-  let aiDisabled = true;
-  try { aiDisabled = isAiContentBotDisabled(); } catch (e) { console.error(e); aiDisabled = true; }
-  // Classic-observable behavior: errorData is only ever computed under
-  // startValidation (Classic.js:334-345), so NO editor error — empty or tag —
-  // is visible before a save attempt. checkValidation is true exactly in the
-  // states where Classic can hold a non-false errorType, so gating display on it
-  // reproduces Classic's typing silence and also keeps the initial-hydrate
-  // errorData (computed for the parent validity emission) from leaking into the UI.
-  const showError = shouldShowError(renderContext, error);
-  // MPUSH keeps the inline message even though the channel is liquid-supported
-  // (Classic.js:2908-2915). Personalization gets its own message (2877-2879).
-  const inlineMessage = showError ? resolveInputMessage(field, value, error, renderContext) : '';
-  return (
-    <CapColumn key={field.id} span={field.width} offset={field.offset}>
-      <TextArea
-        id={field.id}
-        label={field.label}
-        placeholder={field.placeholder || ''}
-        className={`${showError ? 'error-form-builder' : ''}`}
-        errorMessage={inlineMessage}
-        autosize={field.autosize ? field.autosizeParams : false}
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        style={field.style || {}}
-        disabled={field.disabled}
-      />
-      {!aiDisabled && (
-        // AskAira content bot is enabled for MOBILEPUSH textareas (Classic.js:2927).
-        <CapAskAira.ContentGenerationBot
-          text={value || ''}
-          setText={(x) => onChange(x)}
-          iconPlacement="float-br"
-          rootStyle={{ bottom: 'calc(1rem + 0.2rem)', right: '0.2rem' }}
-        />
-      )}
-    </CapColumn>
-  );
-};
-
-MpushTextAreaField.propTypes = { ...dataFieldPropTypes };
-MpushTextAreaField.defaultProps = { ...dataFieldDefaultProps };
-
-export const MpushCheckboxField = ({
-  field, value, error, onChange, onEvent, renderContext,
-}) => {
-  const showError = shouldShowError(renderContext, error);
-  const checkbox = (
-    <CapCheckbox
-      key={field.id}
-      className={`${showError ? 'error' : ''}`}
-      errorMessage={field.errorMessage && showError ? field.errorMessage : ''}
-      onChange={(e) => {
-        const { checked } = e.target;
-        onChange(checked);
-        // CTA toggles route through the injected submit-action with the
-        // performFormDataUpdate commit signature (Classic.js:3567 -> 228).
-        if (field.submitAction && onEvent) onEvent(field.submitAction, checked);
-      }}
-      checked={Boolean(value)}
-      style={field.style || {}}
-      disabled={field.disabled}
-      inductiveText={field.inductiveText}
-    >
-      {field.label}
-    </CapCheckbox>
-  );
-  return (
-    <CapColumn key={field.id} span={field.width} offset={field.offset}>
-      {field.disabled && field.hoverText
-        ? <CapTooltip title={field.hoverText}>{checkbox}</CapTooltip>
-        : checkbox}
-    </CapColumn>
-  );
-};
-
-MpushCheckboxField.propTypes = { ...dataFieldPropTypes, onEvent: PropTypes.func };
-MpushCheckboxField.defaultProps = { ...dataFieldDefaultProps, onEvent: undefined };
-
-// Direct renderer (needs the full legacy formData for the value-resolution chain).
-export const RadioGroupField = ({
-  field, error, onChange, onEvent, renderContext,
-}) => {
-  const showError = shouldShowError(renderContext, error);
-  // Classic handleSetRadioValue (2729-2736): tab value -> root value -> schema default.
-  const legacy = renderContext?.legacyFormData || {};
-  const tab = legacy[(renderContext?.paneTabIndex ?? renderContext?.activeTabIndex) || 0] || {};
-  const resolvedValue = tab[field.id] !== undefined && tab[field.id] !== ''
-    ? tab[field.id]
-    : (legacy[field.id] !== undefined && legacy[field.id] !== '' ? legacy[field.id] : field.value);
-  return (
-    <CapColumn key={`input-${field.id}`} span={field.width} offset={field.offset}>
-      <CapRadioGroup
-        key={`${field.id}-radio-group`}
-        className={`form-builder-radio-group ${showError ? 'error' : ''}`}
-        errorMessage={field.errorMessage && showError ? field.errorMessage : ''}
-        onChange={(e) => {
-          const nextValue = e.target.value;
-          onChange(nextValue);
-          onEvent('onChange', nextValue); // -> injected onLinkTypeChange (commit signature)
-        }}
-        style={field.style || {}}
-        value={resolvedValue}
-        name={field.name || `${field.id}-name`}
-        disabled={field.disabled}
-      >
-        {(field.options || []).map((option, index) => (
-          <CapRadio
-            key={`${field.id}-radio-${index}`}
-            value={option}
-            inductiveText={field.inductiveText && field.inductiveText[index]}
-          >
-            {option}
-          </CapRadio>
-        ))}
-      </CapRadioGroup>
-    </CapColumn>
-  );
-};
-
-RadioGroupField.propTypes = { ...dataFieldPropTypes, onEvent: PropTypes.func.isRequired };
-RadioGroupField.defaultProps = { ...dataFieldDefaultProps };
-
-// Direct renderer (options may be overridden through `${id}-options` in the form data).
-export const SelectField = ({
-  field, value, error, onChange, onEvent, renderContext,
-}) => {
-  const showError = shouldShowError(renderContext, error);
-  const options = renderContext?.legacyFormData?.[`${field.id}-options`] || field.options;
-  return (
-    <CapColumn key={`select-${field.id}`} style={field.colStyle || {}} span={field.width} offset={field.offset}>
-      <CapSelect
-        id={field.id}
-        options={options}
-        placeholder={field.placeholder || ''}
-        style={field.style || {}}
-        onSelect={(data) => {
-          onChange(data);
-          onEvent('onSelect', data); // -> injected showCtaKeys / onTemplateChange (commit signature)
-        }}
-        value={value}
-        disabled={field.disabled}
-        label={field.label}
-      />
-      {showError && field.errorMessage && <span className="error">{field.errorMessage}</span>}
-    </CapColumn>
-  );
-};
-
-SelectField.propTypes = { ...dataFieldPropTypes, onEvent: PropTypes.func.isRequired };
-SelectField.defaultProps = { ...dataFieldDefaultProps };
-
-// Image upload (imageSchema only), Classic.js:3657-3690 + 2737-2764: the 5 MB check
-// and dimension read happen here; the upload + formData write stay container-owned.
-export const UploadField = ({
-  field, value, error, onEvent, renderContext,
-}) => {
-  // The only field whose error display also honors startValidation (Classic.js:3666).
-  const showError = Boolean(
-    (renderContext?.checkValidation || renderContext?.startValidation) && error,
-  );
-  const isImage = Boolean(value);
-
-  const openFileDialog = (e) => {
-    if (e) e.preventDefault();
-    const fileInput = document.querySelector(`#${field.id} #fileName`);
-    if (fileInput) fileInput.click();
-  };
-
-  const onFileChange = (e) => {
-    const files = e?.target?.files;
-    const file = files && files[0];
-    if (!file) return;
-    if (field.supportedExtensions && !ALLOWED_IMAGE_EXTENSIONS.exec(file.name)) {
-      // Classic fires the wrong-file event and CONTINUES (no early return) — preserved.
-      onEvent(field.submitAction, { file, type: 'wrong file' });
-    }
-    const urlApi = window.URL || window.webkitURL;
-    const objectUrl = urlApi.createObjectURL(file);
-    const img = new Image();
-    img.src = objectUrl;
-    img.onload = () => {
-      const fileParams = {
-        width: img?.width,
-        height: img?.height,
-        error: Boolean(file && (file.size / 1e6 > 5)), // > 5 MB (Classic.js:2753)
-      };
-      urlApi.revokeObjectURL(objectUrl); // dimension read done — free the blob URL
-      onEvent(field.submitAction, { file, type: 'image', fileParams });
-    };
-    // Classic dispatches nothing on a failed image load — only release the URL.
-    img.onerror = () => urlApi.revokeObjectURL(objectUrl);
-    e.target.value = null;
-  };
-
-  const ImageComponent = (imageProps) => (
-    <div key={`${field.id}-preview`}>
-      <div className={`image-container ${imageProps.ifError ? 'error' : ''}`}>
-        {isImage
-          ? <CapImage src={value} alt={imageProps.alt} style={imageProps.style} />
-          : (
-            <div className="fb-upload-placeholder">
-              <span className="image-placeholder">{imageProps.placeholder}</span>
-            </div>
-          )}
-      </div>
-    </div>
-  );
-  const WithLabel = LabelHOC(ImageComponent);
-  const { errorMessage, ...previewRest } = field.previewProps || {};
-
-  return (
-    <CapColumn span={field.width} offset={field.offset} style={field.style}>
-      {field.showPreview && (
-        <WithLabel
-          key={`${field.id}-with-label`}
-          {...previewRest}
-          errorMessage={showError && errorMessage}
-          ifError={showError}
-        />
-      )}
-      <form encType="multipart/form-data" id={field.id}>
-        {/* Native input on purpose: openFileDialog clicks it via #fileName, and CapInput
-            (antd text Input + affix wrapper) can't host type="file". */}
-        <input
-          key={field.id}
-          className="fb-upload-file-input"
-          id="fileName"
-          type="file"
-          onChange={onFileChange}
-          accept={field.supportedExtensions ? field.supportedExtensions : 'image/*'}
-        />
-        <CapButton
-          disabled={field.disabled || false}
-          type="link"
-          prefix={<CapIcon size="s" type="add-photo" />}
-          onClick={openFileDialog}
-          // color is state-dependent and must beat CapButton's own runtime styling —
-          // kept inline (Classic.js:3399 verbatim).
-          style={{ float: 'right', color: `${field.disabled ? FONT_COLOR_04 : FONT_COLOR_05}` }}
-        >
-          {field.label}
-        </CapButton>
-      </form>
-    </CapColumn>
-  );
-};
-
-UploadField.propTypes = { ...dataFieldPropTypes, onEvent: PropTypes.func.isRequired };
-UploadField.defaultProps = { ...dataFieldDefaultProps };
-
-// Primitive div (tab headers, copy links, key labels), Classic.js:3304-3328:
-// value resolves from the ACTIVE tab; DOM id gets the legacy pane suffix (`${id}2`).
-export const MpushDivField = ({ field, onEvent, renderContext }) => {
-  const paneTabIndex = renderContext?.paneTabIndex ?? renderContext?.activeTabIndex ?? 0;
-  const activeTab = renderContext?.legacyFormData?.[renderContext?.activeTabIndex ?? 0] || {};
-  const children = activeTab[field.id] || field.value || '';
-  const domId = `${field.id}${paneTabIndex > 0 ? paneTabIndex + 1 : ''}`;
-  return (
-    <div
-      className={field.className || ''}
-      id={domId}
-      onClick={(data) => field.submitAction && onEvent(field.submitAction, data)}
-      style={field.style || {}}
-      // Classic fires the injected 'onChange' via callChildEvent's TAIL signature
-      // (data, field.id) — the shell's commit-signature branch is type-guarded to
-      // checkbox/radioGroup/select, so a div's onChange takes the tail path.
-      onInput={(e) => { e.stopPropagation(); onEvent('onChange', e.target.textContent); }}
-    >
-      {children}
-    </div>
-  );
-};
-
-MpushDivField.propTypes = {
-  field: PropTypes.object.isRequired,
-  onEvent: PropTypes.func.isRequired,
-  renderContext: PropTypes.object.isRequired,
-};
-
-// Direct renderer — CTA delete icons.
-export const IconField = ({ field, onEvent }) => (
-  <CapColumn
-    key={`icon-${field.id}`}
-    id={field.id}
-    offset={field.offset}
-    width={field.width || 1}
-    onClick={(data) => field.submitAction && onEvent(field.submitAction, data)}
-    className={field.className || ''}
-    style={field.colStyle || {}}
-  >
-    <i style={field.style || {}} className="material-icons">{field.value || ''}</i>
-  </CapColumn>
-);
-
-IconField.propTypes = {
-  field: PropTypes.object.isRequired,
-  onEvent: PropTypes.func.isRequired,
-};
-
-// Device preview, Classic.js:3897-3943 quirks preserved: both panes show the ACTIVE
-// tab's content and the frame is hardcoded to ANDROID with the toggle hidden.
-export const MobilePushPreviewField = ({ field, renderContext }) => {
-  const activeTab = renderContext?.legacyFormData?.[renderContext?.activeTabIndex ?? 0];
-  if (!activeTab) return null;
-  const header = activeTab[field.content?.title] || '';
-  const bodyText = activeTab[field.content?.message] || '';
-  const bodyImage = activeTab.image || '';
-  const actions = [];
-  if (activeTab[field.content?.secondaryCta1]) actions.push({ label: activeTab[field.content.secondaryCta1] });
-  if (activeTab[field.content?.secondaryCta2]) actions.push({ label: activeTab[field.content.secondaryCta2] });
-  const platformContent = {
-    header, bodyText, bodyImage, actions, appName: field.content?.appName || '',
-  };
-  const mobilePushContent = { androidContent: platformContent, iosContent: platformContent };
-  return (
-    <CapColumn key="input" span={23} offset={1}>
-      <UnifiedPreview
-        key={field.id}
-        style={field.customStyling || {}}
-        channel={field.channel || MOBILE_PUSH}
-        content={mobilePushContent}
-        device={ANDROID}
-        showDeviceToggle={false}
-        showHeader={false}
-        formatMessage={renderContext?.intl?.formatMessage}
-      />
-    </CapColumn>
-  );
-};
-
-MobilePushPreviewField.propTypes = {
-  field: PropTypes.object.isRequired,
-  renderContext: PropTypes.object.isRequired,
-};
-
-/** Build a registry pre-loaded with the MOBILEPUSH field renderers. */
-export const createMpushRegistry = () => createFieldRegistry({
-  [FIELD_TYPE.INPUT]: MpushInputField,
-  [FIELD_TYPE.TEXTAREA]: MpushTextAreaField,
-  [FIELD_TYPE.CHECKBOX]: MpushCheckboxField,
-  [FIELD_TYPE.BUTTON]: ButtonField,
-  // TagListField mirrors Classic's SEMANTIC tag-list path (Classic.js:3730-3769):
-  // span = field.width || '', field.style applied — the CTA splices rely on it.
-  [FIELD_TYPE.TAG_LIST]: TagListField,
-  [FIELD_TYPE.RADIO_GROUP]: RadioGroupField,
-  [FIELD_TYPE.SELECT]: SelectField,
-  [FIELD_TYPE.UPLOAD]: UploadField,
-  [FIELD_TYPE.DIV]: MpushDivField,
-  [FIELD_TYPE.ICON]: IconField,
-  [FIELD_TYPE.MOBILE_PUSH_PREVIEW]: MobilePushPreviewField,
-});
-
-export default createMpushRegistry;

package/v2Components/FormBuilder/Functional/tests/manual.typingPerf.test.js

@@ -1,135 +0,0 @@
-/**
- * MANUAL perf probe (skipped by default): per-keystroke JS cost, Classic vs
- * Functional, over the real embedded Create container. jsdom has no paint, so
- * this measures the render+effects side of typing lag as an A/B comparison.
- * Run: RUN_PERF=1 TZ=UTC npx jest --config internals/testing/jest.unit.config.js manual.typingPerf
- */
-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: '' } }),
-}));
-
-let mockMpushFlag = false;
-jest.mock('../../../../utils/common', () => ({
-  ...jest.requireActual('../../../../utils/common'),
-  hasNewFormBuilderEnabledForMpush: () => mockMpushFlag,
-}));
-
-const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
-const intl = { formatMessage: (d) => (d && (d.defaultMessage || d.id)) || '', locale: 'en' };
-const DEEPLINKS = JSON.stringify([{ name: 'Home Page', link: 'app://home', keys: ['user_id'] }]);
-const selectedAccount = {
-  id: 'acc-1', name: 'Acc', sourceTypeName: 'SOME_SDK', sourceAccountIdentifier: 'lic-1',
-  configs: { android: '1', ios: '1', deeplink: DEEPLINKS },
-};
-
-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) => {
-  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), 'value').set.call(el, value);
-};
-
-const measureFlow = (flag, { withCta = false, longContent = 0 } = {}) => {
-  mockMpushFlag = flag;
-  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 })); });
-
-  if (withCta) {
-    const pane = document.querySelectorAll('.ant-tabs-tabpane')[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"]');
-    act(() => { fireEvent.click(cb); });
-  }
-
-  const editor = document.getElementById('message-editor');
-  let text = 'The quick brown fox jumped over the lazy dog and kept typing more content ';
-  if (longContent) {
-    // long-message scenario incl. personalization tags — catches superlinear
-    // per-keystroke validation/render costs that short content hides.
-    text = 'Hello {{first_name}}, your offer {{offer_id}} is waiting. '.repeat(Math.ceil(longContent / 58));
-  }
-  // warm-up keystrokes (JIT/styles)
-  for (let i = 0; i < 5; i++) {
-    text += 'w';
-    setNativeValue(editor, text);
-    act(() => { fireEvent.change(editor, { target: { value: text } }); });
-  }
-  const N = 30;
-  const t0 = performance.now();
-  for (let i = 0; i < N; i++) {
-    text += String.fromCharCode(97 + (i % 26));
-    setNativeValue(editor, text);
-    act(() => { fireEvent.change(editor, { target: { value: text } }); });
-  }
-  const perKey = (performance.now() - t0) / N;
-  utils.unmount();
-  mockMpushFlag = false;
-  return perKey;
-};
-
-const describePerf = process.env.RUN_PERF ? describe : describe.skip;
-describePerf('MANUAL typing perf (RUN_PERF=1 to enable)', () => {
-  it('per-keystroke JS cost, Classic vs Functional', () => {
-    const classicPlain = measureFlow(false);
-    const functionalPlain = measureFlow(true);
-    const classicCta = measureFlow(false, { withCta: true });
-    const functionalCta = measureFlow(true, { withCta: true });
-    const classicLong5k = measureFlow(false, { longContent: 5000 });
-    const functionalLong5k = measureFlow(true, { longContent: 5000 });
-    const classicLong20k = measureFlow(false, { longContent: 20000 });
-    const functionalLong20k = measureFlow(true, { longContent: 20000 });
-    // eslint-disable-next-line no-console
-    console.log(JSON.stringify({
-      classicPlain: `${classicPlain.toFixed(1)} ms/key`,
-      functionalPlain: `${functionalPlain.toFixed(1)} ms/key`,
-      classicWithCta: `${classicCta.toFixed(1)} ms/key`,
-      functionalWithCta: `${functionalCta.toFixed(1)} ms/key`,
-      classicLong5k: `${classicLong5k.toFixed(1)} ms/key`,
-      functionalLong5k: `${functionalLong5k.toFixed(1)} ms/key`,
-      classicLong20k: `${classicLong20k.toFixed(1)} ms/key`,
-      functionalLong20k: `${functionalLong20k.toFixed(1)} ms/key`,
-    }, null, 1));
-    expect(true).toBe(true);
-  });
-});