[Release prep] 1.109.0 E2E fixes (#9216)

* list tests

* fix create account

* get onboarding e2e tests working

* get curate list test working

* Update thread-muting.yml

__e2e__/flows/create-account.yml

···
 - runScript:
     file: ../setupServer.js
     env:
-        SERVER_PATH: ""
+      SERVER_PATH: ""
 - runFlow:
     file: ../setupApp.yml
 - tapOn:
···
 - tapOn:
     id: "passwordInput"
 - inputText: "hunter22"
-- hideKeyboard
+- tapOn:
+    # hideKeyboard on ios is borked
+    # https://docs.maestro.dev/troubleshooting/known-issues#hidekeyboard-command-is-flaky
+    text: "Your account"
 - tapOn:
     id: "nextBtn"
 - tapOn:
···
 - inputText: "e2e-test"
 - extendedWaitUntil:
     visible:
-        id: "handleAvailableCheck"
+      id: "handleAvailableCheck"
 - tapOn:
     id: "nextBtn"
 - assertVisible: "Give your profile a face"

__e2e__/flows/curate-lists.yml

···
     id: "e2eGotoLists"
 - tapOn:
     id: "newUserListBtn"
-- assertVisible:
-    id: "createOrEditListModal"
+- waitForAnimationToEnd
+- assertVisible: "Create user list"
 - tapOn:
-    id: "editNameInput"
+    id: "editListNameInput"
 - inputText: "Good Ppl"
 - tapOn:
-    id: "editDescriptionInput"
+    id: "editListDescriptionInput"
 - inputText: "They good"
 - tapOn: "Save"
-- tapOn: "Save"
-- assertNotVisible:
-    id: "createOrEditListModal"
+- assertNotVisible: "Create user list"
 - tapOn: "People"
 - assertVisible: "Good Ppl"
 - assertVisible: "They good"
 
 - tapOn:
-    label: "Edit display name and description via the edit curatelist modal"
-    point: "90%,9%"
+    id: "moreOptionsBtn"
 - tapOn: "Edit list details"
-- assertVisible:
-    id: "createOrEditListModal"
+- assertVisible: "Edit user list"
 - tapOn:
-    id: "editNameInput"
+    id: "editListNameInput"
 - eraseText
 - inputText: "Bad Ppl"
 - hideKeyboard
 - tapOn:
-    id: "editDescriptionInput"
+    id: "editListDescriptionInput"
 - eraseText
 - inputText: "They bad"
 - tapOn: "Save"
-- tapOn: "Save"
-- assertNotVisible:
-    id: "createOrEditListModal"
+- assertNotVisible: "Edit user list"
 - assertVisible: Bad Ppl
 - assertVisible: They bad
 
 - tapOn:
-    label: "Remove description via the edit curatelist modal"
-    point: "90%,9%"
+    id: "moreOptionsBtn"
 - tapOn: "Edit list details"
-- assertVisible:
-    id: "createOrEditListModal"
+- assertVisible: "Edit user list"
 - tapOn:
-    id: "editDescriptionInput"
+    id: "editListDescriptionInput"
 - eraseText
 - tapOn: "Save"
-- tapOn: "Save"
-- assertNotVisible:
-    id: "createOrEditListModal"
+- assertNotVisible: "Edit user list"
 - assertNotVisible:
     id: "listDescription"
 
 - tapOn:
-    label: "Delete the curatelist"
-    point: "90%,9%"
+    id: "moreOptionsBtn"
 - tapOn: "Delete List"
 - tapOn:
     id: "confirmBtn"
···
     id: "newUserListBtn"
 - tapOn:
     id: "newUserListBtn"
-- assertVisible:
-    id: "createOrEditListModal"
+- assertVisible: "Create user list"
 - tapOn:
-    id: "editNameInput"
+    id: "editListNameInput"
 - inputText: "Good Ppl"
 - tapOn:
-    id: "editDescriptionInput"
+    id: "editListDescriptionInput"
 - inputText: "They good"
 - tapOn: "Save"
-- tapOn: "Save"
-- assertNotVisible:
-    id: "createOrEditListModal"
+- assertNotVisible: "Create user list"
 - tapOn: "People"
 - assertVisible: "Good Ppl"
 - assertVisible: "They good"

__e2e__/flows/mod-lists.yml

···
     id: "moderationlistsBtn"
 - tapOn: "New list"
 - tapOn:
-    id: "editNameInput"
+    id: "editListNameInput"
 - inputText: "Muted Users"
 - tapOn:
-    id: "editDescriptionInput"
+    id: "editListDescriptionInput"
 - inputText: "Shhh"
 - tapOn: "Save"
-- tapOn: "Save"
 
 # view modlist
 - assertVisible: "Muted Users"
 - assertVisible: "Shhh"
 
-# DOES NOT WORK - THE BUTTON IS NOT ACCESSIBLE
-# IGNORING FOR NOW, FIX THE COMPONENTS IN THE NEXT RELEASE
-# BECAUSE THIS IS A LEGIT A11Y PROBLEM -sfn
 - tapOn: "Subscribe to this list"
 - tapOn: "Mute accounts"
 - tapOn: "Mute list"

__e2e__/flows/onboarding-avatar-creator.yml

···
 - assertVisible: "What are your interests?"
 - tapOn:
     id: "onboardingContinue"
-- assertVisible: "You're ready to go!"
+- assertVisible: "Suggested for you"
+# mock server doesn't have suggestions api
+- tapOn: "Skip to next step"
+- swipe:
+    direction: "LEFT"
+- swipe:
+    direction: "LEFT"
+- assertVisible: "Complete onboarding and start using your account"
 - tapOn:
     id: "onboardingFinish"
 - tapOn:

__e2e__/flows/onboarding.yml

···
     id: "e2eStartOnboarding"
 - tapOn: "Select an avatar"
 - waitForAnimationToEnd
-- assertVisible: "Search your library…"
+- assertVisible: "Photos"
+- assertVisible: "Collections"
 - tapOn:
     point: "50%,22%"
 - waitForAnimationToEnd
···
 - assertVisible: "What are your interests?"
 - tapOn:
     id: "onboardingContinue"
-- assertVisible: "You're ready to go!"
+- assertVisible: "Suggested for you"
+# mock server doesn't have suggestions api
+- tapOn: "Skip to next step"
+- swipe:
+    direction: "LEFT"
+- swipe:
+    direction: "LEFT"
+- assertVisible: "Complete onboarding and start using your account"
 - tapOn:
     id: "onboardingFinish"
 - tapOn:

__e2e__/flows/thread-muting.yml

···
       id: "viewHeaderHomeFeedPrefsBtn"
 - tapOn:
     id: "replyBtn"
+- tapOn:
+    id: "replyBtn"
 - inputText: "Reply 1"
 - tapOn:
     id: "composerPublishBtn"
···
     id: "bottomBarProfileBtn"
 - tapOn:
     id: "profilePager-selector-1"
+- tapOn:
+    id: "replyBtn"
 - tapOn:
     id: "replyBtn"
 - inputText: "Reply 2"

__e2e__/setupApp.yml

···
 appId: xyz.blueskyweb.app
 ---
 - launchApp:
-   appId: "xyz.blueskyweb.app"
-   clearState: true
+    appId: "xyz.blueskyweb.app"
+    clearState: true
 - waitForAnimationToEnd
 - tapOn: "http://localhost:8081"
 - waitForAnimationToEnd
 - extendedWaitUntil:
     visible: "Continue"
 - swipe:
-   from: "Bluesky"
-   direction: DOWN
+    from: "Bluesky"
+    direction: DOWN
+    duration: 100
 - tapOn:
-   id: e2eProxyHeaderInput
+    id: e2eProxyHeaderInput
 - inputText: ${output.result}
 - pressKey: Enter
-- hideKeyboard

docs/build.md

···
 
 - Start in various console tabs:
   - `yarn e2e:mock-server`
-  - `yarn e2e:metro`
+  - `yarn e2e:start`
 - Run once: `yarn e2e:build`
 - Each test run: `yarn e2e:run`
 

docs/testing.md

···
 ### Running Maestro tests
 
 - In one tab, run `yarn e2e:mock-server`
-- In a second tab, run `yarn e2e:metro`
+- In a second tab, run `yarn e2e:build`
 - In a third tab, run `yarn e2e:run`
 
 ## Using Flashlight for Performance Testing

package.json

···
     "lint-native:fix": "swiftlint --fix ./modules && ktlint --format ./modules",
     "typecheck": "tsc --project ./tsconfig.check.json",
     "e2e:mock-server": "NODE_ENV=development ./jest/dev-infra/with-test-redis-and-db.sh ts-node --project tsconfig.e2e.json __e2e__/mock-server.ts",
-    "e2e:metro": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:ios",
-    "e2e:metro-android": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:android",
+    "e2e:build": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:ios",
+    "e2e:build-android": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:android",
+    "e2e:start": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo start",
     "e2e:run": "maestro test __e2e__",
     "perf:test": "NODE_ENV=test maestro test",
     "perf:test:run": "NODE_ENV=test maestro test __e2e__/perf-test.yml",

src/components/dialogs/lists/CreateOrEditListDialog.tsx

···
               multiline
               label={_(msg`Description`)}
               placeholder={descriptionPlaceholder}
-              testID="editProfileDescriptionInput"
+              testID="editListDescriptionInput"
             />
           </TextField.Root>
           {descriptionTooLong && (

src/screens/Onboarding/StepFinished/index.tsx

···
             </Button>
           )}
           <Button
+            testID="onboardingFinish"
             disabled={saving}
             key={state.activeStep} // remove focus state on nav
             color="primary"

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

···
-import {useCallback, useContext, useMemo, useState} from 'react'
+import {useContext, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {type ModerationOpts} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
···
 import {useLanguagePrefs} from '#/state/preferences'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useAgent, useSession} from '#/state/session'
-import {useOnboardingDispatch} from '#/state/shell'
 import {OnboardingControls} from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
 import {useSuggestedUsers} from '#/screens/Search/util/useSuggestedUsers'
···
   const queryClient = useQueryClient()
 
   const {state, dispatch} = useContext(Context)
-  const onboardDispatch = useOnboardingDispatch()
 
   const [selectedInterest, setSelectedInterest] = useState<string | null>(null)
   // keeping track of who was followed via the follow all button
···
   const isError = !!error
   const isEmpty =
     !isLoading && suggestedUsers && suggestedUsers.actors.length === 0
-
-  const skipOnboarding = useCallback(() => {
-    onboardDispatch({type: 'finish'})
-    dispatch({type: 'finish'})
-  }, [onboardDispatch, dispatch])
 
   const followableDids =
     suggestedUsers?.actors
···
             <Button
               color="secondary"
               size="large"
-              label={_(msg`Skip this flow`)}
-              onPress={skipOnboarding}>
+              label={_(msg`Skip to next step`)}
+              onPress={() => dispatch({type: 'next'})}>
               <ButtonText>
                 <Trans>Skip</Trans>
               </ButtonText>

src/screens/Onboarding/StepSuggestedStarterpacks/index.tsx

···
-import {useCallback, useContext} from 'react'
+import {useContext} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useOnboardingSuggestedStarterPacksQuery} from '#/state/queries/useOnboardingSuggestedStarterPacksQuery'
-import {useOnboardingDispatch} from '#/state/shell'
 import {OnboardingControls} from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
 import {atoms as a, useBreakpoints} from '#/alf'
···
   const moderationOpts = useModerationOpts()
 
   const {state, dispatch} = useContext(Context)
-  const onboardDispatch = useOnboardingDispatch()
 
   const {
     data: suggestedStarterPacks,
     isLoading,
-    error,
+    isError,
     isRefetching,
     refetch,
   } = useOnboardingSuggestedStarterPacksQuery({
     enabled: true,
     overrideInterests: state.interestsStepResults.selectedInterests,
   })
-
-  const isError = !!error
-
-  const skipOnboarding = useCallback(() => {
-    onboardDispatch({type: 'finish'})
-    dispatch({type: 'finish'})
-  }, [onboardDispatch, dispatch])
 
   return (
     <View style={[a.align_start]} testID="onboardingInterests">
···
             <Button
               color="secondary"
               size="large"
-              label={_(msg`Skip this flow`)}
-              onPress={skipOnboarding}>
+              label={_(msg`Skip to next step`)}
+              onPress={() => dispatch({type: 'next'})}>
               <ButtonText>
                 <Trans>Skip</Trans>
               </ButtonText>