fix: getByDisplayValue not checking TextInput's defaultValue (#656)

* fix: make getByDisplayValue check the default value of text inputs

* fix: make getByDisplayValue only use defaultValue if value is undefined

if the value of TextInput is an empty string, then the TextInput will not use the defaultValue and display the empty string. Our tests now do the same

Author: MattAgn

src/__tests__/__snapshots__/render.test.js.snap

@@ -20,12 +20,26 @@ exports[`debug 1`] = `
   />
   <TextInput
     allowFontScaling={true}
+    defaultValue=\\"What did you inspect?\\"
     placeholder=\\"Who inspected freshness?\\"
     rejectResponderTermination={true}
     testID=\\"bananaChef\\"
     underlineColorAndroid=\\"transparent\\"
     value=\\"I inspected freshie\\"
   />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"What banana?\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+  />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"hello\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+    value=\\"\\"
+  />
   <View
     accessible={true}
     focusable={true}
@@ -82,12 +96,26 @@ exports[`debug changing component: bananaFresh button message should now be "fre
   />
   <TextInput
     allowFontScaling={true}
+    defaultValue=\\"What did you inspect?\\"
     placeholder=\\"Who inspected freshness?\\"
     rejectResponderTermination={true}
     testID=\\"bananaChef\\"
     underlineColorAndroid=\\"transparent\\"
     value=\\"I inspected freshie\\"
   />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"What banana?\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+  />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"hello\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+    value=\\"\\"
+  />
   <View
     accessible={true}
     focusable={true}
@@ -144,12 +172,26 @@ exports[`debug: shallow 1`] = `
   />
   <TextInput
     allowFontScaling={true}
+    defaultValue=\\"What did you inspect?\\"
     placeholder=\\"Who inspected freshness?\\"
     rejectResponderTermination={true}
     testID=\\"bananaChef\\"
     underlineColorAndroid=\\"transparent\\"
     value=\\"I inspected freshie\\"
   />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"What banana?\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+  />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"hello\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+    value=\\"\\"
+  />
   <MyButton
     onPress={[Function anonymous]}
     type=\\"primary\\"
@@ -194,12 +236,26 @@ exports[`debug: shallow with message 1`] = `
   />
   <TextInput
     allowFontScaling={true}
+    defaultValue=\\"What did you inspect?\\"
     placeholder=\\"Who inspected freshness?\\"
     rejectResponderTermination={true}
     testID=\\"bananaChef\\"
     underlineColorAndroid=\\"transparent\\"
     value=\\"I inspected freshie\\"
   />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"What banana?\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+  />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"hello\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+    value=\\"\\"
+  />
   <MyButton
     onPress={[Function anonymous]}
     type=\\"primary\\"
@@ -244,12 +300,26 @@ exports[`debug: with message 1`] = `
   />
   <TextInput
     allowFontScaling={true}
+    defaultValue=\\"What did you inspect?\\"
     placeholder=\\"Who inspected freshness?\\"
     rejectResponderTermination={true}
     testID=\\"bananaChef\\"
     underlineColorAndroid=\\"transparent\\"
     value=\\"I inspected freshie\\"
   />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"What banana?\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+  />
+  <TextInput
+    allowFontScaling={true}
+    defaultValue=\\"hello\\"
+    rejectResponderTermination={true}
+    underlineColorAndroid=\\"transparent\\"
+    value=\\"\\"
+  />
   <View
     accessible={true}
     focusable={true}

src/__tests__/render.test.js

@@ -16,6 +16,8 @@ const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
 const INPUT_FRESHNESS = 'Custom Freshie';
 const INPUT_CHEF = 'I inspected freshie';
+const DEFAULT_INPUT_CHEF = 'What did you inspect?';
+const DEFAULT_INPUT_CUSTOMER = 'What banana?';
 
 class MyButton extends React.Component<any> {
   render() {
@@ -67,7 +69,10 @@ class Banana extends React.Component<any, any> {
           testID="bananaChef"
           placeholder={PLACEHOLDER_CHEF}
           value={INPUT_CHEF}
+          defaultValue={DEFAULT_INPUT_CHEF}
         />
+        <TextInput defaultValue={DEFAULT_INPUT_CUSTOMER} />
+        <TextInput defaultValue={'hello'} value="" />
         <MyButton onPress={this.changeFresh} type="primary">
           Change freshness!
         </MyButton>
@@ -201,6 +206,18 @@ test('getByDisplayValue, queryByDisplayValue', () => {
   expect(() => queryByDisplayValue(/fresh/i)).toThrow('Expected 1 but found 2');
 });
 
+test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
+  expect(() => getByDisplayValue(DEFAULT_INPUT_CHEF)).toThrow();
+  expect(queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull();
+
+  expect(() => getByDisplayValue('hello')).toThrow();
+  expect(queryByDisplayValue('hello')).toBeNull();
+
+  expect(getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
+  expect(queryByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
+});
+
 test('getAllByDisplayValue, queryAllByDisplayValue', () => {
   const { getAllByDisplayValue, queryAllByDisplayValue } = render(<Banana />);
   const inputs = getAllByDisplayValue(/fresh/i);

src/helpers/getByAPI.js

@@ -107,11 +107,13 @@ const getTextInputNodeByPlaceholderText = (node, placeholder) => {
 const getTextInputNodeByDisplayValue = (node, value) => {
   try {
     const { TextInput } = require('react-native');
+    const nodeValue =
+      node.props.value !== undefined
+        ? node.props.value
+        : node.props.defaultValue;
     return (
       filterNodeByType(node, TextInput) &&
-      (typeof value === 'string'
-        ? value === node.props.value
-        : value.test(node.props.value))
+      (typeof value === 'string' ? value === nodeValue : value.test(nodeValue))
     );
   } catch (error) {
     throw createLibraryNotSupportedError(error);