stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -1,23 +1,21 @@
 import React from 'react';
 import { View } from 'react-native';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
-
-import { FileUploadPreview } from '../FileUploadPreview';
-
-import { Channel } from '../../Channel/Channel';
-import { Chat } from '../../Chat/Chat';
 
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
-import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { FileState } from '../../../utils/utils';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { generateUser } from '../../../mock-builders/generator/user';
-import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
-import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { FileState } from '../../../utils/utils';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { FileUploadPreview } from '../FileUploadPreview';
 
 function MockedFlatList(props) {
   const items = props.data.map((item, index) => {
@@ -30,16 +28,16 @@ function MockedFlatList(props) {
 describe('FileUploadPreview', () => {
   it('should render FileUploadPreview with all uploading files', async () => {
     const fileUploads = [
-      generateFileUploadPreview({ state: FileState.UPLOADING }),
-      generateFileUploadPreview({ state: FileState.UPLOADING }),
-      generateFileUploadPreview({ state: FileState.UPLOADING }),
+      generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADING }),
+      generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADING }),
+      generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOADING }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
 
     const user1 = generateUser();
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });
@@ -50,7 +48,7 @@ describe('FileUploadPreview', () => {
     await channel.query();
 
     const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
-      <ThemeProvider>
+      <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
@@ -60,7 +58,7 @@ describe('FileUploadPreview', () => {
             />
           </Channel>
         </Chat>
-      </ThemeProvider>,
+      </OverlayProvider>,
     );
 
     await waitFor(() => {
@@ -80,7 +78,7 @@ describe('FileUploadPreview', () => {
     });
 
     rerender(
-      <ThemeProvider>
+      <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
@@ -93,7 +91,7 @@ describe('FileUploadPreview', () => {
             />
           </Channel>
         </Chat>
-      </ThemeProvider>,
+      </OverlayProvider>,
     );
 
     const snapshot = toJSON();
@@ -105,16 +103,16 @@ describe('FileUploadPreview', () => {
 
   it('should render FileUploadPreview with all uploaded files', async () => {
     const fileUploads = [
-      generateFileUploadPreview({ state: FileState.UPLOADED }),
-      generateFileUploadPreview({ state: FileState.UPLOADED }),
-      generateFileUploadPreview({ state: FileState.UPLOADED }),
+      generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADED }),
+      generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADED }),
+      generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOADED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
 
     const user1 = generateUser();
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });
@@ -125,7 +123,7 @@ describe('FileUploadPreview', () => {
     await channel.query();
 
     const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
-      <ThemeProvider>
+      <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
@@ -135,7 +133,7 @@ describe('FileUploadPreview', () => {
             />
           </Channel>
         </Chat>
-      </ThemeProvider>,
+      </OverlayProvider>,
     );
 
     await waitFor(() => {
@@ -157,7 +155,7 @@ describe('FileUploadPreview', () => {
     });
 
     rerender(
-      <ThemeProvider>
+      <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
@@ -170,7 +168,7 @@ describe('FileUploadPreview', () => {
             />
           </Channel>
         </Chat>
-      </ThemeProvider>,
+      </OverlayProvider>,
     );
 
     const snapshot = toJSON();
@@ -182,16 +180,16 @@ describe('FileUploadPreview', () => {
 
   it('should render FileUploadPreview with all failed files', async () => {
     const fileUploads = [
-      generateFileUploadPreview({ state: FileState.UPLOAD_FAILED }),
-      generateFileUploadPreview({ state: FileState.UPLOAD_FAILED }),
-      generateFileUploadPreview({ state: FileState.UPLOAD_FAILED }),
+      generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOAD_FAILED }),
+      generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOAD_FAILED }),
+      generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOAD_FAILED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
 
     const user1 = generateUser();
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });
@@ -202,7 +200,7 @@ describe('FileUploadPreview', () => {
     await channel.query();
 
     const { getAllByTestId, queryAllByTestId, rerender, toJSON } = render(
-      <ThemeProvider>
+      <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
@@ -212,7 +210,7 @@ describe('FileUploadPreview', () => {
             />
           </Channel>
         </Chat>
-      </ThemeProvider>,
+      </OverlayProvider>,
     );
 
     await waitFor(() => {
@@ -239,7 +237,7 @@ describe('FileUploadPreview', () => {
     });
 
     rerender(
-      <ThemeProvider>
+      <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
@@ -252,7 +250,7 @@ describe('FileUploadPreview', () => {
             />
           </Channel>
         </Chat>
-      </ThemeProvider>,
+      </OverlayProvider>,
     );
 
     const snapshot = toJSON();
@@ -264,16 +262,16 @@ describe('FileUploadPreview', () => {
 
   it('should render FileUploadPreview with 1 uploading, 1 uploaded, and 1 failed file', async () => {
     const fileUploads = [
-      generateFileUploadPreview({ state: FileState.UPLOADING }),
-      generateFileUploadPreview({ state: FileState.UPLOADED }),
-      generateFileUploadPreview({ state: FileState.UPLOAD_FAILED }),
+      generateFileUploadPreview({ id: 'file-upload-id-1', state: FileState.UPLOADING }),
+      generateFileUploadPreview({ id: 'file-upload-id-2', state: FileState.UPLOADED }),
+      generateFileUploadPreview({ id: 'file-upload-id-3', state: FileState.UPLOAD_FAILED }),
     ];
     const removeFile = jest.fn();
     const uploadFile = jest.fn();
 
     const user1 = generateUser();
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });
@@ -284,7 +282,7 @@ describe('FileUploadPreview', () => {
     await channel.query();
 
     const { queryAllByTestId, rerender, toJSON } = render(
-      <ThemeProvider>
+      <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
@@ -294,7 +292,7 @@ describe('FileUploadPreview', () => {
             />
           </Channel>
         </Chat>
-      </ThemeProvider>,
+      </OverlayProvider>,
     );
     await waitFor(() => {
       expect(queryAllByTestId('active-upload-progress-indicator')).toHaveLength(
@@ -308,7 +306,7 @@ describe('FileUploadPreview', () => {
     });
 
     rerender(
-      <ThemeProvider>
+      <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel} FlatList={MockedFlatList}>
             <FileUploadPreview
@@ -321,7 +319,7 @@ describe('FileUploadPreview', () => {
             />
           </Channel>
         </Chat>
-      </ThemeProvider>,
+      </OverlayProvider>,
     );
 
     const snapshot = toJSON();

package/src/components/MessageInput/__tests__/ImageUploadPreview.test.js

@@ -1,19 +1,19 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { ImageUploadPreview } from '../ImageUploadPreview';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { generateImageUploadPreview } from '../../../mock-builders/generator/attachment';
 import { FileState } from '../../../utils/utils';
 
-import { generateImageUploadPreview } from '../../../mock-builders/generator/attachment';
+import { ImageUploadPreview } from '../ImageUploadPreview';
 
 describe('ImageUploadPreview', () => {
   it('should render ImageUploadPreview with all uploading images', async () => {
     const imageUploads = [
-      generateImageUploadPreview({ state: FileState.UPLOADING }),
-      generateImageUploadPreview({ state: FileState.UPLOADING }),
-      generateImageUploadPreview({ state: FileState.UPLOADING }),
+      generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOADING }),
+      generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOADING }),
+      generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOADING }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
@@ -68,9 +68,9 @@ describe('ImageUploadPreview', () => {
 
   it('should render ImageUploadPreview with all uploaded images', async () => {
     const imageUploads = [
-      generateImageUploadPreview({ state: FileState.UPLOADED }),
-      generateImageUploadPreview({ state: FileState.UPLOADED }),
-      generateImageUploadPreview({ state: FileState.UPLOADED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOADED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOADED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOADED }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
@@ -125,9 +125,9 @@ describe('ImageUploadPreview', () => {
 
   it('should render ImageUploadPreview with all failed images', async () => {
     const imageUploads = [
-      generateImageUploadPreview({ state: FileState.UPLOAD_FAILED }),
-      generateImageUploadPreview({ state: FileState.UPLOAD_FAILED }),
-      generateImageUploadPreview({ state: FileState.UPLOAD_FAILED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOAD_FAILED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOAD_FAILED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOAD_FAILED }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();
@@ -189,9 +189,9 @@ describe('ImageUploadPreview', () => {
 
   it('should render ImageUploadPreview with 1 uploading, 1 uploaded, and 1 failed image', async () => {
     const imageUploads = [
-      generateImageUploadPreview({ state: FileState.UPLOADING }),
-      generateImageUploadPreview({ state: FileState.UPLOADED }),
-      generateImageUploadPreview({ state: FileState.UPLOAD_FAILED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-1', state: FileState.UPLOADING }),
+      generateImageUploadPreview({ id: 'image-upload-preview-2', state: FileState.UPLOADED }),
+      generateImageUploadPreview({ id: 'image-upload-preview-3', state: FileState.UPLOAD_FAILED }),
     ];
     const removeImage = jest.fn();
     const uploadImage = jest.fn();

package/src/components/MessageInput/__tests__/MessageInput.test.js

@@ -1,40 +1,32 @@
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
-
-import { MessageInput } from '../MessageInput';
 
-import { Channel } from '../../Channel/Channel';
-import { Chat } from '../../Chat/Chat';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { AttachmentPickerProvider } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageInput } from '../MessageInput';
 
 describe('MessageInput', () => {
   const clientUser = generateUser();
   let chatClient;
   let channel;
 
-  const getComponent = ({ attachmentValue }) => {
-    const CameraSelectorIcon = () => null;
-    const FileSelectorIcon = () => null;
-    const ImageSelectorIcon = () => null;
-
-    return (
+  const getComponent = () => (
+    <OverlayProvider>
       <Chat client={chatClient}>
-        <AttachmentPickerProvider
-          value={{ ...attachmentValue, CameraSelectorIcon, FileSelectorIcon, ImageSelectorIcon }}
-        >
-          <Channel channel={channel}>
-            <MessageInput />
-          </Channel>
-        </AttachmentPickerProvider>
+        <Channel channel={channel}>
+          <MessageInput />
+        </Channel>
       </Chat>
-    );
-  };
+    </OverlayProvider>
+  );
 
   const initializeChannel = async (c) => {
     useMockedApis(chatClient, [getOrCreateChannelApi(c)]);
@@ -54,7 +46,7 @@ describe('MessageInput', () => {
   });
 
   it('should render MessageInput', async () => {
-    await initializeChannel(generateChannel());
+    await initializeChannel(generateChannelResponse());
     const openPicker = jest.fn();
     const closePicker = jest.fn();
     const attachmentValue = { closePicker, openPicker };

package/src/components/MessageInput/__tests__/SendButton.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { SendButton } from '../SendButton';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { SendButton } from '../SendButton';
 
 describe('SendButton', () => {
   it('should render a non-editing enabled SendButton', async () => {

package/src/components/MessageInput/__tests__/UploadProgressIndicator.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { UploadProgressIndicator } from '../UploadProgressIndicator';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { ProgressIndicatorTypes } from '../../../utils/utils';
+import { UploadProgressIndicator } from '../UploadProgressIndicator';
 
 describe('UploadProgressIndicator', () => {
   it('should render an inactive IN_PROGRESS UploadProgressIndicator', async () => {