Add testID to support end 2 end testing

.eslintrc

@@ -1,18 +1,19 @@
 {
   "extends": "airbnb",
-  "plugins": [
-      "react"
-  ],
+  "plugins": ["react"],
   "rules": {
-    "no-plusplus": [2, {
-      "allowForLoopAfterthoughts": true
-    }],
-    "react/jsx-filename-extension": [1, {
-      "extensions": [
-        ".js",
-        ".jsx"
-      ]
-    }],
+    "no-plusplus": [
+      2,
+      {
+        "allowForLoopAfterthoughts": true
+      }
+    ],
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".js", ".jsx"]
+      }
+    ],
     "import/no-extraneous-dependencies": 0
   },
   "env": {

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  bracketSpacing: true,
+  jsxBracketSameLine: true,
+  jsxSingleQuote: true,
+  singleQuote: true,
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+}

README.md

@@ -54,6 +54,7 @@ please refer to [react-native-vector-icons installation guide](https://github.co
 |**`selectedStar`**|`function`|A function to handle star button presses. |`Yes`|*`() => {}`*|
 |**`starSize`**|`number`|Size of the star. |`No`|`40`|
 |**`starStyle`**|`ViewPropTypes.style`|Style to apply to the star. |`No`|*`{}`*|
+|**`testID`**|`string`|Used to locate this view in end-to-end tests. |`No`|*`star_rating`*|
 
 For the `emptyStar`, `fullStar`, `halfStar`, and `iconSet` props, please refer to the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) package for the valid `string` names for the star icons. When selecting the icon `string` names, you must remember to remove the font family name before the first hyphen. For example, if you want to use the `ion-ios-star` from the Ionicon font set, you would set the `fullStar` prop to `ios-star` and the `iconSet` to `Ionicons`.
 

StarButton.js

@@ -1,22 +1,22 @@
 // React and react native imports
-import React, { Component } from 'react';
-import { Image, StyleSheet, ViewPropTypes } from 'react-native';
-import PropTypes from 'prop-types';
-import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import React, { Component } from 'react'
+import { Image, StyleSheet, ViewPropTypes } from 'react-native'
+import PropTypes from 'prop-types'
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons'
 
 // Third party imports
-import Button from 'react-native-button';
-import EntypoIcons from 'react-native-vector-icons/Entypo';
-import EvilIconsIcons from 'react-native-vector-icons/EvilIcons';
-import FeatherIcons from 'react-native-vector-icons/Feather';
-import FontAwesomeIcons from 'react-native-vector-icons/FontAwesome';
-import FoundationIcons from 'react-native-vector-icons/Foundation';
-import IoniconsIcons from 'react-native-vector-icons/Ionicons';
-import MaterialIconsIcons from 'react-native-vector-icons/MaterialIcons';
-import MaterialCommunityIconsIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import OcticonsIcons from 'react-native-vector-icons/Octicons';
-import ZocialIcons from 'react-native-vector-icons/Zocial';
-import SimpleLineIconsIcons from 'react-native-vector-icons/SimpleLineIcons';
+import Button from 'react-native-button'
+import EntypoIcons from 'react-native-vector-icons/Entypo'
+import EvilIconsIcons from 'react-native-vector-icons/EvilIcons'
+import FeatherIcons from 'react-native-vector-icons/Feather'
+import FontAwesomeIcons from 'react-native-vector-icons/FontAwesome'
+import FoundationIcons from 'react-native-vector-icons/Foundation'
+import IoniconsIcons from 'react-native-vector-icons/Ionicons'
+import MaterialIconsIcons from 'react-native-vector-icons/MaterialIcons'
+import MaterialCommunityIconsIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import OcticonsIcons from 'react-native-vector-icons/Octicons'
+import ZocialIcons from 'react-native-vector-icons/Zocial'
+import SimpleLineIconsIcons from 'react-native-vector-icons/SimpleLineIcons'
 
 const iconSets = {
   Entypo: EntypoIcons,
@@ -30,7 +30,7 @@ const iconSets = {
   Octicons: OcticonsIcons,
   Zocial: ZocialIcons,
   SimpleLineIcons: SimpleLineIconsIcons,
-};
+}
 
 const propTypes = {
   buttonStyle: ViewPropTypes.style,
@@ -50,49 +50,42 @@ const propTypes = {
   activeOpacity: PropTypes.number.isRequired,
   starStyle: ViewPropTypes.style,
   onStarButtonPress: PropTypes.func.isRequired,
-};
+  testID: PropTypes.string,
+}
 
 const defaultProps = {
   buttonStyle: {},
   icoMoonJson: undefined,
   starStyle: {},
-};
+}
 
 class StarButton extends Component {
   constructor(props) {
-    super(props);
+    super(props)
 
-    this.onButtonPress = this.onButtonPress.bind(this);
+    this.onButtonPress = this.onButtonPress.bind(this)
   }
 
   onButtonPress(event) {
-    const {
-      halfStarEnabled,
-      starSize,
-      rating,
-      onStarButtonPress,
-    } = this.props;
+    const { halfStarEnabled, starSize, rating, onStarButtonPress } = this.props
 
-    let addition = 0;
+    let addition = 0
 
     if (halfStarEnabled) {
-      const isHalfSelected = event.nativeEvent.locationX < starSize / 2;
-      addition = isHalfSelected ? -0.5 : 0;
+      const isHalfSelected = event.nativeEvent.locationX < starSize / 2
+      addition = isHalfSelected ? -0.5 : 0
     }
 
-    onStarButtonPress(rating + addition);
+    onStarButtonPress(rating + addition)
   }
 
   iconSetFromProps() {
-    const {
-      icoMoonJson,
-      iconSet,
-    } = this.props;
+    const { icoMoonJson, iconSet } = this.props
     if (icoMoonJson) {
-      return createIconSetFromIcoMoon(icoMoonJson);
+      return createIconSetFromIcoMoon(icoMoonJson)
     }
 
-    return iconSets[iconSet];
+    return iconSets[iconSet]
   }
 
   renderIcon() {
@@ -102,17 +95,19 @@ class StarButton extends Component {
       starIconName,
       starSize,
       starStyle,
-    } = this.props;
+    } = this.props
 
-    const Icon = this.iconSetFromProps();
-    let iconElement;
+    const Icon = this.iconSetFromProps()
+    let iconElement
 
     const newStarStyle = {
-      transform: [{
-        scaleX: reversed ? -1 : 1,
-      }],
+      transform: [
+        {
+          scaleX: reversed ? -1 : 1,
+        },
+      ],
       ...StyleSheet.flatten(starStyle),
-    };
+    }
 
     if (typeof starIconName === 'string') {
       iconElement = (
@@ -122,51 +117,39 @@ class StarButton extends Component {
           color={starColor}
           style={newStarStyle}
         />
-      );
+      )
     } else {
       const imageStyle = {
         width: starSize,
         height: starSize,
         resizeMode: 'contain',
-      };
+      }
 
-      const iconStyles = [
-        imageStyle,
-        newStarStyle,
-      ];
+      const iconStyles = [imageStyle, newStarStyle]
 
-      iconElement = (
-        <Image
-          source={starIconName}
-          style={iconStyles}
-        />
-      );
+      iconElement = <Image source={starIconName} style={iconStyles} />
     }
 
-    return iconElement;
+    return iconElement
   }
 
   render() {
-    const {
-      activeOpacity,
-      buttonStyle,
-      disabled,
-    } = this.props;
+    const { activeOpacity, buttonStyle, disabled, testID } = this.props
 
     return (
       <Button
+        testID={testID}
         activeOpacity={activeOpacity}
         disabled={disabled}
         containerStyle={buttonStyle}
-        onPress={this.onButtonPress}
-      >
+        onPress={this.onButtonPress}>
         {this.renderIcon()}
       </Button>
-    );
+    )
   }
 }
 
-StarButton.propTypes = propTypes;
-StarButton.defaultProps = defaultProps;
+StarButton.propTypes = propTypes
+StarButton.defaultProps = defaultProps
 
-export default StarButton;
+export default StarButton