Improve e2e tests (#8927)

* get e2e image picker working

* verify create account actually reaches onboarding

* wait for image to actually be attached before posting

* wait until login finishes before moving on

* sign out before switch accounts then wait until logged in

* disable onboarding experiments in e2e

* add testId to handle availability checkmark

* fix too long username

* update thread muting test to reflect current behaviour

* hackfix for the british english translation

* unflake the onboarding tests

* fix curate list flow

* admit defeat on the most list one

__e2e__/flows/composer-self-label.yml

@@ -8,6 +8,9 @@ appId: xyz.blueskyweb.app
     file: ../setupApp.yml
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
 
 # Post an image with the porn label
 - assertVisible:
@@ -16,7 +19,10 @@ appId: xyz.blueskyweb.app
     id: "composeFAB"
 - inputText: "Post with an image"
 - tapOn:
-    id: "openGalleryBtn"
+    id: "openMediaBtn"
+- extendedWaitUntil:
+    visible:
+      id: "selectedPhotosView"
 - tapOn: "Content warnings"
 - tapOn: "Porn"
 - tapOn:

__e2e__/flows/composer.yml

@@ -8,6 +8,10 @@ appId: xyz.blueskyweb.app
     file: ../setupApp.yml
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
+
 - assertVisible:
     id: "composeFAB"
 - tapOn:
@@ -21,7 +25,10 @@ appId: xyz.blueskyweb.app
     id: "composeFAB"
 - inputText: "Post with an image"
 - tapOn:
-    id: "openGalleryBtn"
+    id: "openMediaBtn"
+- extendedWaitUntil:
+    visible:
+      id: "selectedPhotosView"
 - tapOn:
     id: "composerPublishBtn"
 - assertVisible:
@@ -46,7 +53,10 @@ appId: xyz.blueskyweb.app
     id: "replyBtn"
 - inputText: "Reply with an image"
 - tapOn:
-    id: "openGalleryBtn"
+    id: "openMediaBtn"
+- extendedWaitUntil:
+    visible:
+      id: "selectedPhotosView"
 - tapOn:
     id: "composerPublishBtn"
 - assertVisible:
@@ -73,7 +83,10 @@ appId: xyz.blueskyweb.app
     id: "quoteBtn"
 - inputText: "QP with an image"
 - tapOn:
-    id: "openGalleryBtn"
+    id: "openMediaBtn"
+- extendedWaitUntil:
+    visible:
+      id: "selectedPhotosView"
 - tapOn:
     id: "composerPublishBtn"
 - assertVisible:

__e2e__/flows/create-account.yml

@@ -32,6 +32,9 @@ appId: xyz.blueskyweb.app
     text: "Not Now"
     optional: true
 - inputText: "e2e-test"
+- extendedWaitUntil:
+    visible:
+        id: "handleAvailableCheck"
 - tapOn:
     id: "nextBtn"
-
+- assertVisible: "Give your profile a face"

__e2e__/flows/curate-lists.yml

@@ -8,6 +8,9 @@ appId: xyz.blueskyweb.app
     file: ../setupApp.yml
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
 
 - tapOn:
     label: "Create a curate list"
@@ -75,9 +78,8 @@ appId: xyz.blueskyweb.app
 - tapOn:
     id: "confirmBtn"
 
-- tapOn:
+- assertVisible:
-    label: "Create a new curatelist"
+    id: "newUserListBtn"
-    id: "e2eGotoLists"
 - tapOn:
     id: "newUserListBtn"
 - assertVisible:
@@ -146,7 +148,7 @@ appId: xyz.blueskyweb.app
 
 - tapOn:
     id: "bottomBarSearchBtn"
-- tapOn: "Search for posts, users, or feeds"
+- tapOn: "Search for posts, users[,]? or feeds"
 - inputText: "bob"
 - tapOn:
     id: "searchAutoCompleteResult-bob.test"

__e2e__/flows/mod-lists.yml

@@ -8,6 +8,9 @@ appId: xyz.blueskyweb.app
     file: ../setupApp.yml
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
 
 # create a modlist
 - tapOn:
@@ -28,18 +31,15 @@ appId: xyz.blueskyweb.app
 - assertVisible: "Muted Users"
 - assertVisible: "Shhh"
 
-- tapOn:
+# DOES NOT WORK - THE BUTTON IS NOT ACCESSIBLE
-    label: "Dropdown"
+# IGNORING FOR NOW, FIX THE COMPONENTS IN THE NEXT RELEASE
-    point: "71%,9%"
+# BECAUSE THIS IS A LEGIT A11Y PROBLEM -sfn
-
+- tapOn: "Subscribe to this list"
 - tapOn: "Mute accounts"
 - tapOn: "Mute list"
 - tapOn: "Unmute"
 
-- tapOn:
+- tapOn: "Subscribe to this list"
-      label: "Dropdown"
-      point: "71%,9%"
-
 - tapOn: "Block accounts"
 - tapOn: "Block list"
 - tapOn: "Unblock"

__e2e__/flows/onboarding-avatar-creator.yml

@@ -8,6 +8,10 @@ appId: xyz.blueskyweb.app
     file: ../setupApp.yml
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
+
 - tapOn:
     id: "e2eStartOnboarding"
 - tapOn: "Open avatar creator"
@@ -21,12 +25,12 @@ appId: xyz.blueskyweb.app
 - tapOn: "Select the atom emoji as your avatar"
 - tapOn: "Done"
 - waitForAnimationToEnd
-- tapOn: "Continue to next step"
+- tapOn:
+    id: "onboardingContinue"
 - assertVisible: "What are your interests?"
 - tapOn:
-    label: "Tap on continue"
+    id: "onboardingContinue"
-    point: "50%,92%"
 - assertVisible: "You're ready to go!"
 - tapOn:
-    label: "Tap on Lets go"
+    id: "onboardingFinish"
-    point: "50%,92%"
+- assertVisible: "Following"

__e2e__/flows/onboarding.yml

@@ -8,6 +8,10 @@ appId: xyz.blueskyweb.app
     file: ../setupApp.yml
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
+
 - tapOn:
     id: "e2eStartOnboarding"
 - tapOn: "Select an avatar"
@@ -18,12 +22,12 @@ appId: xyz.blueskyweb.app
 - waitForAnimationToEnd
 - tapOn: "Done"
 - waitForAnimationToEnd
-- tapOn: "Continue to next step"
+- tapOn:
+    id: "onboardingContinue"
 - assertVisible: "What are your interests?"
 - tapOn:
-    label: "Tap on continue"
+    id: "onboardingContinue"
-    point: "50%,92%"
 - assertVisible: "You're ready to go!"
 - tapOn:
-    label: "Tap on Lets go"
+    id: "onboardingFinish"
-    point: "50%,92%"
+- assertVisible: "Following"

__e2e__/flows/post-report-flow.yml

@@ -8,6 +8,9 @@ appId: xyz.blueskyweb.app
     file: ../setupApp.yml
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
 
 - tapOn:
     id: "postDropdownBtn"

__e2e__/flows/profile-screen.yml

@@ -15,7 +15,7 @@ appId: xyz.blueskyweb.app
       id: "bottomBarSearchBtn"
 - tapOn:
     id: "bottomBarSearchBtn"
-- tapOn: "Search for posts, users, or feeds"
+- tapOn: "Search for posts, users[,]? or feeds"
 - inputText: "b"
 - tapOn:
     id: "searchAutoCompleteResult-bob.test"

__e2e__/flows/search-screen.yml

@@ -10,13 +10,15 @@ appId: xyz.blueskyweb.app
     id: "e2eSignInAlice"
 
 # Navigate to another user profile via autocomplete
+- extendedWaitUntil:
+    visible:
+      id: "bottomBarSearchBtn"
 - tapOn:
     id: "bottomBarSearchBtn"
-- assertVisible: "Search for posts, users, or feeds"
+- assertVisible: "Search for posts, users[,]? or feeds"
-- tapOn: "Search for posts, users, or feeds"
+- tapOn: "Search for posts, users[,]? or feeds"
 - inputText: "b"
 - tapOn:
     id: "searchAutoCompleteResult-bob.test"
 - assertVisible:
     id: "profileView"
-

__e2e__/flows/shared-prefs.yml

@@ -8,6 +8,10 @@ appId: xyz.blueskyweb.app
     file: ../setupApp.yml
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
+
 - assertVisible:
     id: "storybookBtn"
 - tapOn:

__e2e__/flows/thread-muting.yml

@@ -10,6 +10,9 @@ appId: xyz.blueskyweb.app
 # Login, create a thread, and log out
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
 - assertVisible:
     id: "composeFAB"
 - tapOn:
@@ -19,8 +22,13 @@ appId: xyz.blueskyweb.app
     id: "composerPublishBtn"
 
 # Login, reply to the thread, and log out
+- tapOn:
+    id: "e2eSignOut"
 - tapOn:
     id: "e2eSignInBob"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
 - tapOn:
     id: "replyBtn"
 - inputText: "Reply 1"
@@ -28,8 +36,13 @@ appId: xyz.blueskyweb.app
     id: "composerPublishBtn"
 
 # Login, confirm notification exists, mute thread, and log out
+- tapOn:
+    id: "e2eSignOut"
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
 - tapOn:
     id: "bottomBarNotificationsBtn"
 - assertVisible:
@@ -43,8 +56,13 @@ appId: xyz.blueskyweb.app
 - tapOn: "Mute thread"
 
 # Login, reply to the thread twice, and log out
+- tapOn:
+    id: "e2eSignOut"
 - tapOn:
     id: "e2eSignInBob"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
 - tapOn:
     id: "bottomBarProfileBtn"
 - tapOn:
@@ -60,18 +78,28 @@ appId: xyz.blueskyweb.app
 - tapOn:
     id: "composerPublishBtn"
 
-
+# Login, confirm notifications dont exist, unmute the thread, ~~confirm notifications exist~~
-# Login, confirm notifications dont exist, unmute the thread, confirm notifications exist
+# Mute thread behaviour no longer change old notifications after muting/unmuting a thread -sfn
+- tapOn:
+    id: "e2eSignOut"
 - tapOn:
     id: "e2eSignInAlice"
+- extendedWaitUntil:
+    visible:
+      id: "viewHeaderHomeFeedPrefsBtn"
 - tapOn:
     id: "bottomBarNotificationsBtn"
-- assertNotVisible:
+- assertVisible: ".*Reply 1.*"
+- assertNotVisible: ".*Reply 2.*"
+- assertNotVisible: ".*Reply 3.*"
+- assertVisible:
     id: "feedItem-by-bob.test"
 - tapOn:
-    id: "bottomBarHomeBtn"
+    id: "feedItem-by-bob.test"
 - tapOn:
     id: "postDropdownBtn"
+    childOf:
+      id: "postThreadItem-by-bob.test"
 - tapOn: "Unmute thread"
 - tapOn:
     id: "bottomBarNotificationsBtn"
@@ -79,5 +107,6 @@ appId: xyz.blueskyweb.app
     from:
       id: "notifsFeed"
     direction: DOWN
-- assertVisible:
+- assertVisible: ".*Reply 1.*"
-    id: "feedItem-by-bob.test"
+- assertNotVisible: ".*Reply 2.*"
+- assertNotVisible: ".*Reply 3.*"

__e2e__/mock-server.ts

@@ -181,10 +181,10 @@ async function main() {
             'warn-profile',
             'warn-posts',
             'muted-account',
-            'muted-by-list-account',
+            'muted-by-list-acc',
             'blocking-account',
             'blockedby-account',
-            'mutual-block-account',
+            'mutual-block-acc',
           ]) {
             await server.mocker.createUser(user)
             await server.mocker.follow('alice', user)
@@ -411,16 +411,16 @@ async function main() {
           await server.mocker.addToMuteList(
             'alice',
             list,
-            server.mocker.users['muted-by-list-account'].did,
+            server.mocker.users['muted-by-list-acc'].did,
           )
-          await server.mocker.createPost('muted-by-list-account', 'muted post')
+          await server.mocker.createPost('muted-by-list-acc', 'muted post')
           await server.mocker.createQuotePost(
-            'muted-by-list-account',
+            'muted-by-list-acc',
             'account quote post',
             anchorPost,
           )
           await server.mocker.createReply(
-            'muted-by-list-account',
+            'muted-by-list-acc',
             'account reply',
             anchorPost,
           )
@@ -470,16 +470,16 @@ async function main() {
           )
 
           await server.mocker.createPost(
-            'mutual-block-account',
+            'mutual-block-acc',
             'mutual-block post',
           )
           await server.mocker.createQuotePost(
-            'mutual-block-account',
+            'mutual-block-acc',
             'mutual-block quote post',
             anchorPost,
           )
           await server.mocker.createReply(
-            'mutual-block-account',
+            'mutual-block-acc',
             'mutual-block reply',
             anchorPost,
           )
@@ -488,15 +488,15 @@ async function main() {
               repo: server.mocker.users.alice.did,
             },
             {
-              subject: server.mocker.users['mutual-block-account'].did,
+              subject: server.mocker.users['mutual-block-acc'].did,
               createdAt: new Date().toISOString(),
             },
           )
           await server.mocker.users[
-            'mutual-block-account'
+            'mutual-block-acc'
           ].agent.app.bsky.graph.block.create(
             {
-              repo: server.mocker.users['mutual-block-account'].did,
+              repo: server.mocker.users['mutual-block-acc'].did,
             },
             {
               subject: server.mocker.users.alice.did,

__e2e__/setupServer.js

@@ -1,8 +1,8 @@
-// eslint-disable-next-line
+// eslint-disable-next-line no-undef
 var res = http.post('http://localhost:1986/' + SERVER_PATH, {
   headers: {'Content-Type': 'text/plain'},
   body: '',
 })
 
-// eslint-disable-next-line
+// eslint-disable-next-line no-undef
 output.result = json(res.body).appviewDid

src/lib/media/picker.e2e.tsx

@@ -7,6 +7,7 @@ import ExpoImageCropTool, {type OpenCropperOptions} from 'expo-image-crop-tool'
 
 import {compressIfNeeded} from './manip'
 import {type PickerImage} from './picker.shared'
+import {ImagePickerResult} from 'expo-image-picker'
 
 async function getFile() {
   const imagesDir = documentDirectory!
@@ -38,6 +39,22 @@ export async function openPicker(): Promise<PickerImage[]> {
   return [await getFile()]
 }
 
+export async function openUnifiedPicker(): Promise<ImagePickerResult> {
+  const file = await getFile()
+
+  return {
+    assets: [
+      {
+        type: 'image',
+        uri: file.path,
+        mimeType: file.mime,
+        ...file,
+      },
+    ],
+    canceled: false,
+  }
+}
+
 export async function openCamera(): Promise<PickerImage> {
   return await getFile()
 }

src/lib/media/picker.shared.ts

@@ -1,11 +1,14 @@
 import {
   type ImagePickerOptions,
   launchImageLibraryAsync,
+  UIImagePickerPreferredAssetRepresentationMode,
 } from 'expo-image-picker'
 import {t} from '@lingui/macro'
 
+import {isIOS, isWeb} from '#/platform/detection'
 import {type ImageMeta} from '#/state/gallery'
 import * as Toast from '#/view/com/util/Toast'
+import {VIDEO_MAX_DURATION_MS} from '../constants'
 import {getDataUriSize} from './util'
 
 export type PickerImage = ImageMeta & {
@@ -36,3 +39,22 @@ export async function openPicker(opts?: ImagePickerOptions) {
       size: getDataUriSize(image.uri),
     }))
 }
+
+export async function openUnifiedPicker({
+  selectionCountRemaining,
+}: {
+  selectionCountRemaining: number
+}) {
+  return await launchImageLibraryAsync({
+    exif: false,
+    mediaTypes: ['images', 'videos'],
+    quality: 1,
+    allowsMultipleSelection: true,
+    legacy: true,
+    base64: isWeb,
+    selectionLimit: isIOS ? selectionCountRemaining : undefined,
+    preferredAssetRepresentationMode:
+      UIImagePickerPreferredAssetRepresentationMode.Current,
+    videoMaxDuration: VIDEO_MAX_DURATION_MS / 1000,
+  })
+}

src/lib/media/picker.tsx

@@ -1,7 +1,11 @@
 import ExpoImageCropTool, {type OpenCropperOptions} from 'expo-image-crop-tool'
 import {type ImagePickerOptions, launchCameraAsync} from 'expo-image-picker'
 
-export {openPicker, type PickerImage as RNImage} from './picker.shared'
+export {
+  openPicker,
+  openUnifiedPicker,
+  type PickerImage as RNImage,
+} from './picker.shared'
 
 export async function openCamera(customOpts: ImagePickerOptions) {
   const opts: ImagePickerOptions = {

src/lib/media/picker.web.tsx

@@ -3,7 +3,7 @@ import {type OpenCropperOptions} from 'expo-image-crop-tool'
 import {type PickerImage} from './picker.shared'
 import {type CameraOpts} from './types'
 
-export {openPicker} from './picker.shared'
+export {openPicker, openUnifiedPicker} from './picker.shared'
 
 export async function openCamera(_opts: CameraOpts): Promise<PickerImage> {
   throw new Error('openCamera is not supported on web')

src/screens/Onboarding/StepFinished.tsx

@@ -580,6 +580,7 @@ function LegacyFinalStep({
 
       <OnboardingControls.Portal>
         <Button
+          testID="onboardingFinish"
           disabled={saving}
           key={state.activeStep} // remove focus state on nav
           color="primary"

src/screens/Onboarding/StepInterests/index.tsx

@@ -244,6 +244,7 @@ export function StepInterests() {
         ) : (
           <Button
             disabled={saving || !data}
+            testID="onboardingContinue"
             variant="solid"
             color="primary"
             size="large"

src/screens/Onboarding/StepProfile/index.tsx

@@ -268,6 +268,7 @@ export function StepProfile() {
         <OnboardingControls.Portal>
           <View style={[a.gap_md, gtMobile && a.flex_row_reverse]}>
             <Button
+              testID="onboardingContinue"
               variant="solid"
               color="primary"
               size="large"
@@ -279,6 +280,7 @@ export function StepProfile() {
               <ButtonIcon icon={ChevronRight} position="right" />
             </Button>
             <Button
+              testID="onboardingAvatarCreator"
               variant="ghost"
               color="primary"
               size="large"

src/screens/Onboarding/index.tsx

@@ -13,13 +13,15 @@ import {StepFinished} from '#/screens/Onboarding/StepFinished'
 import {StepInterests} from '#/screens/Onboarding/StepInterests'
 import {StepProfile} from '#/screens/Onboarding/StepProfile'
 import {Portal} from '#/components/Portal'
+import {ENV} from '#/env'
 import {StepSuggestedAccounts} from './StepSuggestedAccounts'
 
 export function Onboarding() {
   const {_} = useLingui()
   const gate = useGate()
-  const showValueProp = gate('onboarding_value_prop')
+  const showValueProp = ENV !== 'e2e' && gate('onboarding_value_prop')
-  const showSuggestedAccounts = gate('onboarding_suggested_accounts')
+  const showSuggestedAccounts =
+    ENV !== 'e2e' && gate('onboarding_suggested_accounts')
   const [state, dispatch] = useReducer(reducer, {
     ...initialState,
     totalSteps: showSuggestedAccounts ? 4 : 3,

src/screens/Signup/StepHandle/index.tsx

@@ -168,7 +168,10 @@ export function StepHandle() {
               </TextField.GhostText>
             )}
             {isHandleAvailable?.available && (
-              <CheckIcon style={[{color: t.palette.positive_600}, a.z_20]} />
+              <CheckIcon
+                testID="handleAvailableCheck"
+                style={[{color: t.palette.positive_600}, a.z_20]}
+              />
             )}
           </TextField.Root>
         </View>

src/view/com/composer/SelectMediaButton.tsx

@@ -1,10 +1,6 @@
 import {useCallback} from 'react'
 import {Keyboard} from 'react-native'
-import {
+import {type ImagePickerAsset} from 'expo-image-picker'
-  type ImagePickerAsset,
-  launchImageLibraryAsync,
-  UIImagePickerPreferredAssetRepresentationMode,
-} from 'expo-image-picker'
 import {msg, plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -13,8 +9,9 @@ import {
   usePhotoLibraryPermission,
   useVideoLibraryPermission,
 } from '#/lib/hooks/usePermissions'
+import {openUnifiedPicker} from '#/lib/media/picker'
 import {extractDataUriMime} from '#/lib/media/util'
-import {isIOS, isNative, isWeb} from '#/platform/detection'
+import {isNative, isWeb} from '#/platform/detection'
 import {MAX_IMAGES} from '#/view/com/composer/state/composer'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
@@ -448,18 +445,7 @@ export function SelectMediaButton({
     }
 
     const {assets, canceled} = await sheetWrapper(
-      launchImageLibraryAsync({
+      openUnifiedPicker({selectionCountRemaining}),
-        exif: false,
-        mediaTypes: ['images', 'videos'],
-        quality: 1,
-        allowsMultipleSelection: true,
-        legacy: true,
-        base64: isWeb,
-        selectionLimit: isIOS ? selectionCountRemaining : undefined,
-        preferredAssetRepresentationMode:
-          UIImagePickerPreferredAssetRepresentationMode.Current,
-        videoMaxDuration: VIDEO_MAX_DURATION_MS / 1000,
-      }),
     )
 
     if (canceled) return