v1.118.0 E2E tests (#9994)

__e2e__/flows/curate-lists.yml

@@ -39,7 +39,6 @@ appId: xyz.blueskyweb.app
     id: "editListNameInput"
 - eraseText
 - inputText: "Bad Ppl"
-- hideKeyboard
 - tapOn:
     id: "editListDescriptionInput"
 - eraseText

__e2e__/flows/feed-reorder.yml

@@ -35,9 +35,12 @@ appId: xyz.blueskyweb.app
     id: "menuItemButton-Feeds"
 - tapOn:
     id: "editFeedsBtn"
-- tapOn:
-    label: "Tap on down arrow"
-    id: "feed-timeline-moveDown"
+- swipe:
+    label: "Drag feed down"
+    from:
+      id: "feed-drag-handle"
+    direction: "DOWN"
+    duration: 1000
 - tapOn:
       label: "Save button"
       id: "saveChangesBtn"
@@ -55,9 +58,12 @@ appId: xyz.blueskyweb.app
     id: "menuItemButton-Feeds"
 - tapOn:
     id: "editFeedsBtn"
-- tapOn:
-    label: "Tap on down arrow"
-    id: "feed-feed-moveDown"
+- swipe:
+    label: "Drag feed down"
+    from:
+      id: "feed-drag-handle"
+    direction: "DOWN"
+    duration: 1000
 - tapOn:
     label: "Save button"
     id: "saveChangesBtn"

__e2e__/flows/login.yml

@@ -15,6 +15,11 @@ appId: xyz.blueskyweb.app
 - tapOn:
     id: "customServerTextInput"
 - inputText: "http://localhost:3000"
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - hideKeyboard
 - tapOn: "Done"
 - tapOn:
     id: "loginUsernameInput"

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

@@ -26,6 +26,7 @@ appId: xyz.blueskyweb.app
 - tapOn:
     id: "report:details"
 - inputText: "This is a test report"
+- hideKeyboard
 - tapOn:
     id: "report:submit"
 - assertNotVisible:

__e2e__/setupApp.yml

@@ -3,15 +3,29 @@ appId: xyz.blueskyweb.app
 - launchApp:
     appId: "xyz.blueskyweb.app"
     clearState: true
-- waitForAnimationToEnd
-- tapOn: "http://localhost:8081"
-- waitForAnimationToEnd
-- extendedWaitUntil:
-    visible: "Continue"
-- swipe:
-    from: "Bluesky"
-    direction: DOWN
-    duration: 100
+    arguments:
+      "-EXDevMenuIsOnboardingFinished": true
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - openLink: "exp+bluesky://expo-development-client/?url=http%3A%2F%2Flocalhost%3A8081"
+      - runFlow:
+          when:
+            visible: 'Open in "Bluesky"'
+          commands:
+            - tapOn: Open
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - tapOn: 'http://localhost:8081'
+      - runFlow:
+          label: "Dismiss Expo dev menu"
+          when:
+            visible: "Continue"
+          commands:
+            - back
 - tapOn:
     id: e2eProxyHeaderInput
 - inputText: ${output.result}

docs/testing.md

@@ -9,6 +9,14 @@ values.
 2. You can write Maestro tests in `/.maestro/flows/` directory by creating a new `.yml` file or by modifying an existing one.
 3. You can also use [Maestro Studio](https://maestro.mobile.dev/getting-started/maestro-studio) which automatically generates commands by recording your actions on the app. Therefore, you can create realistic tests without having to manually write any code. Use the `maestro studio` command to start recording your actions.
 
+### Running on Android
+
+You will need to allow your device access to the port that the mock server is running on.
+
+```
+adb reverse tcp:3000 tcp:3000
+```
+
 ### Running Maestro tests
 
 - In one tab, run `yarn e2e:mock-server`

src/Navigation.tsx

@@ -690,6 +690,7 @@ function HomeTabNavigator() {
         headerShown: true,
         headerTransparent: true,
         headerTitle: '',
+        headerBackVisible: false,
         scrollEdgeEffects: {
           top: 'soft',
         },

src/components/DraggableList/index.tsx

@@ -454,6 +454,7 @@ function SortableItem<T>({
   const dragHandle = (
     <GestureDetector gesture={gesture}>
       <Animated.View
+        testID="feed-drag-handle"
         style={[
           a.justify_center,
           a.align_center,

src/screens/Profile/Header/GrowableBanner.tsx

@@ -30,11 +30,15 @@ export function GrowableBanner({
   children,
   onPress,
   bannerRef,
+  testID,
+  label,
 }: {
   backButton?: React.ReactNode
   children: React.ReactNode
   onPress?: () => void
   bannerRef?: AnimatedRef<Animated.View>
+  testID?: string
+  label?: string
 }) {
   const pagerContext = usePagerHeaderContext()
 
@@ -42,8 +46,11 @@ export function GrowableBanner({
   if (!pagerContext || !IS_IOS) {
     return (
       <Pressable
+        testID={testID}
         onPress={onPress}
         accessibilityRole="image"
+        accessibilityLabel={label}
+        accessibilityHint=""
         style={[a.w_full, a.h_full]}>
         <Animated.View ref={bannerRef} style={[a.w_full, a.h_full]}>
           {children}
@@ -60,7 +67,9 @@ export function GrowableBanner({
       scrollY={scrollY}
       backButton={backButton}
       onPress={onPress}
-      bannerRef={bannerRef}>
+      bannerRef={bannerRef}
+      testID={testID}
+      label={label}>
       {children}
     </GrowableBannerInner>
   )
@@ -72,12 +81,16 @@ function GrowableBannerInner({
   children,
   onPress,
   bannerRef,
+  testID,
+  label,
 }: {
   scrollY: SharedValue<number>
   backButton?: React.ReactNode
   children: React.ReactNode
   onPress?: () => void
   bannerRef?: AnimatedRef<Animated.View>
+  testID?: string
+  label?: string
 }) {
   const {top: topInset} = useSafeAreaInsets()
   const isFetching = useIsProfileFetching()
@@ -142,8 +155,11 @@ function GrowableBannerInner({
           animatedStyle,
         ]}>
         <Pressable
+          testID={testID}
           onPress={onPress}
           accessibilityRole="image"
+          accessibilityLabel={label}
+          accessibilityHint=""
           style={[a.w_full, a.h_full]}>
           <Animated.View
             ref={bannerRef}

src/screens/Profile/Header/Shell.tsx

@@ -10,8 +10,7 @@ import Animated, {
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {type AppBskyActorDefs, type ModerationDecision} from '@atproto/api'
 import {utils} from '@bsky.app/alf'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {BACK_HITSLOP} from '#/lib/constants'
@@ -56,7 +55,7 @@ let ProfileHeaderShell = ({
   const t = useTheme()
   const ax = useAnalytics()
   const {currentAccount} = useSession()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {openLightbox} = useLightboxControls()
   const navigation = useNavigation<NavigationProp>()
   const {top: topInset} = useSafeAreaInsets()
@@ -168,6 +167,12 @@ let ProfileHeaderShell = ({
         style={[a.relative, {height: 150}]}>
         <StatusBarShadow />
         <GrowableBanner
+          testID={profile.banner ? 'userBannerImage' : 'userBannerFallback'}
+          label={
+            profile.banner
+              ? l`View profile banner`
+              : l`Profile banner placeholder`
+          }
           onPress={isPlaceholderProfile ? undefined : onPressBanner}
           bannerRef={bannerRef}
           backButton={
@@ -176,7 +181,7 @@ let ProfileHeaderShell = ({
                 testID="profileHeaderBackBtn"
                 onPress={onPressBack}
                 hitSlop={BACK_HITSLOP}
-                label={_(msg`Back`)}
+                label={l`Back`}
                 style={[
                   a.absolute,
                   a.pointer,
@@ -259,7 +264,7 @@ let ProfileHeaderShell = ({
           testID="profileHeaderAviButton"
           onPress={onPressAvi}
           accessibilityRole="image"
-          accessibilityLabel={_(msg`View ${profile.handle}'s avatar`)}
+          accessibilityLabel={l`View ${profile.handle}'s avatar`}
           accessibilityHint="">
           <View
             style={[

src/screens/ProfileList/components/MoreOptionsMenu.tsx

@@ -154,7 +154,7 @@ export function MoreOptionsMenu({
             </Button>
           )}
         </Menu.Trigger>
-        <Menu.Outer>
+        <Menu.Outer showCancel>
           <Menu.Group>
             <Menu.Item
               label={IS_WEB ? _(msg`Copy link to list`) : _(msg`Share via...`)}

src/view/com/auth/LoggedOut.tsx

@@ -57,6 +57,7 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   const agent = useAgent()
   useEffect(() => {
     const actors = accounts.map(acc => acc.did)
+    if (actors.length === 0) return
     void queryClient.prefetchQuery({
       queryKey: profilesQueryKey(actors),
       staleTime: STALE.MINUTES.FIVE,

src/view/com/testing/TestCtrls.e2e.tsx

@@ -25,6 +25,7 @@ export function TestCtrls() {
   const onboardingDispatch = useOnboardingDispatch()
   const {setShowLoggedOut} = useLoggedOutViewControls()
   const onPressSignInAlice = async () => {
+    console.info('[E2E] Signing in as Alice')
     await login(
       {
         service: 'http://localhost:3000',
@@ -36,6 +37,7 @@ export function TestCtrls() {
     setShowLoggedOut(false)
   }
   const onPressSignInBob = async () => {
+    console.info('[E2E] Signing in as Bob')
     await login(
       {
         service: 'http://localhost:3000',
@@ -54,6 +56,9 @@ export function TestCtrls() {
         accessibilityHint="Enter proxy header"
         testID="e2eProxyHeaderInput"
         onChangeText={val => setProxyHeader(val as any)}
+        autoComplete="off"
+        autoCorrect={false}
+        autoCapitalize="none"
         onSubmitEditing={() => {
           const header = `${proxyHeader}#bsky_appview`
           BLUESKY_PROXY_HEADER.set(header)
@@ -135,15 +140,6 @@ export function TestCtrls() {
         accessibilityRole="button"
         style={BTN}
       />
-      {/* TODO remove this entire control when experiment is over */}
-      <Pressable
-        testID="e2eStartLongboarding"
-        onPress={() => {
-          onboardingDispatch({type: 'start'})
-        }}
-        accessibilityRole="button"
-        style={BTN}
-      />
     </View>
   )
 }

src/view/com/util/UserBanner.tsx

@@ -210,7 +210,6 @@ export function UserBanner({
   ) : banner &&
     !((moderation?.blur && IS_ANDROID) /* android crashes with blur */) ? (
     <Image
-      testID="userBannerImage"
       style={[styles.bannerImage, t.atoms.bg_contrast_25]}
       contentFit="cover"
       source={{uri: banner}}
@@ -220,7 +219,6 @@ export function UserBanner({
     />
   ) : (
     <View
-      testID="userBannerFallback"
       style={[
         styles.bannerImage,
         type === 'labeler' ? styles.labelerBanner : t.atoms.bg_contrast_25,