test(e2e): Adds Feedback Widget Capture Screenshot Maestro E2E tests (#4795)

* Adds basic form functionality

* Update imports

* Update imports

* Remove useState hook to avoid multiple react instances issues

* Move types and styles in different files

* Removes attachment button to be added back separately along with the implementation

* Add basic field validation

* Adds changelog

* Updates changelog

* Updates changelog

* Trim whitespaces from the submitted feedback

* Adds tests

* Renames FeedbackFormScreen to FeedbackForm

* Add beta label

* Extract default text to constants

* Moves constant to a separate file and aligns naming with JS

* Adds input text labels

* Close screen before sending the feedback to minimise wait time

Co-authored-by: LucasZF <[email protected]>

* Rename file for consistency

* Flatten configuration hierarchy and clean up

* Align required values with JS

* Use Sentry user email and name when set

* Simplifies email validation

* Show success alert message

* Aligns naming with JS and unmounts the form by default

* Use the minimum config without props in the changelog

* Adds development not for unimplemented function

* Show email and name conditionally

* Adds sentry branding (png logo)

* Adds sentry logo resource

* Add assets in module exports

* Revert "Add assets in module exports"

This reverts commit 5292475.

* Revert "Adds sentry logo resource"

This reverts commit d6e9229.

* Revert "Adds sentry branding (png logo)"

This reverts commit 8c56753.

* Add last event id

* Mock lastEventId

* Adds beta note in the changelog

* Autoinject feedback form

* Updates changelog

* Align colors with JS

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Use regular fonts for both buttons

* Handle keyboard properly

* Adds an option on whether the email should be validated

* Merge properties only once

* Loads current user data on form construction

* Remove unneeded extra padding

* Fix background color issue

* Adds feedback button

* Updates the changelog

* Fixes changelog typo

* Updates styles background color

Co-authored-by: Krystof Woldrich <[email protected]>

* Use defaultProps

* Correct defaultProps

* Adds test to verify when getUser is called

* Use smaller image

Co-authored-by: LucasZF <[email protected]>

* Add margin next to the icon

* Adds bottom spacing in the ErrorScreen so that the feedback button does not hide the scrollview buttons

* (2.2) feat: Add Feedback Form UI Branding logo (#4357)

* Adds sentry branding logo as a base64 encoded png

---------

Co-authored-by: LucasZF <[email protected]>

* Autoinject feedback form (#4370)

* Align changelog entry

* Update changelog

* Disable bouncing

* Add modal ui appearance

* Update snapshot tests

* Fix bottom margin

* Fix sheet height

* Remove extra modal border

* Do not expose modal styles

* Animate background color

* Avoid keyboard in modal

* Update changelog

* Fix changelog

* Updates comment

* Extract FeedbackButtonProps

* Add public function description to satisfy lint check

* Adds tests

* Fix tests

* Add test ids in feedback widget

* Add feedback widget button in test app

* WIP: Add feedback test

* Update snapshot tests with the added test ids

* Android happy path test

* Check field validation

* Scroll if button is not visible

* Adds accessibility labels

* Remove extended initial checks due to flakiness

* Revert "Remove extended initial checks due to flakiness"

This reverts commit fa3bdfc.

* Add hardcoded dark and light color themes

* Rename theme options

* Update snapshot tests

* Include in the feedback integration

* Fix circular dependency

* Add theme integration options

* Adds changelog

* Add comment note

* Align with JS api

* Remove unneeded line

Co-authored-by: Krystof Woldrich <[email protected]>

* Place widget button below the feedback widget shadow

* Expose showFeedbackButton/hideFeedbackButton methods

* Add dummy integration for tracking usage

* Adds button border

* Fixes tests

* Add accentBackground and accentForeground colors

* Extract integration getter in a helper function

* Adds dynamic theming support

* Add snapshot tests

* Show screenshot button UI

* Add screenshot button integration

* Add screenshot icon

* Adds Take a screenshot button in FeedbackWidget

* Updates snapshot tests

* Fix circularDepCheck

* Fix circularDepCheck

* Attache captured screenshot

* Hide the take screenshot button when there is a screenshot

* Convert uint8Array to Base64 on the native side

* ref(feedback): Extracts FeedbackWidgetProvider in a separate file

* Updates exposed comments

* Adds snapshot tests

* Disable functionality on the Web

* Add screenshot button in the sample expo app

* Adds system theme tests

* Test dynamically changed theme

* Remove showScreenshotButton and hideScreenshotButton from the exposed api

* Fix function name typo

* Adds enableTakeScreenshot option

* Adds happy flow test

* Make flow tests more granular

* Increate wait time out to fix flakiness on ci

* Reset widget state after each test

* Fix CI flakiness

* Remove flaky test

* fix(feedback): Fixes accessibility issue on iOS

* Add changelog

* Properly wrap root app component

* Handle undefined AppRegistryIntegration.onRunApplication gracefully

* Fix lint issue

* Do not validate all fields for visibility

* Take screenshots for debugging

* Revert "Take screenshots for debugging"

This reverts commit 3e361a1.

* Simplify test scenario

* Try without hiding the keyboard

* Test Feedback button

* Test screenshot capture

* Show an error if screenshot capture fails

* Test error flow

* Revert unneeded change

* Test with latest Maestro

* Revert "Test with latest Maestro"

This reverts commit e7c31bf.

* Revert "Test screenshot capture"

This reverts commit 8913ffc.

* Skip for 0.65.3

* Remove version check

* Use testId for feedback button

* Skip for 0.65.3

* Update snapshots

* Cleanup testIds and accessibility labels

* Enable for all RN versions

* Temp: remove modal supported check

* Do not use native driver for backgroundOpacity animation

* Revert "Temp: remove modal supported check"

This reverts commit e20aff2.

* Do not use native driver for backgroundOpacity animation

* Use text instead of test ids

* Separate iOS and Android tests

* test(e2e): Adds Feedback Widget Capture Screenshot Maestro E2E tests

* Update test snapshots

* Hide keyboard by tapping on the sentry logo

* Tap on the title to hide the keyboard on Android

* Tap on email label to hide the keyboard on Android

* Wait for the screen to become visible after the screenshot capture

* Extend wait timeout after taking the screenshot

* increase timeout

* Revert "increase timeout"

This reverts commit 7865f32.

* Revert "Extend wait timeout after taking the screenshot"

This reverts commit 80dea08.

* Tweak the emulator

* Revert "Tweak the emulator"

This reverts commit ff8458c.

* Try Google API emulator

---------

Co-authored-by: LucasZF <[email protected]>
Co-authored-by: Krystof Woldrich <[email protected]>

Author: 3 people

.github/workflows/e2e-v2.yml

@@ -391,8 +391,7 @@ jobs:
           force-avd-creation: false
           disable-animations: true
           disable-spellchecker: true
-          target: 'aosp_atd'
-          channel: canary # Necessary for ATDs
+          target: 'google_apis'
           emulator-options: >
             -no-window
             -no-snapshot-save

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

@@ -17,3 +17,13 @@ jsEngine: graaljs
     file: feedback/happyFlow-android.yml
     when:
       platform: Android
+
+- runFlow:
+    file: feedback/captureFlow-ios.yml
+    when:
+      platform: iOS
+
+- runFlow:
+    file: feedback/captureFlow-android.yml
+    when:
+      platform: Android

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

@@ -0,0 +1,54 @@
+# This is a happy path test for the feedback widget on Android.
+# It verifies that the feedback form can be opened, filled out, and submitted successfully
+appId: ${APP_ID}
+jsEngine: graaljs
+---
+
+# Show feedback button
+- tapOn: 'Feedback'
+
+# Open feedback widget
+- tapOn: 'Report a Bug'
+
+# Assert that the feedback form is visible
+- extendedWaitUntil:
+    visible: 'Report a Bug'
+    timeout: 5_000
+
+# Fill out name field
+- tapOn: 'Your Name'
+- inputText: 'John Doe'
+
+# Fill out email field
+- tapOn: '[email protected]'
+- inputText: '[email protected]'
+
+# Fill out message field
+- tapOn: "What's the bug? What did you expect?"
+- inputText: 'This is a test feedback message with a screenshot from CI e2e tests'
+
+# Take screenshot
+- scrollUntilVisible:
+    element:
+      text: 'Take a screenshot'
+- tapOn: 'Take a screenshot'
+- tapOn: 'Take Screenshot'
+
+# Assert that the feedback form is visible
+- extendedWaitUntil:
+    visible: 'Report a Bug'
+    timeout: 5_000
+
+# Hide keyboard by tapping on a non-tappable element
+- tapOn: 'Email'
+
+# Submit feedback
+- scrollUntilVisible:
+    element:
+      text: 'Send Bug Report'
+- tapOn: 'Send Bug Report'
+- 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/maestro/feedback/captureFlow-ios.yml

@@ -0,0 +1,58 @@
+# This is a happy path test for the feedback widget on iOS.
+# It verifies that the feedback form can be opened, filled out, and submitted successfully
+appId: ${APP_ID}
+jsEngine: graaljs
+---
+
+# Show feedback button
+- tapOn: 'Feedback'
+
+# Open feedback widget
+- tapOn:
+    id: 'sentry-feedback-button'
+
+# Assert that the feedback form is visible
+- extendedWaitUntil:
+    visible:
+      id: 'sentry-feedback-form-title'
+    timeout: 5_000
+
+# Fill out name field
+- tapOn:
+    id: 'sentry-feedback-name-input'
+- inputText: 'John Doe'
+
+# Fill out email field
+- tapOn:
+    id: 'sentry-feedback-email-input'
+- inputText: '[email protected]'
+
+# Fill out message field
+- tapOn:
+    id: 'sentry-feedback-message-input'
+- inputText: 'This is a test feedback message with a screenshot from CI e2e tests'
+
+# Take screenshot
+- scrollUntilVisible:
+    element:
+      id: 'sentry-feedback-take-screenshot-button'
+- tapOn:
+    id: 'sentry-feedback-take-screenshot-button'
+- tapOn:
+    id: 'sentry-feedback-screenshot-button'
+
+# Hide keyboard by tapping on a non-tappable element
+- tapOn:
+    id: 'sentry-logo'
+
+# Submit feedback
+- scrollUntilVisible:
+    element:
+      id: 'sentry-feedback-submit-button'
+- tapOn:
+    id: 'sentry-feedback-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/maestro/feedback/happyFlow-android.yml

@@ -27,6 +27,9 @@ jsEngine: graaljs
 - tapOn: "What's the bug? What did you expect?"
 - inputText: 'This is a test feedback message from CI e2e tests'
 
+# Hide keyboard by tapping on a non-tappable element
+- tapOn: 'Email'
+
 # Submit feedback
 - scrollUntilVisible:
     element:

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

@@ -32,6 +32,10 @@ jsEngine: graaljs
     id: 'sentry-feedback-message-input'
 - inputText: 'This is a test feedback message from CI e2e tests'
 
+# Hide keyboard by tapping on a non-tappable element
+- tapOn:
+    id: 'sentry-logo'
+
 # Submit feedback
 - scrollUntilVisible:
     element:

dev-packages/e2e-tests/patch-scripts/rn.patch.app.js

@@ -32,6 +32,9 @@ Sentry.init({
   },
   integrations: [
     Sentry.mobileReplayIntegration(),
+    Sentry.feedbackIntegration({
+      enableTakeScreenshot: true,
+    }),
   ],
 });
 `;

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

@@ -354,7 +354,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
               onCancel();
               showScreenshotButton();
             }}>
-              <Text style={styles.takeScreenshotText}>{text.captureScreenshotButtonLabel}</Text>
+              <Text style={styles.takeScreenshotText} testID='sentry-feedback-take-screenshot-button'>{text.captureScreenshotButtonLabel}</Text>
             </TouchableOpacity>
           )}
           <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>

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

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

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

@@ -78,6 +78,7 @@ exports[`ScreenshotButton matches the snapshot with custom styles 1`] = `
         "fontSize": 18,
       }
     }
+    testID="sentry-feedback-screenshot-button"
   >
     Take Screenshot
   </Text>
@@ -162,6 +163,7 @@ exports[`ScreenshotButton matches the snapshot with custom texts 1`] = `
         "fontSize": 18,
       }
     }
+    testID="sentry-feedback-screenshot-button"
   >
     Take Screenshot
   </Text>
@@ -246,6 +248,7 @@ exports[`ScreenshotButton matches the snapshot with default configuration 1`] =
         "fontSize": 18,
       }
     }
+    testID="sentry-feedback-screenshot-button"
   >
     Take Screenshot
   </Text>