stream-chat-react-native-core 4.9.0-beta.3 → 4.9.0-beta.4

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

@@ -0,0 +1,286 @@
+import React, { PropsWithChildren } from 'react';
+import { act } from 'react-test-renderer';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+import type { MessageType } from '../../../components/MessageList/hooks/useMessageList';
+import {
+  generateFileUploadPreview,
+  generateImageUploadPreview,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+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 sendMessage", () => {
+  const message: boolean | MessageType<DefaultStreamChatGenerics> = generateMessage({
+    created_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
+    id: '7a85f744-cc89-4f82-a1d4-5456432cc8bf',
+    updated_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
+    user: generateUser({
+      id: '5d6f6322-567e-4e1e-af90-97ef1ed5cc23',
+      image: 'fc86ddcb-bac4-400c-9afd-b0c0a1c0cd33',
+      name: '50cbdd0e-ca7e-4478-9e2c-be0f1ac6a995',
+    }),
+  }) as unknown as MessageType<DefaultStreamChatGenerics>;
+
+  it('exit sendMessage when file upload status failed', async () => {
+    const files = generateFileUploadPreview({ state: FileState.UPLOAD_FAILED });
+    const images = generateImageUploadPreview({ state: FileState.UPLOAD_FAILED });
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setFileUploads([files]);
+      result.current.setImageUploads([images]);
+    });
+
+    act(() => {
+      result.current.sendMessage();
+    });
+
+    await expect(result.current.sending.current).toBeFalsy();
+  });
+
+  it('exit sendMessage when image upload status is uploading', async () => {
+    const images = generateImageUploadPreview({ state: FileState.UPLOADING });
+
+    const { rerender, result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        sendImageAsync: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setImageUploads([images]);
+      result.current.setMentionedUsers([]);
+      result.current.setText('');
+    });
+
+    act(() => {
+      result.current.sendMessage();
+    });
+
+    rerender({ editing: false, sendImageAsync: true });
+
+    await expect(result.current.asyncIds).toHaveLength(1);
+    await expect(result.current.sending.current).toBeFalsy();
+  });
+
+  it('exit sendMessage when image upload status is uploading and sendImageAsync is available', async () => {
+    const images = generateImageUploadPreview({ state: FileState.UPLOADING });
+
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setImageUploads([images]);
+      result.current.setMentionedUsers([]);
+      result.current.setText('');
+    });
+
+    act(() => {
+      result.current.sendMessage();
+    });
+
+    await expect(result.current.sending.current).toBeFalsy();
+  });
+
+  it('exit sendMessage when file upload status is uploading', async () => {
+    const files = generateFileUploadPreview({ state: FileState.UPLOADING });
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setFileUploads([files]);
+      result.current.setMentionedUsers([]);
+      result.current.setText('');
+    });
+
+    act(() => {
+      result.current.sendMessage();
+    });
+
+    await expect(result.current.sending.current).toBeFalsy();
+  });
+
+  it('exit sendMessage when image upload status is uploaded successfully', () => {
+    const sendMessageMock = jest.fn();
+    const clearQuotedMessageStateMock = jest.fn();
+    const images = [
+      generateImageUploadPreview({ state: FileState.UPLOADED }),
+      generateImageUploadPreview({ state: FileState.FINISHED }),
+    ];
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        clearQuotedMessageState: clearQuotedMessageStateMock,
+        editing: true,
+        quotedMessage: false,
+        sendMessage: sendMessageMock,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setImageUploads(images);
+      result.current.setMentionedUsers(['dummy1', 'dummy2']);
+      result.current.setText('');
+    });
+
+    act(() => {
+      result.current.sendMessage();
+    });
+
+    expect(sendMessageMock.mock.calls[0][0]).toMatchSnapshot();
+    expect(clearQuotedMessageStateMock).toHaveBeenCalled();
+    expect(result.current.sending.current).toBeFalsy();
+    expect(result.current.fileUploads.length).toBe(0);
+    expect(result.current.imageUploads.length).toBe(0);
+    expect(result.current.mentionedUsers.length).toBe(0);
+  });
+
+  it('exit sendMessage when image upload has an error and catch block is executed', () => {
+    const setQuotedMessageStateMock = jest.fn();
+    const clearQuotedMessageStateMock = jest.fn();
+    const generatedQuotedMessage: boolean | MessageType<DefaultStreamChatGenerics> = message;
+    const images = [
+      generateImageUploadPreview({ state: FileState.UPLOADED }),
+      generateImageUploadPreview({ state: FileState.FINISHED }),
+    ];
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        clearQuotedMessageState: clearQuotedMessageStateMock,
+        editing: true,
+        quotedMessage: generatedQuotedMessage,
+        setQuotedMessageState: setQuotedMessageStateMock,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setImageUploads(images);
+      result.current.setMentionedUsers(['dummy1', 'dummy2']);
+      result.current.setText('');
+    });
+
+    act(() => {
+      result.current.sendMessage();
+    });
+
+    expect(setQuotedMessageStateMock).toHaveBeenCalled();
+    expect(result.current.sending.current).toBeFalsy();
+  });
+
+  it('exit sendMessage when edit message is not boolean image upload status is uploaded successfully', () => {
+    const sendMessageMock = jest.fn();
+    const clearQuotedMessageStateMock = jest.fn();
+    const clearEditingStateMock = jest.fn();
+    const editMessageMock = jest.fn().mockResolvedValue({ data: {} });
+    const images = generateImageUploadPreview({ state: FileState.UPLOADED });
+    const generatedMessage: boolean | MessageType<DefaultStreamChatGenerics> = message;
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        clearEditingState: clearEditingStateMock,
+        clearQuotedMessageState: clearQuotedMessageStateMock,
+        editing: generatedMessage,
+        editMessage: editMessageMock,
+        quotedMessage: false,
+        sendMessage: sendMessageMock,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setImageUploads([images]);
+      result.current.setMentionedUsers(['dummy1', 'dummy2']);
+      result.current.setText('');
+    });
+
+    act(() => {
+      result.current.sendMessage();
+    });
+
+    expect(editMessageMock.mock.calls[0][0]).toMatchSnapshot();
+    expect(clearEditingStateMock).toHaveBeenCalled();
+    expect(result.current.sending.current).toBeFalsy();
+    expect(result.current.fileUploads.length).toBe(0);
+    expect(result.current.imageUploads.length).toBe(0);
+    expect(result.current.mentionedUsers.length).toBe(0);
+  });
+
+  it('exit sendMessage when file upload status is uploaded successfully', () => {
+    const files = [
+      generateFileUploadPreview({ state: FileState.UPLOADED }),
+      generateFileUploadPreview({ state: FileState.FINISHED, type: 'video/mp4' }),
+      generateFileUploadPreview({ state: FileState.UPLOADED, type: 'audio/mp3' }),
+      generateFileUploadPreview({ state: FileState.FINISHED, type: 'image/jpeg' }),
+    ];
+    const sendMessageMock = jest.fn();
+    const clearQuotedMessageStateMock = jest.fn();
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        clearQuotedMessageState: clearQuotedMessageStateMock,
+        editing: true,
+        quotedMessage: false,
+        sendMessage: sendMessageMock,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setFileUploads(files);
+      result.current.setMentionedUsers(['dummy1', 'dummy2']);
+      result.current.setText('');
+    });
+
+    act(() => {
+      result.current.sendMessage();
+    });
+
+    expect(sendMessageMock.mock.calls[0][0]).toMatchSnapshot();
+    expect(clearQuotedMessageStateMock).toHaveBeenCalled();
+    expect(result.current.sending.current).toBeFalsy();
+    expect(result.current.fileUploads.length).toBe(0);
+    expect(result.current.imageUploads.length).toBe(0);
+    expect(result.current.mentionedUsers.length).toBe(0);
+  });
+});

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

@@ -0,0 +1,124 @@
+import React, { PropsWithChildren } from 'react';
+import { act } from 'react-test-renderer';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+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 sendMessageAsync", () => {
+  it('sendMessageAsync returns undefined when image state is UPLOAD_FAILED', () => {
+    const asyncUploads = {
+      'test-file': {
+        state: FileState.UPLOAD_FAILED,
+        url: 'https://www.test.com',
+      },
+    };
+
+    const { rerender, result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setAsyncUploads(asyncUploads);
+    });
+
+    rerender({ editing: false });
+
+    let data;
+    act(() => {
+      data = result.current.sendMessageAsync('test-file');
+    });
+
+    expect(data).toBeUndefined();
+  });
+
+  it.each([[FileState.UPLOADED], [FileState.FINISHED]])(
+    'sendImageAsync is been called with %s file upload state and checked for snapshot)',
+    (fileState) => {
+      const sendMessageMock = jest.fn();
+      const asyncUploads = {
+        'test-file': {
+          state: fileState,
+          url: 'https://www.test.com',
+        },
+      };
+      const { rerender, result } = renderHook(() => useMessageInputContext(), {
+        initialProps: {
+          editing: true,
+          quotedMessage: false,
+          sendMessage: sendMessageMock,
+        },
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.setAsyncUploads(asyncUploads);
+      });
+
+      rerender({ editing: false, quotedMessage: false, sendMessage: sendMessageMock });
+
+      act(() => {
+        result.current.sendMessageAsync('test-file');
+      });
+
+      expect(sendMessageMock.mock.calls[0][0]).toMatchSnapshot();
+    },
+  );
+
+  it('sendMessageAsync goes to catch block', () => {
+    const sendMessageMock = jest.fn();
+    const asyncUploads = {
+      'test-file': {
+        state: FileState.FINISHED,
+        url: 'https://www.test.com',
+      },
+    };
+    const { rerender, result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        quotedMessage: false,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setAsyncUploads(asyncUploads);
+    });
+
+    rerender({ editing: false, quotedMessage: false });
+
+    act(() => {
+      result.current.sendMessageAsync('test-file');
+    });
+
+    expect(sendMessageMock).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,92 @@
+import React, { PropsWithChildren } from 'react';
+import { act } from 'react-test-renderer';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+import type { StreamChat } from 'stream-chat';
+
+import type { MessageType } from '../../../components/MessageList/hooks/useMessageList';
+
+import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+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>>) => (
+  <ChatProvider
+    value={
+      {
+        client: {
+          updateMessage: jest.fn().mockResolvedValue({ message: generateMessage() }),
+        } as unknown as StreamChat<StreamChatGenerics>,
+      } as ChatContextValue<StreamChatGenerics>
+    }
+  >
+    <MessageInputProvider
+      value={
+        {
+          ...rest,
+        } as MessageInputContextValue<StreamChatGenerics>
+      }
+    >
+      {children}
+    </MessageInputProvider>
+  </ChatProvider>
+);
+
+describe("MessageInputContext's updateMessage", () => {
+  const clearEditingStateMock = jest.fn();
+  const generatedMessage: boolean | MessageType<DefaultStreamChatGenerics> = generateMessage({
+    created_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
+    id: '7a85f744-cc89-4f82-a1d4-5456432cc8bf',
+    updated_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
+    user: generateUser({
+      id: '5d6f6322-567e-4e1e-af90-97ef1ed5cc23',
+      image: 'fc86ddcb-bac4-400c-9afd-b0c0a1c0cd33',
+      name: '50cbdd0e-ca7e-4478-9e2c-be0f1ac6a995',
+    }),
+  }) as unknown as MessageType<DefaultStreamChatGenerics>;
+
+  it('updateMessage throws error as clearEditingState is not available', async () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: generatedMessage,
+      },
+      wrapper: Wrapper,
+    });
+
+    await act(async () => {
+      await result.current.updateMessage();
+    });
+
+    expect(clearEditingStateMock).toHaveBeenCalledTimes(0);
+  });
+
+  it('updateMessage throws error as client.updateMessage is available', async () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        clearEditingState: clearEditingStateMock,
+        editing: generatedMessage,
+      },
+      wrapper: Wrapper,
+    });
+
+    await act(async () => {
+      await result.current.updateMessage();
+    });
+
+    expect(clearEditingStateMock).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,76 @@
+import React, { PropsWithChildren } from 'react';
+import { act } from 'react-test-renderer';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+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 uploadFile", () => {
+  it('uploadFile works', () => {
+    const doDocUploadRequestMock = jest.fn().mockResolvedValue({
+      file: {
+        url: '',
+      },
+      thumb_url: '',
+    });
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        doDocUploadRequest: doDocUploadRequestMock,
+        editing: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    expect(result.current.fileUploads).toHaveLength(0);
+
+    act(() => {
+      result.current.uploadFile({ newFile: generateFileUploadPreview({ state: '' }) });
+    });
+
+    expect(doDocUploadRequestMock).toHaveBeenCalled();
+  });
+
+  it('uploadFile catch block gets executed', () => {
+    const doDocUploadRequestMock = jest.fn().mockResolvedValue(new Error('This is an error'));
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        doDocUploadRequest: doDocUploadRequestMock,
+        editing: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    expect(result.current.fileUploads).toHaveLength(0);
+
+    act(() => {
+      result.current.uploadFile({ newFile: generateFileUploadPreview({ state: '' }) });
+    });
+
+    expect(result.current.fileUploads.length).toBe(0);
+  });
+});

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

@@ -0,0 +1,55 @@
+import React, { PropsWithChildren } from 'react';
+import { act } from 'react-test-renderer';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+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 uploadImage", () => {
+  it('uploadImage works', async () => {
+    const doImageUploadRequestMock = jest
+      .fn()
+      .mockResolvedValue({ file: 'https://www.test.com/dummy.png' });
+
+    const initialProps = {
+      doImageUploadRequest: doImageUploadRequestMock,
+      editing: true,
+    };
+
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps,
+      wrapper: Wrapper,
+    });
+
+    await act(async () => {
+      await result.current.uploadImage({ newImage: generateImageUploadPreview() });
+    });
+
+    expect(doImageUploadRequestMock).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,62 @@
+import { renderHook } from '@testing-library/react-hooks';
+import type { MessageType } from 'src/components';
+import type { DefaultStreamChatGenerics } from 'src/types/types';
+
+import {
+  generateFileAttachment,
+  generateImageAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+
+import { generateUser } from '../../../mock-builders/generator/user';
+import { useMessageDetailsForState } from '../hooks/useMessageDetailsForState';
+
+describe('useMessageDetailsForState', () => {
+  it.each([[{ message: true }], [{ initialValue: '', message: true }]])(
+    'test state of useMessageDetailsForState when initialProps differ',
+    () => {
+      const { result } = renderHook(({ message }) => useMessageDetailsForState(message), {
+        initialProps: { message: true },
+      });
+
+      expect(result.current.text).toBe('');
+    },
+  );
+
+  it('showMoreOptions is true when initialValue and text is same', () => {
+    const { result } = renderHook(
+      ({ initialValue, message }) => useMessageDetailsForState(message, initialValue),
+      { initialProps: { initialValue: 'Dummy text', message: true } },
+    );
+
+    expect(result.current.showMoreOptions).toBe(true);
+  });
+
+  it('fileUploads, imageUploads and mentionedUsers are not empty when attachments are present in message', () => {
+    const { result } = renderHook(
+      ({ initialValue, message }) =>
+        useMessageDetailsForState(
+          message as unknown as MessageType<DefaultStreamChatGenerics> | boolean,
+          initialValue,
+        ),
+      {
+        initialProps: {
+          initialValue: '',
+          message: generateMessage({
+            attachments: [
+              generateFileAttachment(),
+              generateImageAttachment(),
+              generateFileAttachment({ type: 'video' }),
+              generateFileAttachment({ type: 'audio' }),
+            ],
+            mentioned_users: [generateUser()],
+          }),
+        },
+      },
+    );
+
+    expect(result.current.fileUploads.length).toBeGreaterThan(0);
+    expect(result.current.imageUploads.length).toBeGreaterThan(0);
+    expect(result.current.mentionedUsers.length).toBeGreaterThan(0);
+  });
+});