Add report dialog e2e tests (#7913)

__e2e__/config.yml

@@ -1,2 +1,2 @@
 flows:
-  - "flows/*"
+  - "flows/**"

__e2e__/flows/report-dialog/account.default.yml

@@ -0,0 +1,24 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../../setupServer.js
+    env:
+        SERVER_PATH: ?users&follows&posts&feeds
+- runFlow:
+    file: ../../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+- tapOn: "Carla's avatar"
+- tapOn:
+    id: "profileHeaderDropdownBtn"
+- tapOn:
+    id: "profileHeaderDropdownReportBtn"
+- tapOn:
+    id: "report:option:com.atproto.moderation.defs#reasonSpam"
+- assertVisible:
+    id: "report:labeler:mod-authority.test"
+- tapOn:
+    id: "report:submit"
+- assertNotVisible:
+    id: "report:dialog"

__e2e__/flows/report-dialog/post:default.yml

@@ -0,0 +1,24 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../../setupServer.js
+    env:
+        SERVER_PATH: ?users&follows&posts&feeds
+- runFlow:
+    file: ../../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+- tapOn:
+    id: "postDropdownBtn"
+    index: 0
+- tapOn:
+    id: "postDropdownReportBtn"
+- tapOn:
+    id: "report:option:com.atproto.moderation.defs#reasonSpam"
+- assertVisible:
+    id: "report:labeler:mod-authority.test"
+- tapOn:
+    id: "report:submit"
+- assertNotVisible:
+    id: "report:dialog"

__e2e__/flows/report-dialog/post:edit-reason.yml

@@ -0,0 +1,35 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../../setupServer.js
+    env:
+        SERVER_PATH: ?users&follows&posts&feeds
+- runFlow:
+    file: ../../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+- tapOn:
+    id: "postDropdownBtn"
+    index: 0
+- tapOn:
+    id: "postDropdownReportBtn"
+- tapOn:
+    id: "report:option:com.atproto.moderation.defs#reasonOther"
+- assertVisible:
+    id: "report:labeler:mod-authority.test"
+# reason "other" defaults with details open
+- assertVisible:
+    id: "report:details"
+- tapOn:
+    id: "report:clearOption"
+- assertNotVisible:
+    id: "report:details"
+- tapOn:
+    id: "report:option:com.atproto.moderation.defs#reasonSpam"
+- assertVisible:
+    id: "report:labeler:mod-authority.test"
+- tapOn:
+    id: "report:submit"
+- assertNotVisible:
+    id: "report:dialog"

__e2e__/flows/report-dialog/post:reason-other.yml

@@ -0,0 +1,30 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../../setupServer.js
+    env:
+        SERVER_PATH: ?users&follows&posts&feeds
+- runFlow:
+    file: ../../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+- tapOn:
+    id: "postDropdownBtn"
+    index: 0
+- tapOn:
+    id: "postDropdownReportBtn"
+- tapOn:
+    id: "report:option:com.atproto.moderation.defs#reasonOther"
+- assertVisible:
+    id: "report:labeler:mod-authority.test"
+# reason "other" defaults with details open
+- assertVisible:
+    id: "report:details"
+- tapOn:
+    id: "report:details"
+- inputText: "This is a test report"
+- tapOn:
+    id: "report:submit"
+- assertNotVisible:
+    id: "report:dialog"

src/components/Dialog/types.ts

@@ -68,7 +68,10 @@ export type DialogOuterProps = {
   testID?: string
 }
 
-type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> & T
+type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> &
+  T & {
+    testID?: string
+  }
 export type DialogInnerProps =
   | DialogInnerPropsBase<{
       label?: undefined

src/components/moderation/ReportDialog/index.tsx

@@ -186,6 +186,7 @@ function Inner(props: ReportDialogProps) {
 
   return (
     <Dialog.ScrollableInner
+      testID="report:dialog"
       label={_(msg`Report dialog`)}
       ref={ref}
       style={[a.w_full, {maxWidth: 500}]}>
@@ -231,6 +232,7 @@ function Inner(props: ReportDialogProps) {
                     <OptionCard option={state.selectedOption} />
                   </View>
                   <Button
+                    testID="report:clearOption"
                     label={_(msg`Change report reason`)}
                     size="tiny"
                     variant="solid"
@@ -399,6 +401,7 @@ function Inner(props: ReportDialogProps) {
                 {state.detailsOpen && (
                   <View>
                     <Dialog.Input
+                      testID="report:details"
                       multiline
                       value={state.details}
                       onChangeText={details => {
@@ -426,6 +429,7 @@ function Inner(props: ReportDialogProps) {
                 )}
               </View>
               <Button
+                testID="report:submit"
                 label={_(msg`Submit report`)}
                 size="large"
                 variant="solid"
@@ -566,6 +570,7 @@ function OptionCard({
   }, [onSelect, option])
   return (
     <Button
+      testID={`report:option:${option.reason}`}
       label={_(msg`Create report for ${option.title}`)}
       onPress={onPress}
       disabled={!onSelect}>
@@ -629,6 +634,7 @@ function LabelerCard({
   })
   return (
     <Button
+      testID={`report:labeler:${labeler.creator.handle}`}
       label={_(msg`Send report to ${title}`)}
       onPress={onPress}
       disabled={!onSelect}>