Add missing testIDs (#549)

Author: M-i-k-e-l

demo/src/screens/MainScreen.js

@@ -44,6 +44,7 @@ export default class MainScreen extends Component {
     const navigationStyle = this.getSearchNavigationStyle();
     navigationStyle.topBar.rightButtons.push({
       id: 'uilib.settingsButton',
+      testID: 'uilib.settingsButton',
       enabled: true,
       icon: Assets.icons.settings,
     });
@@ -73,6 +74,7 @@ export default class MainScreen extends Component {
         rightButtons: [
           {
             id: 'uilib.searchButton',
+            testID: 'uilib.searchButton',
             enabled: true,
             icon: Assets.icons.search,
           },
@@ -199,7 +201,7 @@ export default class MainScreen extends Component {
         <TextField
           ref={r => (this.input = r)}
           value={this.state.filterText}
-          placeholder="Search your component.."
+          placeholder="Search for your component..."
           onChangeText={this.filterExplorerScreens}
           onBlur={this.onSearchBoxBlur}
           style={{
@@ -211,6 +213,7 @@ export default class MainScreen extends Component {
           hideUnderline
         />
         <Button
+          testID={'SearchButton'}
           style={{marginRight: 16, marginTop: Constants.isIOS ? Constants.statusBarHeight : 0}}
           iconSource={Assets.icons.search}
           size={'small'}

demo/src/screens/SettingsScreen.js

@@ -71,6 +71,7 @@ class SettingsScreen extends Component {
             Set default screen to open on app startup
           </Text>
           <Picker
+            testID={'uilib.defaultScreenPicker'}
             placeholder="Pick default screen..."
             showSearch
             value={defaultScreen}

src/components/picker/PickerModal.js

@@ -46,7 +46,7 @@ class PickerModal extends BaseComponent {
   }
 
   renderSearchInput() {
-    const {showSearch, searchStyle, searchPlaceholder, onSearchChange, renderCustomSearch} = this.props;
+    const {showSearch, searchStyle, searchPlaceholder, onSearchChange, renderCustomSearch, testID} = this.props;
 
     if (showSearch) {
       if (_.isFunction(renderCustomSearch)) {
@@ -57,6 +57,7 @@ class PickerModal extends BaseComponent {
         <View style={this.styles.searchInputContainer}>
           <Image style={this.styles.searchIcon} source={Assets.icons.search}/>
           <TextInput
+            testID={testID}
             ref={r => (this.search = r)}
             style={[this.styles.searchInput, {color: searchStyle.color}]}
             placeholderTextColor={searchStyle.placeholderTextColor}

src/components/picker/index.js

@@ -262,7 +262,8 @@ class Picker extends BaseComponent {
       searchPlaceholder,
       renderCustomSearch,
       renderCustomModal,
-      listProps
+      listProps,
+      testID
     } = this.getThemeProps();
     const {showExpandableModal, selectedItemPosition} = this.state;
     const children = this.appendPropsToChildren(this.props.children);
@@ -279,6 +280,7 @@ class Picker extends BaseComponent {
 
     return (
       <PickerModal
+        testID={`${testID}.modal`}
         visible={showExpandableModal}
         scrollPosition={selectedItemPosition}
         enableModalBlur={enableModalBlur}