stream-chat-react-native-core 9.0.1 → 9.0.2-beta.1

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
+import type { LocalAudioAttachment } from 'stream-chat';
+
 import {
   MessageInputContext,
   MessageInputContextValue,
@@ -23,9 +25,15 @@ jest.mock('../../../native.ts', () => ({
   },
 }));
 
-const getComponent = (
-  props: Partial<AudioAttachmentProps & Pick<MessageInputContextValue, 'fileUploads'>>,
-) => (
+type GetComponentProps = Omit<Partial<AudioAttachmentProps>, 'item'> & {
+  fileUploads?: unknown[];
+  item?: unknown;
+  onLoad?: (...args: unknown[]) => unknown;
+  onPlayPause?: (...args: unknown[]) => unknown;
+  onProgress?: (...args: unknown[]) => unknown;
+};
+
+const getComponent = (props: GetComponentProps) => (
   <ThemeProvider theme={defaultTheme}>
     <MessageInputContext.Provider
       value={{ fileUploads: props.fileUploads } as unknown as MessageInputContextValue}
@@ -47,12 +55,16 @@ describe.skip('AudioAttachmentExpo', () => {
     const onPlayPauseMock = jest.fn();
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
         item: {
           file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' },
           paused: true,
           progress: 1,
-        } as unknown as FileUpload,
+        } as unknown as LocalAudioAttachment,
         onPlayPause: onPlayPauseMock,
       }),
     );
@@ -76,12 +88,16 @@ describe.skip('AudioAttachmentExpo', () => {
     const onPlayPauseMock = jest.fn();
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
         item: {
           file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' },
           paused: true,
           progress: 1,
-        } as unknown as FileUpload,
+        } as unknown as LocalAudioAttachment,
         onPlayPause: onPlayPauseMock,
       }),
     );
@@ -105,12 +121,16 @@ describe.skip('AudioAttachmentExpo', () => {
     const onPlayPauseMock = jest.fn();
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
         item: {
           file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' },
           paused: false,
           progress: 1,
-        } as unknown as FileUpload,
+        } as unknown as LocalAudioAttachment,
         onPlayPause: onPlayPauseMock,
       }),
     );
@@ -136,12 +156,16 @@ describe.skip('AudioAttachmentExpo', () => {
 
     const { unmount } = render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
         item: {
           file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' },
           paused: false,
           progress: 1,
-        } as unknown as FileUpload,
+        } as unknown as LocalAudioAttachment,
       }),
     );
 
@@ -154,11 +178,15 @@ describe.skip('AudioAttachmentExpo', () => {
   it('render text in rtl mode', () => {
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
         item: {
           file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' },
           progress: 1,
-        } as unknown as FileUpload,
+        } as unknown as LocalAudioAttachment,
       }),
     );
 
@@ -178,8 +206,12 @@ describe.skip('AudioAttachmentExpo', () => {
 
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
-        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment,
         onProgress: onProgressMock,
       }),
     );

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
+import type { LocalAudioAttachment } from 'stream-chat';
+
 import {
   MessageInputContext,
   MessageInputContextValue,
@@ -23,9 +25,15 @@ jest.mock('../../../native.ts', () => {
   };
 });
 
-const getComponent = (
-  props: Partial<AudioAttachmentProps & Pick<MessageInputContextValue, 'fileUploads'>>,
-) => (
+type GetComponentProps = Omit<Partial<AudioAttachmentProps>, 'item'> & {
+  fileUploads?: unknown[];
+  item?: unknown;
+  onLoad?: (...args: unknown[]) => unknown;
+  onPlayPause?: (...args: unknown[]) => unknown;
+  onProgress?: (...args: unknown[]) => unknown;
+};
+
+const getComponent = (props: GetComponentProps) => (
   <ThemeProvider theme={defaultTheme}>
     <MessageInputContext.Provider
       value={{ fileUploads: props.fileUploads } as unknown as MessageInputContextValue}
@@ -47,8 +55,16 @@ describe.skip('AudioAttachment', () => {
     const onPlayPauseMock = jest.fn();
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
-        item: { file: { name: 'audio.mp3' }, paused: true, progress: 1 } as unknown as FileUpload,
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
+        item: {
+          file: { name: 'audio.mp3' },
+          paused: true,
+          progress: 1,
+        } as unknown as LocalAudioAttachment,
         onPlayPause: onPlayPauseMock,
       }),
     );
@@ -71,8 +87,12 @@ describe.skip('AudioAttachment', () => {
 
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
-        item: { file: { name: 'audio.mp3' }, paused: true } as unknown as FileUpload,
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
+        item: { file: { name: 'audio.mp3' }, paused: true } as unknown as LocalAudioAttachment,
         onPlayPause: onPlayPauseMock,
       }),
     );
@@ -98,8 +118,12 @@ describe.skip('AudioAttachment', () => {
 
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
-        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment,
         onPlayPause: onPlayPauseMock,
       }),
     );
@@ -118,8 +142,12 @@ describe.skip('AudioAttachment', () => {
 
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
-        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment,
         onLoad: onLoadMock,
       }),
     );
@@ -141,8 +169,12 @@ describe.skip('AudioAttachment', () => {
 
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
-        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment,
         onPlayPause: onPlayPauseMock,
         onProgress: onProgressMock,
       }),
@@ -163,8 +195,12 @@ describe.skip('AudioAttachment', () => {
 
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
-        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment,
         onProgress: onProgressMock,
       }),
     );
@@ -193,8 +229,12 @@ describe.skip('AudioAttachment', () => {
 
     render(
       getComponent({
-        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
-        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        fileUploads: [
+          generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters<
+            typeof generateFileUploadPreview
+          >[0]),
+        ],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment,
         onProgress: onProgressMock,
       }),
     );

package/src/components/MessageInput/__tests__/{InputButtons.test.js → InputButtons.test.tsx}

@@ -1,19 +1,29 @@
 import React from 'react';
 
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { OverlayProvider } from '../../../contexts';
 
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
+import type { ChannelProps } from '../../Channel/Channel';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { InputButtons } from '../components/InputButtons/index';
 
-const renderComponent = ({ channelProps, client, props }) => {
+const renderComponent = ({
+  channelProps,
+  client,
+  props,
+}: {
+  channelProps: Partial<ChannelProps>;
+  client: StreamChat;
+  props: React.ComponentProps<typeof InputButtons>;
+}) => {
   return render(
     <OverlayProvider>
       <Chat client={client}>
-        <Channel {...channelProps}>
+        <Channel {...(channelProps as ChannelProps)}>
           <InputButtons {...props} />
         </Channel>
       </Chat>
@@ -22,8 +32,8 @@ const renderComponent = ({ channelProps, client, props }) => {
 };
 
 describe('InputButtons', () => {
-  let client;
-  let channel;
+  let client: StreamChat;
+  let channel: ChannelType;
 
   beforeEach(async () => {
     const { client: chatClient, channels } = await initiateClientWithChannels();

package/src/components/MessageInput/__tests__/{MessageComposer.test.js → MessageComposer.test.tsx}

@@ -3,6 +3,7 @@ import React from 'react';
 import { Alert } from 'react-native';
 
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
@@ -12,32 +13,39 @@ import { initiateClientWithChannels } from '../../../mock-builders/api/initiateC
 import { AttachmentPickerStore } from '../../../state-store/attachment-picker-store';
 import { AttachmentPickerContent } from '../../AttachmentPicker/components/AttachmentPickerContent';
 import { AttachmentPickerSelectionBar } from '../../AttachmentPicker/components/AttachmentPickerSelectionBar';
+import type { ChannelProps } from '../../Channel/Channel';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageComposer } from '../MessageComposer';
 
 jest.spyOn(Alert, 'alert');
-jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
-  jest.fn(() => {
-    const attachmentPickerStore = new AttachmentPickerStore();
-    attachmentPickerStore.setSelectedPicker('images');
-    return {
-      AttachmentPickerSelectionBar,
-      AttachmentPickerContent,
-      closePicker: jest.fn(),
-      openPicker: jest.fn(),
-      setBottomInset: jest.fn(),
-      setTopInset: jest.fn(),
-      attachmentPickerStore,
-    };
-  }),
-);
-
-const renderComponent = ({ channelProps, client, props }) => {
+jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(() => {
+  const attachmentPickerStore = new AttachmentPickerStore();
+  attachmentPickerStore.setSelectedPicker('images');
+  return {
+    AttachmentPickerSelectionBar,
+    AttachmentPickerContent,
+    closePicker: jest.fn(),
+    openPicker: jest.fn(),
+    setBottomInset: jest.fn(),
+    setTopInset: jest.fn(),
+    attachmentPickerStore,
+  } as unknown as ReturnType<typeof AttachmentPickerUtils.useAttachmentPickerContext>;
+});
+
+const renderComponent = ({
+  channelProps,
+  client,
+  props,
+}: {
+  channelProps: Partial<ChannelProps>;
+  client: StreamChat;
+  props: React.ComponentProps<typeof MessageComposer>;
+}) => {
   return render(
     <OverlayProvider>
       <Chat client={client}>
-        <Channel {...channelProps}>
+        <Channel {...(channelProps as ChannelProps)}>
           <MessageComposer {...props} />
         </Channel>
       </Chat>
@@ -46,8 +54,8 @@ const renderComponent = ({ channelProps, client, props }) => {
 };
 
 describe('MessageComposer', () => {
-  let client;
-  let channel;
+  let client: StreamChat;
+  let channel: ChannelType;
 
   beforeEach(async () => {
     jest.clearAllMocks();

package/src/components/MessageInput/__tests__/{SendButton.test.js → SendButton.test.tsx}

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { OverlayProvider } from '../../../contexts';
 
@@ -9,12 +10,20 @@ import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { SendButton } from '../components/OutputButtons/SendButton';
 
-const renderComponent = ({ client, channel, props }) => {
+const renderComponent = ({
+  client,
+  channel,
+  props,
+}: {
+  channel: ChannelType;
+  client: StreamChat;
+  props: Partial<React.ComponentProps<typeof SendButton>>;
+}) => {
   return render(
     <OverlayProvider>
       <Chat client={client}>
         <Channel channel={channel}>
-          <SendButton {...props} />
+          <SendButton {...(props as React.ComponentProps<typeof SendButton>)} />
         </Channel>
       </Chat>
     </OverlayProvider>,
@@ -22,8 +31,8 @@ const renderComponent = ({ client, channel, props }) => {
 };
 
 describe('SendButton', () => {
-  let client;
-  let channel;
+  let client: StreamChat;
+  let channel: ChannelType;
 
   beforeEach(async () => {
     const { client: chatClient, channels } = await initiateClientWithChannels();

package/src/components/MessageInput/__tests__/{SendMessageDisallowedIndicator.test.js → SendMessageDisallowedIndicator.test.tsx}

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
 import { Alert } from 'react-native';
 
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 import { MessageComposer as StreamMessageComposer } from 'stream-chat';
 
 import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
@@ -24,23 +25,29 @@ import { Chat } from '../../Chat/Chat';
 import { MessageComposer } from '../MessageComposer';
 
 jest.spyOn(Alert, 'alert');
-jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
-  jest.fn(() => {
-    const attachmentPickerStore = new AttachmentPickerStore();
-    attachmentPickerStore.setSelectedPicker('images');
-    return {
-      AttachmentPickerSelectionBar,
-      AttachmentPickerContent,
-      closePicker: jest.fn(),
-      openPicker: jest.fn(),
-      setBottomInset: jest.fn(),
-      setTopInset: jest.fn(),
-      attachmentPickerStore,
-    };
-  }),
-);
-
-const renderComponent = ({ channelProps, client, props }) => {
+jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(() => {
+  const attachmentPickerStore = new AttachmentPickerStore();
+  attachmentPickerStore.setSelectedPicker('images');
+  return {
+    AttachmentPickerSelectionBar,
+    AttachmentPickerContent,
+    closePicker: jest.fn(),
+    openPicker: jest.fn(),
+    setBottomInset: jest.fn(),
+    setTopInset: jest.fn(),
+    attachmentPickerStore,
+  } as unknown as ReturnType<typeof AttachmentPickerUtils.useAttachmentPickerContext>;
+});
+
+const renderComponent = ({
+  channelProps,
+  client,
+  props,
+}: {
+  channelProps: Partial<ComponentProps<typeof Channel>> & { channel: ChannelType };
+  client: StreamChat;
+  props: Partial<ComponentProps<typeof MessageComposer>>;
+}) => {
   return render(
     <OverlayProvider>
       <Chat client={client}>
@@ -52,14 +59,22 @@ const renderComponent = ({ channelProps, client, props }) => {
   );
 };
 
-const editedMessageSetup = async ({ composerConfig, composition } = {}) => {
+const editedMessageSetup = async ({
+  composerConfig,
+  composition,
+}: {
+  composerConfig?: ConstructorParameters<typeof StreamMessageComposer>[0]['config'];
+  composition?: ConstructorParameters<typeof StreamMessageComposer>[0]['composition'];
+} = {}) => {
   const { client: chatClient, channels } = await initiateClientWithChannels();
   const channel = channels[0];
 
   const messageComposer = new StreamMessageComposer({
     client: chatClient,
     composition,
-    compositionContext: composition,
+    compositionContext: composition as unknown as ConstructorParameters<
+      typeof StreamMessageComposer
+    >[0]['compositionContext'],
     config: composerConfig,
   });
 
@@ -70,8 +85,8 @@ const editedMessageSetup = async ({ composerConfig, composition } = {}) => {
 };
 
 describe('SendMessageDisallowedIndicator', () => {
-  let client;
-  let channel;
+  let client: StreamChat;
+  let channel: ChannelType;
 
   beforeEach(async () => {
     const { client: chatClient, channels } = await initiateClientWithChannels();
@@ -101,8 +116,8 @@ describe('SendMessageDisallowedIndicator', () => {
 
     act(() => {
       client.dispatchEvent({
-        cid: channel.data.cid,
-        own_capabilities: channel.data.own_capabilities.filter(
+        cid: channel.data!.cid,
+        own_capabilities: channel.data!.own_capabilities!.filter(
           (capability) => capability !== 'send-message',
         ),
         type: 'capabilities.changed',
@@ -139,11 +154,12 @@ describe('SendMessageDisallowedIndicator', () => {
       client.dispatchEvent({
         channel: {
           ...channel.data,
-          own_capabilities: channel.data.own_capabilities.filter(
-            (capability) => capability !== 'send-message',
+          own_capabilities: channel.data!.own_capabilities!.filter(
+            (capability: string) => capability !== 'send-message',
           ),
-        },
-        cid: channel.data.cid,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any,
+        cid: channel.data!.cid,
         type: 'channel.updated',
       });
     });
@@ -180,9 +196,9 @@ describe("SendMessageDisallowedIndicator's edited state", () => {
 
     act(() => {
       chatClient.dispatchEvent({
-        cid: customChannel.data.cid,
-        own_capabilities: customChannel.data.own_capabilities.filter(
-          (capability) => capability !== 'send-message',
+        cid: customChannel.data!.cid,
+        own_capabilities: customChannel.data!.own_capabilities!.filter(
+          (capability: string) => capability !== 'send-message',
         ),
         type: 'capabilities.changed',
       });