5 files changed, 151 insertions, 4 deletions
diff --git a/src/lib/media/picker.e2e.tsx b/src/lib/media/picker.e2e.tsx
index 096667479..d7b608041 100644
--- a/src/lib/media/picker.e2e.tsx
+++ b/src/lib/media/picker.e2e.tsx
@@ -5,12 +5,13 @@ import {compressIfNeeded} from './manip'
 
 let _imageCounter = 0
 async function getFile() {
-  const files = await RNFS.readDir(
+  let files = await RNFS.readDir(
     RNFS.LibraryDirectoryPath.split('/')
       .slice(0, -5)
       .concat(['Media', 'DCIM', '100APPLE'])
       .join('/'),
   )
+  files = files.filter(file => file.path.endsWith('.JPG'))
   const file = files[_imageCounter++ % files.length]
   return await compressIfNeeded({
     path: file.path,
diff --git a/src/screens/Onboarding/StepInterests/index.tsx b/src/screens/Onboarding/StepInterests/index.tsx
index 5440dcd2b..4eaf0366e 100644
--- a/src/screens/Onboarding/StepInterests/index.tsx
+++ b/src/screens/Onboarding/StepInterests/index.tsx
@@ -139,7 +139,7 @@ export function StepInterests() {
   )
 
   return (
-    <View style={[a.align_start]}>
+    <View style={[a.align_start]} testID="onboardingInterests">
       <IconCircle
         icon={isError ? EmojiSad : Hashtag}
         style={[
diff --git a/src/state/models/media/image.e2e.ts b/src/state/models/media/image.e2e.ts
new file mode 100644
index 000000000..ccabd5047
--- /dev/null
+++ b/src/state/models/media/image.e2e.ts
@@ -0,0 +1,146 @@
+import {Image as RNImage} from 'react-native-image-crop-picker'
+import {makeAutoObservable} from 'mobx'
+import {POST_IMG_MAX} from 'lib/constants'
+import {ActionCrop} from 'expo-image-manipulator'
+import {Position} from 'react-avatar-editor'
+import {Dimensions} from 'lib/media/types'
+
+export interface ImageManipulationAttributes {
+  aspectRatio?: '4:3' | '1:1' | '3:4' | 'None'
+  rotate?: number
+  scale?: number
+  position?: Position
+  flipHorizontal?: boolean
+  flipVertical?: boolean
+}
+
+export class ImageModel implements Omit<RNImage, 'size'> {
+  path: string
+  mime = 'image/jpeg'
+  width: number
+  height: number
+  altText = ''
+  cropped?: RNImage = undefined
+  compressed?: RNImage = undefined
+
+  // Web manipulation
+  prev?: RNImage
+  attributes: ImageManipulationAttributes = {
+    aspectRatio: 'None',
+    scale: 1,
+    flipHorizontal: false,
+    flipVertical: false,
+    rotate: 0,
+  }
+  prevAttributes: ImageManipulationAttributes = {}
+
+  constructor(image: Omit<RNImage, 'size'>) {
+    makeAutoObservable(this)
+
+    this.path = image.path
+    this.width = image.width
+    this.height = image.height
+  }
+
+  setRatio(aspectRatio: ImageManipulationAttributes['aspectRatio']) {
+    this.attributes.aspectRatio = aspectRatio
+  }
+
+  setRotate(degrees: number) {
+    this.attributes.rotate = degrees
+    this.manipulate({})
+  }
+
+  flipVertical() {
+    this.attributes.flipVertical = !this.attributes.flipVertical
+    this.manipulate({})
+  }
+
+  flipHorizontal() {
+    this.attributes.flipHorizontal = !this.attributes.flipHorizontal
+    this.manipulate({})
+  }
+
+  get ratioMultipliers() {
+    return {
+      '4:3': 4 / 3,
+      '1:1': 1,
+      '3:4': 3 / 4,
+      None: this.width / this.height,
+    }
+  }
+
+  getUploadDimensions(
+    dimensions: Dimensions,
+    maxDimensions: Dimensions = POST_IMG_MAX,
+    as: ImageManipulationAttributes['aspectRatio'] = 'None',
+  ) {
+    const {width, height} = dimensions
+    const {width: maxWidth, height: maxHeight} = maxDimensions
+
+    return width < maxWidth && height < maxHeight
+      ? {
+          width,
+          height,
+        }
+      : this.getResizedDimensions(as, POST_IMG_MAX.width)
+  }
+
+  getResizedDimensions(
+    as: ImageManipulationAttributes['aspectRatio'] = 'None',
+    maxSide: number,
+  ) {
+    const ratioMultiplier = this.ratioMultipliers[as]
+
+    if (ratioMultiplier === 1) {
+      return {
+        height: maxSide,
+        width: maxSide,
+      }
+    }
+
+    if (ratioMultiplier < 1) {
+      return {
+        width: maxSide * ratioMultiplier,
+        height: maxSide,
+      }
+    }
+
+    return {
+      width: maxSide,
+      height: maxSide / ratioMultiplier,
+    }
+  }
+
+  setAltText(altText: string) {
+    this.altText = altText.trim()
+  }
+
+  // Only compress prior to upload
+  async compress() {
+    // do nothing
+  }
+
+  // Mobile
+  async crop() {
+    // do nothing
+  }
+
+  // Web manipulation
+  async manipulate(
+    _attributes: {
+      crop?: ActionCrop['crop']
+    } & ImageManipulationAttributes,
+  ) {
+    // do nothing
+  }
+
+  resetCropped() {
+    this.manipulate({})
+  }
+
+  previous() {
+    this.cropped = this.prev
+    this.attributes = this.prevAttributes
+  }
+}
diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx
index 94e03ff7a..a7abbfaa8 100644
--- a/src/view/com/auth/create/Step1.tsx
+++ b/src/view/com/auth/create/Step1.tsx
@@ -88,7 +88,7 @@ export function Step1({
               style={[pal.textLight, {marginLeft: 14}]}
             />
             <TouchableOpacity
-              testID="loginSelectServiceButton"
+              testID="selectServiceButton"
               style={{
                 flexDirection: 'row',
                 flex: 1,
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index cc12467cf..bd21ddda2 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -208,7 +208,7 @@ let PostCtrls = ({
       {big && (
         <View style={styles.ctrlBig}>
           <TouchableOpacity
-            testID="likeBtn"
+            testID="shareBtn"
             style={[styles.btn]}
             onPress={onShare}
             accessibilityRole="button"