@testing-library/react-native 12.2.1 → 12.3.0

package/src/user-event/type/__tests__/type-managed.test.tsx

@@ -1,120 +0,0 @@
-import * as React from 'react';
-import { TextInput } from 'react-native';
-import { createEventLogger } from '../../../test-utils/events';
-import { render } from '../../..';
-import { userEvent } from '../..';
-
-beforeEach(() => {
-  jest.useRealTimers();
-});
-
-interface ManagedTextInputProps {
-  valueTransformer?: (text: string) => string;
-  logEvent: (name: string) => (event: any) => void;
-  initialValue?: string;
-}
-
-function ManagedTextInput({
-  logEvent,
-  valueTransformer,
-  initialValue = '',
-}: ManagedTextInputProps) {
-  const [value, setValue] = React.useState(initialValue);
-
-  const handleChangeText = (text: string) => {
-    logEvent('changeText')(text);
-    const newValue = valueTransformer?.(text) ?? text;
-    setValue(newValue);
-  };
-
-  return (
-    <TextInput
-      testID="input"
-      value={value}
-      onChangeText={handleChangeText}
-      onFocus={logEvent('focus')}
-      onBlur={logEvent('blur')}
-      onPressIn={logEvent('pressIn')}
-      onPressOut={logEvent('pressOut')}
-      onChange={logEvent('change')}
-      onKeyPress={logEvent('keyPress')}
-      onTextInput={logEvent('textInput')}
-      onSelectionChange={logEvent('selectionChange')}
-      onSubmitEditing={logEvent('submitEditing')}
-      onEndEditing={logEvent('endEditing')}
-      onContentSizeChange={logEvent('contentSizeChange')}
-    />
-  );
-}
-
-describe('type() for managed TextInput', () => {
-  it('supports basic case', async () => {
-    jest.spyOn(Date, 'now').mockImplementation(() => 100100100100);
-    const { events, logEvent } = createEventLogger();
-    const screen = render(<ManagedTextInput logEvent={logEvent} />);
-
-    const user = userEvent.setup();
-    await user.type(screen.getByTestId('input'), 'Wow');
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
-      'pressIn',
-      'focus',
-      'pressOut',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'endEditing',
-      'blur',
-    ]);
-
-    expect(events).toMatchSnapshot('input: "Wow"');
-  });
-
-  test('supports rejecting TextInput', async () => {
-    jest.spyOn(Date, 'now').mockImplementation(() => 100100100100);
-    const { events, logEvent } = createEventLogger();
-    const screen = render(
-      <ManagedTextInput
-        initialValue="XXX"
-        logEvent={logEvent}
-        valueTransformer={() => 'XXX'}
-      />
-    );
-
-    const user = userEvent.setup();
-    await user.type(screen.getByTestId('input'), 'ABC');
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
-      'pressIn',
-      'focus',
-      'pressOut',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'endEditing',
-      'blur',
-    ]);
-
-    expect(events).toMatchSnapshot('input: "ABC", value: "XXX"');
-  });
-});

package/src/user-event/type/__tests__/type.test.tsx

@@ -1,335 +0,0 @@
-import * as React from 'react';
-import { View, TextInput, TextInputProps } from 'react-native';
-import { createEventLogger } from '../../../test-utils/events';
-import { render } from '../../..';
-import { userEvent } from '../..';
-
-beforeEach(() => {
-  jest.useRealTimers();
-});
-
-function renderTextInputWithToolkit(props: TextInputProps = {}) {
-  const { events, logEvent } = createEventLogger();
-
-  const screen = render(
-    <TextInput
-      testID="input"
-      onFocus={logEvent('focus')}
-      onBlur={logEvent('blur')}
-      onPressIn={logEvent('pressIn')}
-      onPressOut={logEvent('pressOut')}
-      onChange={logEvent('change')}
-      onChangeText={logEvent('changeText')}
-      onKeyPress={logEvent('keyPress')}
-      onTextInput={logEvent('textInput')}
-      onSelectionChange={logEvent('selectionChange')}
-      onSubmitEditing={logEvent('submitEditing')}
-      onEndEditing={logEvent('endEditing')}
-      onContentSizeChange={logEvent('contentSizeChange')}
-      {...props}
-    />
-  );
-
-  return {
-    ...screen,
-    events,
-  };
-}
-
-describe('type()', () => {
-  it('supports basic case', async () => {
-    jest.spyOn(Date, 'now').mockImplementation(() => 100100100100);
-    const { events, ...queries } = renderTextInputWithToolkit();
-
-    const user = userEvent.setup();
-    await user.type(queries.getByTestId('input'), 'abc');
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
-      'pressIn',
-      'focus',
-      'pressOut',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'endEditing',
-      'blur',
-    ]);
-
-    expect(events).toMatchSnapshot('input: "abc"');
-  });
-
-  it.each(['modern', 'legacy'])('works with %s fake timers', async (type) => {
-    jest.useFakeTimers({ legacyFakeTimers: type === 'legacy' });
-    const { events, ...queries } = renderTextInputWithToolkit();
-
-    const user = userEvent.setup();
-    await user.type(queries.getByTestId('input'), 'abc');
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
-      'pressIn',
-      'focus',
-      'pressOut',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'endEditing',
-      'blur',
-    ]);
-  });
-
-  it('supports defaultValue prop', async () => {
-    const { events, ...queries } = renderTextInputWithToolkit({
-      defaultValue: 'xxx',
-    });
-
-    const user = userEvent.setup();
-    await user.type(queries.getByTestId('input'), 'ab');
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
-      'pressIn',
-      'focus',
-      'pressOut',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'endEditing',
-      'blur',
-    ]);
-
-    expect(events).toMatchSnapshot('input: "ab", defaultValue: "xxx"');
-  });
-
-  it('does respect editable prop', async () => {
-    const { events, ...queries } = renderTextInputWithToolkit({
-      editable: false,
-    });
-
-    const user = userEvent.setup();
-    await user.type(queries.getByTestId('input'), 'ab');
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([]);
-  });
-
-  it('supports backspace', async () => {
-    const { events, ...queries } = renderTextInputWithToolkit({
-      defaultValue: 'xxx',
-    });
-
-    const user = userEvent.setup();
-    await user.type(queries.getByTestId('input'), '{Backspace}a');
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
-      'pressIn',
-      'focus',
-      'pressOut',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'endEditing',
-      'blur',
-    ]);
-
-    expect(events).toMatchSnapshot(
-      'input: "{Backspace}a", defaultValue: "xxx"'
-    );
-  });
-
-  it('supports multiline', async () => {
-    const { events, ...queries } = renderTextInputWithToolkit({
-      multiline: true,
-    });
-
-    const user = userEvent.setup();
-    await user.type(queries.getByTestId('input'), '{Enter}\n');
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
-      'pressIn',
-      'focus',
-      'pressOut',
-      'keyPress',
-      'textInput',
-      'change',
-      'changeText',
-      'selectionChange',
-      'contentSizeChange',
-      'keyPress',
-      'textInput',
-      'change',
-      'changeText',
-      'selectionChange',
-      'contentSizeChange',
-      'endEditing',
-      'blur',
-    ]);
-
-    expect(events).toMatchSnapshot('input: "{Enter}\\n", multiline: true');
-  });
-
-  test('skips press events when `skipPress: true`', async () => {
-    const { events, ...queries } = renderTextInputWithToolkit();
-
-    const user = userEvent.setup();
-    await user.type(queries.getByTestId('input'), 'a', {
-      skipPress: true,
-    });
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).not.toContainEqual('pressIn');
-    expect(eventNames).not.toContainEqual('pressOut');
-    expect(eventNames).toEqual([
-      'focus',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'endEditing',
-      'blur',
-    ]);
-  });
-
-  it('triggers submit event with `submitEditing: true`', async () => {
-    const { events, ...queries } = renderTextInputWithToolkit();
-
-    const user = userEvent.setup();
-    await user.type(queries.getByTestId('input'), 'a', {
-      submitEditing: true,
-    });
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
-      'pressIn',
-      'focus',
-      'pressOut',
-      'keyPress',
-      'change',
-      'changeText',
-      'selectionChange',
-      'submitEditing',
-      'endEditing',
-      'blur',
-    ]);
-
-    expect(events[7].name).toBe('submitEditing');
-    expect(events[7].payload).toEqual({
-      nativeEvent: { text: 'a', target: 0 },
-    });
-  });
-
-  it('works when not all events have handlers', async () => {
-    const { events, logEvent } = createEventLogger();
-    const screen = render(
-      <TextInput
-        testID="input"
-        onChangeText={logEvent('changeText')}
-        onEndEditing={logEvent('endEditing')}
-      />
-    );
-
-    const user = userEvent.setup();
-    await user.type(screen.getByTestId('input'), 'abc');
-
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
-      'changeText',
-      'changeText',
-      'changeText',
-      'endEditing',
-    ]);
-
-    expect(events).toMatchSnapshot('input: "abc"');
-  });
-
-  it('does NOT work on View', async () => {
-    const screen = render(<View testID="input" />);
-
-    const user = userEvent.setup();
-    await expect(
-      user.type(screen.getByTestId('input'), 'abc')
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `"type() works only with host "TextInput" elements. Passed element has type "View"."`
-    );
-  });
-
-  // View that ignores props type checking
-  const AnyView = View as React.ComponentType<any>;
-
-  it('does NOT bubble up', async () => {
-    const parentHandler = jest.fn();
-    const screen = render(
-      <AnyView
-        onChangeText={parentHandler}
-        onChange={parentHandler}
-        onKeyPress={parentHandler}
-        onTextInput={parentHandler}
-        onFocus={parentHandler}
-        onBlur={parentHandler}
-        onEndEditing={parentHandler}
-        onPressIn={parentHandler}
-        onPressOut={parentHandler}
-      >
-        <TextInput testID="input" />
-      </AnyView>
-    );
-
-    const user = userEvent.setup();
-    await user.type(screen.getByTestId('input'), 'abc');
-    expect(parentHandler).not.toHaveBeenCalled();
-  });
-
-  it('supports direct access', async () => {
-    const { events, logEvent } = createEventLogger();
-    const screen = render(
-      <TextInput
-        testID="input"
-        onChangeText={logEvent('changeText')}
-        onFocus={logEvent('focus')}
-        onBlur={logEvent('blur')}
-      />
-    );
-
-    await userEvent.type(screen.getByTestId('input'), 'abc');
-
-    const eventNames = events.map((event) => event.name);
-    expect(eventNames).toEqual([
-      'focus',
-      'changeText',
-      'changeText',
-      'changeText',
-      'blur',
-    ]);
-  });
-});

package/src/user-event/type/index.ts

@@ -1 +0,0 @@
-export { type, TypeOptions } from './type';

package/src/user-event/type/parseKeys.ts

@@ -1,41 +0,0 @@
-const knownKeys = new Set(['Enter', 'Backspace']);
-
-export function parseKeys(text: string) {
-  const result = [];
-
-  let remainingText = text;
-  while (remainingText) {
-    const [token, rest] = getNextToken(remainingText);
-    if (token.length > 1 && !knownKeys.has(token)) {
-      throw new Error(`Unknown key "${token}" in "${text}"`);
-    }
-
-    result.push(token);
-    remainingText = rest;
-  }
-
-  return result;
-}
-
-function getNextToken(text: string): [string, string] {
-  // Detect `{{` => escaped `{`
-  if (text[0] === '{' && text[1] === '{') {
-    return ['{', text.slice(2)];
-  }
-
-  // Detect `{key}` => special key
-  if (text[0] === '{') {
-    const endIndex = text.indexOf('}');
-    if (endIndex === -1) {
-      throw new Error(`Invalid key sequence "${text}"`);
-    }
-
-    return [text.slice(1, endIndex), text.slice(endIndex + 1)];
-  }
-
-  if (text[0] === '\n') {
-    return ['Enter', text.slice(1)];
-  }
-
-  return [text[0], text.slice(1)];
-}

package/src/user-event/type/type.ts

@@ -1,138 +0,0 @@
-import { ReactTestInstance } from 'react-test-renderer';
-import { isHostTextInput } from '../../helpers/host-component-names';
-import { EventBuilder } from '../event-builder';
-import { ErrorWithStack } from '../../helpers/errors';
-import { isPointerEventEnabled } from '../../helpers/pointer-events';
-import { UserEventConfig, UserEventInstance } from '../setup';
-import { dispatchEvent, wait, getTextContentSize } from '../utils';
-
-import { parseKeys } from './parseKeys';
-
-export interface TypeOptions {
-  skipPress?: boolean;
-  submitEditing?: 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
-    );
-  }
-
-  // Skip events if the element is disabled
-  if (element.props.editable === false || !isPointerEventEnabled(element)) {
-    return;
-  }
-
-  const keys = parseKeys(text);
-
-  if (!options?.skipPress) {
-    dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
-  }
-
-  dispatchEvent(element, 'focus', EventBuilder.Common.focus());
-
-  if (!options?.skipPress) {
-    await wait(this.config);
-    dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
-  }
-
-  let currentText = element.props.value ?? element.props.defaultValue ?? '';
-  for (const key of keys) {
-    const previousText = element.props.value ?? currentText;
-    currentText = applyKey(previousText, key);
-
-    await emitTypingEvents(
-      this.config,
-      element,
-      key,
-      currentText,
-      previousText
-    );
-  }
-
-  const finalText = element.props.value ?? currentText;
-  await wait(this.config);
-
-  if (options?.submitEditing) {
-    dispatchEvent(
-      element,
-      'submitEditing',
-      EventBuilder.TextInput.submitEditing(finalText)
-    );
-  }
-
-  dispatchEvent(
-    element,
-    'endEditing',
-    EventBuilder.TextInput.endEditing(finalText)
-  );
-
-  dispatchEvent(element, 'blur', EventBuilder.Common.blur());
-}
-
-export async function emitTypingEvents(
-  config: UserEventConfig,
-  element: ReactTestInstance,
-  key: string,
-  currentText: string,
-  previousText: string
-) {
-  const isMultiline = element.props.multiline === true;
-
-  await wait(config);
-  dispatchEvent(element, 'keyPress', EventBuilder.TextInput.keyPress(key));
-
-  // According to the docs only multiline TextInput emits textInput event
-  // @see: https://github.com/facebook/react-native/blob/42a2898617da1d7a98ef574a5b9e500681c8f738/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts#L754
-  if (isMultiline) {
-    dispatchEvent(
-      element,
-      'textInput',
-      EventBuilder.TextInput.textInput(currentText, previousText)
-    );
-  }
-
-  dispatchEvent(element, 'change', EventBuilder.TextInput.change(currentText));
-  dispatchEvent(element, 'changeText', currentText);
-
-  const selectionRange = {
-    start: currentText.length,
-    end: currentText.length,
-  };
-  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(currentText);
-    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;
-}

package/src/user-event/utils/__tests__/dispatch-event.test.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { Text } from 'react-native';
-import render from '../../../render';
-import { dispatchEvent } from '../dispatch-event';
-import { EventBuilder } from '../../event-builder';
-
-const TOUCH_EVENT = EventBuilder.Common.touch();
-
-describe('dispatchEvent', () => {
-  it('does dispatch event', () => {
-    const onPress = jest.fn();
-    const screen = render(<Text testID="text" onPress={onPress} />);
-
-    dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT);
-    expect(onPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not dispatch event to parent host component', () => {
-    const onPressParent = jest.fn();
-    const screen = render(
-      <Text onPress={onPressParent}>
-        <Text testID="text" />
-      </Text>
-    );
-
-    dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT);
-    expect(onPressParent).not.toHaveBeenCalled();
-  });
-
-  it('does NOT throw if no handler found', () => {
-    const screen = render(
-      <Text>
-        <Text testID="text" />
-      </Text>
-    );
-
-    expect(() =>
-      dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT)
-    ).not.toThrow();
-  });
-});