Updating tests and docs

Author: vishalnarkhede

CHANGELOG.md

@@ -23,57 +23,6 @@
 
 - On upgrading to this release, ensure events and any custom handling functions (ex: `onAddedToChannel` or `onMessageNew`) are properly processed and update the list UI as expected.
 
-*ChannelContext*
-
-- We have split the `ChannelContext` into three separate contexts to further modularize the code and reduce renders as items in context change. The following contexts now contain the following values, previously all held within the `ChannelContext`:
-
-  - `ChannelContext`:
-
-    - `channel`
-    - `disabled`
-    - `EmptyStateIndicator`
-    - `error`
-    - `eventHistory`
-    - `lastRead`
-    - `loading`
-    - `markRead`
-    - `members`
-    - `read`
-    - `setLastRead`
-    - `typing`
-    - `watcherCount`
-    - `watchers`
-
-  - `MessagesContext`
-
-    - `Attachment`
-    - `clearEditingState`
-    - `editing`
-    - `editMessage`
-    - `emojiData`
-    - `hasMore`
-    - `loadingMore`
-    - `loadMore`
-    - `Message`
-    - `messages`
-    - `removeMessage`
-    - `retrySendMessage`
-    - `sendMessage`
-    - `setEditingState`
-    - `updateMessage`
-
-  - `ThreadContext`
-
-    - `closeThread`
-    - `loadMoreThread`
-    - `openThread`
-    - `thread`
-    - `threadHasMore`
-    - `threadLoadingMore`
-    - `threadMessages`
-
-- All contexts are exported and any values can be accessed through a higher order component (ex: `withMessagesContext`) or the `useContext` hook (ex: `const { messages } = useContext(MessagesContext);`)
-
 *FileUploadPreview*
 
 - We fixed a bug for being unable to remove a file from the `MessageInput` and made it consistent to `ImageUploadPreview`

src/components/Channel/__tests__/Channel.test.js

@@ -13,14 +13,9 @@ import { getTestClientWithUser } from 'mock-builders/mock';
 
 import Channel from '../Channel';
 
-import Attachment from '../../Attachment/Attachment';
 import Chat from '../../Chat/Chat';
 
-import {
-  ChannelContext,
-  MessagesContext,
-  ThreadContext,
-} from '../../../context';
+import { ChannelContext } from '../../../context';
 
 // This component is used for performing effects in a component that consumes ChannelContext,
 // i.e. making use of the callbacks & values provided by the Channel component.
@@ -173,17 +168,13 @@ describe('Channel', () => {
     const hasThread = jest.fn();
     // this renders Channel, calls openThread from a child context consumer with a message,
     // and then calls hasThread with the thread id if it was set.
-    renderComponent(
-      { channel },
-      ({ openThread, thread }) => {
-        if (!thread) {
-          openThread(threadMessage);
-        } else {
-          hasThread(thread.id);
-        }
-      },
-      ThreadContext,
-    );
+    renderComponent({ channel }, ({ openThread, thread }) => {
+      if (!thread) {
+        openThread(threadMessage);
+      } else {
+        hasThread(thread.id);
+      }
+    });
     await waitFor(() =>
       expect(hasThread).toHaveBeenCalledWith(threadMessage.id),
     );
@@ -220,7 +211,6 @@ describe('Channel', () => {
           channelHasMore = hasMore;
         }
       },
-      MessagesContext,
     );
     await waitFor(() => expect(channelHasMore).toBe(false));
   });
@@ -230,14 +220,10 @@ describe('Channel', () => {
 
     const newMessages = [generateMessage()];
 
-    renderComponent(
-      { channel },
-      ({ loadMore }) => {
-        useMockedApis(chatClient, [queryChannelWithNewMessages(newMessages)]);
-        loadMore(limit);
-      },
-      MessagesContext,
-    );
+    renderComponent({ channel }, ({ loadMore }) => {
+      useMockedApis(chatClient, [queryChannelWithNewMessages(newMessages)]);
+      loadMore(limit);
+    });
 
     await waitFor(() => expect(channelQuerySpy).toHaveBeenCalled());
   });
@@ -246,16 +232,12 @@ describe('Channel', () => {
     const queryPromise = new Promise(() => {});
     let isLoadingMore = false;
 
-    renderComponent(
-      { channel },
-      ({ loadingMore, loadMore }) => {
-        // return a promise that hasn't resolved yet, so loadMore will be stuck in the 'await' part of the function
-        jest.spyOn(channel, 'query').mockImplementationOnce(() => queryPromise);
-        loadMore();
-        isLoadingMore = loadingMore;
-      },
-      MessagesContext,
-    );
+    renderComponent({ channel }, ({ loadingMore, loadMore }) => {
+      // return a promise that hasn't resolved yet, so loadMore will be stuck in the 'await' part of the function
+      jest.spyOn(channel, 'query').mockImplementationOnce(() => queryPromise);
+      loadMore();
+      isLoadingMore = loadingMore;
+    });
 
     await waitFor(() => expect(isLoadingMore).toBe(true));
   });
@@ -265,13 +247,9 @@ describe('Channel', () => {
     const updatedMessage = { ...messages[0], text: newText };
     const clientUpdateMessageSpy = jest.spyOn(chatClient, 'updateMessage');
 
-    renderComponent(
-      { channel },
-      ({ editMessage }) => {
-        editMessage(updatedMessage);
-      },
-      MessagesContext,
-    );
+    renderComponent({ channel }, ({ editMessage }) => {
+      editMessage(updatedMessage);
+    });
 
     await waitFor(() =>
       expect(clientUpdateMessageSpy).toHaveBeenCalledWith(updatedMessage),
@@ -280,13 +258,9 @@ describe('Channel', () => {
 
   it('should use doUpdateMessageRequest for the editMessage callback if provided', async () => {
     const doUpdateMessageRequest = jest.fn((channelId, message) => message);
-    renderComponent(
-      { channel, doUpdateMessageRequest },
-      ({ editMessage }) => {
-        editMessage(messages[0]);
-      },
-      MessagesContext,
-    );
+    renderComponent({ channel, doUpdateMessageRequest }, ({ editMessage }) => {
+      editMessage(messages[0]);
+    });
 
     await waitFor(() =>
       expect(doUpdateMessageRequest).toHaveBeenCalledWith(
@@ -311,7 +285,6 @@ describe('Channel', () => {
           allMessagesRemoved = true;
         }
       },
-      MessagesContext,
     );
 
     await waitFor(() => {
@@ -361,88 +334,4 @@ describe('Channel', () => {
       });
     });
   });
-
-  describe('MessagesContext', () => {
-    it('renders children without crashing', async () => {
-      const { getByTestId } = render(
-        <MessagesContext.Provider>
-          <View testID='children' />
-        </MessagesContext.Provider>,
-      );
-
-      await waitFor(() => expect(getByTestId('children')).toBeTruthy());
-    });
-
-    it('exposes the messages context', async () => {
-      let context;
-
-      const mockContext = {
-        Attachment,
-        editing: false,
-        messages,
-        sendMessage: () => {},
-      };
-
-      render(
-        <MessagesContext.Provider value={mockContext}>
-          <ContextConsumer
-            context={MessagesContext}
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></ContextConsumer>
-        </MessagesContext.Provider>,
-      );
-
-      await waitFor(() => {
-        expect(context).toBeInstanceOf(Object);
-        expect(context.Attachment).toBeInstanceOf(Function);
-        expect(context.editing).toBe(false);
-        expect(context.messages).toBeInstanceOf(Array);
-        expect(context.sendMessage).toBeInstanceOf(Function);
-      });
-    });
-  });
-
-  describe('ThreadContext', () => {
-    it('renders children without crashing', async () => {
-      const { getByTestId } = render(
-        <ThreadContext.Provider>
-          <View testID='children' />
-        </ThreadContext.Provider>,
-      );
-
-      await waitFor(() => expect(getByTestId('children')).toBeTruthy());
-    });
-
-    it('exposes the thread context', async () => {
-      let context;
-
-      const mockContext = {
-        openThread: () => {},
-        thread: {},
-        threadHasMore: true,
-        threadLoadingMore: false,
-      };
-
-      render(
-        <ThreadContext.Provider value={mockContext}>
-          <ContextConsumer
-            context={ThreadContext}
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></ContextConsumer>
-        </ThreadContext.Provider>,
-      );
-
-      await waitFor(() => {
-        expect(context).toBeInstanceOf(Object);
-        expect(context.openThread).toBeInstanceOf(Function);
-        expect(context.thread).toBeInstanceOf(Object);
-        expect(context.threadHasMore).toBe(true);
-        expect(context.threadLoadingMore).toBe(false);
-      });
-    });
-  });
 });

src/components/MessageInput/__tests__/SendButton.test.js

@@ -3,16 +3,16 @@ import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import SendButton from '../SendButton';
 
-import { MessagesContext } from '../../../context';
+import { ChannelContext } from '../../../context';
 
 describe('SendButton', () => {
   it('should render a non-editing enabled SendButton', async () => {
     const sendMessage = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
-      <MessagesContext.Provider value={{ editing: false }}>
+      <ChannelContext.Provider value={{ editing: false }}>
         <SendButton sendMessage={sendMessage} />
-      </MessagesContext.Provider>,
+      </ChannelContext.Provider>,
     );
 
     await waitFor(() => {
@@ -35,9 +35,9 @@ describe('SendButton', () => {
     const sendMessage = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
-      <MessagesContext.Provider value={{ editing: false }}>
+      <ChannelContext.Provider value={{ editing: false }}>
         <SendButton disabled sendMessage={sendMessage} />
-      </MessagesContext.Provider>,
+      </ChannelContext.Provider>,
     );
 
     await waitFor(() => {
@@ -60,9 +60,9 @@ describe('SendButton', () => {
     const sendMessage = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
-      <MessagesContext.Provider value={{ editing: true }}>
+      <ChannelContext.Provider value={{ editing: true }}>
         <SendButton sendMessage={sendMessage} />
-      </MessagesContext.Provider>,
+      </ChannelContext.Provider>,
     );
 
     await waitFor(() => {
@@ -85,9 +85,9 @@ describe('SendButton', () => {
     const sendMessage = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
-      <MessagesContext.Provider value={{ editing: true }}>
+      <ChannelContext.Provider value={{ editing: true }}>
         <SendButton disabled sendMessage={sendMessage} />
-      </MessagesContext.Provider>,
+      </ChannelContext.Provider>,
     );
 
     await waitFor(() => {

src/components/Thread/__tests__/Thread.test.js

@@ -18,11 +18,7 @@ import Thread from '../Thread';
 import Channel from '../../Channel/Channel';
 import Chat from '../../Chat/Chat';
 
-import {
-  ChannelContext,
-  ThreadContext,
-  TranslationContext,
-} from '../../../context';
+import { ChannelContext, TranslationContext } from '../../../context';
 import { Streami18n } from '../../../utils/Streami18n';
 
 const StreamReactNativeNamespace = '9b244ee4-7d69-4d7b-ae23-cf89e9f7b035';
@@ -61,12 +57,12 @@ describe('Thread', () => {
       <Chat client={chatClient}>
         <TranslationContext.Provider value={{ ...translators, t }}>
           <Channel channel={channel} client={chatClient} thread={thread}>
-            <ThreadContext.Consumer>
+            <ChannelContext.Consumer>
               {(c) => {
                 openThread = c.openThread;
                 return <Thread thread={thread} />;
               }}
-            </ThreadContext.Consumer>
+            </ChannelContext.Consumer>
           </Channel>
         </TranslationContext.Provider>
       </Chat>,

src/components/docs/Channel.md

@@ -15,7 +15,7 @@
 ></div>
 ```
 
-**Note:** The Channel component provides access to the values stored in [ChannelContext](#channelcontext), [MessagesContext](#messagescontext), and [ThreadContext](#threadcontext) and exposes the [withChannelContext](#withchannelcontext), [withMessagesContext](#withmessagescontext), and [withThreadContext](#withthreadcontext) higher order components.
+**Note:** The Channel component provides access to the values stored in [ChannelContext](#channelcontext) and exposes the [withChannelContext](#withchannelcontext) higher order components.
 
 The example below shows how to write a component that consumes a context through a higher order component.
 

src/components/docs/SendButton.md

@@ -13,7 +13,7 @@ Disabled send button
 Send edited message button
 
 ```js
-<MessagesContext.Provider value={{ editing: true }}>
+<ChannelContext.Provider value={{ editing: true }}>
   <SendButton sendMessage={() => {}} />
-</MessagesContext.Provider>
+</ChannelContext.Provider>
 ```