5 files changed, 25 insertions, 6 deletions
diff --git a/src/view/com/composer/Autocomplete.tsx b/src/view/com/composer/Autocomplete.tsx
index 4ee527ee8..2ccd05653 100644
--- a/src/view/com/composer/Autocomplete.tsx
+++ b/src/view/com/composer/Autocomplete.tsx
@@ -46,6 +46,7 @@ export function Autocomplete({
     <Animated.View style={[styles.outer, pal.view, pal.border, topAnimStyle]}>
       {items.map((item, i) => (
         <TouchableOpacity
+          testID="autocompleteButton"
           key={i}
           style={[pal.border, styles.item]}
           onPress={() => onSelect(item.handle)}>
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx
index dc0bec135..790e0f784 100644
--- a/src/view/com/composer/ComposePost.tsx
+++ b/src/view/com/composer/ComposePost.tsx
@@ -56,11 +56,12 @@ export const ComposePost = observer(function ComposePost({
   const [isSelectingPhotos, setIsSelectingPhotos] = useState(false)
   const [selectedPhotos, setSelectedPhotos] = useState<string[]>([])
 
-  const autocompleteView = useMemo<UserAutocompleteViewModel>(
+  // Using default import (React.use...) instead of named import (use...) to be able to mock store's data in jest environment
+  const autocompleteView = React.useMemo<UserAutocompleteViewModel>(
     () => new UserAutocompleteViewModel(store),
     [store],
   )
-  const localPhotos = useMemo<UserLocalPhotosModel>(
+  const localPhotos = React.useMemo<UserLocalPhotosModel>(
     () => new UserLocalPhotosModel(store),
     [store],
   )
@@ -179,11 +180,14 @@ export const ComposePost = observer(function ComposePost({
 
   return (
     <KeyboardAvoidingView
+      testID="composePostView"
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       style={[pal.view, styles.outer]}>
       <SafeAreaView style={s.flex1}>
         <View style={styles.topbar}>
-          <TouchableOpacity onPress={onPressCancel}>
+          <TouchableOpacity
+            testID="composerCancelButton"
+            onPress={onPressCancel}>
             <Text style={[pal.link, s.f18]}>Cancel</Text>
           </TouchableOpacity>
           <View style={s.flex1} />
@@ -192,7 +196,9 @@ export const ComposePost = observer(function ComposePost({
               <ActivityIndicator />
             </View>
           ) : canPost ? (
-            <TouchableOpacity onPress={onPressPublish}>
+            <TouchableOpacity
+              testID="composerPublishButton"
+              onPress={onPressPublish}>
               <LinearGradient
                 colors={[gradients.primary.start, gradients.primary.end]}
                 start={{x: 0, y: 0}}
@@ -257,6 +263,7 @@ export const ComposePost = observer(function ComposePost({
               size={50}
             />
             <TextInput
+              testID="composerTextInput"
               ref={textInput}
               multiline
               scrollEnabled
@@ -283,6 +290,7 @@ export const ComposePost = observer(function ComposePost({
           )}
         <View style={[pal.border, styles.bottomBar]}>
           <TouchableOpacity
+            testID="composerSelectPhotosButton"
             onPress={onPressSelectPhotos}
             style={[s.pl5]}
             hitSlop={HITSLOP}>
diff --git a/src/view/com/composer/PhotoCarouselPicker.tsx b/src/view/com/composer/PhotoCarouselPicker.tsx
index 6c6cd0a47..12dac5825 100644
--- a/src/view/com/composer/PhotoCarouselPicker.tsx
+++ b/src/view/com/composer/PhotoCarouselPicker.tsx
@@ -85,21 +85,25 @@ export const PhotoCarouselPicker = ({
 
   return (
     <ScrollView
+      testID="photoCarouselPickerView"
       horizontal
       style={[pal.view, styles.photosContainer]}
       showsHorizontalScrollIndicator={false}>
       <TouchableOpacity
+        testID="openCameraButton"
         style={[styles.galleryButton, pal.border, styles.photo]}
         onPress={handleOpenCamera}>
         <FontAwesomeIcon icon="camera" size={24} style={pal.link} />
       </TouchableOpacity>
       <TouchableOpacity
+        testID="openGalleryButton"
         style={[styles.galleryButton, pal.border, styles.photo]}
         onPress={handleOpenGallery}>
         <FontAwesomeIcon icon="image" style={pal.link} size={24} />
       </TouchableOpacity>
       {localPhotos.photos.map((item: any, index: number) => (
         <TouchableOpacity
+          testID="openSelectPhotoButton"
           key={`local-image-${index}`}
           style={[pal.border, styles.photoButton]}
           onPress={() => handleSelectPhoto(item.node.image.uri)}>
diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx
index 682a9990b..e8f52f84a 100644
--- a/src/view/com/composer/Prompt.tsx
+++ b/src/view/com/composer/Prompt.tsx
@@ -17,6 +17,7 @@ export function ComposePrompt({
   const pal = usePalette('default')
   return (
     <TouchableOpacity
+      testID="composePromptButton"
       style={[
         pal.view,
         pal.border,
diff --git a/src/view/com/composer/SelectedPhoto.tsx b/src/view/com/composer/SelectedPhoto.tsx
index 7711415f6..393c0b573 100644
--- a/src/view/com/composer/SelectedPhoto.tsx
+++ b/src/view/com/composer/SelectedPhoto.tsx
@@ -25,13 +25,14 @@ export const SelectedPhoto = ({
   )
 
   return selectedPhotos.length !== 0 ? (
-    <View style={styles.imageContainer}>
+    <View testID="selectedPhotosView" style={styles.imageContainer}>
       {selectedPhotos.length !== 0 &&
         selectedPhotos.map((item, index) => (
           <View
             key={`selected-image-${index}`}
             style={[styles.image, imageStyle]}>
             <TouchableOpacity
+              testID="removePhotoButton"
               onPress={() => handleRemovePhoto(item)}
               style={styles.removePhotoButton}>
               <FontAwesomeIcon
@@ -41,7 +42,11 @@ export const SelectedPhoto = ({
               />
             </TouchableOpacity>
 
-            <Image style={[styles.image, imageStyle]} source={{uri: item}} />
+            <Image
+              testID="selectedPhotoImage"
+              style={[styles.image, imageStyle]}
+              source={{uri: item}}
+            />
           </View>
         ))}
     </View>