Skip to content

Commit

Permalink
test: expose channels state in the Chat context
Browse files Browse the repository at this point in the history
  • Loading branch information
@MartinCupela
MartinCupela committed Nov 7, 2023
1 parent b65a02b commit c89a9ae
Showing 1 changed file with 77 additions and 71 deletions.
148 changes: 77 additions & 71 deletions src/components/ChannelList/__tests__/ChannelList.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,21 @@ const channelsQueryStateMock = {
setQueryInProgress: jest.fn(),
};

const ChatContextOverrider = ({ chatContext, children }) => {
const existingContext = useChatContext();
return (
<ChatContext.Provider
value={{
...existingContext,
channelsQueryState: channelsQueryStateMock,
...chatContext,
}}
>
{children}
</ChatContext.Provider>
);
};

/**
* We use the following custom UI components for preview and list.
* If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
Expand Down Expand Up @@ -116,6 +131,7 @@ describe('ChannelList', () => {
client: chatClient,
closeMobileNav,
navOpen: true,
setChannels: jest.fn(),
}}
>
<ChannelList {...props} />
Expand Down Expand Up @@ -147,6 +163,7 @@ describe('ChannelList', () => {
client: chatClient,
closeMobileNav,
navOpen: false,
setChannels: jest.fn(),
}}
>
<ChannelList {...props} />
Expand Down Expand Up @@ -392,6 +409,7 @@ describe('ChannelList', () => {

describe('Default and custom active channel', () => {
let setActiveChannel;
let setChannels;
const watchersConfig = { limit: 20, offset: 0 };
const testSetActiveChannelCall = (channelInstance) =>
waitFor(() => {
Expand All @@ -402,6 +420,7 @@ describe('ChannelList', () => {

beforeEach(() => {
setActiveChannel = jest.fn();
setChannels = jest.fn();
useMockedApis(chatClient, [queryChannelsApi([testChannel1, testChannel2])]);
});

Expand All @@ -412,6 +431,7 @@ describe('ChannelList', () => {
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
setChannels,
}}
>
<ChannelList
Expand Down Expand Up @@ -443,6 +463,7 @@ describe('ChannelList', () => {
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
setChannels,
}}
>
<ChannelList
Expand All @@ -466,41 +487,40 @@ describe('ChannelList', () => {
});

it('should render channel with id `customActiveChannel` at top of the list', async () => {
const { container, getAllByRole, getByRole, getByTestId } = render(
<ChatContext.Provider
value={{
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
}}
>
<ChannelList
customActiveChannel={testChannel2.channel.id}
filters={{}}
List={ChannelListComponent}
options={{ presence: true, state: true, watch: true }}
Preview={ChannelPreviewComponent}
setActiveChannel={setActiveChannel}
setActiveChannelOnMount
watchers={watchersConfig}
/>
</ChatContext.Provider>,
);
useMockedApis(chatClient, [getOrCreateChannelApi(testChannel2)]);
jest
.spyOn(chatClient, 'queryChannels')
.mockImplementationOnce(() =>
chatClient.hydrateActiveChannels([testChannel1, testChannel2]),
);
await act(async () => {
await render(
<Chat client={chatClient}>
<ChannelList
customActiveChannel={testChannel2.channel.id}
filters={{}}
List={ChannelListComponent}
options={{ presence: true, state: true, watch: true }}
Preview={ChannelPreviewComponent}
watchers={watchersConfig}
/>
</Chat>,
);
});

// Wait for list of channels to load in DOM.
await waitFor(async () => {
expect(getByRole('list')).toBeInTheDocument();
const items = getAllByRole('listitem');
await waitFor(() => {
expect(screen.getByRole('list')).toBeInTheDocument();
const items = screen.getAllByRole('listitem');

// Get the closest listitem to the channel that received new message.
const channelPreview = getByTestId(testChannel2.channel.id).closest(
ROLE_LIST_ITEM_SELECTOR,
);
const channelPreview = screen
.getByTestId(testChannel2.channel.id)
.closest(ROLE_LIST_ITEM_SELECTOR);

expect(channelPreview.isEqualNode(items[0])).toBe(true);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
jest.restoreAllMocks();
});

describe('channel search', () => {
Expand Down Expand Up @@ -535,20 +555,16 @@ describe('ChannelList', () => {

const renderComponents = (chatContext = {}, channeListProps) =>
render(
<ChatContext.Provider
value={{
channelsQueryState: channelsQueryStateMock,
setActiveChannel,
...chatContext,
}}
>
<ChannelList
filters={{}}
options={{ presence: true, state: true }}
showChannelSearch
{...channeListProps}
/>
</ChatContext.Provider>,
<Chat client={chatContext.client}>
<ChatContextOverrider chatContext={{ ...chatContext, setActiveChannel }}>
<ChannelList
filters={{}}
options={{ presence: true, state: true }}
showChannelSearch
{...channeListProps}
/>
</ChatContextOverrider>
</Chat>,
);

it.each([['1'], ['2']])(
Expand Down Expand Up @@ -1193,19 +1209,20 @@ describe('ChannelList', () => {
it('should unset activeChannel if it was deleted', async () => {
const setActiveChannel = jest.fn();
const { container, getByRole } = render(
<ChatContext.Provider
value={{
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
}}
>
<ChannelList
{...channelListProps}
channel={{ cid: testChannel1.channel.cid }}
setActiveChannel={setActiveChannel}
/>
</ChatContext.Provider>,
<Chat client={chatClient}>
<ChatContextOverrider
chatContext={{
channelsQueryState: channelsQueryStateMock,
setActiveChannel,
}}
>
<ChannelList
{...channelListProps}
channel={{ cid: testChannel1.channel.cid }}
setActiveChannel={setActiveChannel}
/>
</ChatContextOverrider>
</Chat>,
);

// Wait for list of channels to load in DOM.
Expand Down Expand Up @@ -1257,32 +1274,21 @@ describe('ChannelList', () => {
});

it('should unset activeChannel if it was hidden', async () => {
const setActiveChannel = jest.fn();
const { container, getByRole } = render(
<ChatContext.Provider
value={{
channelsQueryState: channelsQueryStateMock,
client: chatClient,
setActiveChannel,
}}
>
<ChannelList
{...channelListProps}
channel={{ cid: testChannel1.channel.cid }}
setActiveChannel={setActiveChannel}
/>
</ChatContext.Provider>,
<Chat client={chatClient}>
<ChannelList {...channelListProps} />
</Chat>,
);

// Wait for list of channels to load in DOM.
await waitFor(() => {
expect(screen.getByTestId(testChannel1.channel.id)).toBeInTheDocument();
expect(getByRole('list')).toBeInTheDocument();
});

act(() => dispatchChannelHiddenEvent(chatClient, testChannel1.channel));

await waitFor(() => {
expect(setActiveChannel).toHaveBeenCalledTimes(1);
expect(screen.queryByTestId(testChannel1.channel.id)).not.toBeInTheDocument();
});
const results = await axe(container);
expect(results).toHaveNoViolations();
Expand Down

0 comments on commit c89a9ae

Please sign in to comment.