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 Jastrzębski <mdjastrzebski@gmail.com>
callstack · Aug 9, 2024 · 6a51a81 · 6a51a81
1 parent 6cc4c0c
commit 6a51a81
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 88 deletions.
diff --git a/.codecov.yml b/.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
diff --git a/src/test-utils/events.ts b/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;
+}
diff --git a/src/user-event/__tests__/clear.test.tsx b/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();
  });

diff --git a/src/user-event/clear.ts b/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);

diff --git a/src/user-event/press/__tests__/press.real-timers.test.tsx b/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 () => {

diff --git a/src/user-event/press/__tests__/press.test.tsx b/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 () => {

diff --git a/src/user-event/type/__tests__/type-managed.test.tsx b/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',