@testing-library/react-native 12.1.3 → 12.2.0

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

@@ -0,0 +1,121 @@
+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();
+  jest.clearAllMocks();
+});
+
+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,51 +1,318 @@
 import * as React from 'react';
-import { TextInput } from 'react-native';
-import { createEventLogger } from '../../../test-utils';
+import { View, TextInput, TextInputProps } from 'react-native';
+import { createEventLogger } from '../../../test-utils/events';
 import { render } from '../../..';
 import { userEvent } from '../..';
 
-describe('user.type()', () => {
-  it('dispatches required events', async () => {
-    const { events, logEvent } = createEventLogger();
+beforeEach(() => {
+  jest.useRealTimers();
+  jest.clearAllMocks();
+});
+
+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();
-    const screen = render(
-      <TextInput
-        testID="input"
-        onChangeText={logEvent('changeText')}
-        onFocus={logEvent('focus')}
-        onBlur={logEvent('blur')}
-      />
+    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"'
     );
+  });
 
-    await user.type(screen.getByTestId('input'), 'Hello World!');
+  it('supports multiline', async () => {
+    const { events, ...queries } = renderTextInputWithToolkit({
+      multiline: true,
+    });
 
-    const eventNames = events.map((event) => event.name);
-    expect(eventNames).toEqual(['focus', 'changeText', 'blur']);
-    expect(events).toMatchSnapshot();
+    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');
   });
 
-  it('supports direct access', async () => {
+  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')}
-        onFocus={logEvent('focus')}
-        onBlur={logEvent('blur')}
+        onEndEditing={logEvent('endEditing')}
       />
     );
 
-    await userEvent.type(screen.getByTestId('input'), 'Hello World!');
+    const user = userEvent.setup();
+    await user.type(screen.getByTestId('input'), 'abc');
 
-    const eventNames = events.map((event) => event.name);
-    expect(eventNames).toEqual(['focus', 'changeText', 'blur']);
+    const eventNames = events.map((e) => e.name);
+    expect(eventNames).toEqual([
+      'changeText',
+      'changeText',
+      'changeText',
+      'endEditing',
+    ]);
+
+    expect(events).toMatchSnapshot('input: "abc"');
   });
 
-  it.each(['modern', 'legacy'])('works with fake %s timers', async (type) => {
-    jest.useFakeTimers({ legacyFakeTimers: type === 'legacy' });
+  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 { events, logEvent } = createEventLogger();
     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"
@@ -55,9 +322,15 @@ describe('user.type()', () => {
       />
     );
 
-    await user.type(screen.getByTestId('input'), 'Hello World!');
+    await userEvent.type(screen.getByTestId('input'), 'abc');
 
     const eventNames = events.map((event) => event.name);
-    expect(eventNames).toEqual(['focus', 'changeText', 'blur']);
+    expect(eventNames).toEqual([
+      'focus',
+      'changeText',
+      'changeText',
+      'changeText',
+      'blur',
+    ]);
   });
 });

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

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

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

@@ -0,0 +1,41 @@
+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,20 +1,135 @@
 import { ReactTestInstance } from 'react-test-renderer';
-import { UserEventInstance } from '../setup';
-import { dispatchHostEvent, wait } from '../utils';
+import { isHostTextInput } from '../../helpers/host-component-names';
 import { EventBuilder } from '../event-builder';
+import { ErrorWithStack } from '../../helpers/errors';
+import { isPointerEventEnabled } from '../../helpers/pointer-events';
+import { UserEventInstance } from '../setup';
+import {
+  dispatchEvent,
+  wait,
+  getTextRange,
+  getTextContentSize,
+} from '../utils';
+
+import { parseKeys } from './parseKeys';
+
+export interface TypeOptions {
+  skipPress?: boolean;
+  submitEditing?: boolean;
+}
 
 export async function type(
   this: UserEventInstance,
   element: ReactTestInstance,
-  text: string
-) {
-  // TODO provide real implementation
-  await wait(this.config);
-  dispatchHostEvent(element, 'focus', EventBuilder.Common.focus());
+  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
+    );
+  }
 
-  await wait(this.config);
-  dispatchHostEvent(element, 'changeText', text);
+  // 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 wait(this.config);
+    emitTypingEvents(element, key, currentText, previousText);
+  }
+
+  const finalText = element.props.value ?? currentText;
 
   await wait(this.config);
-  dispatchHostEvent(element, 'blur', EventBuilder.Common.blur());
+
+  if (options?.submitEditing) {
+    dispatchEvent(
+      element,
+      'submitEditing',
+      EventBuilder.TextInput.submitEditing(finalText)
+    );
+  }
+
+  dispatchEvent(
+    element,
+    'endEditing',
+    EventBuilder.TextInput.endEditing(finalText)
+  );
+
+  dispatchEvent(element, 'blur', EventBuilder.Common.blur());
+}
+
+async function emitTypingEvents(
+  element: ReactTestInstance,
+  key: string,
+  currentText: string,
+  previousText: string
+) {
+  const isMultiline = element.props.multiline === true;
+
+  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 = getTextRange(currentText);
+  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;
 }