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

package/src/components/MessageList/__tests__/MessageList.test.js

@@ -1,23 +1,22 @@
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
-import { act } from 'react-test-renderer';
 
-import { MessageList } from '../MessageList';
-
-import { Channel } from '../../Channel/Channel';
-import { Chat } from '../../Chat/Chat';
-
-import { ChatContext, ChatProvider } from '../../../contexts/chatContext/ChatContext';
+import { act, cleanup, 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 dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchTypingEvent from '../../../mock-builders/event/typing';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
-import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
-import { generateStaticUser, generateUser } from '../../../mock-builders/generator/user';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { registerNativeHandlers } from '../../../native';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageList } from '../MessageList';
 
 describe('MessageList', () => {
   afterEach(cleanup);
@@ -25,7 +24,7 @@ describe('MessageList', () => {
   it('should add new message at bottom of the list', async () => {
     const user1 = generateUser();
     const user2 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 }), generateMember({ user: user2 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });
@@ -33,28 +32,30 @@ describe('MessageList', () => {
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.query();
+    await channel.watch();
 
     const { getByText, queryAllByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <MessageList />
-        </Channel>
-      </Chat>,
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
     );
 
     const newMessage = generateMessage({ user: user2 });
-    dispatchMessageNewEvent(chatClient, newMessage, mockedChannel.channel);
+    act(() => dispatchMessageNewEvent(chatClient, newMessage, mockedChannel.channel));
 
     await waitFor(() => {
       expect(queryAllByTestId('message-notification')).toHaveLength(0);
       expect(getByText(newMessage.text)).toBeTruthy();
     });
-  });
+  }, 10000);
 
   it('should render a system message in the list', async () => {
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [
         generateMessage({ user: user1 }),
@@ -66,221 +67,299 @@ describe('MessageList', () => {
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.query();
+    await channel.watch();
 
     const { getByTestId, queryAllByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <MessageList />
-        </Channel>
-      </Chat>,
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
     );
 
+    // debug()
     await waitFor(() => {
       expect(queryAllByTestId('error-notification')).toHaveLength(0);
-      expect(queryAllByTestId('typing-indicator')).toHaveLength(0);
       expect(getByTestId('message-system')).toBeTruthy();
     });
   });
 
-  it('should render the typing indicator when typing object is non empty', async () => {
+  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to default(always)', async () => {
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
-      messages: [generateMessage({ user: user1 })],
+      messages: [
+        generateMessage({ type: 'deleted', user: user1 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ user: user1 }),
+      ],
     });
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.query();
-
-    const { getByTestId, queryAllByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <MessageList />
-        </Channel>
-      </Chat>,
+    await channel.watch();
+
+    const { getByTestId, queryAllByTestId, queryByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
     );
 
-    dispatchTypingEvent(chatClient, user1, mockedChannel.channel);
-
     await waitFor(() => {
-      expect(queryAllByTestId('message-system')).toHaveLength(0);
       expect(queryAllByTestId('error-notification')).toHaveLength(0);
-      expect(getByTestId('typing-indicator')).toBeTruthy();
+      expect(getByTestId('message-deleted')).toBeTruthy();
+      expect(queryByTestId('only-visible-to-you')).toBeNull();
     });
   });
 
-  it('should render the EmptyStateIndicator when no messages loaded', async () => {
+  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to sender', async () => {
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const user2 = generateUser({ id: 'testID' });
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
-      messages: [],
+      messages: [
+        generateMessage({ type: 'deleted', user: user2 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ user: user1 }),
+      ],
     });
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.query();
-
-    const { getByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <MessageList />
-        </Channel>
-      </Chat>,
+    await channel.watch();
+
+    const { getByTestId, queryAllByTestId, queryByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} deletedMessagesVisibilityType='sender'>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('empty-state')).toBeTruthy();
+      expect(queryAllByTestId('error-notification')).toHaveLength(0);
+      expect(queryByTestId('message-deleted')).toBeTruthy();
+      expect(getByTestId('only-visible-to-you')).toBeTruthy();
     });
   });
 
-  it('should render the is offline error', async () => {
+  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to receiver', async () => {
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const user2 = generateUser({ id: 'testID' });
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
-      messages: [generateMessage({ user: user1 })],
+      messages: [
+        generateMessage({ user: user2 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ type: 'deleted', user: user1 }),
+      ],
     });
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.query();
+    await channel.watch();
+
+    const { getByTestId, queryAllByTestId, queryByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} deletedMessagesVisibilityType='receiver'>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
 
-    const { getByTestId, getByText, queryAllByTestId } = render(
-      <Chat client={chatClient}>
-        <ChatContext.Consumer>
-          {(context) => (
-            <ChatProvider value={{ ...context, isOnline: false }}>
-              <Channel channel={channel}>
-                <MessageList />
-              </Channel>
-            </ChatProvider>
-          )}
-        </ChatContext.Consumer>
-      </Chat>,
+    await waitFor(() => {
+      expect(queryAllByTestId('error-notification')).toHaveLength(0);
+      expect(getByTestId('message-deleted')).toBeTruthy();
+      expect(queryByTestId('only-visible-to-you')).toBeNull();
+    });
+  });
+
+  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to never', async () => {
+    const user1 = generateUser();
+    const user2 = generateUser({ id: 'testID' });
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [
+        generateMessage({ user: user2 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ type: 'deleted', user: user1 }),
+      ],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const { queryAllByTestId, queryByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} deletedMessagesVisibilityType='never'>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('message-system')).toHaveLength(0);
-      expect(queryAllByTestId('typing-indicator')).toHaveLength(0);
-      expect(getByTestId('error-notification')).toBeTruthy();
-      expect(getByText('Connection failure, reconnecting now...')).toBeTruthy();
+      expect(queryAllByTestId('error-notification')).toHaveLength(0);
+      expect(queryByTestId('message-deleted')).toBeNull();
+      expect(queryByTestId('only-visible-to-you')).toBeNull();
     });
   });
 
-  it('should render ScrollToBottomButton when new message is received and user has scroll up in list, then remove ScrollToBottomButton on scroll down', async () => {
+  it('should render deleted message in the list', async () => {
     const user1 = generateUser();
-    const user2 = generateUser();
-    const messages = new Array(50).fill(generateMessage({ user: user1 }));
-    const mockedChannel = generateChannel({
-      members: [generateMember({ user: user1 }), generateMember({ user: user2 })],
-      messages,
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [
+        generateMessage({ type: 'deleted', user: user1 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ user: user1 }),
+      ],
     });
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.query();
+    await channel.watch();
 
     const { getByTestId, queryAllByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <MessageList />
-        </Channel>
-      </Chat>,
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
     );
 
     await waitFor(() => {
-      expect(getByTestId('message-flat-list')).toBeTruthy();
-      expect(queryAllByTestId('message-notification')).toHaveLength(0);
+      expect(queryAllByTestId('error-notification')).toHaveLength(0);
+      expect(getByTestId('message-deleted')).toBeTruthy();
     });
+  });
 
-    const eventDataUp = {
-      nativeEvent: {
-        contentOffset: {
-          y: 500,
-        },
-        contentSize: {
-          // Dimensions of the scrollable content
-          height: 500,
-          width: 100,
-        },
-        layoutMeasurement: {
-          // Dimensions of the device
-          height: 100,
-          width: 100,
-        },
-      },
-    };
-    fireEvent.scroll(getByTestId('message-flat-list'), eventDataUp);
+  it('should render the typing indicator when typing object is non empty', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ user: user1 })],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const { getByTestId, queryAllByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
 
     act(() => {
-      const newMessage = generateMessage({
-        timestamp: new Date(),
-        user: user2,
-      });
-      dispatchMessageNewEvent(chatClient, newMessage, mockedChannel.channel);
+      dispatchTypingEvent(chatClient, user1, mockedChannel.channel);
     });
 
     await waitFor(() => {
-      expect(getByTestId('message-notification')).toBeTruthy();
+      expect(queryAllByTestId('message-system')).toHaveLength(0);
+      expect(queryAllByTestId('error-notification')).toHaveLength(0);
+      expect(getByTestId('typing-indicator')).toBeTruthy();
     });
+  });
 
-    const eventDataDown = {
-      nativeEvent: {
-        contentOffset: {
-          y: 0,
-        },
-        contentSize: {
-          // Dimensions of the scrollable content
-          height: 500,
-          width: 100,
-        },
-        layoutMeasurement: {
-          // Dimensions of the device
-          height: 100,
-          width: 100,
-        },
-      },
-    };
-    fireEvent.scroll(getByTestId('message-flat-list'), eventDataDown);
+  it('should render the EmptyStateIndicator when no messages loaded', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
 
     await waitFor(() => {
-      expect(queryAllByTestId('message-notification')).toHaveLength(0);
+      expect(getByTestId('empty-state')).toBeTruthy();
     });
   });
 
-  it('should render the message list and match snapshot', async () => {
-    const user1 = generateStaticUser(1);
-    const user2 = generateStaticUser(2);
-    const mockedChannel = generateChannel({
-      members: [generateMember({ user: user1 }), generateMember({ user: user1 })],
-      messages: [
-        generateStaticMessage('Message1', { user: user1 }, '2020-05-05T14:48:00.000Z'),
-        generateStaticMessage('Message2', { user: user2 }, '2020-05-05T14:49:00.000Z'),
-        generateStaticMessage('Message3', { user: user2 }, '2020-05-06T14:50:00.000Z'),
-      ],
+  it('should render the is offline error', async () => {
+    registerNativeHandlers({
+      NetInfo: {
+        addEventListener: () => () => null,
+        fetch: () =>
+          new Promise((resolve) => {
+            resolve(false);
+          }),
+      },
+    });
+
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ user: user1 })],
     });
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.query();
-
-    const { queryAllByTestId, toJSON } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel}>
-          <MessageList />
-        </Channel>
-      </Chat>,
+    await channel.watch();
+
+    const { getByTestId, getByText, queryAllByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
     );
 
     await waitFor(() => {
-      expect(queryAllByTestId('date-separator')).toHaveLength(2);
-      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('message-system')).toHaveLength(0);
+      expect(queryAllByTestId('typing-indicator')).toHaveLength(0);
+      expect(getByTestId('error-notification')).toBeTruthy();
+      expect(getByText('Reconnecting...')).toBeTruthy();
+    });
+
+    registerNativeHandlers({
+      NetInfo: {
+        addEventListener: () => () => null,
+        fetch: () =>
+          new Promise((resolve) => {
+            resolve(true);
+          }),
+      },
     });
   });
 });

package/src/components/MessageList/__tests__/MessageSystem.test.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { MessageSystem } from '../MessageSystem';
+import { cleanup, 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 { Streami18n } from '../../../utils/Streami18n';
 
 import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../mock-builders/generator/user';
+import { Streami18n } from '../../../utils/Streami18n';
+import { MessageSystem } from '../MessageSystem';
 
 afterEach(cleanup);
 

package/src/components/MessageList/__tests__/ScrollToBottomButton.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { ScrollToBottomButton } from '../ScrollToBottomButton';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { Streami18n } from '../../../utils/Streami18n';
+import { ScrollToBottomButton } from '../ScrollToBottomButton';
 
 afterEach(cleanup);
 
@@ -57,20 +57,25 @@ describe('ScrollToBottomButton', () => {
     expect(onPress).toHaveBeenCalledTimes(1);
   });
 
-  it('should display the text New Messages', async () => {
+  it('should display the unread count', async () => {
     const t = jest.fn((key) => key);
     const i18nInstance = new Streami18n();
     const translators = await i18nInstance.getTranslators();
-    const { getByText } = render(
+    const { getByTestId, getByText } = render(
       <ThemeProvider>
         <TranslationProvider value={{ ...translators, t }}>
-          <ScrollToBottomButton onPress={() => null} showNotification={true} t={t} />
+          <ScrollToBottomButton
+            onPress={() => null}
+            showNotification={true}
+            t={t}
+            unreadCount={3}
+          />
         </TranslationProvider>
       </ThemeProvider>,
     );
-    expect(t).toHaveBeenCalledWith('New Messages');
     await waitFor(() => {
-      expect(getByText('New Messages')).toBeTruthy();
+      expect(getByTestId('unread-count')).toBeTruthy();
+      expect(getByText('3')).toBeTruthy();
     });
   });