get onboarding e2e tests working

__e2e__/flows/onboarding-avatar-creator.yml

@@ -30,13 +30,14 @@ appId: xyz.blueskyweb.app
 - assertVisible: "What are your interests?"
 - tapOn:
     id: "onboardingContinue"
-- tapOn:
+- assertVisible: "Suggested for you"
-    id: "onboardingContinue"
+# mock server doesn't have suggestions api
-- tapOn:
+- tapOn: "Skip to next step"
-    id: "onboardingContinue"
+- swipe:
-- tapOn:
+    direction: "LEFT"
-    id: "onboardingContinue"
+- swipe:
-- assertVisible: "You're ready to go!"
+    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__/setupApp.yml

@@ -1,18 +1,18 @@
 appId: xyz.blueskyweb.app
 ---
 - launchApp:
-   appId: "xyz.blueskyweb.app"
+    appId: "xyz.blueskyweb.app"
-   clearState: true
+    clearState: true
 - waitForAnimationToEnd
 - tapOn: "http://localhost:8081"
 - waitForAnimationToEnd
 - extendedWaitUntil:
     visible: "Continue"
 - swipe:
-   from: "Bluesky"
+    from: "Bluesky"
-   direction: DOWN
+    direction: DOWN
+    duration: 100
 - tapOn:
-   id: e2eProxyHeaderInput
+    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/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>