stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

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

@@ -0,0 +1,208 @@
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
+
+import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+
+import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+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 { Message } from '../../Message';
+
+describe('MessageSimple', () => {
+  let channel;
+  let chatClient;
+  let renderMessage;
+
+  const user = generateUser({ id: 'id', name: 'name' });
+  const messages = [generateMessage({ user })];
+
+  beforeEach(async () => {
+    const members = [generateMember({ user })];
+    const mockedChannel = generateChannelResponse({
+      members,
+      messages,
+    });
+
+    chatClient = await getTestClientWithUser(user);
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    channel = chatClient.channel('messaging', mockedChannel.id);
+
+    renderMessage = (options, channelProps) =>
+      render(
+        <ChannelsStateProvider>
+          <Chat client={chatClient}>
+            <Channel channel={channel} {...channelProps}>
+              <Message groupStyles={['bottom']} {...options} />
+            </Channel>
+          </Chat>
+        </ChannelsStateProvider>,
+      );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  it('renders the MessageSimple component', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-simple-wrapper')).toBeTruthy();
+    });
+  });
+
+  it('renders MessageAvatar when alignment is left', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('message-avatar')).toBeDefined();
+    });
+  });
+
+  it('do not renders MessageAvatar when alignment is right', async () => {
+    const user = generateUser({ id: 'id', name: 'name' });
+    const message = generateMessage({ user });
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('message-avatar')).toBeNull();
+    });
+  });
+
+  it('renders MessageDeleted when message type is deleted', async () => {
+    const user = generateUser();
+    const message = generateMessage({ type: 'deleted', user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('message-deleted')).toBeDefined();
+    });
+  });
+
+  it('renders MessageContent when message is not deleted', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('message-components')).toBeDefined();
+    });
+  });
+
+  it('renders ReactionListTop when reactionListPosition is top', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message }, { reactionListPosition: 'top' });
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Reaction List Top')).toBeDefined();
+      expect(screen.queryByLabelText('Reaction List Bottom')).toBeNull();
+    });
+  });
+
+  it('renders ReactionListBottom when reactionListPosition is bottom', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message }, { reactionListPosition: 'bottom' });
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Reaction List Top')).toBeNull();
+      expect(screen.queryByLabelText('Reaction List Bottom')).toBeDefined();
+    });
+  });
+
+  it('renders MessagePinnedHeader when message is pinned', async () => {
+    const user = generateUser();
+    const message = generateMessage({ pinned: true, user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Message Pinned Header')).not.toBeNull();
+    });
+  });
+
+  it('renders MessageHeader component if defined', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message }, { MessageHeader: () => <Text>Message Header</Text> });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Message Header')).not.toBeNull();
+    });
+  });
+
+  it('applies correct styles for when group styles are not single or bottom', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ groupStyles: ['top'], message });
+
+    await waitFor(() => {
+      console.log(screen.getByTestId('message-simple-wrapper').props.style[1]);
+      expect(screen.getByTestId('message-simple-wrapper').props.style[1]).toMatchObject({});
+    });
+  });
+
+  it('applies correct styles for when group styles are single/bottom and not last message', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-simple-wrapper').props.style[1]).toMatchObject({
+        marginBottom: 8,
+      });
+    });
+  });
+
+  it('noBorder true when only emojis text', async () => {
+    const user = generateUser();
+    const message = generateMessage({ quoted_message: undefined, text: '😊', user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      console.log(screen.getByTestId('message-content-wrapper').props.style);
+      expect(screen.getByTestId('message-content-wrapper').props.style[2]).toMatchObject({
+        borderWidth: 0,
+      });
+    });
+  });
+
+  it('noBorder true when only other attachments is present', async () => {
+    const user = generateUser();
+    const message = generateMessage({ attachments: [{ title: 'other', type: 'other' }], user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      console.log(screen.getByTestId('message-content-wrapper').props.style);
+      expect(screen.getByTestId('message-content-wrapper').props.style[2]).toMatchObject({
+        borderWidth: 0,
+      });
+    });
+  });
+});

package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.tsx

@@ -30,7 +30,7 @@ describe('MessageTextContainer', () => {
       user: { ...staticUser, image: undefined },
     });
     const { getByTestId, getByText, rerender, toJSON } = render(
-      <ThemeProvider style={defaultTheme}>
+      <ThemeProvider theme={defaultTheme}>
         <MessageTextContainer message={message as unknown as MessageType} />
       </ThemeProvider>,
     );
@@ -41,7 +41,7 @@ describe('MessageTextContainer', () => {
     });
 
     rerender(
-      <ThemeProvider style={defaultTheme}>
+      <ThemeProvider theme={defaultTheme}>
         <MessageTextContainer
           message={message as unknown as MessageType}
           MessageText={({ message }) => <Text testID='message-text'>{message?.text}</Text>}
@@ -60,7 +60,7 @@ describe('MessageTextContainer', () => {
     });
 
     rerender(
-      <ThemeProvider style={defaultTheme}>
+      <ThemeProvider theme={defaultTheme}>
         <MessageTextContainer message={staticMessage as unknown as MessageType} />
       </ThemeProvider>,
     );

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

@@ -0,0 +1,166 @@
+import React from 'react';
+
+import { Animated } from 'react-native';
+
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+
+import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+
+import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+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';
+
+describe('ReactionListBottom', () => {
+  let channel;
+  let chatClient;
+  let renderMessage;
+
+  const user = generateUser({ id: 'id', name: 'name' });
+  const messages = [generateMessage({ user })];
+
+  beforeEach(async () => {
+    const members = [generateMember({ user })];
+    const mockedChannel = generateChannelResponse({
+      members,
+      messages,
+    });
+
+    chatClient = await getTestClientWithUser(user);
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    channel = chatClient.channel('messaging', mockedChannel.id);
+
+    renderMessage = (options, channelProps) =>
+      render(
+        <ChannelsStateProvider>
+          <Chat client={chatClient}>
+            <Channel channel={channel} {...channelProps}>
+              <Message groupStyles={['bottom']} {...options} />
+            </Channel>
+          </Chat>
+        </ChannelsStateProvider>,
+      );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  it('renders the ReactionListBottom component', async () => {
+    const user = generateUser();
+    const reaction = generateReaction();
+    const message = generateMessage({
+      reaction_groups: { [reaction.type]: reaction },
+      user,
+    });
+
+    renderMessage({ message }, { reactionListPosition: 'bottom' });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Reaction List Bottom')).toBeTruthy();
+    });
+  });
+
+  it('renders null when no supported reaction', async () => {
+    const user = generateUser();
+    const reaction = generateReaction();
+    const message = generateMessage({
+      reaction_groups: { [reaction.type]: reaction },
+      user,
+    });
+
+    renderMessage({ message }, { reactionListPosition: 'bottom', supportedReactions: [] });
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Reaction List Bottom')).toBeNull();
+    });
+  });
+
+  it('renders null when no hasReactions false', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      reaction_groups: {},
+      user,
+    });
+
+    renderMessage({ hasReactions: false, message }, { reactionListPosition: 'bottom' });
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Reaction List Bottom')).toBeNull();
+    });
+  });
+
+  it('applies animation on press in', () => {
+    const animatedSpy = jest.spyOn(Animated, 'spring');
+    const user = generateUser();
+    const reaction = generateReaction();
+    const message = generateMessage({
+      reaction_groups: { [reaction.type]: reaction },
+      user,
+    });
+
+    renderMessage({ message }, { reactionListPosition: 'bottom' });
+
+    const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
+
+    fireEvent(reactionListBottomItem, 'onPressIn');
+
+    expect(animatedSpy).toHaveBeenCalledWith(expect.any(Animated.Value), {
+      toValue: 0.8,
+      useNativeDriver: true,
+    });
+  });
+
+  it('applies animation on press out', () => {
+    const animatedSpy = jest.spyOn(Animated, 'spring');
+    const user = generateUser();
+    const reaction = generateReaction();
+    const message = generateMessage({
+      reaction_groups: { [reaction.type]: reaction },
+      user,
+    });
+
+    renderMessage({ message }, { reactionListPosition: 'bottom' });
+
+    const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
+
+    fireEvent(reactionListBottomItem, 'onPressOut');
+
+    expect(animatedSpy).toHaveBeenCalledWith(expect.any(Animated.Value), {
+      toValue: 1,
+      useNativeDriver: true,
+    });
+  });
+
+  it('call handleReaction on press', () => {
+    const handleReactionMock = jest.fn();
+    const user = generateUser();
+    const reaction = generateReaction();
+    const message = generateMessage({
+      reaction_groups: { [reaction.type]: reaction },
+      user,
+    });
+
+    renderMessage(
+      {
+        handleReaction: handleReactionMock,
+        message,
+      },
+      { reactionListPosition: 'bottom' },
+    );
+
+    const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
+
+    fireEvent(reactionListBottomItem, 'onPress');
+
+    expect(handleReactionMock).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
+
+import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+
+import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+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 { ReactionListTop } from '../ReactionList/ReactionListTop';
+
+describe('ReactionListTop', () => {
+  let channel;
+  let chatClient;
+  let renderMessage;
+
+  const user = generateUser({ id: 'id', name: 'name' });
+  const messages = [generateMessage({ user })];
+
+  beforeEach(async () => {
+    const members = [generateMember({ user })];
+    const mockedChannel = generateChannelResponse({
+      members,
+      messages,
+    });
+
+    chatClient = await getTestClientWithUser(user);
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    channel = chatClient.channel('messaging', mockedChannel.id);
+
+    renderMessage = (options, channelProps) =>
+      render(
+        <ChannelsStateProvider>
+          <Chat client={chatClient}>
+            <Channel channel={channel} {...channelProps}>
+              <ReactionListTop {...options} />
+            </Channel>
+          </Chat>
+        </ChannelsStateProvider>,
+      );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  it('renders the ReactionListTop component', async () => {
+    renderMessage({
+      hasReactions: true,
+      messageContentWidth: 100,
+      reactions: [{ count: 1, own: true, type: 'love' }],
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Reaction List Top')).toBeTruthy();
+    });
+  });
+
+  it('return null in ReactionListTop component when hasReactions false', async () => {
+    renderMessage({
+      hasReactions: false,
+      messageContentWidth: 100,
+      reactions: [{ count: 1, own: true, type: 'love' }],
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Reaction List Top')).toBeNull();
+    });
+  });
+
+  it('return null in ReactionListTop component when supportedReactions are not matching', async () => {
+    renderMessage(
+      {
+        hasReactions: false,
+        messageContentWidth: 100,
+        reactions: [{ count: 1, own: true, type: 'love' }],
+      },
+      { supportedReactions: [] },
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Reaction List Top')).toBeNull();
+    });
+  });
+});

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

@@ -2,14 +2,13 @@
 
 exports[`MessagePinnedHeader should render message pinned 1`] = `
 <View
+  accessibilityLabel="Message Pinned Header"
   style={
     [
       {
-        "display": "flex",
+        "alignItems": "center",
         "flexDirection": "row",
-      },
-      {
-        "justifyContent": "flex-start",
+        "justifyContent": "center",
       },
       {},
     ]
@@ -18,14 +17,14 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
+    bbHeight={16}
+    bbWidth={16}
+    fill="#7A7A7A"
     focusable={false}
-    height={24}
+    height={16}
     meetOrSlice={0}
     minX={0}
     minY={0}
-    pathFill="#7A7A7A"
     style={
       [
         {
@@ -34,37 +33,39 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
         },
         {
           "flex": 0,
-          "height": 24,
-          "width": 24,
+          "height": 16,
+          "width": 16,
         },
       ]
     }
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
+    vbHeight={16}
+    vbWidth={16}
+    width={16}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4286216826,
           "type": 0,
         }
       }
+      propList={
+        [
+          "fill",
+        ]
+      }
     >
       <RNSVGPath
-        clipRule={0}
-        d="M10.694 1.52908C10.5304 1.36544 10.2937 1.2982 10.0685 1.35137C9.84327 1.40454 9.6616 1.57053 9.5884 1.79006L9.16613 3.05694L6.72027 5.50284C5.12809 5.14216 3.59999 5.79028 2.19557 7.1947C1.93481 7.45543 1.93481 7.87823 2.19557 8.13896L4.55625 10.4997L3.1399 11.916C2.87915 12.1768 2.87915 12.5995 3.1399 12.8603C3.40065 13.1211 3.82342 13.1211 4.08417 12.8603L5.50051 11.4439L7.8612 13.8046C8.12193 14.0654 8.54473 14.0654 8.80547 13.8046C10.2099 12.4002 10.858 10.8721 10.4973 9.2799L12.9432 6.83403L14.2101 6.41173C14.4296 6.33855 14.5956 6.15692 14.6488 5.9317C14.7019 5.70648 14.6347 5.46979 14.4711 5.30616L10.694 1.52908ZM10.3832 3.62876L10.5137 3.23728L12.7629 5.4865L12.3714 5.617C12.2731 5.64977 12.1837 5.705 12.1104 5.7783L9.2776 8.6111C9.09873 8.78996 9.03633 9.05443 9.11627 9.29436C9.43453 10.249 9.2382 11.2566 8.31287 12.3678L3.6324 7.6873C4.74353 6.76196 5.7511 6.56564 6.7058 6.8839C6.94573 6.96383 7.2102 6.90143 7.38906 6.72256L10.2219 3.88975C10.2951 3.81646 10.3504 3.7271 10.3832 3.62876Z"
+        d="M9.33325 2.66668V6.00001C9.33325 6.74668 9.57992 7.44001 9.99992 8.00001H5.99992C6.43325 7.42668 6.66659 6.73334 6.66659 6.00001V2.66668H9.33325ZM11.3333 1.33334H4.66659C4.29992 1.33334 3.99992 1.63334 3.99992 2.00001C3.99992 2.36668 4.29992 2.66668 4.66659 2.66668H5.33325V6.00001C5.33325 7.10668 4.43992 8.00001 3.33325 8.00001V9.33334H7.31325V14L7.97992 14.6667L8.64659 14V9.33334H12.6666V8.00001C11.5599 8.00001 10.6666 7.10668 10.6666 6.00001V2.66668H11.3333C11.6999 2.66668 11.9999 2.36668 11.9999 2.00001C11.9999 1.63334 11.6999 1.33334 11.3333 1.33334Z"
         fill={
           {
             "payload": 4286216826,
             "type": 0,
           }
         }
-        fillRule={0}
         propList={
           [
             "fill",
-            "fillRule",
           ]
         }
       />
@@ -76,7 +77,10 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
         {
           "color": "#7A7A7A",
         },
-        {},
+        {
+          "fontSize": 12,
+          "marginLeft": 4,
+        },
         {},
       ]
     }

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -10,18 +10,12 @@ export const useCreateMessageContext = <
   actionsEnabled,
   alignment,
   channel,
+  dismissOverlay,
   files,
   goToMessage,
   groupStyles,
   handleAction,
-  handleCopyMessage,
-  handleDeleteMessage,
-  handleEditMessage,
-  handleFlagMessage,
-  handleQuotedReplyMessage,
-  handleResendMessage,
-  handleToggleBanUser,
-  handleToggleMuteUser,
+  handleReaction,
   handleToggleReaction,
   hasReactions,
   images,
@@ -63,18 +57,12 @@ export const useCreateMessageContext = <
       actionsEnabled,
       alignment,
       channel,
+      dismissOverlay,
       files,
       goToMessage,
       groupStyles,
       handleAction,
-      handleCopyMessage,
-      handleDeleteMessage,
-      handleEditMessage,
-      handleFlagMessage,
-      handleQuotedReplyMessage,
-      handleResendMessage,
-      handleToggleBanUser,
-      handleToggleMuteUser,
+      handleReaction,
       handleToggleReaction,
       hasReactions,
       images,