stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/Message/MessageSimple/__tests__/Message.test.js

@@ -1,20 +1,20 @@
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
-
-import { Message } from '../../Message';
 
-import { Chat } from '../../../Chat/Chat';
-import { Channel } from '../../../Channel/Channel';
-import { MessageInput } from '../../../MessageInput/MessageInput';
-import { MessageList } from '../../../MessageList/MessageList';
+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 { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Channel } from '../../../Channel/Channel';
+import { Chat } from '../../../Chat/Chat';
+import { MessageInput } from '../../../MessageInput/MessageInput';
+import { Message } from '../../Message';
 
 describe('Message', () => {
   let channel;
@@ -26,7 +26,7 @@ describe('Message', () => {
 
   beforeEach(async () => {
     const members = [generateMember({ user })];
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members,
       messages,
     });
@@ -37,12 +37,15 @@ describe('Message', () => {
 
     renderMessage = (options) =>
       render(
-        <Chat client={chatClient}>
-          <Channel channel={channel}>
-            <Message groupStyles={['bottom']} {...options} />
-            <MessageInput />
-          </Channel>
-        </Chat>,
+        <OverlayProvider>
+          <Chat client={chatClient}>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} {...options} />
+              <MessageInput />
+            </Channel>
+          </Chat>
+          ,
+        </OverlayProvider>,
       );
   });
 
@@ -62,261 +65,24 @@ describe('Message', () => {
     });
   });
 
-  it('opens the action sheet on long press', async () => {
-    const message = generateMessage({ user });
-
-    const { getByTestId, queryAllByTestId } = renderMessage({ message });
-
-    await waitFor(() => {
-      expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(queryAllByTestId('action-sheet-container')).toHaveLength(0);
-      expect(queryAllByTestId('cancel-button')).toHaveLength(0);
-    });
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(getByTestId('action-sheet-container')).toBeTruthy();
-      expect(getByTestId('cancel-button')).toBeTruthy();
-    });
-  });
-
-  it('opens the action sheet and gives the option to add a reaction', async () => {
-    const message = generateMessage({ user });
-
-    const { getByTestId, getByText, queryAllByTestId } = renderMessage({
-      message,
-    });
-
-    await waitFor(() => {
-      expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(queryAllByTestId('action-sheet-container')).toHaveLength(0);
-    });
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(getByTestId('action-sheet-container')).toBeTruthy();
-      expect(getByText('Add Reaction')).toBeTruthy();
-    });
-  });
-
-  it('closes the action sheet on press of the cancel button', async () => {
-    const message = generateMessage({ user });
-
-    const { getByTestId, queryAllByTestId } = renderMessage({
-      message,
-    });
-
-    await waitFor(() => {
-      expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(queryAllByTestId('action-sheet-container')).toHaveLength(0);
-    });
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(getByTestId('action-sheet-container')).toBeTruthy();
-      expect(getByTestId('cancel-button')).toBeTruthy();
-    });
-
-    fireEvent(getByTestId('cancel-button'), 'press');
-
-    await waitFor(() => {
-      expect(queryAllByTestId('action-sheet-container')).toHaveLength(0);
-    });
-  });
-
-  it('toggles edit message ability based on `isMyMessage` prop', async () => {
-    const message = generateMessage({ user });
-
-    const { getByTestId, getByText, queryAllByTestId, queryAllByText, rerender } = renderMessage({
-      message,
-    });
-
-    await waitFor(() => {
-      expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(queryAllByTestId('action-sheet-container')).toHaveLength(0);
-    });
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(getByText('Edit Message')).toBeTruthy();
-    });
-
-    const message2 = generateMessage({
-      updated_at: 'newMessage',
-      user: { ...user, id: 'newUser' },
-    });
-
-    rerender(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <Message groupStyles={['bottom']} message={message2} />
-        </Channel>
-      </Chat>,
-    );
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(queryAllByText('Edit Message')).toHaveLength(0);
-    });
-  });
-
-  it('edits a message when selected from the action sheet', async () => {
+  it('calls the `onLongPressMessage` prop function if it exists', async () => {
     const message = generateMessage({ user });
-    const clientOnSpy = jest.spyOn(chatClient, 'updateMessage');
+    const onLongPressMessage = jest.fn();
 
-    const { getByTestId, queryAllByTestId, queryAllByText } = renderMessage({
+    const { getByTestId } = renderMessage({
       message,
+      onLongPressMessage,
     });
 
     await waitFor(() => {
       expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(queryAllByTestId('action-sheet-container')).toHaveLength(0);
-    });
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(queryAllByText('Edit Message')).toHaveLength(1);
-    });
-
-    fireEvent(getByTestId('action-sheet-item-Edit Message'), 'press');
-
-    await waitFor(() => {
-      expect(getByTestId('editing')).toBeTruthy();
-    });
-
-    fireEvent(getByTestId('send-button'), 'press');
-
-    await waitFor(() => {
-      expect(clientOnSpy).toHaveBeenCalled();
-    });
-  });
-
-  it('toggles delete message ability based on `isMyMessage` prop', async () => {
-    const message = generateMessage({ user });
-
-    const { getByTestId, getByText, queryAllByTestId, queryAllByText, rerender } = renderMessage({
-      message,
-    });
-
-    await waitFor(() => {
-      expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(queryAllByTestId('action-sheet-container')).toHaveLength(0);
-    });
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(getByText('Delete Message')).toBeTruthy();
-    });
-
-    const message2 = generateMessage({
-      updated_at: 'newMessage',
-      user: { ...user, id: 'newUser' },
-    });
-
-    rerender(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <Message groupStyles={['bottom']} message={message2} />
-        </Channel>
-      </Chat>,
-    );
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(queryAllByText('Delete Message')).toHaveLength(0);
-    });
-  });
-
-  it('deletes a message when selected from the action sheet', async () => {
-    const message = generateMessage({ user });
-    const clientOnSpy = jest.spyOn(chatClient, 'deleteMessage');
-
-    const { getByTestId, queryAllByTestId, queryAllByText } = renderMessage({
-      message,
-    });
-
-    await waitFor(() => {
-      expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(queryAllByTestId('action-sheet-container')).toHaveLength(0);
-    });
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(queryAllByText('Delete Message')).toHaveLength(1);
-    });
-
-    fireEvent(getByTestId('action-sheet-item-Delete Message'), 'press');
-
-    await waitFor(() => {
-      expect(clientOnSpy).toHaveBeenCalledWith(message.id);
-    });
-  });
-
-  it('calls the `onThreadSelect` prop from the action sheet to navigate into a thread', async () => {
-    const message = generateMessage({ user });
-    const onThreadSelect = jest.fn();
-    const MessageComponent = () => (
-      <Message groupStyles={['bottom']} message={message} onThreadSelect={onThreadSelect} />
-    );
-
-    const { getByTestId, queryAllByTestId, queryAllByText } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <MessageList Message={MessageComponent} />
-        </Channel>
-      </Chat>,
-    );
-
-    await waitFor(() => {
-      expect(getByTestId('message-simple-wrapper')).toBeTruthy();
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(queryAllByTestId('action-sheet-container')).toHaveLength(0);
-    });
-
-    fireEvent(getByTestId('message-content-wrapper'), 'longPress');
-
-    await waitFor(() => {
-      expect(queryAllByText('Reply')).toHaveLength(1);
-    });
-
-    fireEvent(getByTestId('action-sheet-item-Reply'), 'press');
-
-    await waitFor(() => {
-      expect(onThreadSelect).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  it('calls the `onLongPress` prop function if it exists', async () => {
-    const message = generateMessage({ user });
-    const onLongPress = jest.fn();
-
-    const { getByTestId } = renderMessage({ message, onLongPress });
-
-    await waitFor(() => {
-      expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(onLongPress).toHaveBeenCalledTimes(0);
+      expect(onLongPressMessage).toHaveBeenCalledTimes(0);
     });
 
     fireEvent(getByTestId('message-content-wrapper'), 'longPress');
 
     await waitFor(() => {
-      expect(onLongPress).toHaveBeenCalledTimes(1);
+      expect(onLongPressMessage).toHaveBeenCalledTimes(1);
     });
   });
 });

package/src/components/Message/MessageSimple/__tests__/MessageAvatar.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { MessageAvatar } from '../MessageAvatar';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -10,6 +9,7 @@ import {
   generateStaticMessage,
 } from '../../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { MessageAvatar } from '../MessageAvatar';
 
 afterEach(cleanup);
 
@@ -19,7 +19,7 @@ describe('MessageAvatar', () => {
     const message = generateMessage({
       user: { ...staticUser, image: undefined },
     });
-    const { getByTestId, getByText, queryAllByTestId, queryAllByText, rerender, toJSON } = render(
+    const { getByTestId, queryAllByTestId, rerender, toJSON } = render(
       <ThemeProvider style={defaultTheme}>
         <MessageAvatar alignment='right' groupStyles={['bottom']} message={message} />
       </ThemeProvider>,
@@ -27,8 +27,6 @@ describe('MessageAvatar', () => {
 
     await waitFor(() => {
       expect(getByTestId('message-avatar')).toBeTruthy();
-      expect(getByTestId('avatar-text')).toBeTruthy();
-      expect(getByText(staticUser.name.charAt(0))).toBeTruthy();
     });
 
     rerender(
@@ -39,7 +37,6 @@ describe('MessageAvatar', () => {
 
     await waitFor(() => {
       expect(getByTestId('spacer')).toBeTruthy();
-      expect(queryAllByTestId('avatar-text')).toHaveLength(0);
       expect(queryAllByTestId('avatar-image')).toHaveLength(0);
     });
 
@@ -49,14 +46,18 @@ describe('MessageAvatar', () => {
 
     rerender(
       <ThemeProvider style={defaultTheme}>
-        <MessageAvatar alignment='left' groupStyles={['single']} message={staticMessage} />
+        <MessageAvatar
+          alignment='left'
+          groupStyles={['single']}
+          message={staticMessage}
+          showAvatar
+        />
       </ThemeProvider>,
     );
 
     await waitFor(() => {
       expect(getByTestId('message-avatar')).toBeTruthy();
       expect(getByTestId('avatar-image')).toBeTruthy();
-      expect(queryAllByText(staticUser.name.charAt(0))).toHaveLength(0);
       expect(toJSON()).toMatchSnapshot();
     });
   });

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -1,20 +1,22 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { View } from 'react-native';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { Message } from '../../Message';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { Chat } from '../../../Chat/Chat';
-import { Channel } from '../../../Channel/Channel';
+import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
 
 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 { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateReaction } from '../../../../mock-builders/generator/reaction';
 import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Channel } from '../../../Channel/Channel';
+import { Chat } from '../../../Chat/Chat';
+import { Message } from '../../Message';
+import { MessageContent } from '../../MessageSimple/MessageContent';
 
 describe('MessageContent', () => {
   let channel;
@@ -26,7 +28,7 @@ describe('MessageContent', () => {
 
   beforeEach(async () => {
     const members = [generateMember({ user })];
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members,
       messages,
     });
@@ -37,11 +39,13 @@ describe('MessageContent', () => {
 
     renderMessage = (options) =>
       render(
-        <Chat client={chatClient}>
-          <Channel channel={channel}>
-            <Message groupStyles={['bottom']} {...options} />
-          </Channel>
-        </Chat>,
+        <ChannelsStateProvider>
+          <Chat client={chatClient}>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} {...options} />
+            </Channel>
+          </Chat>
+        </ChannelsStateProvider>,
       );
   });
 
@@ -85,20 +89,20 @@ describe('MessageContent', () => {
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('message-failed')).toBeTruthy();
+      expect(getByTestId('message-error')).toBeTruthy();
     });
   });
 
-  it('renders a message deleted message when `message.deleted_at` exists', async () => {
+  it('renders a message deleted message when `message.type` is `deleted`', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     const { getByTestId } = renderMessage({
-      message: { ...message, deleted_at: true },
+      message: { ...message, type: 'deleted' },
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-wrapper')).toBeTruthy();
+      expect(getByTestId('message-content-wrapper')).toBeTruthy();
       expect(getByTestId('message-deleted')).toBeTruthy();
     });
   });
@@ -107,11 +111,17 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({
-      message,
-      // eslint-disable-next-line react/display-name
-      MessageHeader: (props) => <View {...props} />,
-    });
+    const ContextMessageHeader = (props) => <View {...props} testID='message-header' />;
+
+    const { getByTestId } = render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} MessageHeader={ContextMessageHeader}>
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();
@@ -123,11 +133,17 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const { getByTestId } = renderMessage({
-      message,
-      // eslint-disable-next-line react/display-name
-      MessageFooter: (props) => <View {...props} />,
-    });
+    const ContextMessageFooter = (props) => <View {...props} testID='message-footer' />;
+
+    const { getByTestId } = render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} MessageFooter={ContextMessageFooter}>
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();
@@ -146,26 +162,11 @@ describe('MessageContent', () => {
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('show-time')).toBeTruthy();
+      expect(getByTestId('message-status-time')).toBeTruthy();
       expect(queryAllByTestId('message-footer')).toHaveLength(0);
     });
   });
 
-  it('renders the Gallery when image attachments exist', async () => {
-    const user = generateUser();
-    const message = generateMessage({
-      attachments: [{ image_url: 'https://i.imgur.com/SLx06PP.png', type: 'image' }],
-      user,
-    });
-
-    const { getByTestId } = renderMessage({ message });
-
-    await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('image-attachment-single')).toBeTruthy();
-    });
-  });
-
   it('renders the GalleryContainer when multiple image attachments exist', async () => {
     const user = generateUser();
     const message = generateMessage({
@@ -176,12 +177,11 @@ describe('MessageContent', () => {
       user,
     });
 
-    const { getByTestId, queryAllByTestId } = renderMessage({ message });
+    const { getByTestId } = renderMessage({ message });
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('image-multiple-container')).toBeTruthy();
-      expect(queryAllByTestId('image-multiple')).toHaveLength(2);
+      expect(getByTestId('gallery-container')).toBeTruthy();
     });
   });
 
@@ -208,7 +208,24 @@ describe('MessageContent', () => {
       user,
     });
 
-    const { getByTestId } = renderMessage({ message });
+    // This needs to be mocked like that cause native onLayout on MessageContent would never
+    // trigger.
+    const MessageContentWithMockedMessageContentWidth = (props) => {
+      useEffect(() => {
+        props.setMessageContentWidth(100);
+      }, []);
+      return <MessageContent {...props} />;
+    };
+
+    const { getByTestId } = render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
+            <Message groupStyles={['bottom']} message={message} reactionsEnabled />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();

package/src/components/Message/MessageSimple/__tests__/MessagePinnedHeader.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { cleanup, render, waitFor } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import {
+  generateMessage,
+  generateStaticMessage,
+} from '../../../../mock-builders/generator/message';
+import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { MessagePinnedHeader } from '../MessagePinnedHeader';
+
+afterEach(cleanup);
+
+describe('MessagePinnedHeader', () => {
+  it('should render message pinned', async () => {
+    const staticUser = generateStaticUser(0);
+    const message = generateMessage({
+      user: { ...staticUser, image: undefined },
+    });
+    const { getByTestId, rerender, toJSON } = render(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='right' message={message} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-pinned')).toBeTruthy();
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='right' message={message} />
+      </ThemeProvider>,
+    );
+
+    const staticMessage = generateStaticMessage('hi', {
+      user: staticUser,
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='left' message={staticMessage} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-pinned')).toBeTruthy();
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});