stream-chat-react-native-core 8.13.7 → 9.0.0-beta.1

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

@@ -2,27 +2,34 @@ import React from 'react';
 
 import { cleanup, render, screen, 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 { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Chat } from '../../../Chat/Chat';
 import { MessageAvatar } from '../MessageAvatar';
 
 afterEach(cleanup);
 
 describe('MessageAvatar', () => {
+  let chatClient;
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser({ id: 'me' });
+  });
+
   it('should render message avatar', async () => {
     const staticUser = generateStaticUser(0);
     const message = generateMessage({
       user: { ...staticUser, image: undefined },
     });
     render(
-      <ThemeProvider style={defaultTheme}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageAvatar alignment='right' groupStyles={['bottom']} message={message} />
-      </ThemeProvider>,
+      </Chat>,
     );
 
     await waitFor(() => {
@@ -30,14 +37,14 @@ describe('MessageAvatar', () => {
     });
 
     screen.rerender(
-      <ThemeProvider style={defaultTheme}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageAvatar alignment='right' groupStyles={[]} message={message} />
-      </ThemeProvider>,
+      </Chat>,
     );
 
     await waitFor(() => {
       expect(screen.getByTestId('spacer')).toBeTruthy();
-      expect(screen.queryAllByTestId('avatar-image')).toHaveLength(0);
+      expect(screen.queryAllByTestId('user-avatar')).toHaveLength(0);
     });
 
     const staticMessage = generateStaticMessage('hi', {
@@ -45,19 +52,19 @@ describe('MessageAvatar', () => {
     });
 
     screen.rerender(
-      <ThemeProvider style={defaultTheme}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageAvatar
           alignment='left'
           groupStyles={['single']}
           message={staticMessage}
           showAvatar
         />
-      </ThemeProvider>,
+      </Chat>,
     );
 
     await waitFor(() => {
       expect(screen.getByTestId('message-avatar')).toBeTruthy();
-      expect(screen.getByTestId('avatar-image')).toBeTruthy();
+      expect(screen.getByTestId('user-avatar')).toBeTruthy();
       expect(screen.toJSON()).toMatchSnapshot();
     });
   });

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
@@ -7,6 +7,7 @@ import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+import { generateVideoAttachment } 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';
@@ -182,6 +183,51 @@ describe('MessageContent', () => {
     });
   });
 
+  it('removes content padding for a single video attachment', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [
+        generateVideoAttachment({
+          original_height: 300,
+          original_width: 600,
+        }),
+      ],
+      html: '',
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('gallery-container')).toBeTruthy();
+    });
+
+    const galleryContainer = screen.getByTestId('gallery-container');
+    let ancestor = galleryContainer.parent;
+    let contentContainerStyle;
+
+    while (ancestor && !contentContainerStyle) {
+      const flattenedStyle = StyleSheet.flatten(ancestor.props.style);
+      if (
+        flattenedStyle &&
+        'paddingTop' in flattenedStyle &&
+        'paddingHorizontal' in flattenedStyle &&
+        'paddingBottom' in flattenedStyle
+      ) {
+        contentContainerStyle = flattenedStyle;
+        break;
+      }
+      ancestor = ancestor.parent;
+    }
+
+    expect(contentContainerStyle).toBeTruthy();
+    expect(contentContainerStyle.paddingTop).toBe(0);
+    expect(contentContainerStyle.paddingHorizontal).toBe(0);
+    expect(contentContainerStyle.paddingBottom).toBe(0);
+  });
+
   it('renders the FileAttachment component when a file attachment exists', async () => {
     const user = generateUser();
     const message = generateMessage({

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

@@ -9,7 +9,7 @@ import {
   generateStaticMessage,
 } from '../../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../../mock-builders/generator/user';
-import { MessagePinnedHeader } from '../MessagePinnedHeader';
+import { MessagePinnedHeader } from '../Headers/MessagePinnedHeader';
 
 afterEach(cleanup);
 
@@ -18,35 +18,37 @@ describe('MessagePinnedHeader', () => {
     const staticUser = generateStaticUser(0);
     const message = generateMessage({
       user: { ...staticUser, image: undefined },
+      pinned: true,
     });
     render(
       <ThemeProvider style={defaultTheme}>
-        <MessagePinnedHeader alignment='right' message={message} />
+        <MessagePinnedHeader message={message} />
       </ThemeProvider>,
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-pinned')).toBeTruthy();
+      expect(screen.getByLabelText('Message Pinned Header')).toBeTruthy();
     });
 
     screen.rerender(
       <ThemeProvider style={defaultTheme}>
-        <MessagePinnedHeader alignment='right' message={message} />
+        <MessagePinnedHeader message={message} />
       </ThemeProvider>,
     );
 
     const staticMessage = generateStaticMessage('hi', {
       user: staticUser,
+      pinned: false,
     });
 
     screen.rerender(
       <ThemeProvider style={defaultTheme}>
-        <MessagePinnedHeader alignment='left' message={staticMessage} />
+        <MessagePinnedHeader message={staticMessage} />
       </ThemeProvider>,
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-pinned')).toBeTruthy();
+      expect(screen.queryByLabelText('Message Pinned Header')).toBeNull();
       expect(screen.toJSON()).toMatchSnapshot();
     });
   });

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

@@ -38,12 +38,10 @@ describe('MessageReplies', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('message-replies')).toBeTruthy();
-      expect(screen.getByTestId('message-replies-right')).toBeTruthy();
-      expect(screen.queryAllByTestId('message-replies-left')).toHaveLength(0);
-      expect(t).toHaveBeenCalledWith('{{ replyCount }} Thread Replies', {
+      expect(t).toHaveBeenCalledWith('{{ replyCount }} Replies', {
         replyCount: message.reply_count,
       });
-      expect(screen.getByText('{{ replyCount }} Thread Replies')).toBeTruthy();
+      expect(screen.getByText('{{ replyCount }} Replies')).toBeTruthy();
     });
 
     const message2 = generateMessage({
@@ -70,10 +68,8 @@ describe('MessageReplies', () => {
     await waitFor(() => {
       expect(onPressMock).toHaveBeenCalled();
       expect(screen.getByTestId('message-replies')).toBeTruthy();
-      expect(screen.getByTestId('message-replies-left')).toBeTruthy();
-      expect(screen.queryAllByTestId('message-replies-right')).toHaveLength(0);
-      expect(t).toHaveBeenCalledWith('1 Thread Reply');
-      expect(screen.getByText('1 Thread Reply')).toBeTruthy();
+      expect(t).toHaveBeenCalledWith('1 Reply');
+      expect(screen.getByText('1 Reply')).toBeTruthy();
     });
   });
 
@@ -98,8 +94,6 @@ describe('MessageReplies', () => {
 
     await waitFor(() => {
       expect(screen.queryAllByTestId('message-replies')).toHaveLength(0);
-      expect(screen.queryAllByTestId('message-replies-left')).toHaveLength(0);
-      expect(screen.queryAllByTestId('message-replies-right')).toHaveLength(0);
     });
 
     const message2 = generateMessage({
@@ -123,8 +117,6 @@ describe('MessageReplies', () => {
 
     await waitFor(() => {
       expect(screen.queryAllByTestId('message-replies')).toHaveLength(0);
-      expect(screen.queryAllByTestId('message-replies-left')).toHaveLength(0);
-      expect(screen.queryAllByTestId('message-replies-right')).toHaveLength(0);
     });
   });
 });

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

@@ -160,7 +160,13 @@ describe('MessageSimple', () => {
     renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-simple-wrapper').props.style[1]).toMatchObject({});
+      expect(screen.getByTestId('message-simple-wrapper').props.style).toMatchObject({
+        alignItems: 'flex-end',
+        gap: 8,
+        flexDirection: 'row',
+        paddingTop: 8,
+        paddingBottom: 4,
+      });
     });
   });
 
@@ -171,8 +177,13 @@ describe('MessageSimple', () => {
     renderMessage({ message });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-simple-wrapper').props.style[1]).toMatchObject({
-        marginBottom: 8,
+      const data = screen.getByTestId('message-simple-wrapper').props.style;
+
+      expect(data).toMatchObject({
+        alignItems: 'flex-end',
+        gap: 8,
+        flexDirection: 'row',
+        paddingBottom: 8,
       });
     });
   });

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

@@ -58,19 +58,18 @@ describe('MessageStatus', () => {
       </ChannelsStateProvider>,
     );
 
-  it('should render message status with read by container', async () => {
+  it.each('should render message status with read by container', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
     const readBy = 2;
 
-    const { getByLabelText, getByText, rerender, toJSON } = renderMessageStatus({
+    const { getByText, rerender, toJSON } = renderMessageStatus({
       deliveredToCount: 2,
       message,
       readBy,
     });
 
     await waitFor(() => {
-      expect(getByLabelText('Read by count')).toBeTruthy();
       expect(getByText((readBy - 1).toString())).toBeTruthy();
     });
 
@@ -89,7 +88,6 @@ describe('MessageStatus', () => {
 
     await waitFor(() => {
       expect(toJSON()).toMatchSnapshot();
-      expect(getByLabelText('Read by count')).toBeTruthy();
       expect(getByText((readBy - 1).toString())).toBeTruthy();
     });
   });

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

@@ -1,7 +1,5 @@
 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';
@@ -98,47 +96,49 @@ describe('ReactionListBottom', () => {
     });
   });
 
-  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,
-    });
+  // As discussed with Design team, the animation is not needed for now. Once we have it, we can add it.
 
-    renderMessage({ message }, { reactionListPosition: 'bottom' });
+  // 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,
+  //   });
 
-    const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
+  //   renderMessage({ message }, { reactionListPosition: 'bottom' });
 
-    fireEvent(reactionListBottomItem, 'onPressIn');
+  //   const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
 
-    expect(animatedSpy).toHaveBeenCalledWith(expect.any(Animated.Value), {
-      toValue: 0.8,
-      useNativeDriver: true,
-    });
-  });
+  //   fireEvent(reactionListBottomItem, 'onPressIn');
 
-  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,
-    });
+  //   expect(animatedSpy).toHaveBeenCalledWith(expect.any(Animated.Value), {
+  //     toValue: 0.8,
+  //     useNativeDriver: true,
+  //   });
+  // });
 
-    renderMessage({ message }, { reactionListPosition: 'bottom' });
+  // 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,
+  //   });
 
-    const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
+  //   renderMessage({ message }, { reactionListPosition: 'bottom' });
 
-    fireEvent(reactionListBottomItem, 'onPressOut');
+  //   const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
 
-    expect(animatedSpy).toHaveBeenCalledWith(expect.any(Animated.Value), {
-      toValue: 1,
-      useNativeDriver: true,
-    });
-  });
+  //   fireEvent(reactionListBottomItem, 'onPressOut');
+
+  //   expect(animatedSpy).toHaveBeenCalledWith(expect.any(Animated.Value), {
+  //     toValue: 1,
+  //     useNativeDriver: true,
+  //   });
+  // });
 
   it('call handleReaction on press', () => {
     const handleReactionMock = jest.fn();
@@ -154,10 +154,10 @@ describe('ReactionListBottom', () => {
         handleReaction: handleReactionMock,
         message,
       },
-      { reactionListPosition: 'bottom' },
+      { reactionListPosition: 'bottom', reactionListType: 'segmented' },
     );
 
-    const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
+    const reactionListBottomItem = screen.getByLabelText('Reaction List Item');
 
     fireEvent(reactionListBottomItem, 'onPress');
 

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

@@ -1,38 +1,39 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MessageAvatar should render message avatar 1`] = `
 <View
-  style={
-    [
-      {
-        "marginRight": 8,
-      },
-      {},
-    ]
-  }
+  style={{}}
   testID="message-avatar"
 >
-  <View>
+  <View
+    testID="user-avatar"
+  >
     <View
       style={
         [
           {
             "alignItems": "center",
+            "borderRadius": 9999,
             "justifyContent": "center",
             "overflow": "hidden",
           },
           {
-            "borderRadius": 16,
             "height": 32,
             "width": 32,
           },
-          {},
+          {
+            "backgroundColor": "#006970",
+          },
+          {
+            "borderColor": "rgba(255, 255, 255, 0.2)",
+            "borderWidth": 1,
+          },
           undefined,
         ]
       }
+      testID="avatar-image"
     >
       <Image
-        accessibilityLabel="Avatar Image"
         onError={[Function]}
         source={
           {
@@ -41,21 +42,13 @@ exports[`MessageAvatar should render message avatar 1`] = `
         }
         style={
           [
+            {},
             {
-              "borderRadius": 16,
-              "height": 32,
-              "width": 32,
-            },
-            {
-              "backgroundColor": "#ececec",
-              "borderRadius": 16,
               "height": 32,
               "width": 32,
             },
-            undefined,
           ]
         }
-        testID="avatar-image"
       />
     </View>
   </View>

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

@@ -1,93 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`MessagePinnedHeader should render message pinned 1`] = `
-<View
-  accessibilityLabel="Message Pinned Header"
-  style={
-    [
-      {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "justifyContent": "center",
-      },
-      {},
-    ]
-  }
-  testID="message-pinned"
->
-  <RNSVGSvgView
-    align="xMidYMid"
-    bbHeight={16}
-    bbWidth={16}
-    fill="#7A7A7A"
-    focusable={false}
-    height={16}
-    meetOrSlice={0}
-    minX={0}
-    minY={0}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "borderWidth": 0,
-        },
-        {
-          "flex": 0,
-          "height": 16,
-          "width": 16,
-        },
-      ]
-    }
-    vbHeight={16}
-    vbWidth={16}
-    width={16}
-  >
-    <RNSVGGroup
-      fill={
-        {
-          "payload": 4286216826,
-          "type": 0,
-        }
-      }
-      propList={
-        [
-          "fill",
-        ]
-      }
-    >
-      <RNSVGPath
-        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,
-          }
-        }
-        propList={
-          [
-            "fill",
-          ]
-        }
-      />
-    </RNSVGGroup>
-  </RNSVGSvgView>
-  <Text
-    style={
-      [
-        {
-          "color": "#7A7A7A",
-        },
-        {
-          "fontSize": 12,
-          "marginLeft": 4,
-        },
-        {},
-      ]
-    }
-  >
-    Pinned by
-     
-    You
-  </Text>
-</View>
-`;
+exports[`MessagePinnedHeader should render message pinned 1`] = `null`;

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

@@ -1,12 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MessageTextContainer should render message text container 1`] = `
 <View
   style={
     [
       {
-        "maxWidth": 250,
-        "paddingHorizontal": 16,
+        "maxWidth": 256,
+        "paddingHorizontal": 12,
       },
       {},
       undefined,
@@ -30,7 +30,9 @@ exports[`MessageTextContainer should render message text container 1`] = `
           "alignItems": "flex-start",
           "flexDirection": "row",
           "flexWrap": "wrap",
+          "fontSize": 17,
           "justifyContent": "flex-start",
+          "lineHeight": 20,
           "marginBottom": 8,
           "marginTop": 8,
         }
@@ -39,7 +41,9 @@ exports[`MessageTextContainer should render message text container 1`] = `
       <Text
         style={
           {
-            "color": "#000000",
+            "color": "#1a1b25",
+            "fontSize": 17,
+            "lineHeight": 20,
           }
         }
       >