Merge pull request #255 from GetStream/vishal/channel-preview-messenger-tests

Handling message.updated and message.deleted event in ChannelPreview …

Author: vishalnarkhede

src/components/ChannelPreview/ChannelPreview.js

@@ -4,26 +4,30 @@ import PropTypes from 'prop-types';
 import { ChatContext } from '../../context';
 import { useLatestMessagePreview } from './hooks/useLatestMessagePreview';
 
-/**
- * NOTE: We created an inner component which only receives `client` from the ChatContext. This
- * practice will prevent unnecessary renders of the component when items in ChatContext change
- */
-const ChannelPreviewWithContext = React.memo((props) => {
-  const { channel, client } = props;
+const ChannelPreview = (props) => {
+  const { channel } = props;
+  const { client } = useContext(ChatContext);
   const [lastMessage, setLastMessage] = useState({});
   const [unread, setUnread] = useState(channel.countUnread());
   const latestMessage = useLatestMessagePreview(channel, lastMessage);
 
   useEffect(() => {
-    const handleNewMessageEvent = (e) => {
+    const handleEvent = (e) => {
       setLastMessage(e.message);
-      setUnread(channel.countUnread());
+
+      if (e.type === 'message.new') {
+        setUnread(channel.countUnread());
+      }
     };
 
-    channel.on('message.new', handleNewMessageEvent);
+    channel.on('message.new', handleEvent);
+    channel.on('message.updated', handleEvent);
+    channel.on('message.deleted', handleEvent);
 
     return () => {
-      channel.off('message.new', handleNewMessageEvent);
+      channel.off('message.new', handleEvent);
+      channel.off('message.updated', handleEvent);
+      channel.off('message.deleted', handleEvent);
     };
   }, []);
 
@@ -42,12 +46,14 @@ const ChannelPreviewWithContext = React.memo((props) => {
   }, []);
 
   const { Preview } = props;
-  return <Preview {...props} latestMessage={latestMessage} unread={unread} />;
-});
-
-const ChannelPreview = (props) => {
-  const { client } = useContext(ChatContext);
-  return <ChannelPreviewWithContext {...props} {...{ client }} />;
+  return (
+    <Preview
+      {...props}
+      lastMessage={lastMessage}
+      latestMessage={latestMessage}
+      unread={unread}
+    />
+  );
 };
 
 ChannelPreview.propTypes = {
@@ -57,4 +63,4 @@ ChannelPreview.propTypes = {
   Preview: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
 };
 
-export default ChannelPreview;
+export default React.memo(ChannelPreview);

src/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -71,7 +71,6 @@ const ChannelPreviewMessenger = ({
 }) => {
   const displayAvatar = useChannelPreviewDisplayAvatar(channel);
   const displayName = useChannelPreviewDisplayName(channel);
-
   return (
     <Container
       onPress={setActiveChannel.bind(null, channel)}

src/components/ChannelPreview/__tests__/ChannelPreview.test.js

@@ -8,6 +8,10 @@ import {
 } from '@testing-library/react-native';
 
 import {
+  dispatchMessageDeletedEvent,
+  dispatchMessageNewEvent,
+  dispatchMessageReadEvent,
+  dispatchMessageUpdatedEvent,
   generateChannel,
   generateMessage,
   generateUser,
@@ -19,10 +23,6 @@ import {
 import ChannelPreview from '../ChannelPreview';
 import { Chat } from '../../Chat';
 import { Text } from 'react-native';
-import {
-  dispatchMessageReadEvent,
-  dispatchMessageNewEvent,
-} from 'mock-builders';
 
 const ChannelPreviewUIComponent = (props) => (
   <>
@@ -98,7 +98,39 @@ describe('ChannelPreview', () => {
     });
   });
 
-  it('should update the last event message & unreadCount, when message.new event is received', async () => {
+  const eventCases = [
+    ['message.new', dispatchMessageNewEvent],
+    ['message.updated', dispatchMessageUpdatedEvent],
+    ['message.deleted', dispatchMessageDeletedEvent],
+  ];
+
+  it.each(eventCases)(
+    'should update the last event message',
+    async (eventType, dispatcher) => {
+      const c = generateChannel();
+      await initializeChannel(c);
+
+      const { getByTestId } = render(getComponent());
+
+      await waitForElement(() => getByTestId('channel-id'));
+
+      const message = generateMessage({
+        user: clientUser,
+      });
+
+      act(() => {
+        dispatcher(chatClient, message, channel);
+      });
+
+      await wait(() => {
+        expect(getNodeText(getByTestId('last-event-message'))).toBe(
+          message.text,
+        );
+      });
+    },
+  );
+
+  it('should update the unread count on "message.new" event', async () => {
     const c = generateChannel();
     await initializeChannel(c);
 
@@ -117,7 +149,6 @@ describe('ChannelPreview', () => {
     });
 
     await wait(() => {
-      expect(getNodeText(getByTestId('last-event-message'))).toBe(message.text);
       expect(getNodeText(getByTestId('unread-count'))).toBe('10');
     });
   });

src/components/ChannelPreview/hooks/useLatestMessagePreview.js

@@ -55,7 +55,7 @@ export const useLatestMessagePreview = (channel, lastMessage) => {
         text: getLatestMessageDisplayText(message, t),
       });
     }
-  }, [lastMessage]);
+  }, [channel, lastMessage]);
 
   return latestMessagePreview;
 };