refactor: self code review

Author: mdjastrzebski

src/fire-event.ts

@@ -121,9 +121,7 @@ type EventName = StringWithAutocomplete<
 >;
 
 function fireEvent(element: ReactTestInstance, eventName: EventName, ...data: unknown[]) {
-  if (eventName === 'changeText' && isHostTextInput(element) && typeof data[0] === 'string') {
-    nativeState?.elementValues.set(element, data[0]);
-  }
+  setNativeStateIfNeeded(element, eventName, data[0]);
 
   const handler = findEventHandler(element, eventName);
   if (!handler) {
@@ -148,3 +146,14 @@ fireEvent.scroll = (element: ReactTestInstance, ...data: unknown[]) =>
   fireEvent(element, 'scroll', ...data);
 
 export default fireEvent;
+
+function setNativeStateIfNeeded(element: ReactTestInstance, eventName: string, value: unknown) {
+  if (
+    eventName === 'changeText' &&
+    typeof value === 'string' &&
+    isHostTextInput(element) &&
+    isTextInputEditable(element)
+  ) {
+    nativeState?.elementValues.set(element, value);
+  }
+}

src/native-state.ts

@@ -1,5 +1,10 @@
 import { ReactTestInstance } from 'react-test-renderer';
 
+/**
+ * Simulated native state for unmanaged controls.
+ *
+ * Values from `value` props (managed controls) should take precedence over these values.
+ */
 export type NativeState = {
   elementValues: WeakMap<ReactTestInstance, string>;
 };

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TextInput, TextInputProps, View } from 'react-native';
 import { createEventLogger, getEventsNames } from '../../test-utils';
 import { render, userEvent, screen } from '../..';
+import '../../matchers/extend-expect';
 
 beforeEach(() => {
   jest.useRealTimers();
@@ -205,4 +206,16 @@ describe('clear()', () => {
     await user.clear(screen.getByTestId('input'));
     expect(parentHandler).not.toHaveBeenCalled();
   });
+
+  it('sets native state value for unmanaged text inputs', async () => {
+    render(<TextInput testID="input" />);
+
+    const user = userEvent.setup();
+    const input = screen.getByTestId('input');
+    await user.type(input, 'abc');
+    expect(input).toHaveDisplayValue('abc');
+
+    await user.clear(input);
+    expect(input).toHaveDisplayValue('');
+  });
 });

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TextInput, TextInputProps, View } from 'react-native';
 import { createEventLogger, getEventsNames } from '../../test-utils';
 import { render, userEvent, screen } from '../..';
+import '../../matchers/extend-expect';
 
 beforeEach(() => {
   jest.useRealTimers();
@@ -221,4 +222,15 @@ describe('paste()', () => {
     await user.paste(screen.getByTestId('input'), 'Hi!');
     expect(parentHandler).not.toHaveBeenCalled();
   });
+
+  it('sets native state value for unmanaged text inputs', async () => {
+    render(<TextInput testID="input" />);
+
+    const user = userEvent.setup();
+    const input = screen.getByTestId('input');
+    expect(input).toHaveDisplayValue('');
+
+    await user.paste(input, 'abc');
+    expect(input).toHaveDisplayValue('abc');
+  });
 });

src/user-event/paste.ts

@@ -3,6 +3,7 @@ import { ErrorWithStack } from '../helpers/errors';
 import { isHostTextInput } from '../helpers/host-component-names';
 import { isPointerEventEnabled } from '../helpers/pointer-events';
 import { isTextInputEditable } from '../helpers/text-input';
+import { nativeState } from '../native-state';
 import { EventBuilder } from './event-builder';
 import { UserEventInstance } from './setup';
 import { dispatchEvent, getTextContentSize, wait } from './utils';
@@ -32,6 +33,7 @@ export async function paste(
   dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(rangeToClear));
 
   // 3. Paste the text
+  nativeState?.elementValues.set(element, text);
   dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
   dispatchEvent(element, 'changeText', text);
 

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

@@ -374,7 +374,7 @@ describe('type()', () => {
     });
   });
 
-  it('supports value of unmanaged text inputs', async () => {
+  it('sets native state value for unmanaged text inputs', async () => {
     render(<TextInput testID="input" />);
 
     const user = userEvent.setup();

src/user-event/type/type.ts

@@ -95,9 +95,9 @@ export async function emitTypingEvents(
     return;
   }
 
+  nativeState?.elementValues.set(element, text);
   dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
   dispatchEvent(element, 'changeText', text);
-  nativeState?.elementValues.set(element, text);
 
   const selectionRange = {
     start: text.length,