[CLNP-5914] Fix unit tests and UI error (#1267)

* Changelog
  * Fixed the broken unit tests of `GroupChannelListProvider`
  * Fixed the UI error when click `open in channel` in the other channel
* Use `useDeepCompareEffect` in `ThreadProvider` and
`GroupChannelListProvider`

Author: git-babel

src/modules/GroupChannelList/context/GroupChannelListProvider.tsx

@@ -17,6 +17,7 @@ import { useStore } from '../../../hooks/useStore';
 import { noop } from '../../../utils/utils';
 import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
 import useGroupChannelList from './useGroupChannelList';
+import useDeepCompareEffect from '../../../hooks/useDeepCompareEffect';
 
 type OnCreateChannelClickParams = { users: Array<string>; onClose: () => void; channelType: CHANNEL_TYPE };
 type ChannelListDataSource = ReturnType<typeof useGroupChannelListDataSource>;
@@ -203,7 +204,7 @@ export const GroupChannelListManager: React.FC<GroupChannelListProviderProps> =
     loadMore,
   ]);
   const memoizedGroupChannel = useMemo(() => groupChannels, [groupChannels]);
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     updateState({
       groupChannels: memoizedGroupChannel,
       ...eventHandlers,

src/modules/GroupChannelList/context/__tests__/GroupChannelListProvider.spec.tsx

@@ -42,9 +42,9 @@ describe('GroupChannelListProvider', () => {
     className: '',
     selectedChannelUrl: '',
     disableAutoSelect: false,
-    allowProfileEdit: undefined,
-    isTypingIndicatorEnabled: undefined,
-    isMessageReceiptStatusEnabled: undefined,
+    allowProfileEdit: true,
+    isTypingIndicatorEnabled: false,
+    isMessageReceiptStatusEnabled: false,
     onChannelSelect: expect.any(Function),
     onChannelCreated: expect.any(Function),
     onThemeChange: undefined,
@@ -87,11 +87,12 @@ describe('GroupChannelListProvider', () => {
     await act(async () => {
       result.current.updateState({ className: 'new-classname' });
       result.current.updateState({ disableAutoSelect: true });
-      await waitFor(() => {
-        const newState = result.current.state;
-        expect(newState.className).toEqual('new-classname');
-        expect(newState.disableAutoSelect).toEqual(true);
-      });
+    });
+
+    await waitFor(() => {
+      const newState = result.current.state;
+      expect(newState.className).toEqual('new-classname');
+      expect(newState.disableAutoSelect).toEqual(true);
     });
   });
 

src/modules/GroupChannelList/context/__tests__/useGroupChannelList.spec.tsx

@@ -1,4 +1,4 @@
-import { GroupChannelListProvider, useGroupChannelListContext } from '../GroupChannelListProvider';
+import { GroupChannelListProvider } from '../GroupChannelListProvider';
 import { renderHook } from '@testing-library/react';
 import React from 'react';
 import { useGroupChannelList } from '../useGroupChannelList';
@@ -14,7 +14,12 @@ const mockState = {
       initialized: true,
     },
   },
-  config: { logger: console },
+  config: {
+    logger: console,
+    groupChannelList: {
+      enableTypingIndicator: true,
+    },
+  },
 };
 jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
   __esModule: true,
@@ -33,17 +38,12 @@ jest.mock('@sendbird/uikit-tools', () => ({
   useGroupChannelHandler: jest.fn(() => {}),
 }));
 
-jest.mock('../GroupChannelListProvider', () => ({
-  ...jest.requireActual('../GroupChannelListProvider'),
-  useGroupChannelListContext: jest.fn(),
-}));
-
 const initialState = {
   className: '',
   selectedChannelUrl: '',
   disableAutoSelect: false,
-  allowProfileEdit: false,
-  isTypingIndicatorEnabled: false,
+  allowProfileEdit: true,
+  isTypingIndicatorEnabled: true,
   isMessageReceiptStatusEnabled: false,
   onChannelSelect: undefined,
   onChannelCreated: undefined,
@@ -59,14 +59,8 @@ const initialState = {
   loadMore: null,
 };
 
-const mockStore = {
-  getState: jest.fn(() => initialState),
-  setState: jest.fn(),
-  subscribe: jest.fn(() => jest.fn()),
-};
-
 const wrapper = ({ children }) => (
-  <GroupChannelListProvider onChannelSelect={jest.fn()} onChannelCreated={jest.fn()}>
+  <GroupChannelListProvider>
     {children}
   </GroupChannelListProvider>
 );
@@ -78,15 +72,12 @@ describe('GroupChannelListProvider', () => {
   });
 
   it('throws an error if used outside of GroupChannelListProvider', () => {
-    (useGroupChannelListContext as jest.Mock).mockReturnValue(null);
-
     expect(() => {
-      renderHook(() => useGroupChannelList(), { wrapper });
+      renderHook(() => useGroupChannelList());
     }).toThrow(new Error('useGroupChannelList must be used within a GroupChannelListProvider'));
   });
 
   it('provide the correct initial state', () => {
-    (useGroupChannelListContext as jest.Mock).mockReturnValue(mockStore);
     const { result } = renderHook(() => useGroupChannelList(), { wrapper });
 
     expect(result.current.state).toEqual(expect.objectContaining(initialState));

src/modules/Thread/context/ThreadProvider.tsx

@@ -23,6 +23,7 @@ import { useStore } from '../../../hooks/useStore';
 import useSetCurrentUserId from './hooks/useSetCurrentUserId';
 import useThread from './useThread';
 import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
+import useDeepCompareEffect from '../../../hooks/useDeepCompareEffect';
 
 export interface ThreadProviderProps extends
   Pick<UserProfileProviderProps, 'disableUserProfile' | 'renderUserProfile'> {
@@ -184,7 +185,7 @@ export const ThreadManager: React.FC<React.PropsWithChildren<ThreadProviderProps
       : new Map()
   ), [currentChannel?.members]);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     updateState({
       channelUrl,
       message,