3.0.0-beta.2

Author: Brandon Carroll

src/lib/__tests__/get-by-errors.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextInput, View } from 'react-native';
+import { Button, Text, TextInput, View } from 'react-native';
 import cases from 'jest-in-case';
 
 import { render } from '../';
@@ -83,6 +83,15 @@ cases(
         </View>
       ),
     },
+    getByTitle: {
+      query: /his/,
+      tree: (
+        <View>
+          <Button title="his" />
+          <Button title="history" />
+        </View>
+      ),
+    },
     getByValue: {
       query: /his/,
       tree: (
@@ -174,6 +183,15 @@ cases(
         </View>
       ),
     },
+    queryByTitle: {
+      query: /his/,
+      tree: (
+        <View>
+          <Button title="his" />
+          <Button title="history" />
+        </View>
+      ),
+    },
     queryByValue: {
       query: /his/,
       tree: (

src/lib/__tests__/misc.js

@@ -1,11 +1,8 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Picker, View } from 'react-native';
 
-import { render } from '../';
-import { queryByProp, queryByTestId } from '../';
+import { fireEvent, render, queryByProp, queryByTestId } from '../';
 
-// we used to use queryByProp internally, but we don't anymore. Some people
-// use it as an undocumented part of the API, so we'll keep it around.
 test('queryByProp', () => {
   const { container } = render(
     <View>
@@ -22,33 +19,19 @@ test('queryByProp', () => {
   );
 });
 
-test('toJSON stuff', () => {
-  function Inner({ children, greeting }) {
-    return (
-      <Text>
-        {greeting} {children}
-      </Text>
-    );
-  }
-
+test('picker', () => {
   function Wrapper() {
+    const [value, setValue] = React.useState('js');
+
     return (
-      <View>
-        <View>
-          <Inner greeting="hello">world</Inner>
-        </View>
-      </View>
+      <Picker selectedValue={value} onValueChange={itemValue => setValue(itemValue)}>
+        <Picker.Item label="Java" value="java" />
+        <Picker.Item label="JavaScript" value="js" />
+      </Picker>
     );
   }
+  const { findByValue, getByValue } = render(<Wrapper />);
 
-  const { baseElement } = render(<Wrapper />);
-
-  toJSON(baseElement);
+  fireEvent.valueChange(getByValue('js'), 'java');
+  expect(() => findByValue('js')).not.toThrow();
 });
-
-function toJSON(node) {
-  if (typeof node === 'string') return node;
-
-  if (node.type !== 'string') {
-  }
-}

src/lib/__tests__/queries.find.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, Text, TextInput, View } from 'react-native';
+import { Button, Image, Text, TextInput, View } from 'react-native';
 
 import { render } from '../.';
 
@@ -13,6 +13,7 @@ test('find asynchronously finds elements', async () => {
     findAllByPlaceholder,
     findAllByTestId,
     findAllByText,
+    findAllByTitle,
     findAllByValue,
     findByA11yHint,
     findByA11yLabel,
@@ -22,12 +23,14 @@ test('find asynchronously finds elements', async () => {
     findByPlaceholder,
     findByTestId,
     findByText,
+    findByTitle,
     findByValue,
   } = render(
     <View>
       <Text testID="test-id" accessibilityRole="text">
         test text content
       </Text>
+      <Button title="button" />
       <TextInput placeholder="placeholder" />
       <TextInput value="value" />
       <TextInput accessibilityStates={['disabled']} />
@@ -56,6 +59,9 @@ test('find asynchronously finds elements', async () => {
   await expect(findByText('test text content')).resolves.toBeTruthy();
   await expect(findAllByText('test text content')).resolves.toHaveLength(1);
 
+  await expect(findByTitle('button')).resolves.toBeTruthy();
+  await expect(findAllByTitle('button')).resolves.toHaveLength(1);
+
   await expect(findByA11yRole('text')).resolves.toBeTruthy();
   await expect(findAllByA11yRole('text')).resolves.toHaveLength(1);
 
@@ -76,6 +82,7 @@ test('find rejects when something cannot be found', async () => {
     findAllByPlaceholder,
     findAllByTestId,
     findAllByText,
+    findAllByTitle,
     findAllByValue,
     findByA11yHint,
     findByA11yLabel,
@@ -85,6 +92,7 @@ test('find rejects when something cannot be found', async () => {
     findByPlaceholder,
     findByTestId,
     findByText,
+    findByTitle,
     findByValue,
   } = render(<View />);
 
@@ -112,6 +120,9 @@ test('find rejects when something cannot be found', async () => {
   await expect(findByText('x', qo, wo)).rejects.toThrow('x');
   await expect(findAllByText('x', qo, wo)).rejects.toThrow('x');
 
+  await expect(findByTitle('x', qo, wo)).rejects.toThrow('x');
+  await expect(findAllByTitle('x', qo, wo)).rejects.toThrow('x');
+
   await expect(findByValue('x', qo, wo)).rejects.toThrow('x');
   await expect(findAllByValue('x', qo, wo)).rejects.toThrow('x');
 

src/lib/events.js

@@ -27,6 +27,10 @@ const eventMap = {
     type: 'ChangeEvent',
     validTargets: ['TextInput'],
   },
+  valueChange: {
+    type: 'ChangeEvent',
+    validTargets: ['Picker'],
+  },
   contentSizeChange: {
     type: 'ContentSizeChangeEvent',
     validTargets: ['VirtualizedList', 'FlatList', 'SectionList', 'TextInput', 'ScrollView'],
@@ -51,7 +55,6 @@ const eventMap = {
       'DrawerLayoutAndroid',
       'Image',
       'Modal',
-      'Picker',
       'RefreshControl',
       'ScrollView',
       'Switch',
@@ -182,19 +185,19 @@ function getEventHandlerName(key) {
 }
 
 function validateElementType(list, element) {
-  return (
-    list.includes(element.type) ||
-    list.includes(element.type.name) ||
-    list.includes(element.type.displayName)
-  );
+  return list.includes(element.type) || list.includes(element.type.displayName);
 }
 
 function isValidTarget(element, event) {
   return event.validTargets.length ? validateElementType(event.validTargets, element) : true;
 }
 
 function isDisabled(element) {
-  return element.props.disabled && validateElementType(disableableElements, element);
+  const { accessibilityStates = [], disabled } = element.props;
+  const propDisabled = disabled;
+  const stateDisabled = Array.from(accessibilityStates).includes('disabled');
+
+  return (propDisabled || stateDisabled) && validateElementType(disableableElements, element);
 }
 
 function findEventHandler(element, event) {

src/lib/queries/text.js

@@ -17,15 +17,7 @@ function queryAllByText(
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
-  const baseArray = ['Text', 'TextInput'].reduce(
-    (accumulator, currentValue) => [
-      ...accumulator,
-      ...baseElement.findAll(n => n.type === currentValue),
-    ],
-    [],
-  );
-
-  return baseArray
+  return Array.from(baseElement.findAll(n => ['TextInput', 'Text'].includes(n.type)))
     .filter(node => matcher(getNodeText(node), node, text, matchNormalizer))
     .map(proxyUnsafeProperties);
 }

src/lib/queries/value.js

@@ -9,8 +9,14 @@ function queryAllByValue(
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
   const baseElement = getBaseElement(container);
-  return Array.from(baseElement.findAll(n => n.type === 'TextInput')).filter(node =>
-    matcher(node.props.value, node, value, matchNormalizer),
+  return Array.from(baseElement.findAll(n => ['TextInput', 'Picker'].includes(n.type))).filter(
+    node => {
+      if (node.type === 'Picker') {
+        return matcher(node.props.selectedValue, node, value, matchNormalizer);
+      }
+
+      return matcher(node.props.value, node, value, matchNormalizer);
+    },
   );
 }
 

src/preset/core-components.js

@@ -1,11 +1,9 @@
 const CoreComponents = [
   'ActivityIndicator',
-  'FAKE',
   'Button',
   'DrawerLayoutAndroid',
   'Image',
   'Modal',
-  'Picker',
   'RefreshControl',
   'ScrollView',
   'Switch',
@@ -23,7 +21,7 @@ function setCoreComponents(components) {
 }
 
 function getCoreComponents() {
-  return CoreComponents;
+  return [...CoreComponents, 'Picker'];
 }
 
 export { getCoreComponents, setCoreComponents };

src/preset/mock-component.js

@@ -57,4 +57,10 @@ getCoreComponents().forEach(component => {
   }
 });
 
+jest.doMock('Picker', () => {
+  const Picker = mockComponent('Picker');
+  Picker.Item = ({ children, ...props }) => React.createElement('Picker.Item', props, children);
+  return Picker;
+});
+
 export { mockComponent };

src/preset/require-native-component.js

@@ -4,8 +4,5 @@ require('./unmock');
 // Mock native modules
 require('./native-modules');
 
-// Mock requireNativeComponent
-require('./require-native-component');
-
 // Mock lean core components
 require('./mock-component');

src/preset/setup.js

@@ -8,5 +8,3 @@ getCoreComponents().forEach(component => {
     // do nothing if we can't
   }
 });
-
-jest.dontMock('requireNativeComponent');