Add unit tests

Author: AhyoungRyu

src/modules/Channel/context/ChannelProvider.tsx

@@ -43,7 +43,7 @@ import useUpdateMessageCallback from './hooks/useUpdateMessageCallback';
 import useResendMessageCallback from './hooks/useResendMessageCallback';
 import useSendMessageCallback from './hooks/useSendMessageCallback';
 import useSendFileMessageCallback from './hooks/useSendFileMessageCallback';
-import useToggleReactionCallback from '../../GroupChannel/context/hooks/useToggleReactionCallback';
+import useToggleReactionCallback from './hooks/useToggleReactionCallback';
 import useScrollToMessage from './hooks/useScrollToMessage';
 import useSendVoiceMessageCallback from './hooks/useSendVoiceMessageCallback';
 import { getCaseResolvedReplyType, getCaseResolvedThreadReplySelectType } from '../../../lib/utils/resolvedReplyType';

src/modules/Channel/context/hooks/useToggleReactionCallback.ts

@@ -3,38 +3,38 @@ import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { LoggerInterface } from '../../../../lib/Logger';
 import { BaseMessage } from '@sendbird/chat/message';
 
-type UseToggleReactionCallbackOptions = {
-  currentGroupChannel: GroupChannel | null;
-};
-type UseToggleReactionCallbackParams = {
-  logger: LoggerInterface;
-};
+const LOG_PRESET = 'useToggleReactionCallback:';
+
 export default function useToggleReactionCallback(
-  { currentGroupChannel }: UseToggleReactionCallbackOptions,
-  { logger }: UseToggleReactionCallbackParams,
+  currentChannel: GroupChannel | null,
+  logger?: LoggerInterface,
 ) {
   return useCallback(
     (message: BaseMessage, key: string, isReacted: boolean) => {
+      if (!currentChannel) {
+        logger?.warning(`${LOG_PRESET} currentChannel doesn't exist`, currentChannel);
+        return;
+      }
       if (isReacted) {
-        currentGroupChannel
-          ?.deleteReaction(message, key)
+        currentChannel
+          .deleteReaction(message, key)
           .then((res) => {
-            logger.info('Delete reaction success', res);
+            logger?.info(`${LOG_PRESET} Delete reaction success`, res);
           })
           .catch((err) => {
-            logger.warning('Delete reaction failed', err);
+            logger?.warning(`${LOG_PRESET} Delete reaction failed`, err);
           });
       } else {
-        currentGroupChannel
-          ?.addReaction(message, key)
+        currentChannel
+          .addReaction(message, key)
           .then((res) => {
-            logger.info('Add reaction success', res);
+            logger?.info(`${LOG_PRESET} Add reaction success`, res);
           })
           .catch((err) => {
-            logger.warning('Add reaction failed', err);
+            logger?.warning(`${LOG_PRESET} Add reaction failed`, err);
           });
       }
     },
-    [currentGroupChannel],
+    [currentChannel],
   );
 }

src/modules/GroupChannel/__test__/GroupChannelUIView.integration.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { GroupChannelUIView } from '../components/GroupChannelUI/GroupChannelUIView';
+import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
+
+jest.mock('../../../hooks/useSendbirdStateContext');
+
+const mockUseSendbirdStateContext = useSendbirdStateContext as jest.Mock;
+
+describe('GroupChannelUIView Integration Tests', () => {
+  const defaultProps = {
+    channelUrl: 'test-channel',
+    isInvalid: false,
+    renderChannelHeader: jest.fn(() => <div>Channel Header</div>),
+    renderMessageList: jest.fn(() => <div>Message List</div>),
+    renderMessageInput: jest.fn(() => <div>Message Input</div>),
+  };
+
+  beforeEach(() => {
+    mockUseSendbirdStateContext.mockImplementation(() => ({
+      stores: {
+        sdkStore: { error: null },
+      },
+      config: {
+        logger: { info: jest.fn() },
+        isOnline: true,
+        groupChannel: {
+          enableTypingIndicator: true,
+          typingIndicatorTypes: new Set(['text']),
+        },
+      },
+    }));
+  });
+
+  it('renders basic channel components correctly', () => {
+    render(<GroupChannelUIView {...defaultProps} />);
+
+    expect(screen.getByText('Channel Header')).toBeInTheDocument();
+    expect(screen.getByText('Message List')).toBeInTheDocument();
+    expect(screen.getByText('Message Input')).toBeInTheDocument();
+  });
+
+  it('renders loading placeholder when isLoading is true', () => {
+    render(<GroupChannelUIView {...defaultProps} isLoading={true} />);
+    // Placeholder is a just loading spinner in this case
+    expect(screen.getByRole('button')).toHaveClass('sendbird-icon-spinner');
+  });
+
+  it('renders invalid placeholder when channelUrl is missing', () => {
+    render(<GroupChannelUIView {...defaultProps} channelUrl="" />);
+    expect(screen.getByText('No channels')).toBeInTheDocument();
+  });
+
+  it('renders error placeholder when isInvalid is true', () => {
+    render(<GroupChannelUIView {...defaultProps} isInvalid={true} />);
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('renders SDK error placeholder when SDK has error', () => {
+    mockUseSendbirdStateContext.mockImplementation(() => ({
+      stores: {
+        sdkStore: { error: new Error('SDK Error') },
+      },
+      config: {
+        logger: { info: jest.fn() },
+        isOnline: true,
+      },
+    }));
+
+    render(<GroupChannelUIView {...defaultProps} />);
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(screen.getByText('Retry')).toBeInTheDocument();
+  });
+
+  it('renders custom placeholders when provided', () => {
+    const renderPlaceholderLoader = () => <div>Custom Loader</div>;
+    const renderPlaceholderInvalid = () => <div>Custom Invalid</div>;
+
+    const { rerender } = render(
+      <GroupChannelUIView
+        {...defaultProps}
+        isLoading={true}
+        renderPlaceholderLoader={renderPlaceholderLoader}
+      />,
+    );
+    expect(screen.getByText('Custom Loader')).toBeInTheDocument();
+
+    rerender(
+      <GroupChannelUIView
+        {...defaultProps}
+        isInvalid={true}
+        renderPlaceholderInvalid={renderPlaceholderInvalid}
+      />,
+    );
+    expect(screen.getByText('Custom Invalid')).toBeInTheDocument();
+  });
+});

src/modules/GroupChannel/context/__test__/GroupChannelProvider.spec.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { waitFor, act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import { GroupChannelProvider, useGroupChannelContext } from '../GroupChannelProvider';
+import { useGroupChannel } from '../hooks/useGroupChannel';
+
+const mockLogger = { warning: jest.fn() };
+const mockChannel = {
+  url: 'test-channel',
+  members: [{ userId: '1', nickname: 'user1' }],
+};
+
+const mockGetChannel = jest.fn().mockResolvedValue(mockChannel);
+const mockMessageCollection = {
+  dispose: jest.fn(),
+  setMessageCollectionHandler: jest.fn(),
+  initialize: jest.fn().mockResolvedValue(null),
+  loadPrevious: jest.fn(),
+  loadNext: jest.fn(),
+};
+jest.mock('../../../../hooks/useSendbirdStateContext', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    stores: {
+      sdkStore: {
+        sdk: {
+          groupChannel: {
+            getChannel: mockGetChannel,
+            addGroupChannelHandler: jest.fn(),
+            removeGroupChannelHandler: jest.fn(),
+          },
+          createMessageCollection: jest.fn().mockReturnValue(mockMessageCollection),
+        },
+        initialized: true,
+      },
+    },
+    config: {
+      logger: mockLogger,
+      markAsReadScheduler: {
+        push: jest.fn(),
+      },
+      groupChannel: {
+        replyType: 'NONE',
+        threadReplySelectType: 'PARENT',
+      },
+      groupChannelSettings: {
+        enableMessageSearch: true,
+      },
+      isOnline: true,
+      pubSub: {
+        subscribe: () => ({ remove: jest.fn() }),
+      },
+    },
+  })),
+}));
+
+describe('GroupChannelProvider', () => {
+  it('provides the correct initial state', () => {
+    const wrapper = ({ children }) => (
+      <GroupChannelProvider channelUrl="test-channel">
+        {children}
+      </GroupChannelProvider>
+    );
+
+    const { result } = renderHook(() => useGroupChannelContext(), { wrapper });
+
+    expect(result.current.channelUrl).toBe('test-channel');
+    expect(result.current.currentChannel).toBe(null);
+    expect(result.current.isScrollBottomReached).toBe(true);
+  });
+
+  it('updates state correctly when channel is fetched', async () => {
+    const wrapper = ({ children }) => (
+      <GroupChannelProvider channelUrl="test-channel">
+        {children}
+      </GroupChannelProvider>
+    );
+
+    const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+    act(async () => {
+      await waitFor(() => {
+        expect(result.current.state.currentChannel).toBeTruthy();
+        expect(result.current.state.currentChannel?.url).toBe('test-channel');
+      });
+    });
+  });
+
+  it('handles channel error correctly', async () => {
+    const mockError = new Error('Channel fetch failed');
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    jest.mock('../../../../hooks/useSendbirdStateContext', () => ({
+      default: () => ({
+        stores: {
+          sdkStore: {
+            sdk: {
+              groupChannel: {
+                getChannel: jest.fn().mockRejectedValue(mockError),
+              },
+            },
+            initialized: true,
+          },
+        },
+        config: { logger: console },
+      }),
+    }));
+
+    const wrapper = ({ children }) => (
+      <GroupChannelProvider channelUrl="error-channel">
+        {children}
+      </GroupChannelProvider>
+    );
+
+    const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+    act(async () => {
+      await waitFor(() => {
+        expect(result.current.state.fetchChannelError).toBeNull();
+        expect(result.current.state.currentChannel).toBeNull();
+      });
+    });
+  });
+
+  it('correctly handles scroll to bottom', async () => {
+    const wrapper = ({ children }) => (
+      <GroupChannelProvider channelUrl="test-channel">
+        {children}
+      </GroupChannelProvider>
+    );
+
+    const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+    act(async () => {
+      result.current.actions.scrollToBottom();
+      await waitFor(() => {
+        expect(result.current.state.isScrollBottomReached).toBe(true);
+      });
+    });
+  });
+});