Cleanup testIds and accessibility labels

Author: antonis

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

@@ -9,35 +9,35 @@ jsEngine: graaljs
 
 # Open feedback widget
 - tapOn:
-    id: 'feedback-button'
+    id: 'sentry-feedback-button'
 
 # Assert that the feedback form is visible
 - extendedWaitUntil:
     visible:
-      id: 'form-title'
+      id: 'sentry-feedback-form-title'
     timeout: 5_000
 
 # Fill out name field
 - tapOn:
-    id: 'name-input'
+    id: 'sentry-feedback-name-input'
 - inputText: 'John Doe'
 
 # Fill out email field
 - tapOn:
-    id: 'email-input'
+    id: 'sentry-feedback-email-input'
 - inputText: '[email protected]'
 
 # Fill out message field
 - tapOn:
-    id: 'message-input'
+    id: 'sentry-feedback-message-input'
 - inputText: 'This is a test feedback message from CI e2e tests'
 
 # Submit feedback
 - scrollUntilVisible:
     element:
-      id: 'submit-button'
+      id: 'sentry-feedback-submit-button'
 - tapOn:
-    id: 'submit-button'
+    id: 'sentry-feedback-submit-button'
 - assertVisible: 'Thank you for your report!'
 - tapOn: 'OK'
 

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

@@ -59,7 +59,7 @@ export class FeedbackButton extends React.Component<FeedbackButtonProps> {
         accessibilityLabel={text.triggerAriaLabel}
       >
         <Image source={{ uri: feedbackIcon }} style={styles.triggerIcon}/>
-        <Text style={styles.triggerText} testID='feedback-button'>{text.triggerLabel}</Text>
+        <Text style={styles.triggerText} testID='sentry-feedback-button'>{text.triggerLabel}</Text>
       </TouchableOpacity>
     );
   }

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

@@ -273,27 +273,25 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
         >
         <View style={styles.container}>
           <View style={styles.titleContainer}>
-            <Text style={styles.title} testID='form-title'>{text.formTitle}</Text>
+            <Text style={styles.title} testID='sentry-feedback-form-title'>{text.formTitle}</Text>
             {config.showBranding && (
               <Image
                 source={{ uri: sentryLogo }}
                 style={styles.sentryLogo}
-                testID='sentry-logo'
-                accessibilityLabel='Sentry logo'
+                testID='sentry-feedback-logo'
               />
             )}
           </View>
 
           {config.showName && (
           <>
-            <Text style={styles.label} testID='name-label' accessibilityLabel={text.nameLabel}>
+            <Text style={styles.label}>
               {text.nameLabel}
               {config.isNameRequired && ` ${text.isRequiredLabel}`}
             </Text>
             <TextInput
               style={styles.input}
-              testID='name-input'
-              accessibilityLabel={text.namePlaceholder}
+              testID='sentry-feedback-name-input'
               placeholder={text.namePlaceholder}
               value={name}
               onChangeText={(value) => this.setState({ name: value })}
@@ -303,14 +301,13 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
 
           {config.showEmail && (
           <>
-            <Text style={styles.label} testID='email-label' accessibilityLabel={text.emailLabel}>
+            <Text style={styles.label}>
               {text.emailLabel}
               {config.isEmailRequired && ` ${text.isRequiredLabel}`}
             </Text>
             <TextInput
               style={styles.input}
-              testID='email-input'
-              accessibilityLabel={text.emailPlaceholder}
+              testID='sentry-feedback-email-input'
               placeholder={text.emailPlaceholder}
               keyboardType={'email-address' as KeyboardTypeOptions}
               value={email}
@@ -319,14 +316,13 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
           </>
           )}
 
-          <Text style={styles.label} testID='message-label' accessibilityLabel={text.messageLabel}>
+          <Text style={styles.label}>
             {text.messageLabel}
             {` ${text.isRequiredLabel}`}
           </Text>
           <TextInput
             style={[styles.input, styles.textArea]}
-            testID='message-input'
-            accessibilityLabel={text.messagePlaceholder}
+            testID='sentry-feedback-message-input'
             placeholder={text.messagePlaceholder}
             value={description}
             onChangeText={(value) => this.setState({ description: value })}
@@ -338,14 +334,10 @@ 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} testID='screenshot-button' accessibilityLabel={!this._hasScreenshot()
-                  ? text.addScreenshotButtonLabel
-                  : text.removeScreenshotButtonLabel}>
+                <Text style={styles.screenshotText}>
                   {!this._hasScreenshot()
                     ? text.addScreenshotButtonLabel
                     : text.removeScreenshotButtonLabel}
@@ -359,15 +351,15 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
               onCancel();
               showScreenshotButton();
             }}>
-              <Text style={styles.takeScreenshotText} testID='capture-screenshot-button' accessibilityLabel={text.captureScreenshotButtonLabel}>{text.captureScreenshotButtonLabel}</Text>
+              <Text style={styles.takeScreenshotText}>{text.captureScreenshotButtonLabel}</Text>
             </TouchableOpacity>
           )}
           <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
-            <Text style={styles.submitText} testID='submit-button' accessibilityLabel={text.submitButtonLabel}>{text.submitButtonLabel}</Text>
+            <Text style={styles.submitText} testID='sentry-feedback-submit-button'>{text.submitButtonLabel}</Text>
           </TouchableOpacity>
 
           <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
-            <Text style={styles.cancelText} testID='cancel-button' accessibilityLabel={text.cancelButtonLabel}>{text.cancelButtonLabel}</Text>
+            <Text style={styles.cancelText}>{text.cancelButtonLabel}</Text>
           </TouchableOpacity>
         </View>
       </TouchableWithoutFeedback>

packages/core/test/feedback/FeedbackWidget.test.tsx

@@ -139,7 +139,7 @@ describe('FeedbackWidget', () => {
     const { getByPlaceholderText, getByText, getByTestId, queryByText } = render(<FeedbackWidget {...defaultProps} />);
 
     expect(getByText(defaultProps.formTitle)).toBeTruthy();
-    expect(getByTestId('sentry-logo')).toBeTruthy(); // default showBranding is true
+    expect(getByTestId('sentry-feedback-logo')).toBeTruthy(); // default showBranding is true
     expect(getByText(defaultProps.nameLabel)).toBeTruthy();
     expect(getByPlaceholderText(defaultProps.namePlaceholder)).toBeTruthy();
     expect(getByText(defaultProps.emailLabel)).toBeTruthy();
@@ -160,7 +160,7 @@ describe('FeedbackWidget', () => {
   it('does not render the sentry logo when showBranding is false', () => {
     const { queryByTestId } = render(<FeedbackWidget {...defaultProps} showBranding={false} />);
 
-    expect(queryByTestId('sentry-logo')).toBeNull();
+    expect(queryByTestId('sentry-feedback-logo')).toBeNull();
   });
 
   it('name and email are prefilled when sentry user is set', () => {

packages/core/test/feedback/__snapshots__/FeedbackButton.test.tsx.snap

@@ -78,7 +78,7 @@ exports[`FeedbackButton matches the snapshot with custom styles 1`] = `
         "fontSize": 18,
       }
     }
-    testID="feedback-button"
+    testID="sentry-feedback-button"
   >
     Report a Bug
   </Text>
@@ -163,7 +163,7 @@ exports[`FeedbackButton matches the snapshot with custom texts 1`] = `
         "fontSize": 18,
       }
     }
-    testID="feedback-button"
+    testID="sentry-feedback-button"
   >
     Give Feedback
   </Text>
@@ -248,7 +248,7 @@ exports[`FeedbackButton matches the snapshot with default configuration 1`] = `
         "fontSize": 18,
       }
     }
-    testID="feedback-button"
+    testID="sentry-feedback-button"
   >
     Report a Bug
   </Text>