type.ts

import type { ReactTestInstance } from 'react-test-renderer';

import { ErrorWithStack } from '../../helpers/errors';
import { isHostTextInput } from '../../helpers/host-component-names';
import { isPointerEventEnabled } from '../../helpers/pointer-events';
import { getTextInputValue, isEditableTextInput } from '../../helpers/text-input';
import { nativeState } from '../../native-state';
import { EventBuilder } from '../event-builder';
import type { UserEventConfig, UserEventInstance } from '../setup';
import { dispatchEvent, getTextContentSize, wait } from '../utils';
import { parseKeys } from './parse-keys';
import { logger } from '../../helpers/logger';
import { formatElement } from '../../helpers/format-element';

export interface TypeOptions {
  skipPress?: boolean;
  submitEditing?: boolean;
  skipBlur?: boolean;
}

export async function type(
  this: UserEventInstance,
  element: ReactTestInstance,
  text: string,
  options?: TypeOptions,
): Promise<void> {
  if (!isHostTextInput(element)) {
    throw new ErrorWithStack(
      `type() works only with host "TextInput" elements. Passed element has type "${element.type}".`,
      type,
    );
  }

  if (!isEditableTextInput(element)) {
    logger.warn(
      `User Event (type): element ${formatElement(element, { compact: true })} is not editable.`,
    );
    return;
  }

  if (!isPointerEventEnabled(element)) {
    logger.warn(
      `User Event (type): element ${formatElement(element, { compact: true })} has pointer event handlers disabled.`,
    );
    return;
  }
  const keys = parseKeys(text);

  if (!options?.skipPress) {
    await dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
  }

  await dispatchEvent(element, 'focus', EventBuilder.Common.focus());

  if (!options?.skipPress) {
    await wait(this.config);
    await dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
  }

  let currentText = getTextInputValue(element);
  for (const key of keys) {
    const previousText = getTextInputValue(element);
    const proposedText = applyKey(previousText, key);
    const isAccepted = isTextChangeAccepted(element, proposedText);
    currentText = isAccepted ? proposedText : previousText;

    await emitTypingEvents(element, {
      config: this.config,
      key,
      text: currentText,
      isAccepted,
    });
  }

  const finalText = getTextInputValue(element);
  await wait(this.config);

  if (options?.submitEditing) {
    await dispatchEvent(element, 'submitEditing', EventBuilder.TextInput.submitEditing(finalText));
  }

  if (!options?.skipBlur) {
    await dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(finalText));
    await dispatchEvent(element, 'blur', EventBuilder.Common.blur());
  }
}

type EmitTypingEventsContext = {
  config: UserEventConfig;
  key: string;
  text: string;
  isAccepted?: boolean;
};

export async function emitTypingEvents(
  element: ReactTestInstance,
  { config, key, text, isAccepted }: EmitTypingEventsContext,
) {
  const isMultiline = element.props.multiline === true;

  await wait(config);
  await dispatchEvent(element, 'keyPress', EventBuilder.TextInput.keyPress(key));

  // Platform difference (based on experiments):
  // - iOS and RN Web: TextInput emits only `keyPress` event when max length has been reached
  // - Android: TextInputs does not emit any events
  if (isAccepted === false) {
    return;
  }

  nativeState.valueForElement.set(element, text);
  await dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
  await dispatchEvent(element, 'changeText', text);

  const selectionRange = {
    start: text.length,
    end: text.length,
  };
  await dispatchEvent(
    element,
    'selectionChange',
    EventBuilder.TextInput.selectionChange(selectionRange),
  );

  // According to the docs only multiline TextInput emits contentSizeChange event
  // @see: https://reactnative.dev/docs/textinput#oncontentsizechange
  if (isMultiline) {
    const contentSize = getTextContentSize(text);
    await dispatchEvent(
      element,
      'contentSizeChange',
      EventBuilder.TextInput.contentSizeChange(contentSize),
    );
  }
}

function applyKey(text: string, key: string) {
  if (key === 'Enter') {
    return `${text}\n`;
  }

  if (key === 'Backspace') {
    return text.slice(0, -1);
  }

  return text + key;
}

function isTextChangeAccepted(element: ReactTestInstance, text: string) {
  const maxLength = element.props.maxLength;
  return maxLength === undefined || text.length <= maxLength;
}