feat: Add cancelButtonTestID and confirmButtonTestID props (#582)

Add `cancelButtonTestID` and `confirmButtonTestID` props for E2E testing.
mmazzarolo · Jul 13, 2021 · 73a4874 · 73a4874
1 parent 33301ae
commit 73a4874
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -79,6 +79,8 @@ export default Example;
 
 | Name                    | Type      | Default       | Description                                                                                         |
 | ----------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- |
+| cancelButtonTestID      | string    |               | Used to locate cancel button in end-to-end tests.                                                   |
+| confirmButtonTestID     | string    |               | Used to locate confirm button in end-to-end tests.                                                  |
 | cancelTextIOS           | string    | 'Cancel'      | The label of the cancel button (iOS)                                                                |
 | confirmTextIOS          | string    | 'Confirm'     | The label of the confirm button (iOS)                                                               |
 | customCancelButtonIOS   | component |               | Overrides the default cancel button component (iOS)                                                 |

diff --git a/src/DateTimePickerModal.ios.js b/src/DateTimePickerModal.ios.js
@@ -26,6 +26,8 @@ export const TITLE_COLOR = "#8f8f8f";
 
 export class DateTimePickerModal extends React.PureComponent {
   static propTypes = {
+    cancelButtonTestID: PropTypes.string,
+    confirmButtonTestID: PropTypes.string,
     cancelTextIOS: PropTypes.string,
     confirmTextIOS: PropTypes.string,
     customCancelButtonIOS: PropTypes.elementType,
@@ -110,6 +112,8 @@ export class DateTimePickerModal extends React.PureComponent {
 
   render() {
     const {
+      cancelButtonTestID,
+      confirmButtonTestID,
       cancelTextIOS,
       confirmTextIOS,
       customCancelButtonIOS,
@@ -188,12 +192,14 @@ export class DateTimePickerModal extends React.PureComponent {
             />
           </View>
           <ConfirmButtonComponent
+            confirmButtonTestID={confirmButtonTestID}
             isDarkModeEnabled={_isDarkModeEnabled}
             onPress={this.handleConfirm}
             label={confirmTextIOS}
           />
         </View>
         <CancelButtonComponent
+          cancelButtonTestID={cancelButtonTestID}
           isDarkModeEnabled={_isDarkModeEnabled}
           onPress={this.handleCancel}
           label={cancelTextIOS}
@@ -252,6 +258,7 @@ export const headerStyles = StyleSheet.create({
 
 export const ConfirmButton = ({
   isDarkModeEnabled,
+  confirmButtonTestID,
   onPress,
   label,
   style = confirmButtonStyles,
@@ -265,6 +272,7 @@ export const ConfirmButton = ({
     : HIGHLIGHT_COLOR_LIGHT;
   return (
     <TouchableHighlight
+      testID={confirmButtonTestID}
       style={[themedButtonStyle, style.button]}
       underlayColor={underlayColor}
       onPress={onPress}
@@ -300,6 +308,7 @@ export const confirmButtonStyles = StyleSheet.create({
 });
 
 export const CancelButton = ({
+  cancelButtonTestID,
   isDarkModeEnabled,
   onPress,
   label,
@@ -313,6 +322,7 @@ export const CancelButton = ({
     : HIGHLIGHT_COLOR_LIGHT;
   return (
     <TouchableHighlight
+      testID={cancelButtonTestID}
       style={[style.button, themedButtonStyle]}
       underlayColor={underlayColor}
       onPress={onPress}