Fabric migration - Testing new arch

__tests__/lib/images.test.ts

@@ -1,36 +1,41 @@
 import {
   downloadAndResize,
   DownloadAndResizeOpts,
-} from '../../src/lib/media/manip'
-import ImageResizer from '@bam.tech/react-native-image-resizer'
-import RNFetchBlob from 'rn-fetch-blob'
+  getResizedDimensions,
+} from 'lib/media/manip'
+import {manipulateAsync, SaveFormat} from 'expo-image-manipulator'
+import {createDownloadResumable, deleteAsync} from 'expo-file-system'
 
 describe('downloadAndResize', () => {
   const errorSpy = jest.spyOn(global.console, 'error')
 
   const mockResizedImage = {
-    path: jest.fn().mockReturnValue('file://resized-image.jpg'),
+    path: 'file://resized-image.jpg',
     size: 100,
-    width: 50,
-    height: 50,
+    width: 100,
+    height: 100,
     mime: 'image/jpeg',
   }
 
   beforeEach(() => {
-    const mockedCreateResizedImage =
-      ImageResizer.createResizedImage as jest.Mock
-    mockedCreateResizedImage.mockResolvedValue(mockResizedImage)
+    const mockedCreateResizedImage = manipulateAsync as jest.Mock
+    mockedCreateResizedImage.mockResolvedValue({
+      uri: 'file://resized-image.jpg',
+      ...mockResizedImage,
+    })
   })
 
   afterEach(() => {
     jest.clearAllMocks()
   })
 
   it('should return resized image for valid URI and options', async () => {
-    const mockedFetch = RNFetchBlob.fetch as jest.Mock
-    mockedFetch.mockResolvedValueOnce({
-      path: jest.fn().mockReturnValue('file://downloaded-image.jpg'),
-      flush: jest.fn(),
+    const mockedFetch = createDownloadResumable as jest.Mock
+    mockedFetch.mockReturnValue({
+      cancelAsync: jest.fn(),
+      downloadAsync: jest
+        .fn()
+        .mockResolvedValue({uri: 'file://resized-image.jpg'}),
     })
 
     const opts: DownloadAndResizeOpts = {
@@ -44,25 +49,22 @@ describe('downloadAndResize', () => {
 
     const result = await downloadAndResize(opts)
     expect(result).toEqual(mockResizedImage)
-    expect(RNFetchBlob.config).toHaveBeenCalledWith({
-      fileCache: true,
-      appendExt: 'jpeg',
-    })
-    expect(RNFetchBlob.fetch).toHaveBeenCalledWith(
-      'GET',
-      'https://example.com/image.jpg',
+    expect(createDownloadResumable).toHaveBeenCalledWith(
+      opts.uri,
+      expect.anything(),
+      {
+        cache: true,
+      },
     )
-    expect(ImageResizer.createResizedImage).toHaveBeenCalledWith(
-      'file://downloaded-image.jpg',
-      100,
-      100,
-      'JPEG',
-      100,
-      undefined,
-      undefined,
-      undefined,
-      {mode: 'cover'},
+    expect(manipulateAsync).toHaveBeenCalledWith(expect.anything(), [], {
+      format: SaveFormat.JPEG,
+    })
+    expect(manipulateAsync).toHaveBeenCalledWith(
+      expect.anything(),
+      [{resize: {height: opts.height, width: opts.width}}],
+      {format: SaveFormat.JPEG, compress: 0.9},
     )
+    expect(deleteAsync).toHaveBeenCalledWith(expect.anything())
   })
 
   it('should return undefined for invalid URI', async () => {
@@ -81,10 +83,12 @@ describe('downloadAndResize', () => {
   })
 
   it('should return undefined for unsupported file type', async () => {
-    const mockedFetch = RNFetchBlob.fetch as jest.Mock
-    mockedFetch.mockResolvedValueOnce({
-      path: jest.fn().mockReturnValue('file://downloaded-image'),
-      flush: jest.fn(),
+    const mockedFetch = createDownloadResumable as jest.Mock
+    mockedFetch.mockReturnValue({
+      cancelAsync: jest.fn(),
+      downloadAsync: jest
+        .fn()
+        .mockResolvedValue({uri: 'file://downloaded-image'}),
     })
 
     const opts: DownloadAndResizeOpts = {
@@ -98,24 +102,63 @@ describe('downloadAndResize', () => {
 
     const result = await downloadAndResize(opts)
     expect(result).toEqual(mockResizedImage)
-    expect(RNFetchBlob.config).toHaveBeenCalledWith({
-      fileCache: true,
-      appendExt: 'jpeg',
-    })
-    expect(RNFetchBlob.fetch).toHaveBeenCalledWith(
-      'GET',
-      'https://example.com/image',
+    expect(createDownloadResumable).toHaveBeenCalledWith(
+      opts.uri,
+      expect.anything(),
+      {
+        cache: true,
+      },
     )
-    expect(ImageResizer.createResizedImage).toHaveBeenCalledWith(
-      'file://downloaded-image',
-      100,
-      100,
-      'JPEG',
-      100,
-      undefined,
-      undefined,
-      undefined,
-      {mode: 'cover'},
+    expect(manipulateAsync).toHaveBeenCalledWith(expect.anything(), [], {
+      format: SaveFormat.JPEG,
+    })
+    expect(manipulateAsync).toHaveBeenCalledWith(
+      expect.anything(),
+      [{resize: {height: opts.height, width: opts.width}}],
+      {format: SaveFormat.JPEG, compress: 0.9},
     )
+    expect(deleteAsync).toHaveBeenCalledWith(expect.anything())
+  })
+})
+
+describe('produces correct new sizes for images', () => {
+  it('should not downsize whenever dimensions are below the max dimensions', () => {
+    const initialDimensionsOne = {
+      width: 1200,
+      height: 1000,
+    }
+    const resizedDimensionsOne = getResizedDimensions(initialDimensionsOne)
+
+    const initialDimensionsTwo = {
+      width: 1000,
+      height: 1200,
+    }
+    const resizedDimensionsTwo = getResizedDimensions(initialDimensionsTwo)
+
+    expect(resizedDimensionsOne).toEqual(initialDimensionsOne)
+    expect(resizedDimensionsTwo).toEqual(initialDimensionsTwo)
+  })
+
+  it('should resize dimensions and maintain aspect ratio if they are above the max dimensons', () => {
+    const initialDimensionsOne = {
+      width: 3000,
+      height: 1500,
+    }
+    const resizedDimensionsOne = getResizedDimensions(initialDimensionsOne)
+
+    const initialDimensionsTwo = {
+      width: 2000,
+      height: 4000,
+    }
+    const resizedDimensionsTwo = getResizedDimensions(initialDimensionsTwo)
+
+    expect(resizedDimensionsOne).toEqual({
+      width: 2000,
+      height: 1000,
+    })
+    expect(resizedDimensionsTwo).toEqual({
+      width: 1000,
+      height: 2000,
+    })
   })
 })

app.config.js

@@ -121,12 +121,14 @@ module.exports = function (config) {
           {
             ios: {
               deploymentTarget: '13.4',
+              newArchEnabled: true,
             },
             android: {
               compileSdkVersion: 34,
               targetSdkVersion: 34,
               buildToolsVersion: '34.0.0',
               kotlinVersion: '1.8.0',
+              newArchEnabled: true,
             },
           },
         ],

jest/jestSetup.js

@@ -36,14 +36,19 @@ jest.mock('react-native-safe-area-context', () => {
   }
 })
 
-jest.mock('rn-fetch-blob', () => ({
-  config: jest.fn().mockReturnThis(),
-  cancel: jest.fn(),
-  fetch: jest.fn(),
+jest.mock('expo-file-system', () => ({
+  createDownloadResumable: jest.fn(),
+  deleteAsync: jest.fn(),
+  getInfoAsync: jest.fn().mockResolvedValue({
+    size: 100,
+  }),
 }))
 
-jest.mock('@bam.tech/react-native-image-resizer', () => ({
-  createResizedImage: jest.fn(),
+jest.mock('expo-image-manipulator', () => ({
+  manipulateAsync: jest.fn().mockResolvedValue({
+    uri: 'file://resized-image',
+  }),
+  SaveFormat: jest.requireActual('expo-image-manipulator').SaveFormat,
 }))
 
 jest.mock('@segment/analytics-react-native', () => ({

metro.config.js

@@ -10,15 +10,6 @@ cfg.transformer.getTransformOptions = async () => ({
   transform: {
     experimentalImportSupport: true,
     inlineRequires: true,
-    nonInlinedRequires: [
-      // We can remove this option and rely on the default after
-      // https://github.com/facebook/metro/pull/1126 is released.
-      'React',
-      'react',
-      'react/jsx-dev-runtime',
-      'react/jsx-runtime',
-      'react-native',
-    ],
   },
 })