feat(events): allow custom events and handle onChangeText

Author: bcarroll22

examples/__tests__/input-event.js

@@ -38,26 +38,27 @@ const setup = () => {
 
 test('It should keep a $ in front of the input', () => {
   const { input } = setup();
-  fireEvent.change(input, { text: 23 });
+
+  fireEvent.change(input, { nativeEvent: { text: 23 } });
   expect(input.props.value).toBe('$23');
 });
 test('It should allow a $ to be in the input when the value is changed', () => {
   const { input } = setup();
-  fireEvent.change(input, { text: '$23.0' });
+  fireEvent.change(input, { nativeEvent: { text: '$23.0' } });
   expect(input.props.value).toBe('$23.0');
 });
 
 test('It should not allow letters to be inputted', () => {
   const { input } = setup();
   expect(input.props.value).toBe('');
-  fireEvent.change(input, { text: 'Good Day' });
+  fireEvent.change(input, { nativeEvent: { text: 'Good Day' } });
   expect(input.props.value).toBe('');
 });
 
 test('It should allow the $ to be deleted', () => {
   const { input } = setup();
-  fireEvent.change(input, { text: '23' });
+  fireEvent.change(input, { nativeEvent: { text: '23' } });
   expect(input.props.value).toBe('$23');
-  fireEvent.change(input, { text: '' });
+  fireEvent.change(input, { nativeEvent: { text: '' } });
   expect(input.props.value).toBe('');
 });

src/__tests__/events.js

@@ -11,17 +11,48 @@ test('onChange works', () => {
   expect(handleChange).toHaveBeenCalledTimes(1);
 });
 
+test('onChangeText works', () => {
+  function OnChangeText() {
+    const [text, setText] = React.useState('first');
+
+    return <TextInput onChangeText={setText} value={text} testID="input" />;
+  }
+
+  const { getByTestId } = render(<OnChangeText />);
+  const input = getByTestId('input');
+
+  expect(input.props.value).toBe('first');
+  fireEvent.changeText(input, 'second');
+  expect(input.props.value).toBe('second');
+});
+
 test('calling `fireEvent` directly works too', () => {
   const handleEvent = jest.fn();
   const { rootInstance } = render(<Button onPress={handleEvent} title="test" />);
+
   fireEvent(rootInstance, new NativeEvent('press'));
+  expect(handleEvent).toBeCalledTimes(1);
+});
+
+test('calling a custom event works as well', () => {
+  const event = { nativeEvent: { value: 'testing' } };
+  const onMyEvent = jest.fn(({ nativeEvent }) => expect(nativeEvent).toEqual({ value: 'testing' }));
+  const MyComponent = ({ onMyEvent }) => <TextInput value="test" onChange={onMyEvent} />;
+
+  const { rootInstance } = render(<MyComponent onMyEvent={onMyEvent} />);
+  fireEvent(rootInstance, new NativeEvent('myEvent', event));
+
+  expect(onMyEvent).toHaveBeenCalledWith({
+    nativeEvent: { value: 'testing' },
+    type: 'CustomEvent',
+  });
 });
 
 test('calling a handler when there is no valid target throws', () => {
-  const spy = jest.fn();
-  const { getByTestId } = render(<Image onPress={spy} testID="image" />);
+  const handleEvent = jest.fn();
+  const { getByTestId } = render(<Image onPress={handleEvent} testID="image" />);
   expect(() => fireEvent.press(getByTestId('image'))).toThrow();
-  expect(spy).toBeCalledTimes(0);
+  expect(handleEvent).toBeCalledTimes(0);
 });
 
 test('calling an event that has no defined handler throws', () => {
@@ -30,8 +61,8 @@ test('calling an event that has no defined handler throws', () => {
 });
 
 test('calling an event sets nativeEvent properly', () => {
-  const event = { value: 'testing' };
-  const onChange = jest.fn(({ nativeEvent }) => expect(nativeEvent).toEqual(event));
+  const event = { nativeEvent: { value: 'testing' } };
+  const onChange = jest.fn(({ nativeEvent }) => expect(nativeEvent).toEqual({ value: 'testing' }));
 
   const { getByValue } = render(<TextInput value="test" onChange={onChange} />);
   fireEvent.change(getByValue('test'), event);

src/events.js

@@ -33,6 +33,10 @@ const eventMap = {
       'TextInput',
     ],
   },
+  changeText: {
+    type: 'ChangeEvent',
+    validTargets: ['TextInput'],
+  },
   contentSizeChange: {
     type: 'ContentSizeChangeEvent',
     validTargets: ['VirtualizedList', 'FlatList', 'SectionList', 'TextInput', 'ScrollView'],
@@ -190,16 +194,22 @@ const eventMap = {
     type: 'SyntheticEvent',
     validTargets: ['Image'],
   },
+
+  // Custom events, like a component onWhatever callback
+  custom: {
+    type: 'CustomEvent',
+    validTargets: [],
+  },
 };
 
 class NativeEvent {
-  constructor(typeArg, eventInit = {}) {
-    const config = eventMap[typeArg];
+  constructor(typeArg, event = {}) {
+    const config = eventMap[typeArg] || eventMap.custom;
+    const { validTargets = [], ...rest } = event;
 
     this.typeArg = typeArg;
-    this.nativeEvent = eventInit;
-    this.type = config.type;
-    this.validTargets = config.validTargets;
+    this.event = typeof event === 'object' ? { type: config.type, ...rest } : event;
+    this.validTargets = [...config.validTargets, ...validTargets];
   }
 
   set target(target) {
@@ -216,11 +226,11 @@ function getEventHandlerName(key) {
 }
 
 function isValidTarget(element, event) {
-  return (
-    event.validTargets.includes(element.type) ||
-    event.validTargets.includes(element.type.name) ||
-    event.validTargets.includes(element.type.displayName)
-  );
+  return event.validTargets.length
+    ? event.validTargets.includes(element.type) ||
+        event.validTargets.includes(element.type.name) ||
+        event.validTargets.includes(element.type.displayName)
+    : true;
 }
 
 function findEventHandler(element, event) {
@@ -242,7 +252,7 @@ function findEventHandler(element, event) {
 function fireEvent(element, event) {
   event.target = findEventHandler(element, event);
 
-  return event.target(event);
+  return event.target(event.event);
 }
 
 Object.keys(eventMap).forEach(key => {