stream-chat-react-native-core 4.1.0-next.1 → 4.1.1-beta.2

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

@@ -1,13 +1,14 @@
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { MessageReplies } from '../MessageReplies';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user';
+import { MessageReplies } from '../MessageReplies';
+import { MessageRepliesAvatars } from '../MessageRepliesAvatars';
 
 afterEach(cleanup);
 
@@ -27,6 +28,7 @@ describe('MessageReplies', () => {
             alignment='right'
             groupStyles={['bottom']}
             message={message}
+            MessageRepliesAvatars={MessageRepliesAvatars}
             openThread={onPressMock}
           />
         </ThemeProvider>
@@ -37,10 +39,10 @@ describe('MessageReplies', () => {
       expect(getByTestId('message-replies')).toBeTruthy();
       expect(getByTestId('message-replies-right')).toBeTruthy();
       expect(queryAllByTestId('message-replies-left')).toHaveLength(0);
-      expect(t).toHaveBeenCalledWith('{{ replyCount }} replies', {
+      expect(t).toHaveBeenCalledWith('{{ replyCount }} Thread Replies', {
         replyCount: message.reply_count,
       });
-      expect(getByText('{{ replyCount }} replies')).toBeTruthy();
+      expect(getByText('{{ replyCount }} Thread Replies')).toBeTruthy();
     });
 
     const message2 = generateMessage({
@@ -55,20 +57,22 @@ describe('MessageReplies', () => {
             alignment='left'
             groupStyles={['bottom']}
             message={message2}
-            openThread={onPressMock}
+            MessageRepliesAvatars={MessageRepliesAvatars}
+            onPress={onPressMock}
           />
         </ThemeProvider>
       </TranslationProvider>,
     );
 
     fireEvent.press(getByTestId('message-replies'));
+
     await waitFor(() => {
       expect(onPressMock).toHaveBeenCalled();
       expect(getByTestId('message-replies')).toBeTruthy();
       expect(getByTestId('message-replies-left')).toBeTruthy();
       expect(queryAllByTestId('message-replies-right')).toHaveLength(0);
-      expect(t).toHaveBeenCalledWith('1 reply');
-      expect(getByText('1 reply')).toBeTruthy();
+      expect(t).toHaveBeenCalledWith('1 Thread Reply');
+      expect(getByText('1 Thread Reply')).toBeTruthy();
       expect(toJSON()).toMatchSnapshot();
     });
   });
@@ -86,7 +90,7 @@ describe('MessageReplies', () => {
             alignment='right'
             groupStyles={['bottom']}
             message={message}
-            openThread={() => null}
+            onPress={() => null}
           />
         </ThemeProvider>
       </TranslationProvider>,
@@ -110,7 +114,7 @@ describe('MessageReplies', () => {
             alignment='right'
             groupStyles={['bottom']}
             message={message2}
-            openThread={() => null}
+            onPress={() => null}
             threadList
           />
         </ThemeProvider>

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

@@ -1,14 +1,13 @@
 import React from 'react';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { MessageStatus } from '../MessageStatus';
 
-import { Chat } from '../../../Chat/Chat';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { Streami18n } from '../../../../utils/Streami18n';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Streami18n } from '../../../../utils/Streami18n';
+import { Chat } from '../../../Chat/Chat';
+import { MessageStatus } from '../MessageStatus';
 
 let chatClient;
 let id;
@@ -22,32 +21,13 @@ describe('MessageStatus', () => {
   });
   afterEach(cleanup);
 
-  it('should render message status with spacer', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    const { getByTestId } = render(
-      <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <MessageStatus lastReceivedId={message.id} message={message} readBy={[{ id }]} />
-      </Chat>,
-    );
-
-    await waitFor(() => {
-      expect(getByTestId('spacer')).toBeTruthy();
-    });
-  });
-
   it('should render message status with delivered container', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     const { getByTestId } = render(
       <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <MessageStatus
-          lastReceivedId={message.id}
-          message={{ ...message, status: 'received' }}
-          readBy={[{ id }]}
-        />
+        <MessageStatus lastReceivedId={message.id} message={{ ...message, status: 'received' }} />
       </Chat>,
     );
 
@@ -58,48 +38,32 @@ describe('MessageStatus', () => {
 
   it('should render message status with read by container', async () => {
     const user = generateUser();
-    const message = generateMessage({ user });
+    const message = generateMessage({ readBy: 2, user });
 
     const { getByTestId, getByText, rerender, toJSON } = render(
       <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <MessageStatus
-          lastReceivedId={message.id}
-          message={message}
-          readBy={[{ id }, { id: user.id, name: user.name }]}
-        />
+        <MessageStatus lastReceivedId={message.id} message={message} />
       </Chat>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('avatar-text')).toBeTruthy();
       expect(getByTestId('read-by-container')).toBeTruthy();
-      expect(getByText(user.name.charAt(0))).toBeTruthy();
+      expect(getByText(message.readBy.toString())).toBeTruthy();
     });
 
     const staticUser = generateStaticUser(0);
-    const staticMessage = generateMessage({ staticUser });
+    const staticMessage = generateMessage({ readBy: 2, staticUser });
 
     rerender(
       <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <MessageStatus
-          lastReceivedId={staticMessage.id}
-          message={staticMessage}
-          readBy={[
-            { id },
-            {
-              id: staticUser.id,
-              image: staticUser.image,
-              name: staticUser.name,
-            },
-          ]}
-        />
+        <MessageStatus lastReceivedId={staticMessage.id} message={staticMessage} />
       </Chat>,
     );
 
     await waitFor(() => {
       expect(toJSON()).toMatchSnapshot();
-      expect(getByTestId('avatar-image')).toBeTruthy();
       expect(getByTestId('read-by-container')).toBeTruthy();
+      expect(getByText(staticMessage.readBy.toString())).toBeTruthy();
     });
   });
 

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { MessageTextContainer } from '../MessageTextContainer';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -11,6 +10,7 @@ import {
   generateStaticMessage,
 } from '../../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { MessageTextContainer } from '../MessageTextContainer';
 
 afterEach(cleanup);
 

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

@@ -5,7 +5,6 @@ exports[`MessageAvatar should render message avatar 1`] = `
   style={
     Array [
       Object {
-        "marginLeft": 0,
         "marginRight": 8,
       },
       Object {},
@@ -13,37 +12,51 @@ exports[`MessageAvatar should render message avatar 1`] = `
   }
   testID="message-avatar"
 >
-  <View
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-        },
-        Object {},
-      ]
-    }
-  >
-    <Image
-      accessibilityLabel="initials"
-      onError={[Function]}
-      resizeMethod="resize"
-      source={
-        Object {
-          "uri": "https://images-na.ssl-images-amazon.com/images/I/51t29lLkg8L._AC_SL1000_.jpg",
-        }
-      }
+  <View>
+    <View
       style={
         Array [
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
           Object {
             "borderRadius": 16,
             "height": 32,
             "width": 32,
           },
           Object {},
+          undefined,
         ]
       }
-      testID="avatar-image"
-    />
+    >
+      <Image
+        accessibilityLabel="avatar-image"
+        onError={[Function]}
+        source={
+          Object {
+            "uri": "https://i.imgur.com/ytIyojl.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "borderRadius": 16,
+              "height": 32,
+              "width": 32,
+            },
+            Object {
+              "borderRadius": 16,
+              "height": 32,
+              "width": 32,
+            },
+            undefined,
+          ]
+        }
+        testID="avatar-image"
+      />
+    </View>
   </View>
 </View>
 `;

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessagePinnedHeader should render message pinned 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "display": "flex",
+        "flexDirection": "row",
+        "marginBottom": 8,
+        "marginLeft": 30,
+        "marginTop": 5,
+      },
+      Object {
+        "justifyContent": "flex-start",
+      },
+      Object {},
+    ]
+  }
+  testID="message-pinned"
+>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight={24}
+    bbWidth={24}
+    focusable={false}
+    height={24}
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    pathFill="#7A7A7A"
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        Object {
+          "flex": 0,
+          "height": 24,
+          "width": 24,
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+    width={24}
+  >
+    <RNSVGGroup>
+      <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"
+        fill={4286216826}
+        fillRule={0}
+        propList={
+          Array [
+            "fill",
+            "fillRule",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#7A7A7A",
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    Pinned by
+     
+    You
+  </Text>
+</View>
+`;

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

@@ -2,61 +2,87 @@
 
 exports[`MessageReplies should render message replies 1`] = `
 <View
-  accessible={true}
-  focusable={true}
-  isTVSelectable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "alignItems": "center",
       "flexDirection": "row",
-      "opacity": 1,
-      "padding": 5,
     }
   }
-  testID="message-replies"
 >
-  <Image
-    source={
-      Object {
-        "testUri": "../../../src/images/icons/icon_path.png",
-      }
-    }
-    style={
-      Array [
-        Object {
-          "transform": Array [
-            Object {
-              "rotateY": "0deg",
-            },
-          ],
-        },
-        Object {},
-      ]
-    }
+  <View
     testID="message-replies-left"
-  />
-  <Text
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": undefined,
+          },
+          Object {
+            "borderTopColor": "transparent",
+            "borderTopWidth": 0,
+            "borderWidth": 1,
+            "height": 16,
+            "width": 16,
+          },
+          Object {
+            "borderBottomLeftRadius": 16,
+            "borderRightColor": "transparent",
+          },
+          Object {},
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingTop": 2,
+          },
+          Object {},
+        ]
+      }
+    />
+  </View>
+  <View
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
-          "fontSize": 12,
-          "fontWeight": "700",
-        },
-        Object {
-          "color": "#006cff",
-        },
-        Object {},
-      ]
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "marginTop": 8,
+        "opacity": 1,
+      }
     }
+    testID="message-replies"
   >
-    1 reply
-  </Text>
+    <Text
+      style={
+        Array [
+          Object {
+            "fontSize": 12,
+            "fontWeight": "700",
+            "paddingBottom": 5,
+            "paddingLeft": 8,
+          },
+          Object {
+            "color": "#005FFF",
+          },
+          Object {},
+        ]
+      }
+    >
+      1 Thread Reply
+    </Text>
+  </View>
 </View>
 `;

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

@@ -1,61 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MessageStatus should render message status with read by container 1`] = `
-<View>
-  <View
-    style={
+<View
+  style={
+    Array [
       Object {
+        "alignItems": "flex-end",
         "flexDirection": "row",
         "justifyContent": "center",
-        "width": 20,
-      }
+        "paddingRight": 3,
+      },
+      Object {},
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "fontSize": 11,
+          "fontWeight": "700",
+          "paddingRight": 3,
+        },
+        Object {
+          "color": "#005FFF",
+        },
+        Object {},
+      ]
+    }
+    testID="read-by-container"
+  >
+    2
+  </Text>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight={16}
+    bbWidth={16}
+    focusable={false}
+    height={16}
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    pathFill="#005FFF"
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        Object {
+          "flex": 0,
+          "height": 16,
+          "width": 16,
+        },
+      ]
     }
+    vbHeight={24}
+    vbWidth={24}
+    width={16}
   >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "flexDirection": "row",
-          },
-          Object {},
-        ]
-      }
-      testID="read-by-container"
-    >
-      <View
-        style={
+    <RNSVGGroup>
+      <RNSVGPath
+        clipRule={0}
+        d="M2.293 11.293a1 1 0 011.414 0l4 4a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414zM9.293 12.293a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414z"
+        fill={4278214655}
+        fillRule={0}
+        propList={
+          Array [
+            "fill",
+            "fillRule",
+          ]
+        }
+      />
+      <RNSVGPath
+        clipRule={0}
+        d="M15.707 7.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414-1.414l8-8a1 1 0 011.414 0zM21.707 7.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414-1.414l8-8a1 1 0 011.414 0z"
+        fill={4278214655}
+        fillRule={0}
+        propList={
           Array [
-            Object {
-              "alignItems": "center",
-            },
-            Object {},
+            "fill",
+            "fillRule",
           ]
         }
-      >
-        <Image
-          accessibilityLabel="initials"
-          onError={[Function]}
-          resizeMethod="resize"
-          source={
-            Object {
-              "uri": "https://images-na.ssl-images-amazon.com/images/I/51t29lLkg8L._AC_SL1000_.jpg",
-            }
-          }
-          style={
-            Array [
-              Object {
-                "borderRadius": 8,
-                "height": 16,
-                "width": 16,
-              },
-              Object {},
-            ]
-          }
-          testID="avatar-image"
-        />
-      </View>
-    </View>
-  </View>
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
 </View>
 `;

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

@@ -5,23 +5,11 @@ exports[`MessageTextContainer should render message text container 1`] = `
   style={
     Array [
       Object {
-        "marginTop": 2,
-        "paddingHorizontal": 8,
-        "paddingVertical": 5,
-      },
-      Object {
-        "alignSelf": "flex-end",
-        "borderColor": "transparent",
-        "borderWidth": 0,
-      },
-      Object {
-        "backgroundColor": "#EBEBEB",
-        "borderBottomLeftRadius": 16,
-        "borderBottomRightRadius": 16,
-        "borderTopLeftRadius": 16,
-        "borderTopRightRadius": 16,
+        "maxWidth": 250,
+        "paddingHorizontal": 16,
       },
       Object {},
+      undefined,
     ]
   }
   testID="message-text-container"
@@ -43,15 +31,15 @@ exports[`MessageTextContainer should render message text container 1`] = `
           "flexDirection": "row",
           "flexWrap": "wrap",
           "justifyContent": "flex-start",
-          "marginBottom": 0,
-          "marginTop": 0,
+          "marginBottom": 8,
+          "marginTop": 8,
         }
       }
     >
       <Text
         style={
           Object {
-            "color": "#222222",
+            "color": "#000000",
           }
         }
       >