Skip to content

Commit 174f4f6

Browse files
isekovanicisekovanic
committed
fix: tests
1 parent cef14e9 commit 174f4f6

File tree

2 files changed

+136
-95
lines changed

2 files changed

+136
-95
lines changed

‎package/src/components/ChannelList/__tests__/ChannelList.test.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,18 @@ import { generateChannel, generateChannelResponse } from '../../../mock-builders
2929
import { generateMessage } from '../../../mock-builders/generator/message';
3030
import { generateUser } from '../../../mock-builders/generator/user';
3131
import { getTestClientWithUser } from '../../../mock-builders/mock';
32+
import { ChannelPreview } from '../../ChannelPreview/ChannelPreview';
3233
import { Chat } from '../../Chat/Chat';
3334
import { ChannelList } from '../ChannelList';
3435

36+
const mockChannelSwipableWrapper = jest.fn(({ children }) => (
37+
<View testID='swipe-wrapper'>{children}</View>
38+
));
39+
40+
jest.mock('../../ChannelPreview/ChannelSwipableWrapper', () => ({
41+
ChannelSwipableWrapper: (...args) => mockChannelSwipableWrapper(...args),
42+
}));
43+
3544
/**
3645
* We are gonna use following custom UI components for preview and list.
3746
* If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
@@ -66,6 +75,19 @@ const ChannelListSwipeActionsProbe = () => {
6675
return <Text testID='swipe-actions-enabled'>{`${swipeActionsEnabled}`}</Text>;
6776
};
6877

78+
const ChannelPreviewContent = ({ unread }) => <Text testID='preview-unread'>{`${unread}`}</Text>;
79+
80+
const ChannelListWithChannelPreview = () => {
81+
const { channels } = useChannelsContext();
82+
return (
83+
<View testID='channel-list-with-channel-preview'>
84+
{channels?.map((channel) => (
85+
<ChannelPreview channel={channel} key={channel.id} Preview={ChannelPreviewContent} />
86+
))}
87+
</View>
88+
);
89+
};
90+
6991
let expectedChannelDetailsBottomSheetOverride;
7092
const ChannelListChannelDetailsBottomSheetProbe = () => {
7193
const { ChannelDetailsBottomSheet } = useChannelsContext();
@@ -262,6 +284,35 @@ describe('ChannelList', () => {
262284
expect(getByTestId('swipe-actions-enabled')).toHaveTextContent('true');
263285
});
264286

287+
it('should not render ChannelSwipableWrapper when swipeActionsEnabled is false', async () => {
288+
useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
289+
290+
const { getByTestId, queryByTestId } = render(
291+
<Chat client={chatClient}>
292+
<ChannelList {...props} List={ChannelListWithChannelPreview} swipeActionsEnabled={false} />
293+
</Chat>,
294+
);
295+
296+
await waitFor(() => expect(getByTestId('channel-list-with-channel-preview')).toBeTruthy());
297+
expect(getByTestId('preview-unread')).toHaveTextContent('0');
298+
expect(queryByTestId('swipe-wrapper')).toBeNull();
299+
expect(mockChannelSwipableWrapper).not.toHaveBeenCalled();
300+
});
301+
302+
it('should render ChannelSwipableWrapper when swipeActionsEnabled is true', async () => {
303+
useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
304+
305+
const { getByTestId } = render(
306+
<Chat client={chatClient}>
307+
<ChannelList {...props} List={ChannelListWithChannelPreview} swipeActionsEnabled={true} />
308+
</Chat>,
309+
);
310+
311+
await waitFor(() => expect(getByTestId('channel-list-with-channel-preview')).toBeTruthy());
312+
expect(getByTestId('swipe-wrapper')).toBeTruthy();
313+
expect(mockChannelSwipableWrapper).toHaveBeenCalledTimes(1);
314+
});
315+
265316
it('should expose ChannelDetailsBottomSheet override in ChannelsContext', async () => {
266317
useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
267318
const ChannelDetailsBottomSheetOverride = () => null;
@@ -281,6 +332,29 @@ describe('ChannelList', () => {
281332
expect(getByTestId('channel-details-bottom-sheet-override')).toHaveTextContent('true');
282333
});
283334

335+
it('should pass ChannelDetailsBottomSheet override to ChannelSwipableWrapper', async () => {
336+
useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
337+
const ChannelDetailsBottomSheetOverride = () => null;
338+
339+
render(
340+
<Chat client={chatClient}>
341+
<ChannelList
342+
{...props}
343+
ChannelDetailsBottomSheet={ChannelDetailsBottomSheetOverride}
344+
List={ChannelListWithChannelPreview}
345+
/>
346+
</Chat>,
347+
);
348+
349+
await waitFor(() => expect(mockChannelSwipableWrapper).toHaveBeenCalled());
350+
const swipableWrapperProps = mockChannelSwipableWrapper.mock.calls[0]?.[0];
351+
expect(swipableWrapperProps).toEqual(
352+
expect.objectContaining({
353+
ChannelDetailsBottomSheet: ChannelDetailsBottomSheetOverride,
354+
}),
355+
);
356+
});
357+
284358
describe('Event handling', () => {
285359
describe('message.new', () => {
286360
const sendNewMessageOnChannel3 = () => {

‎package/src/components/ChannelPreview/__tests__/ChannelPreview.test.tsx‎

Lines changed: 62 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from 'react';
2-
import { Text, View } from 'react-native';
2+
import { Text } from 'react-native';
33

44
import { act, render, waitFor } from '@testing-library/react-native';
55

66
import type { Channel, StreamChat } from 'stream-chat';
77

8+
import { ChannelsProvider } from '../../../contexts/channelsContext/ChannelsContext';
9+
import type { ChannelsContextValue } from '../../../contexts/channelsContext/ChannelsContext';
810
import {
911
getOrCreateChannelApi,
1012
GetOrCreateChannelApiParams,
@@ -33,6 +35,13 @@ type ChannelPreviewUIComponentProps = {
3335
};
3436

3537
const channelOnMock = jest.fn().mockReturnValue({ unsubscribe: jest.fn() });
38+
const mockChannelSwipableWrapper = jest.fn(({ children }: React.PropsWithChildren) => (
39+
<Text testID='swipe-wrapper'>{children}</Text>
40+
));
41+
42+
jest.mock('../ChannelSwipableWrapper', () => ({
43+
ChannelSwipableWrapper: (...args: unknown[]) => mockChannelSwipableWrapper(...args),
44+
}));
3645

3746
const ChannelPreviewUIComponent = (props: ChannelPreviewUIComponentProps) => {
3847
return (
@@ -404,118 +413,76 @@ describe('ChannelPreview', () => {
404413
});
405414

406415
describe('swipeActionsEnabled', () => {
407-
const swipeChannel = { cid: 'messaging:test-channel', id: 'test-channel' } as Channel;
408-
const swipeClient = { userID: 'test-user-id' };
409-
const swipeLastMessage = { text: 'hello' } as LastMessageType;
410-
411-
beforeEach(() => {
412-
jest.resetModules();
413-
});
416+
const ChannelDetailsBottomSheetOverride = () => null;
417+
418+
const SwipePreview = ({ lastMessage, muted, unread }: ChannelPreviewUIComponentProps) => (
419+
<>
420+
<Text testID='preview-muted'>{`${muted}`}</Text>
421+
<Text testID='preview-unread'>{`${unread}`}</Text>
422+
<Text testID='preview-last-message'>{lastMessage?.text ?? ''}</Text>
423+
</>
424+
);
414425

415-
const renderWithSwipeMocks = ({
416-
ChannelDetailsBottomSheet,
426+
const SwipeTestComponent = ({
427+
channelDetailsBottomSheet,
417428
swipeActionsEnabled,
418429
}: {
419-
ChannelDetailsBottomSheet?: React.ComponentType;
430+
channelDetailsBottomSheet?: React.ComponentType;
420431
swipeActionsEnabled: boolean;
421432
}) => {
422-
let rendered: ReturnType<typeof import('@testing-library/react-native').render> | undefined;
423-
const mockChannelSwipableWrapper = jest.fn(({ children }: React.PropsWithChildren) => (
424-
<View testID='swipe-wrapper'>{children}</View>
425-
));
426-
427-
const PreviewComponent = ({
428-
lastMessage,
429-
muted,
430-
unread,
431-
}: {
432-
lastMessage: LastMessageType;
433-
muted: boolean;
434-
unread: number;
435-
}) => (
436-
<>
437-
<Text testID='preview-muted'>{`${muted}`}</Text>
438-
<Text testID='preview-unread'>{`${unread}`}</Text>
439-
<Text testID='preview-last-message'>{lastMessage?.text ?? ''}</Text>
440-
</>
441-
);
442-
443-
jest.isolateModules(() => {
444-
jest.doMock('../../../contexts/channelsContext/ChannelsContext', () => ({
445-
useChannelsContext: () => ({
446-
ChannelDetailsBottomSheet,
447-
Preview: PreviewComponent,
448-
getChannelActionItems: undefined,
449-
swipeActionsEnabled,
450-
}),
451-
}));
452-
453-
jest.doMock('../../../contexts/chatContext/ChatContext', () => ({
454-
useChatContext: () => ({ client: swipeClient }),
455-
}));
456-
457-
jest.doMock('../hooks/useChannelPreviewData', () => ({
458-
useChannelPreviewData: () => ({
459-
lastMessage: swipeLastMessage,
460-
muted: false,
461-
unread: 3,
462-
}),
463-
}));
464-
465-
jest.doMock('../../../hooks/useTranslatedMessage', () => ({
466-
useTranslatedMessage: () => undefined,
467-
}));
468-
469-
jest.doMock('../ChannelSwipableWrapper', () => ({
470-
ChannelSwipableWrapper: (...args: unknown[]) => mockChannelSwipableWrapper(...args),
471-
}));
472-
473-
const { render } =
474-
require('@testing-library/react-native') as typeof import('@testing-library/react-native');
475-
const { ChannelPreview: IsolatedChannelPreview } =
476-
require('../ChannelPreview') as typeof import('../ChannelPreview');
477-
478-
rendered = render(<IsolatedChannelPreview channel={swipeChannel} />);
479-
});
480-
481-
if (!rendered) {
482-
throw new Error('Failed to render ChannelPreview with mocked modules');
433+
if (channel === null) {
434+
return null;
483435
}
484436

485-
return { ...rendered, mockChannelSwipableWrapper };
437+
return (
438+
<Chat client={chatClient}>
439+
<ChannelsProvider
440+
value={
441+
{
442+
ChannelDetailsBottomSheet: channelDetailsBottomSheet,
443+
Preview: SwipePreview,
444+
getChannelActionItems: undefined,
445+
swipeActionsEnabled,
446+
} as unknown as ChannelsContextValue
447+
}
448+
>
449+
<ChannelPreview channel={channel} client={chatClient} Preview={SwipePreview} />
450+
</ChannelsProvider>
451+
</Chat>
452+
);
486453
};
487454

488-
it('does not render ChannelSwipableWrapper when swipeActionsEnabled is false', () => {
489-
const { getByTestId, queryByTestId, mockChannelSwipableWrapper } = renderWithSwipeMocks({
490-
swipeActionsEnabled: false,
491-
});
455+
beforeEach(async () => {
456+
mockChannelSwipableWrapper.mockClear();
457+
channel = await initChannelFromData(chatClient);
458+
});
492459

493-
expect(getByTestId('preview-muted')).toHaveTextContent('false');
494-
expect(getByTestId('preview-unread')).toHaveTextContent('3');
495-
expect(getByTestId('preview-last-message')).toHaveTextContent('hello');
460+
it('does not render ChannelSwipableWrapper when swipeActionsEnabled is false', async () => {
461+
const { getByTestId, queryByTestId } = render(
462+
<SwipeTestComponent swipeActionsEnabled={false} />,
463+
);
464+
465+
await waitFor(() => expect(getByTestId('preview-unread')).toHaveTextContent('0'));
496466
expect(queryByTestId('swipe-wrapper')).toBeNull();
497467
expect(mockChannelSwipableWrapper).not.toHaveBeenCalled();
498468
});
499469

500-
it('renders ChannelSwipableWrapper when swipeActionsEnabled is true', () => {
501-
const { getByTestId, mockChannelSwipableWrapper } = renderWithSwipeMocks({
502-
swipeActionsEnabled: true,
503-
});
470+
it('renders ChannelSwipableWrapper when swipeActionsEnabled is true', async () => {
471+
const { getByTestId } = render(<SwipeTestComponent swipeActionsEnabled={true} />);
504472

505-
expect(getByTestId('swipe-wrapper')).toBeTruthy();
506-
expect(mockChannelSwipableWrapper).toHaveBeenCalledTimes(1);
507-
expect(getByTestId('preview-unread')).toHaveTextContent('3');
473+
await waitFor(() => expect(getByTestId('swipe-wrapper')).toBeTruthy());
474+
expect(mockChannelSwipableWrapper).toHaveBeenCalled();
508475
});
509476

510-
it('passes ChannelDetailsBottomSheet override to ChannelSwipableWrapper', () => {
511-
const ChannelDetailsBottomSheetOverride = () => null;
512-
513-
const { mockChannelSwipableWrapper } = renderWithSwipeMocks({
514-
ChannelDetailsBottomSheet: ChannelDetailsBottomSheetOverride,
515-
swipeActionsEnabled: true,
516-
});
477+
it('passes ChannelDetailsBottomSheet override to ChannelSwipableWrapper', async () => {
478+
render(
479+
<SwipeTestComponent
480+
swipeActionsEnabled={true}
481+
channelDetailsBottomSheet={ChannelDetailsBottomSheetOverride}
482+
/>,
483+
);
517484

518-
expect(mockChannelSwipableWrapper).toHaveBeenCalled();
485+
await waitFor(() => expect(mockChannelSwipableWrapper).toHaveBeenCalled());
519486
const swipableWrapperProps = mockChannelSwipableWrapper.mock.calls[0]?.[0];
520487
expect(swipableWrapperProps).toEqual(
521488
expect.objectContaining({

0 commit comments

Comments
 (0)