stream-chat-react-native-core 9.10.1-beta.2 → 10.0.0-rc.1

package/src/utils/__tests__/installNativeMultipartAdapter.test.ts

@@ -1,11 +1,12 @@
 import type { AxiosProgressEvent, AxiosRequestConfig } from 'axios';
 
 import { getTestClient } from '../../mock-builders/mock';
-import { NativeHandlers, NativeMultipartUploadProgressConfig } from '../../native';
 import {
-  installNativeMultipartAdapter,
-  wrapAxiosAdapterWithNativeMultipart,
-} from '../installNativeMultipartAdapter';
+  isNativeMultipartUploadAvailable,
+  NativeHandlers,
+  NativeMultipartUploadProgressConfig,
+} from '../../native';
+import { installNativeMultipartAdapter } from '../installNativeMultipartAdapter';
 
 type NativeMultipartTestAxiosConfig = AxiosRequestConfig & {
   uploadProgress?: (event: AxiosProgressEvent) => void;
@@ -362,18 +363,9 @@ describe('installNativeMultipartAdapter', () => {
   it('installs only once per client', async () => {
     const client = getTestClient();
     preserveRequestData(client);
-    const defaultAdapter = jest.fn().mockResolvedValue({
-      config: {},
-      data: 'default',
-      headers: {},
-      status: 200,
-      statusText: 'OK',
-    });
-
-    client.axiosInstance.defaults.adapter = defaultAdapter;
+    const use = jest.spyOn(client.axiosInstance.interceptors.request, 'use');
 
     installNativeMultipartAdapter(client);
-    const installedAdapter = client.axiosInstance.defaults.adapter;
     installNativeMultipartAdapter(client);
 
     const formData = {
@@ -391,12 +383,20 @@ describe('installNativeMultipartAdapter', () => {
 
     await client.axiosInstance.post('/uploads/image', formData);
 
-    expect(client.axiosInstance.defaults.adapter).toBe(installedAdapter);
-    expect(defaultAdapter).not.toHaveBeenCalled();
-    expect(NativeHandlers.multipartUpload).toHaveBeenCalled();
+    expect(use).toHaveBeenCalledTimes(1);
+    expect(NativeHandlers.multipartUpload).toHaveBeenCalledTimes(1);
+  });
+
+  it('leaves the default adapter for the client’s own axios to resolve', () => {
+    const client = getTestClient();
+    const defaultAdapter = client.axiosInstance.defaults.adapter;
+
+    installNativeMultipartAdapter(client);
+
+    expect(client.axiosInstance.defaults.adapter).toBe(defaultAdapter);
   });
 
-  it('composes explicitly with a custom adapter', async () => {
+  it('keeps a custom default adapter for non-multipart requests', async () => {
     const client = getTestClient();
     preserveRequestData(client);
     const customAdapter = jest.fn().mockResolvedValue({
@@ -407,10 +407,8 @@ describe('installNativeMultipartAdapter', () => {
       statusText: 'OK',
     });
 
-    client.axiosInstance.defaults.adapter = wrapAxiosAdapterWithNativeMultipart(
-      client,
-      customAdapter,
-    );
+    client.axiosInstance.defaults.adapter = customAdapter;
+    installNativeMultipartAdapter(client);
 
     const multipartFormData = {
       _parts: [
@@ -429,9 +427,114 @@ describe('installNativeMultipartAdapter', () => {
 
     expect(NativeHandlers.multipartUpload).toHaveBeenCalled();
     expect(customAdapter).not.toHaveBeenCalled();
+    expect(client.axiosInstance.defaults.adapter).toBe(customAdapter);
 
     await client.axiosInstance.post('/messages', { text: 'hello' });
 
     expect(customAdapter).toHaveBeenCalled();
   });
+
+  it('rejects when an interceptor replaces the file body after it was routed natively', async () => {
+    const client = getTestClient();
+    preserveRequestData(client);
+
+    // Registered before the install, so axios runs it after the install's interceptor.
+    client.axiosInstance.interceptors.request.use((config) => {
+      config.data = { text: 'no longer a file' };
+      return config;
+    });
+    installNativeMultipartAdapter(client);
+
+    const formData = {
+      _parts: [
+        [
+          'file',
+          {
+            name: 'test.jpg',
+            type: 'image/jpeg',
+            uri: 'file:///tmp/test.jpg',
+          },
+        ],
+      ],
+    };
+
+    await expect(client.axiosInstance.post('/uploads/image', formData)).rejects.toThrow(
+      /request body changed/,
+    );
+    expect(NativeHandlers.multipartUpload).not.toHaveBeenCalled();
+  });
+
+  it('routes a FormData upload natively through axios’ default request transform', async () => {
+    // Every other test swaps `transformRequest` for a no-op. This one keeps axios' default, which
+    // runs between the install's interceptor (sees the body before it) and the native adapter (sees
+    // it after), so the body has to pass through it untouched. axios captures the global FormData
+    // when it loads, so it is loaded fresh with React Native's FormData installed globally — as it
+    // is in an app — instead of Node's.
+    const originalFormData = global.FormData;
+    const RNFormData = jest.requireActual('react-native/Libraries/Network/FormData').default;
+    global.FormData = RNFormData;
+
+    try {
+      let isolated!: {
+        getTestClient: typeof getTestClient;
+        installNativeMultipartAdapter: typeof installNativeMultipartAdapter;
+        NativeHandlers: typeof NativeHandlers;
+      };
+      jest.isolateModules(() => {
+        isolated = {
+          getTestClient: require('../../mock-builders/mock').getTestClient,
+          installNativeMultipartAdapter: require('../installNativeMultipartAdapter')
+            .installNativeMultipartAdapter,
+          NativeHandlers: require('../../native').NativeHandlers,
+        };
+      });
+      isolated.NativeHandlers.multipartUpload = NativeHandlers.multipartUpload;
+
+      const client = isolated.getTestClient();
+      const defaultAdapter = jest.fn();
+      client.axiosInstance.defaults.adapter = defaultAdapter;
+      isolated.installNativeMultipartAdapter(client);
+
+      const formData = new RNFormData();
+      formData.append('file', {
+        name: 'test.jpg',
+        type: 'image/jpeg',
+        uri: 'file:///tmp/test.jpg',
+      });
+      formData.append('user', JSON.stringify({ id: 'john' }));
+
+      const response = await client.axiosInstance.postForm('/uploads/image', formData);
+
+      expect(defaultAdapter).not.toHaveBeenCalled();
+      expect(NativeHandlers.multipartUpload).toHaveBeenCalledWith(
+        expect.objectContaining({
+          parts: [
+            {
+              fieldName: 'file',
+              fileName: 'test.jpg',
+              kind: 'file',
+              mimeType: 'image/jpeg',
+              uri: 'file:///tmp/test.jpg',
+            },
+            { fieldName: 'user', kind: 'text', value: JSON.stringify({ id: 'john' }) },
+          ],
+        }),
+      );
+      expect(response.status).toBe(200);
+    } finally {
+      global.FormData = originalFormData;
+    }
+  });
+
+  it('does not install when native multipart upload is unavailable', () => {
+    // Nothing registers a native uploader in the test setup.
+    NativeHandlers.multipartUpload = originalMultipartUpload;
+    expect(isNativeMultipartUploadAvailable()).toBe(false);
+    const client = getTestClient();
+    const use = jest.spyOn(client.axiosInstance.interceptors.request, 'use');
+
+    installNativeMultipartAdapter(client);
+
+    expect(use).not.toHaveBeenCalled();
+  });
 });

package/src/utils/attachmentUrls.ts

@@ -0,0 +1,19 @@
+import { Attachment, FileReference, isLocalUploadAttachment, LocalAttachment } from 'stream-chat';
+
+const localFileUri = (attachment: Attachment | LocalAttachment) =>
+  isLocalUploadAttachment(attachment)
+    ? (attachment.localMetadata.file as FileReference | undefined)?.uri
+    : undefined;
+
+/**
+ * The URL to play a video from — `asset_url` / `image_url`, or the local file it has yet to be
+ * uploaded from.
+ *
+ * Only videos need this. For them `setupVideoAttachmentPreviewMiddleware` replaces
+ * `localMetadata.previewUri` with the thumbnail the picker extracted, so `stream-chat`'s
+ * `getAttachmentPreviewUrl` would play the thumbnail. For every other type the LLC's
+ * `toLocalUploadAttachment` sets `previewUri` to the picked file's own `uri`, so use
+ * `getAttachmentPreviewUrl` there.
+ */
+export const getPlayableVideoUrl = (attachment: Attachment | LocalAttachment) =>
+  attachment.asset_url ?? attachment.image_url ?? localFileUri(attachment);

package/src/utils/getUrlOfImageAttachment.ts

@@ -1,4 +1,6 @@
-import type { Attachment } from 'stream-chat';
+import { type Attachment, getAttachmentPreviewUrl } from 'stream-chat';
+
+import { getPlayableVideoUrl } from './attachmentUrls';
 
 import { FileTypes } from '../types/types';
 
@@ -15,5 +17,10 @@ export function getUrlOfImageAttachment(
     return image.giphy?.[giphyVersion]?.url || image.thumb_url;
   }
 
-  return image.image_url || image.asset_url;
+  // Videos open in the player, so resolve the playable file rather than the thumbnail
+  if (image.type === FileTypes.Video) {
+    return getPlayableVideoUrl(image);
+  }
+
+  return getAttachmentPreviewUrl(image, image.image_url, image.asset_url);
 }