refactor: Add tests for ChannelSettings migration (#1234)

fix: Prevent destroy error by adding `AbortController` in
`useSetChannel`
- Added `AbortController` to cancel async operations when the component
unmounts.
- Ensured that state updates are skipped if the operation is aborted.
- Prevented potential memory leaks and the `'destroy is not a function'`
error.
- Updated `useEffect` cleanup to properly handle pending async calls.

feat: Add tests for ChannelSettings migration

Author: HoonBaek

src/modules/ChannelSettings/__test__/ChannelSettingsProvider.spec.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { ChannelSettingsProvider, useChannelSettingsContext } from '../context/ChannelSettingsProvider';
+import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
+import { SendbirdSdkContext } from '../../../lib/SendbirdSdkContext';
+
+jest.mock('../../../hooks/useSendbirdStateContext');
+jest.mock('../context/hooks/useSetChannel');
+
+const mockLogger = {
+  warning: jest.fn(),
+  info: jest.fn(),
+  error: jest.fn(),
+};
+
+const initialState = {
+  channelUrl: 'test-channel',
+  onCloseClick: undefined,
+  onLeaveChannel: undefined,
+  onChannelModified: undefined,
+  onBeforeUpdateChannel: undefined,
+  renderUserListItem: undefined,
+  queries: undefined,
+  overrideInviteUser: undefined,
+  channel: null,
+  loading: false,
+  invalidChannel: false,
+  forceUpdateUI: expect.any(Function),
+  setChannelUpdateId: expect.any(Function),
+};
+
+describe('ChannelSettingsProvider', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    useSendbirdStateContext.mockReturnValue({
+      stores: { sdkStore: { sdk: {}, initialized: true } },
+      config: { logger: mockLogger },
+    });
+
+    wrapper = ({ children }) => (
+      <SendbirdSdkContext.Provider value={{ config: { logger: mockLogger } } as any}>
+        <ChannelSettingsProvider channelUrl="test-channel">
+          {children}
+        </ChannelSettingsProvider>
+      </SendbirdSdkContext.Provider>
+    );
+
+    jest.clearAllMocks();
+  });
+
+  it('provides the correct initial state', () => {
+    const { result } = renderHook(() => useChannelSettingsContext(), { wrapper });
+
+    expect(result.current.getState()).toEqual(expect.objectContaining(initialState));
+  });
+
+  it('logs a warning if SDK is not initialized', () => {
+    useSendbirdStateContext.mockReturnValue({
+      stores: { sdkStore: { sdk: null, initialized: false } },
+      config: { logger: mockLogger },
+    });
+
+    renderHook(() => useChannelSettingsContext(), { wrapper });
+
+    expect(mockLogger.warning).toHaveBeenCalledWith('ChannelSettings: SDK or GroupChannelModule is not available');
+  });
+
+  it('updates state correctly when setChannelUpdateId is called', async () => {
+    const { result } = renderHook(() => useChannelSettingsContext(), { wrapper });
+
+    await act(async () => {
+      result.current.setState({ channelUrl: 'new-channel' });
+      await waitForStateUpdate();
+      expect(result.current.getState().channelUrl).toBe('new-channel');
+    });
+  });
+
+  it('maintains other state values when channel changes', async () => {
+    const { result } = renderHook(() => useChannelSettingsContext(), { wrapper });
+
+    await act(async () => {
+      result.current.setState({ channel: { name: 'Updated Channel' } });
+      await waitForStateUpdate();
+      const updatedState = result.current.getState();
+      expect(updatedState.channel).toEqual({ name: 'Updated Channel' });
+      expect(updatedState.loading).toBe(false);
+      expect(updatedState.invalidChannel).toBe(false);
+    });
+  });
+
+  const waitForStateUpdate = () => new Promise(resolve => { setTimeout(resolve, 0); });
+});

src/modules/ChannelSettings/__test__/ChannelSettingsUI.integration.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
+
+import ChannelSettingsUI from '../components/ChannelSettingsUI';
+import { LocalizationContext } from '../../../lib/LocalizationContext';
+import * as useChannelSettingsModule from '../context/useChannelSettings';
+import { SendbirdSdkContext } from '../../../lib/SendbirdSdkContext';
+
+jest.mock('../context/useChannelSettings');
+
+const mockStringSet = {
+  CHANNEL_SETTING__HEADER__TITLE: 'Channel information',
+  CHANNEL_SETTING__OPERATORS__TITLE: 'Operators',
+  CHANNEL_SETTING__MEMBERS__TITLE: 'Members',
+  CHANNEL_SETTING__MUTED_MEMBERS__TITLE: 'Muted members',
+  CHANNEL_SETTING__BANNED_MEMBERS__TITLE: 'Banned users',
+  CHANNEL_SETTING__FREEZE_CHANNEL: 'Freeze Channel',
+  CHANNEL_SETTING__LEAVE_CHANNEL__TITLE: 'Leave channel',
+};
+const mockChannelName = 'Test Channel';
+
+const mockLocalizationContext = {
+  stringSet: mockStringSet,
+};
+
+const defaultMockState = {
+  channel: { name: mockChannelName, members: [], isBroadcast: false },
+  loading: false,
+  invalidChannel: false,
+};
+
+const defaultMockActions = {
+  setChannel: jest.fn(),
+  setLoading: jest.fn(),
+  setInvalid: jest.fn(),
+};
+
+describe('ChannelSettings Integration Tests', () => {
+  const mockUseChannelSettings = useChannelSettingsModule.default as jest.Mock;
+
+  const renderComponent = (mockState = {}, mockActions = {}) => {
+    mockUseChannelSettings.mockReturnValue({
+      state: { ...defaultMockState, ...mockState },
+      actions: { ...defaultMockActions, ...mockActions },
+    });
+
+    return render(
+      <SendbirdSdkContext.Provider value={{ config: { isOnline: true } } as any}>
+        <LocalizationContext.Provider value={mockLocalizationContext as any}>
+          <ChannelSettingsUI />
+        </LocalizationContext.Provider>
+      </SendbirdSdkContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders all necessary texts correctly', () => {
+    renderComponent();
+
+    expect(screen.getByText(mockChannelName)).toBeInTheDocument();
+    expect(screen.getByText(mockStringSet.CHANNEL_SETTING__HEADER__TITLE)).toBeInTheDocument();
+    expect(screen.getByText(mockStringSet.CHANNEL_SETTING__LEAVE_CHANNEL__TITLE)).toBeInTheDocument();
+  });
+
+  it('does not display texts when loading or invalidChannel is true', () => {
+    // Case 1: loading = true
+    renderComponent({ loading: true });
+
+    expect(screen.queryByText(mockChannelName)).not.toBeInTheDocument();
+    expect(screen.queryByText(mockStringSet.CHANNEL_SETTING__HEADER__TITLE)).not.toBeInTheDocument();
+    expect(screen.queryByText(mockStringSet.CHANNEL_SETTING__LEAVE_CHANNEL__TITLE)).not.toBeInTheDocument();
+
+    // Clear the render for the next case
+    jest.clearAllMocks();
+    renderComponent({ invalidChannel: true });
+
+    // Case 2: invalidChannel = true
+    expect(screen.queryByText(mockChannelName)).not.toBeInTheDocument();
+    expect(screen.queryByText(mockStringSet.CHANNEL_SETTING__HEADER__TITLE)).toBeInTheDocument(); // render Header
+    expect(screen.queryByText(mockStringSet.CHANNEL_SETTING__LEAVE_CHANNEL__TITLE)).not.toBeInTheDocument();
+  });
+
+  it('calls setChannel with the correct channel object', () => {
+    const setChannel = jest.fn();
+    renderComponent({}, { setChannel });
+
+    const newChannel = { name: 'New Channel', members: [] };
+    setChannel(newChannel);
+
+    expect(setChannel).toHaveBeenCalledWith(newChannel);
+  });
+});

src/modules/ChannelSettings/__test__/useChannelHandler.spec.ts

@@ -0,0 +1,78 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
+import { useChannelHandler } from '../context/hooks/useChannelHandler';
+
+// jest.mock('../../../utils/uuid', () => ({
+//   v4: jest.fn(() => 'mock-uuid'),
+// }));
+
+const mockLogger = {
+  warning: jest.fn(),
+  info: jest.fn(),
+  error: jest.fn(),
+};
+
+const mockSdk = {
+  groupChannel: {
+    addGroupChannelHandler: jest.fn(),
+    removeGroupChannelHandler: jest.fn(),
+  },
+};
+
+const mockForceUpdateUI = jest.fn();
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('useChannelHandler', () => {
+  it('logs a warning if SDK or groupChannel is not available', () => {
+    renderHook(() => useChannelHandler({ sdk: null, channelUrl: 'test-channel', logger: mockLogger, forceUpdateUI: mockForceUpdateUI }),
+    );
+
+    expect(mockLogger.warning).toHaveBeenCalledWith('ChannelSettings: SDK or GroupChannelModule is not available');
+  });
+
+  it('adds and removes GroupChannelHandler correctly', () => {
+    const { unmount } = renderHook(() => useChannelHandler({
+      sdk: mockSdk,
+      channelUrl: 'test-channel',
+      logger: mockLogger,
+      forceUpdateUI: mockForceUpdateUI,
+    }),
+    );
+
+    expect(mockSdk.groupChannel.addGroupChannelHandler).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.any(GroupChannelHandler),
+    );
+
+    act(() => {
+      unmount();
+    });
+
+    expect(mockSdk.groupChannel.removeGroupChannelHandler).toHaveBeenCalled();
+  });
+
+  it('calls forceUpdateUI when a user leaves the channel', () => {
+    mockSdk.groupChannel.addGroupChannelHandler.mockImplementation((_, handler) => {
+      handler.onUserLeft({ url: 'test-channel' }, { userId: 'user1' });
+    });
+
+    renderHook(() => useChannelHandler({ sdk: mockSdk, channelUrl: 'test-channel', logger: mockLogger, forceUpdateUI: mockForceUpdateUI }),
+    );
+
+    expect(mockForceUpdateUI).toHaveBeenCalled();
+  });
+
+  it('calls forceUpdateUI when a user is banned from the channel', () => {
+    mockSdk.groupChannel.addGroupChannelHandler.mockImplementation((_, handler) => {
+      handler.onUserBanned({ url: 'test-channel', isGroupChannel: () => true }, { userId: 'user1' });
+    });
+
+    renderHook(() => useChannelHandler({ sdk: mockSdk, channelUrl: 'test-channel', logger: mockLogger, forceUpdateUI: mockForceUpdateUI }),
+    );
+
+    expect(mockForceUpdateUI).toHaveBeenCalled();
+  });
+});

src/modules/ChannelSettings/__test__/useChannelSettings.spec.ts

@@ -0,0 +1,86 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useChannelSettings } from '../context/useChannelSettings';
+import { useChannelSettingsContext } from '../context/ChannelSettingsProvider';
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+
+jest.mock('../context/ChannelSettingsProvider', () => ({
+  useChannelSettingsContext: jest.fn(),
+}));
+
+const mockStore = {
+  getState: jest.fn(),
+  setState: jest.fn(),
+  subscribe: jest.fn(() => jest.fn()),
+};
+
+const mockChannel: GroupChannel = {
+  url: 'test-channel',
+  name: 'Test Channel',
+} as GroupChannel;
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  (useChannelSettingsContext as jest.Mock).mockReturnValue(mockStore);
+});
+
+describe('useChannelSettings', () => {
+  it('throws an error if used outside of ChannelSettingsProvider', () => {
+    (useChannelSettingsContext as jest.Mock).mockReturnValueOnce(null);
+
+    const { result } = renderHook(() => useChannelSettings());
+
+    expect(result.error).toEqual(
+      new Error('useChannelSettings must be used within a ChannelSettingsProvider'),
+    );
+  });
+
+  it('returns the correct initial state', () => {
+    const initialState = {
+      channel: null,
+      loading: false,
+      invalidChannel: false,
+    };
+
+    mockStore.getState.mockReturnValue(initialState);
+
+    const { result } = renderHook(() => useChannelSettings());
+
+    expect(result.current.state).toEqual(initialState);
+  });
+
+  it('calls setChannel with the correct channel object', () => {
+    const { result } = renderHook(() => useChannelSettings());
+
+    act(() => {
+      result.current.actions.setChannel(mockChannel);
+    });
+
+    expect(mockStore.setState).toHaveBeenCalledWith(expect.any(Function));
+    const stateSetter = mockStore.setState.mock.calls[0][0];
+    expect(stateSetter({})).toEqual({ channel: mockChannel });
+  });
+
+  it('calls setLoading with the correct value', () => {
+    const { result } = renderHook(() => useChannelSettings());
+
+    act(() => {
+      result.current.actions.setLoading(true);
+    });
+
+    expect(mockStore.setState).toHaveBeenCalledWith(expect.any(Function));
+    const stateSetter = mockStore.setState.mock.calls[0][0];
+    expect(stateSetter({})).toEqual({ loading: true });
+  });
+
+  it('calls setInvalid with the correct value', () => {
+    const { result } = renderHook(() => useChannelSettings());
+
+    act(() => {
+      result.current.actions.setInvalid(true);
+    });
+
+    expect(mockStore.setState).toHaveBeenCalledWith(expect.any(Function));
+    const stateSetter = mockStore.setState.mock.calls[0][0];
+    expect(stateSetter({})).toEqual({ invalidChannel: true });
+  });
+});