fix: Respect maxLength prop in type() function (#1641)

* fix: Respect maxLength prop in type() function

This commit modifies the `type()` function to respect the `maxLength` prop of the input element. If the current text length exceeds the `maxLength` value, typing events will not be emitted. This ensures that the input value does not exceed the specified maximum length.

1. Create an input element with a `maxLength` prop.
2. Use the `type()` function to input text that exceeds the `maxLength` value.
3. Verify that the input value does not exceed the specified maximum length.
4. Check that no typing events are emitted once the `maxLength` is reached.

Additionally, see that `yarn test` passes with an additional test added to `src/user-event/type/__tests__/type.test.tsx`

* refactor: code review changes

* refactor: tweaks

* refactor: final tweaks

* refactor: final tweaks 2

* chore: tweak codecov

---------

Co-authored-by: Maciej Jastrzębski <mdjastrzebski@gmail.com>

Author: joshuayoes

.codecov.yml

@@ -2,8 +2,12 @@ coverage:
   precision: 2
   round: down
   range: 70...100
+  status:
+    project:
+      default:
+        threshold: 0.5%  # Allowable coverage drop in percentage points
 
 comment:
   behavior: default
   require_changes: false
-  require_base: no
+  require_base: false

src/test-utils/events.ts

@@ -19,6 +19,10 @@ export function createEventLogger() {
   return { events, logEvent };
 }
 
-export function getEventsName(events: EventEntry[]) {
+export function getEventsNames(events: EventEntry[]) {
   return events.map((event) => event.name);
 }
+
+export function lastEventPayload(events: EventEntry[], name: string) {
+  return events.filter((e) => e.name === name).pop()?.payload;
+}

src/user-event/__tests__/clear.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextInput, TextInputProps, View } from 'react-native';
-import { createEventLogger } from '../../test-utils';
+import { createEventLogger, getEventsNames } from '../../test-utils';
 import { render, userEvent, screen } from '../..';
 
 beforeEach(() => {
@@ -47,8 +47,7 @@ describe('clear()', () => {
     const user = userEvent.setup();
     await user.clear(textInput);
 
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
+    expect(getEventsNames(events)).toEqual([
       'focus',
       'selectionChange',
       'keyPress',
@@ -71,8 +70,7 @@ describe('clear()', () => {
     const user = userEvent.setup();
     await user.clear(textInput);
 
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
+    expect(getEventsNames(events)).toEqual([
       'focus',
       'selectionChange',
       'keyPress',
@@ -92,8 +90,7 @@ describe('clear()', () => {
     const user = userEvent.setup();
     await user.clear(textInput);
 
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
+    expect(getEventsNames(events)).toEqual([
       'focus',
       'selectionChange',
       'keyPress',
@@ -140,8 +137,7 @@ describe('clear()', () => {
     const user = userEvent.setup();
     await user.clear(textInput);
 
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
+    expect(getEventsNames(events)).toEqual([
       'focus',
       'selectionChange',
       'keyPress',
@@ -170,8 +166,7 @@ describe('clear()', () => {
     const user = userEvent.setup();
     await user.clear(screen.getByTestId('input'));
 
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual(['changeText', 'endEditing']);
+    expect(getEventsNames(events)).toEqual(['changeText', 'endEditing']);
 
     expect(events).toMatchSnapshot();
   });

src/user-event/clear.ts

@@ -31,9 +31,14 @@ export async function clear(this: UserEventInstance, element: ReactTestInstance)
   };
   dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(selectionRange));
 
-  // 3. Press backspace
+  // 3. Press backspace with selected text
   const finalText = '';
-  await emitTypingEvents(this.config, element, 'Backspace', finalText, previousText);
+  await emitTypingEvents(element, {
+    config: this.config,
+    key: 'Backspace',
+    text: finalText,
+    previousText,
+  });
 
   // 4. Exit element
   await wait(this.config);

src/user-event/press/__tests__/press.real-timers.test.tsx

@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { createEventLogger, getEventsName } from '../../../test-utils';
+import { createEventLogger, getEventsNames } from '../../../test-utils';
 import { render, screen } from '../../..';
 import { userEvent } from '../..';
 import * as WarnAboutRealTimers from '../../utils/warn-about-real-timers';
@@ -34,7 +34,7 @@ describe('userEvent.press with real timers', () => {
     );
     await user.press(screen.getByTestId('pressable'));
 
-    expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
   });
 
   test('does not trigger event when pressable is disabled', async () => {
@@ -130,7 +130,7 @@ describe('userEvent.press with real timers', () => {
     );
     await user.press(screen.getByTestId('pressable'));
 
-    expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
   });
 
   test('crawls up in the tree to find an element that responds to touch events', async () => {
@@ -200,7 +200,7 @@ describe('userEvent.press with real timers', () => {
     );
     await userEvent.press(screen.getByText('press me'));
 
-    expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
   });
 
   test('does not trigger on disabled Text', async () => {
@@ -254,7 +254,7 @@ describe('userEvent.press with real timers', () => {
     );
     await userEvent.press(screen.getByPlaceholderText('email'));
 
-    expect(getEventsName(events)).toEqual(['pressIn', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut']);
   });
 
   test('does not call onPressIn and onPressOut on non editable TetInput', async () => {

src/user-event/press/__tests__/press.test.tsx

@@ -8,7 +8,7 @@ import {
   View,
   Button,
 } from 'react-native';
-import { createEventLogger, getEventsName } from '../../../test-utils';
+import { createEventLogger, getEventsNames } from '../../../test-utils';
 import { render, screen } from '../../..';
 import { userEvent } from '../..';
 
@@ -129,7 +129,7 @@ describe('userEvent.press with fake timers', () => {
     );
     await user.press(screen.getByTestId('pressable'));
 
-    expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
   });
 
   test('crawls up in the tree to find an element that responds to touch events', async () => {
@@ -199,7 +199,7 @@ describe('userEvent.press with fake timers', () => {
     );
 
     await userEvent.press(screen.getByText('press me'));
-    expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
   });
 
   test('press works on Button', async () => {
@@ -208,7 +208,7 @@ describe('userEvent.press with fake timers', () => {
     render(<Button title="press me" onPress={logEvent('press')} />);
 
     await userEvent.press(screen.getByText('press me'));
-    expect(getEventsName(events)).toEqual(['press']);
+    expect(getEventsNames(events)).toEqual(['press']);
   });
 
   test('longPress works Text', async () => {
@@ -226,7 +226,7 @@ describe('userEvent.press with fake timers', () => {
     );
 
     await userEvent.longPress(screen.getByText('press me'));
-    expect(getEventsName(events)).toEqual(['pressIn', 'longPress', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'longPress', 'pressOut']);
   });
 
   test('does not trigger on disabled Text', async () => {
@@ -280,7 +280,7 @@ describe('userEvent.press with fake timers', () => {
     );
 
     await userEvent.press(screen.getByPlaceholderText('email'));
-    expect(getEventsName(events)).toEqual(['pressIn', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut']);
   });
 
   test('longPress works on TextInput', async () => {
@@ -295,7 +295,7 @@ describe('userEvent.press with fake timers', () => {
     );
 
     await userEvent.longPress(screen.getByPlaceholderText('email'));
-    expect(getEventsName(events)).toEqual(['pressIn', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut']);
   });
 
   test('does not call onPressIn and onPressOut on non editable TextInput', async () => {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextInput } from 'react-native';
-import { createEventLogger } from '../../../test-utils';
+import { createEventLogger, getEventsNames } from '../../../test-utils';
 import { render, screen } from '../../..';
 import { userEvent } from '../..';
 
@@ -56,8 +56,7 @@ describe('type() for managed TextInput', () => {
     const user = userEvent.setup();
     await user.type(screen.getByTestId('input'), 'Wow');
 
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
+    expect(getEventsNames(events)).toEqual([
       'pressIn',
       'focus',
       'pressOut',
@@ -90,8 +89,7 @@ describe('type() for managed TextInput', () => {
     const user = userEvent.setup();
     await user.type(screen.getByTestId('input'), 'ABC');
 
-    const eventNames = events.map((e) => e.name);
-    expect(eventNames).toEqual([
+    expect(getEventsNames(events)).toEqual([
       'pressIn',
       'focus',
       'pressOut',