[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

@@ -25,7 +25,10 @@ appId: xyz.blueskyweb.app
 - 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:

__e2e__/flows/curate-lists.yml

@@ -17,63 +17,52 @@ appId: xyz.blueskyweb.app
     id: "e2eGotoLists"
 - tapOn:
     id: "newUserListBtn"
-- assertVisible:
+- waitForAnimationToEnd
-    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: "Create user list"
-- assertNotVisible:
-    id: "createOrEditListModal"
 - tapOn: "People"
 - assertVisible: "Good Ppl"
 - assertVisible: "They good"
 
 - tapOn:
-    label: "Edit display name and description via the edit curatelist modal"
+    id: "moreOptionsBtn"
-    point: "90%,9%"
 - tapOn: "Edit list details"
-- assertVisible:
+- assertVisible: "Edit user list"
-    id: "createOrEditListModal"
 - tapOn:
-    id: "editNameInput"
+    id: "editListNameInput"
 - eraseText
 - inputText: "Bad Ppl"
 - hideKeyboard
 - tapOn:
-    id: "editDescriptionInput"
+    id: "editListDescriptionInput"
 - eraseText
 - inputText: "They bad"
 - tapOn: "Save"
-- tapOn: "Save"
+- assertNotVisible: "Edit user list"
-- assertNotVisible:
-    id: "createOrEditListModal"
 - assertVisible: Bad Ppl
 - assertVisible: They bad
 
 - tapOn:
-    label: "Remove description via the edit curatelist modal"
+    id: "moreOptionsBtn"
-    point: "90%,9%"
 - tapOn: "Edit list details"
-- assertVisible:
+- assertVisible: "Edit user list"
-    id: "createOrEditListModal"
 - tapOn:
-    id: "editDescriptionInput"
+    id: "editListDescriptionInput"
 - eraseText
 - tapOn: "Save"
-- tapOn: "Save"
+- assertNotVisible: "Edit user list"
-- assertNotVisible:
-    id: "createOrEditListModal"
 - assertNotVisible:
     id: "listDescription"
 
 - tapOn:
-    label: "Delete the curatelist"
+    id: "moreOptionsBtn"
-    point: "90%,9%"
 - tapOn: "Delete List"
 - tapOn:
     id: "confirmBtn"
@@ -82,18 +71,15 @@ appId: xyz.blueskyweb.app
     id: "newUserListBtn"
 - tapOn:
     id: "newUserListBtn"
-- assertVisible:
+- assertVisible: "Create user list"
-    id: "createOrEditListModal"
 - tapOn:
-    id: "editNameInput"
+    id: "editListNameInput"
 - inputText: "Good Ppl"
 - tapOn:
-    id: "editDescriptionInput"
+    id: "editListDescriptionInput"
 - inputText: "They good"
 - tapOn: "Save"
-- tapOn: "Save"
+- assertNotVisible: "Create user list"
-- assertNotVisible:
-    id: "createOrEditListModal"
 - tapOn: "People"
 - assertVisible: "Good Ppl"
 - assertVisible: "They good"

__e2e__/flows/mod-lists.yml

@@ -19,21 +19,17 @@ appId: xyz.blueskyweb.app
     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

@@ -30,7 +30,14 @@ appId: xyz.blueskyweb.app
 - 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

@@ -16,7 +16,8 @@ appId: xyz.blueskyweb.app
     id: "e2eStartOnboarding"
 - tapOn: "Select an avatar"
 - waitForAnimationToEnd
-- assertVisible: "Search your library…"
+- assertVisible: "Photos"
+- assertVisible: "Collections"
 - tapOn:
     point: "50%,22%"
 - waitForAnimationToEnd
@@ -27,7 +28,14 @@ appId: xyz.blueskyweb.app
 - 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

@@ -31,6 +31,8 @@ appId: xyz.blueskyweb.app
       id: "viewHeaderHomeFeedPrefsBtn"
 - tapOn:
     id: "replyBtn"
+- tapOn:
+    id: "replyBtn"
 - inputText: "Reply 1"
 - tapOn:
     id: "composerPublishBtn"
@@ -69,6 +71,8 @@ appId: xyz.blueskyweb.app
     id: "profilePager-selector-1"
 - tapOn:
     id: "replyBtn"
+- tapOn:
+    id: "replyBtn"
 - inputText: "Reply 2"
 - tapOn:
     id: "composerPublishBtn"

__e2e__/setupApp.yml

@@ -11,8 +11,8 @@ appId: xyz.blueskyweb.app
 - swipe:
     from: "Bluesky"
     direction: DOWN
+    duration: 100
 - tapOn:
     id: e2eProxyHeaderInput
 - inputText: ${output.result}
 - pressKey: Enter
-- hideKeyboard

docs/build.md

@@ -75,7 +75,7 @@ After you do `yarn ios` and `yarn android` once, you can later just run `yarn we
 
 - 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

@@ -12,7 +12,7 @@ values.
 ### 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

@@ -46,8 +46,9 @@
     "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:build": "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-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

@@ -435,7 +435,7 @@ function DialogInner({
               multiline
               label={_(msg`Description`)}
               placeholder={descriptionPlaceholder}
-              testID="editProfileDescriptionInput"
+              testID="editListDescriptionInput"
             />
           </TextField.Root>
           {descriptionTooLong && (

src/screens/Onboarding/StepFinished/index.tsx

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

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

@@ -1,4 +1,4 @@
-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'
@@ -15,7 +15,6 @@ import {updateProfileShadow} from '#/state/cache/profile-shadow'
 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'
@@ -42,7 +41,6 @@ export function StepSuggestedAccounts() {
   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
@@ -77,11 +75,6 @@ export function StepSuggestedAccounts() {
   const isEmpty =
     !isLoading && suggestedUsers && suggestedUsers.actors.length === 0
 
-  const skipOnboarding = useCallback(() => {
-    onboardDispatch({type: 'finish'})
-    dispatch({type: 'finish'})
-  }, [onboardDispatch, dispatch])
-
   const followableDids =
     suggestedUsers?.actors
       .filter(
@@ -223,8 +216,8 @@ export function StepSuggestedAccounts() {
             <Button
               color="secondary"
               size="large"
-              label={_(msg`Skip this flow`)}
+              label={_(msg`Skip to next step`)}
-              onPress={skipOnboarding}>
+              onPress={() => dispatch({type: 'next'})}>
               <ButtonText>
                 <Trans>Skip</Trans>
               </ButtonText>

src/screens/Onboarding/StepSuggestedStarterpacks/index.tsx

@@ -1,11 +1,10 @@
-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'
@@ -22,12 +21,11 @@ export function StepSuggestedStarterpacks() {
   const moderationOpts = useModerationOpts()
 
   const {state, dispatch} = useContext(Context)
-  const onboardDispatch = useOnboardingDispatch()
 
   const {
     data: suggestedStarterPacks,
     isLoading,
-    error,
+    isError,
     isRefetching,
     refetch,
   } = useOnboardingSuggestedStarterPacksQuery({
@@ -35,13 +33,6 @@ export function StepSuggestedStarterpacks() {
     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">
       <Text style={[a.font_bold, a.text_3xl]}>
@@ -105,8 +96,8 @@ export function StepSuggestedStarterpacks() {
             <Button
               color="secondary"
               size="large"
-              label={_(msg`Skip this flow`)}
+              label={_(msg`Skip to next step`)}
-              onPress={skipOnboarding}>
+              onPress={() => dispatch({type: 'next'})}>
               <ButtonText>
                 <Trans>Skip</Trans>
               </ButtonText>