stream-chat-react-native-core 4.9.0-beta.3 → 4.10.0-beta.1

package/src/contexts/messageInputContext/__tests__/MessageInputContext.test.tsx

@@ -0,0 +1,208 @@
+import React, { PropsWithChildren } from 'react';
+
+import type { TextInput } from 'react-native';
+
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
+
+import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
+
+import {
+  generateFileAttachment,
+  generateImageAttachment,
+} from '../../../mock-builders/generator/attachment';
+
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+
+import * as NativeUtils from '../../../native';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { FileState } from '../../../utils/utils';
+import {
+  InputMessageInputContextValue,
+  MessageInputContextValue,
+  MessageInputProvider,
+  useMessageInputContext,
+} from '../MessageInputContext';
+
+type WrapperType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  Partial<InputMessageInputContextValue<StreamChatGenerics>>;
+
+afterEach(jest.clearAllMocks);
+
+describe('MessageInputContext', () => {
+  const Wrapper = <
+    StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  >({
+    children,
+    ...rest
+  }: PropsWithChildren<WrapperType<StreamChatGenerics>>) => (
+    <ChatProvider
+      value={
+        {
+          appSettings: {
+            app: {
+              file_upload_config: {
+                blocked_file_extensions: ['.mp3'],
+                blocked_mime_types: ['video/mp4'],
+              },
+              image_upload_config: {
+                blocked_file_extensions: ['.png'],
+                blocked_mime_types: ['image/png'],
+              },
+            },
+          } as unknown as AppSettingsAPIResponse<StreamChatGenerics>,
+          client: {
+            updateMessage: jest.fn().mockResolvedValue({ message: generateMessage() }),
+          } as unknown as StreamChat<StreamChatGenerics>,
+        } as ChatContextValue<StreamChatGenerics>
+      }
+    >
+      <MessageInputProvider
+        value={
+          {
+            ...rest,
+          } as MessageInputContextValue<StreamChatGenerics>
+        }
+      >
+        {children}
+      </MessageInputProvider>
+    </ChatProvider>
+  );
+
+  it('appendText works', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setFileUploads([]);
+      result.current.setImageUploads([]);
+      result.current.setMentionedUsers([]);
+      result.current.setText('dummy');
+      result.current.appendText('text');
+    });
+
+    expect(result.current.text).toBe('dummytext');
+  });
+
+  it('uploadNewImage with blocked image extensions to be not supported', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        maxNumberOfFiles: 2,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.uploadNewImage(
+        generateImageAttachment({
+          uri: 'https://www.bastiaanmulder.nl/wp-content/uploads/2013/11/dummy-image-square.png',
+        }),
+      );
+    });
+
+    expect(result.current.imageUploads[0].state).toBe(FileState.NOT_SUPPORTED);
+  });
+
+  it('onSelectItem works', () => {
+    const mentioned_user = generateUser();
+    const initialUsers = [mentioned_user.id];
+
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setFileUploads([]);
+      result.current.setImageUploads([]);
+      result.current.setMentionedUsers(initialUsers);
+      result.current.onSelectItem(mentioned_user);
+    });
+
+    expect(result.current.mentionedUsers.length).toBe(2);
+  });
+
+  it('setInputBoxRef works', () => {
+    const setInputRefMock = jest.fn();
+    const inputRef = React.createRef<TextInput | null>();
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        setInputRef: setInputRefMock,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setInputBoxRef(inputRef.current);
+    });
+
+    expect(setInputRefMock).toHaveBeenCalled();
+  });
+
+  it('openCommandsPicker works', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.openCommandsPicker();
+    });
+
+    expect(result.current.text).toBe('/');
+  });
+
+  it('openMentionPicker works', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.openMentionsPicker();
+    });
+
+    expect(result.current.text).toBe('@');
+  });
+
+  it('openAttachmentPicker works', async () => {
+    jest.spyOn(NativeUtils, 'pickDocument').mockImplementation(
+      jest.fn().mockResolvedValue({
+        cancelled: false,
+        docs: [generateFileAttachment(), generateImageAttachment()],
+      }),
+    );
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasFilePicker: true,
+        hasImagePicker: false,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.openAttachmentPicker();
+    });
+
+    expect(await result.current.pickFile()).toBe(undefined);
+  });
+});

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageInputContext's sendMessage exit sendMessage when edit message is not boolean image upload status is uploaded successfully 1`] = `
+Object {
+  "attachments": Array [
+    Object {
+      "fallback": undefined,
+      "image_url": undefined,
+      "mime_type": false,
+      "original_height": undefined,
+      "original_width": undefined,
+      "type": "image",
+    },
+  ],
+  "created_at": "Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)",
+  "html": "<p>regular</p>",
+  "id": "7a85f744-cc89-4f82-a1d4-5456432cc8bf",
+  "mentioned_users": Array [
+    "dummy1",
+    "dummy2",
+  ],
+  "quoted_message": undefined,
+  "text": "",
+  "type": "regular",
+  "updated_at": "Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)",
+  "user": Object {
+    "banned": false,
+    "created_at": "2020-04-27T13:39:49.331742Z",
+    "id": "5d6f6322-567e-4e1e-af90-97ef1ed5cc23",
+    "image": "fc86ddcb-bac4-400c-9afd-b0c0a1c0cd33",
+    "name": "50cbdd0e-ca7e-4478-9e2c-be0f1ac6a995",
+    "online": false,
+    "role": "user",
+    "updated_at": "2020-04-27T13:39:49.332087Z",
+  },
+}
+`;
+
+exports[`MessageInputContext's sendMessage exit sendMessage when file upload status is uploaded successfully 1`] = `
+Object {
+  "attachments": Array [
+    Object {
+      "asset_url": undefined,
+      "file_size": undefined,
+      "mime_type": "file",
+      "title": "dummy.pdf",
+      "type": "file",
+    },
+    Object {
+      "asset_url": undefined,
+      "duration": undefined,
+      "file_size": undefined,
+      "mime_type": "video/mp4",
+      "thumb_url": undefined,
+      "title": "dummy.pdf",
+      "type": "video",
+    },
+    Object {
+      "asset_url": undefined,
+      "duration": undefined,
+      "file_size": undefined,
+      "mime_type": "audio/mp3",
+      "title": "dummy.pdf",
+      "type": "audio",
+    },
+    Object {
+      "fallback": "dummy.pdf",
+      "image_url": undefined,
+      "mime_type": "application/pdf",
+      "type": "image",
+    },
+  ],
+  "mentioned_users": Array [
+    "dummy1",
+    "dummy2",
+  ],
+  "parent_id": undefined,
+  "quoted_message_id": undefined,
+  "show_in_channel": undefined,
+  "text": "",
+}
+`;
+
+exports[`MessageInputContext's sendMessage exit sendMessage when image upload status is uploaded successfully 1`] = `
+Object {
+  "attachments": Array [
+    Object {
+      "fallback": undefined,
+      "image_url": undefined,
+      "mime_type": false,
+      "original_height": undefined,
+      "original_width": undefined,
+      "type": "image",
+    },
+    Object {
+      "fallback": undefined,
+      "image_url": undefined,
+      "mime_type": false,
+      "original_height": undefined,
+      "original_width": undefined,
+      "type": "image",
+    },
+  ],
+  "mentioned_users": Array [
+    "dummy1",
+    "dummy2",
+  ],
+  "parent_id": undefined,
+  "quoted_message_id": undefined,
+  "show_in_channel": undefined,
+  "text": "",
+}
+`;

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessageAsync.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageInputContext's sendMessageAsync sendImageAsync is been called with finished file upload state and checked for snapshot) 1`] = `
+Object {
+  "attachments": Array [
+    Object {
+      "image_url": "https://www.test.com",
+      "type": "image",
+    },
+  ],
+  "mentioned_users": Array [],
+  "parent_id": undefined,
+  "quoted_message_id": undefined,
+  "show_in_channel": undefined,
+  "text": "",
+}
+`;
+
+exports[`MessageInputContext's sendMessageAsync sendImageAsync is been called with uploaded file upload state and checked for snapshot) 1`] = `
+Object {
+  "attachments": Array [
+    Object {
+      "image_url": "https://www.test.com",
+      "type": "image",
+    },
+  ],
+  "mentioned_users": Array [],
+  "parent_id": undefined,
+  "quoted_message_id": undefined,
+  "show_in_channel": undefined,
+  "text": "",
+}
+`;

package/src/contexts/messageInputContext/__tests__/isValidMessage.test.tsx

@@ -0,0 +1,71 @@
+import React, { PropsWithChildren } from 'react';
+import { act } from 'react-test-renderer';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+import {
+  generateFileUploadPreview,
+  generateImageUploadPreview,
+} from '../../../mock-builders/generator/attachment';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { FileState } from '../../../utils/utils';
+import {
+  InputMessageInputContextValue,
+  MessageInputContextValue,
+  MessageInputProvider,
+  useMessageInputContext,
+} from '../MessageInputContext';
+
+type WrapperType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  Partial<InputMessageInputContextValue<StreamChatGenerics>>;
+
+const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({
+  children,
+  ...rest
+}: PropsWithChildren<WrapperType<StreamChatGenerics>>) => (
+  <MessageInputProvider
+    value={
+      {
+        ...rest,
+      } as MessageInputContextValue<StreamChatGenerics>
+    }
+  >
+    {children}
+  </MessageInputProvider>
+);
+
+describe("MessageInputContext's isValidMessage", () => {
+  const initialProps = {
+    editing: true,
+    hasImagePicker: true,
+  };
+
+  it.each([
+    [[], [], [], 0, '', false],
+    [[], [], [], 0, 'Dummy Text', true],
+    [[generateFileUploadPreview()], [], [], 0, '', true],
+    [[], [generateImageUploadPreview()], [], 0, '', true],
+    [[], [generateImageUploadPreview({ state: FileState.UPLOAD_FAILED })], [], 0, '', false],
+    [[generateFileUploadPreview({ state: FileState.UPLOAD_FAILED })], [], [], 0, '', false],
+    [[generateFileUploadPreview({ state: FileState.UPLOADING })], [], [], 0, '', false],
+    [[], [generateImageUploadPreview({ state: FileState.UPLOADING })], [], 0, '', false],
+  ])(
+    'isValidMessage with fileUploads %p, imageUploads %p, mentionedUsers %p, numberOfUploads %d, text %s gives %p',
+    (fileUploads, imageUploads, mentionedUsers, numberOfUploads, text, isValidMessageStatus) => {
+      const { result } = renderHook(() => useMessageInputContext(), {
+        initialProps,
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.setFileUploads(fileUploads);
+        result.current.setImageUploads(imageUploads);
+        result.current.setMentionedUsers(mentionedUsers);
+        result.current.setNumberOfUploads(numberOfUploads);
+        result.current.setText(text);
+      });
+
+      expect(result.current.isValidMessage()).toBe(isValidMessageStatus);
+    },
+  );
+});

package/src/contexts/messageInputContext/__tests__/pickFile.test.tsx

@@ -0,0 +1,67 @@
+import React, { PropsWithChildren } from 'react';
+import { Alert } from 'react-native';
+import { act } from 'react-test-renderer';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import {
+  InputMessageInputContextValue,
+  MessageInputContextValue,
+  MessageInputProvider,
+  useMessageInputContext,
+} from '../MessageInputContext';
+
+type WrapperType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  Partial<InputMessageInputContextValue<StreamChatGenerics>>;
+
+const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({
+  children,
+  ...rest
+}: PropsWithChildren<WrapperType<StreamChatGenerics>>) => (
+  <MessageInputProvider
+    value={
+      {
+        ...rest,
+      } as MessageInputContextValue<StreamChatGenerics>
+    }
+  >
+    {children}
+  </MessageInputProvider>
+);
+
+afterEach(jest.clearAllMocks);
+
+describe("MessageInputContext's pickFile", () => {
+  jest.spyOn(Alert, 'alert');
+
+  const initialProps = {
+    editing: true,
+    maxNumberOfFiles: 2,
+  };
+
+  it.each([
+    [3, 1],
+    [1, 0],
+  ])(
+    'run pickFile when numberOfUploads is %d and alert is triggered %d number of times',
+    (numberOfUploads, numberOfTimesCalled) => {
+      const { rerender, result } = renderHook(() => useMessageInputContext(), {
+        initialProps,
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.setNumberOfUploads(numberOfUploads);
+      });
+
+      rerender({ editing: false, maxNumberOfFiles: 2 });
+
+      act(() => {
+        result.current.pickFile();
+      });
+
+      expect(Alert.alert).toHaveBeenCalledTimes(numberOfTimesCalled);
+    },
+  );
+});

package/src/contexts/messageInputContext/__tests__/removeFile.test.tsx

@@ -0,0 +1,82 @@
+import React, { PropsWithChildren } from 'react';
+import { act } from 'react-test-renderer';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+import { waitFor } from '@testing-library/react-native';
+
+import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import {
+  InputMessageInputContextValue,
+  MessageInputContextValue,
+  MessageInputProvider,
+  useMessageInputContext,
+} from '../MessageInputContext';
+
+type WrapperType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  Partial<InputMessageInputContextValue<StreamChatGenerics>>;
+
+const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({
+  children,
+  ...rest
+}: PropsWithChildren<WrapperType<StreamChatGenerics>>) => (
+  <MessageInputProvider
+    value={
+      {
+        ...rest,
+      } as MessageInputContextValue<StreamChatGenerics>
+    }
+  >
+    {children}
+  </MessageInputProvider>
+);
+
+describe("MessageInputContext's removeFile", () => {
+  const initialProps = {
+    editing: true,
+  };
+
+  const file = generateFileUploadPreview({
+    file: {
+      id: 'test',
+      name: 'Test Image',
+      uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+    },
+  });
+
+  it.each([
+    [file.id, 0, 0],
+    ['dummy', 1, 1],
+  ])(
+    'removeFile is been called with %s and checked for expectedFileUploadsLength %i, and expectedNumberOfUploadsLength %i)',
+    async (fileId, expectedFileUploadsLength, expectedNumberOfUploadsLength) => {
+      const { rerender, result } = renderHook(() => useMessageInputContext(), {
+        initialProps,
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.setFileUploads([file]);
+        result.current.setNumberOfUploads(1);
+      });
+
+      rerender({ editing: false });
+
+      await waitFor(() => {
+        expect(result.current.fileUploads.length).toBe(1);
+      });
+
+      act(() => {
+        result.current.removeFile(fileId);
+      });
+
+      rerender({ editing: true });
+
+      await waitFor(() => {
+        expect(result.current.fileUploads.length).toBe(expectedFileUploadsLength);
+        expect(result.current.numberOfUploads).toBe(expectedNumberOfUploadsLength);
+      });
+    },
+  );
+});

package/src/contexts/messageInputContext/__tests__/removeImage.test.tsx

@@ -0,0 +1,80 @@
+import React, { PropsWithChildren } from 'react';
+import { act } from 'react-test-renderer';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+import { waitFor } from '@testing-library/react-native';
+
+import { generateImageUploadPreview } from '../../../mock-builders/generator/attachment';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import {
+  InputMessageInputContextValue,
+  MessageInputContextValue,
+  MessageInputProvider,
+  useMessageInputContext,
+} from '../MessageInputContext';
+
+type WrapperType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  Partial<InputMessageInputContextValue<StreamChatGenerics>>;
+
+const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({
+  children,
+  ...rest
+}: PropsWithChildren<WrapperType<StreamChatGenerics>>) => (
+  <MessageInputProvider
+    value={
+      {
+        ...rest,
+      } as MessageInputContextValue<StreamChatGenerics>
+    }
+  >
+    {children}
+  </MessageInputProvider>
+);
+
+describe("MessageInputContext's removeImage", () => {
+  const initialProps = {
+    editing: true,
+  };
+  const image = generateImageUploadPreview({
+    file: {
+      id: 'test',
+      name: 'Test Image',
+      uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+    },
+  });
+  it.each([
+    [image.id, 0, 0],
+    ['dummy', 1, 1],
+  ])(
+    'removeImage is been called with %s and checked for expectedImageUploadsLength %i, and expectedNumberOfUploadsLength %i)',
+    async (imageId, expectedImageUploadsLength, expectedNumberOfUploadsLength) => {
+      const { rerender, result } = renderHook(() => useMessageInputContext(), {
+        initialProps,
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.setImageUploads([image]);
+        result.current.setNumberOfUploads(1);
+      });
+
+      rerender({ editing: false });
+
+      await waitFor(() => {
+        expect(result.current.imageUploads.length).toBe(1);
+      });
+
+      act(() => {
+        result.current.removeImage(imageId);
+      });
+
+      rerender({ editing: true });
+
+      await waitFor(() => {
+        expect(result.current.imageUploads.length).toBe(expectedImageUploadsLength);
+        expect(result.current.numberOfUploads).toBe(expectedNumberOfUploadsLength);
+      });
+    },
+  );
+});