test(e2e): Adds Feedback Widget Maestro E2E tests

dev-packages/e2e-tests/maestro/feedback.yml

@@ -0,0 +1,94 @@
+appId: ${APP_ID}
+jsEngine: graaljs
+---
+- runFlow: utils/launchTestAppClear.yml
+
+# Open feedback widget
+- tapOn: 'Feedback'
+
+# Assert that all feedback form elements are visible
+- extendedWaitUntil:
+    visible:
+      id: 'sentry-logo'
+    timeout: 1_000
+- assertVisible:
+    id: 'form-title'
+- assertVisible:
+    id: 'name-label'
+- assertVisible:
+    id: 'name-input'
+- assertVisible:
+    id: 'email-label'
+- assertVisible:
+    id: 'email-input'
+- assertVisible:
+    id: 'message-label'
+- assertVisible:
+    id: 'message-input'
+- assertVisible:
+    id: 'submit-button'
+- assertVisible:
+    id: 'cancel-button'
+
+# Close and repopen feedback widget
+- tapOn:
+    id: 'cancel-button'
+- tapOn: 'Feedback'
+- extendedWaitUntil:
+    visible:
+      id: 'sentry-logo'
+    timeout: 1_000
+
+# Fill out name field
+- tapOn:
+    id: 'name-input'
+- inputText: 'John Doe'
+
+# Fill out email field with a non valid email
+- tapOn:
+    id: 'email-input'
+- inputText: 'test invalid email'
+
+# Try to submit feedback and verify required field validation error
+- hideKeyboard
+- scrollUntilVisible:
+    element:
+      id: 'submit-button'
+- tapOn:
+    id: 'submit-button'
+- assertVisible: 'Please fill out all required fields.'
+- tapOn: 'OK'
+
+# Fill out feedback form required message field
+- tapOn:
+    id: 'message-input'
+- inputText: 'This is a test feedback message from CI e2e tests'
+
+# Try to submit feedback and verify email validation error
+- hideKeyboard
+- scrollUntilVisible:
+    element:
+      id: 'submit-button'
+- tapOn:
+    id: 'submit-button'
+- assertVisible: 'Please enter a valid email address.'
+- tapOn: 'OK'
+
+# Fill out email field with a valid email
+- tapOn:
+    id: 'email-input'
+- eraseText
+- inputText: '[email protected]'
+
+# Submit feedback
+- hideKeyboard
+- scrollUntilVisible:
+    element:
+      id: 'submit-button'
+- tapOn:
+    id: 'submit-button'
+- assertVisible: 'Thank you for your report!'
+- tapOn: 'OK'
+
+# Verify feedback form is closed and the home screen is visible
+- assertVisible: 'Welcome to React Native'

dev-packages/e2e-tests/src/EndToEndTests.tsx

@@ -62,6 +62,11 @@ const EndToEndTestsScreen = (): JSX.Element => {
       name: 'Unhandled Promise Rejection',
       action: async () => await Promise.reject(new Error('Unhandled Promise Rejection')),
     },
+    {
+      id: 'feedback',
+      name: 'Feedback',
+      action: () => Sentry.showFeedbackWidget(),
+    },
     {
       id: 'close',
       name: 'Close',
@@ -91,4 +96,4 @@ const EndToEndTestsScreen = (): JSX.Element => {
   );
 };
 
-export default EndToEndTestsScreen;
+export default Sentry.wrap(EndToEndTestsScreen);

packages/core/src/js/feedback/FeedbackWidget.tsx

@@ -224,24 +224,27 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
       <TouchableWithoutFeedback onPress={notWeb() ? Keyboard.dismiss: undefined}>
         <View style={styles.container}>
           <View style={styles.titleContainer}>
-            <Text style={styles.title}>{text.formTitle}</Text>
+            <Text style={styles.title} testID='form-title'>{text.formTitle}</Text>
             {config.showBranding && (
               <Image
                 source={{ uri: sentryLogo }}
                 style={styles.sentryLogo}
                 testID='sentry-logo'
+                accessibilityLabel='Sentry logo'
               />
             )}
           </View>
 
           {config.showName && (
           <>
-            <Text style={styles.label}>
+            <Text style={styles.label} testID='name-label' accessibilityLabel={text.nameLabel}>
               {text.nameLabel}
               {config.isNameRequired && ` ${text.isRequiredLabel}`}
             </Text>
             <TextInput
               style={styles.input}
+              testID='name-input'
+              accessibilityLabel={text.namePlaceholder}
               placeholder={text.namePlaceholder}
               value={name}
               onChangeText={(value) => this.setState({ name: value })}
@@ -251,12 +254,14 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
 
           {config.showEmail && (
           <>
-            <Text style={styles.label}>
+            <Text style={styles.label} testID='email-label' accessibilityLabel={text.emailLabel}>
               {text.emailLabel}
               {config.isEmailRequired && ` ${text.isRequiredLabel}`}
             </Text>
             <TextInput
               style={styles.input}
+              testID='email-input'
+              accessibilityLabel={text.emailPlaceholder}
               placeholder={text.emailPlaceholder}
               keyboardType={'email-address' as KeyboardTypeOptions}
               value={email}
@@ -265,12 +270,14 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
           </>
           )}
 
-          <Text style={styles.label}>
+          <Text style={styles.label} testID='message-label' accessibilityLabel={text.messageLabel}>
             {text.messageLabel}
             {` ${text.isRequiredLabel}`}
           </Text>
           <TextInput
             style={[styles.input, styles.textArea]}
+            testID='message-input'
+            accessibilityLabel={text.messagePlaceholder}
             placeholder={text.messagePlaceholder}
             value={description}
             onChangeText={(value) => this.setState({ description: value })}
@@ -282,10 +289,14 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
                 <Image
                   source={{ uri: this.state.attachmentUri }}
                   style={styles.screenshotThumbnail}
+                  testID='screenshot-thumbnail'
+                  accessibilityLabel='Screenshot thumbnail'
                 />
               )}
               <TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
-                <Text style={styles.screenshotText}>
+                <Text style={styles.screenshotText} testID='screenshot-button' accessibilityLabel={!this.state.filename && !this.state.attachment
+                    ? text.addScreenshotButtonLabel
+                    : text.removeScreenshotButtonLabel}>
                   {!this.state.filename && !this.state.attachment
                     ? text.addScreenshotButtonLabel
                     : text.removeScreenshotButtonLabel}
@@ -294,11 +305,11 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
             </View>
           )}
           <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
-            <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
+            <Text style={styles.submitText} testID='submit-button' accessibilityLabel={text.submitButtonLabel}>{text.submitButtonLabel}</Text>
           </TouchableOpacity>
 
           <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
-            <Text style={styles.cancelText}>{text.cancelButtonLabel}</Text>
+            <Text style={styles.cancelText} testID='cancel-button' accessibilityLabel={text.cancelButtonLabel}>{text.cancelButtonLabel}</Text>
           </TouchableOpacity>
         </View>
       </TouchableWithoutFeedback>