stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

package/src/components/Channel/__tests__/Channel.test.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { View } from 'react-native';
 
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
+import { act, cleanup, render, renderHook, waitFor } from '@testing-library/react-native';
 import { StreamChat } from 'stream-chat';
 
 import { ChannelContext, ChannelProvider } from '../../../contexts/channelContext/ChannelContext';
@@ -15,7 +15,7 @@ import { ThreadContext, ThreadProvider } from '../../../contexts/threadContext/T
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDeleted';
+import dispatchConnectionChanged from '../../../mock-builders/event/connectionChanged';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
@@ -24,6 +24,11 @@ import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Attachment } from '../../Attachment/Attachment';
 import { Chat } from '../../Chat/Chat';
 import { Channel } from '../Channel';
+import {
+  channelInitialState,
+  useChannelDataState,
+  useChannelMessageDataState,
+} from '../hooks/useChannelDataState';
 
 // This component is used for performing effects in a component that consumes ChannelContext,
 // i.e. making use of the callbacks & values provided by the Channel component.
@@ -203,17 +208,6 @@ describe('Channel', () => {
     await waitFor(() => expect(channelQuerySpy).toHaveBeenCalled());
   });
 
-  it('should render null if channel gets deleted', async () => {
-    const { getByTestId, queryByTestId } = renderComponent({
-      channel,
-      children: <View testID='children' />,
-    });
-
-    await waitFor(() => expect(getByTestId('children')).toBeTruthy());
-    act(() => dispatchChannelDeletedEvent(chatClient, channel));
-    expect(queryByTestId('children')).toBeNull();
-  });
-
   describe('ChannelContext', () => {
     it('renders children without crashing', async () => {
       const { getByTestId } = render(
@@ -340,3 +334,240 @@ describe('Channel', () => {
     });
   });
 });
+
+describe('Channel initial load useEffect', () => {
+  let chatClient;
+
+  const renderComponent = (props = {}) =>
+    render(
+      <Chat client={chatClient}>
+        <Channel {...props}>{props.children}</Channel>
+      </Chat>,
+    );
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser(user);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  it('should not call channel.watch if channel is not initialized', async () => {
+    const messages = Array.from({ length: 10 }, (_, i) => generateMessage({ id: i }));
+    const mockedChannel = generateChannelResponse({
+      messages,
+    });
+
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+    channel.offlineMode = true;
+    channel.state = channelInitialState;
+    const watchSpy = jest.fn();
+    channel.watch = watchSpy;
+
+    renderComponent({ channel });
+
+    await waitFor(() => expect(watchSpy).not.toHaveBeenCalled());
+  });
+
+  it("should call channel.watch if channel is initialized and it's not in offline mode", async () => {
+    const messages = Array.from({ length: 10 }, (_, i) => generateMessage({ id: i }));
+    const mockedChannel = generateChannelResponse({
+      messages,
+    });
+
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    channel.state = {
+      ...channelInitialState,
+      members: Object.fromEntries(
+        Array.from({ length: 10 }, (_, i) => [i, generateMember({ id: i })]),
+      ),
+      messagePagination: {
+        hasPrev: true,
+      },
+      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: i })),
+    };
+    const watchSpy = jest.fn();
+
+    channel.offlineMode = false;
+    channel.initialied = false;
+    channel.watch = watchSpy;
+
+    renderComponent({ channel });
+
+    const { result: channelMessageState } = renderHook(() => useChannelMessageDataState(channel));
+    const { result: channelState } = renderHook(() => useChannelDataState(channel));
+
+    await waitFor(() => expect(watchSpy).toHaveBeenCalled());
+    await waitFor(() => expect(channelMessageState.current.state.messages).toHaveLength(10));
+    await waitFor(() => expect(Object.keys(channelState.current.state.members)).toHaveLength(10));
+  });
+
+  function getElementsAround(array, key, id) {
+    const index = array.findIndex((obj) => obj[key] === id);
+
+    if (index === -1) {
+      return [];
+    }
+
+    const start = Math.max(0, index - 12); // 12 before the index
+    const end = Math.min(array.length, index + 13); // 12 after the index
+    return array.slice(start, end);
+  }
+
+  it('should call the loadChannelAroundMessage when messageId is passed to a channel', async () => {
+    const messages = Array.from({ length: 105 }, (_, i) => generateMessage({ id: i }));
+    const messageToSearch = messages[50];
+    const mockedChannel = generateChannelResponse({
+      messages,
+    });
+
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const loadMessageIntoState = jest.fn(() => {
+      const newMessages = getElementsAround(messages, 'id', messageToSearch.id);
+      channel.state.messages = newMessages;
+    });
+
+    channel.state = {
+      ...channelInitialState,
+      loadMessageIntoState,
+      messagePagination: {
+        hasNext: true,
+        hasPrev: true,
+      },
+      messages,
+    };
+
+    renderComponent({ channel, messageId: messageToSearch.id });
+
+    await waitFor(() => {
+      expect(loadMessageIntoState).toHaveBeenCalledWith(messageToSearch.id, undefined, 25);
+    });
+
+    const { result: channelMessageState } = renderHook(() => useChannelMessageDataState(channel));
+    await waitFor(() => expect(channelMessageState.current.state.messages).toHaveLength(25));
+    await waitFor(() =>
+      expect(
+        channelMessageState.current.state.messages.find(
+          (message) => message.id === messageToSearch.id,
+        ),
+      ).toBeTruthy(),
+    );
+  });
+
+  it("should not call loadChannelAtFirstUnreadMessage if channel's unread count is 0", async () => {
+    const mockedChannel = generateChannelResponse({
+      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+    const messages = Array.from({ length: 100 }, (_, i) => generateMessage({ id: i }));
+
+    const loadMessageIntoState = jest.fn();
+    channel.state = {
+      ...channelInitialState,
+      loadMessageIntoState,
+      messagePagination: {
+        hasNext: true,
+        hasPrev: true,
+      },
+      messages,
+    };
+    channel.countUnread = jest.fn(() => 0);
+
+    renderComponent({ channel, initialScrollToFirstUnreadMessage: true });
+
+    await waitFor(() => {
+      expect(loadMessageIntoState).not.toHaveBeenCalled();
+    });
+  });
+
+  it("should call loadChannelAtFirstUnreadMessage if channel's unread count is greater than 0", async () => {
+    const mockedChannel = generateChannelResponse({
+      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+    const messages = Array.from({ length: 100 }, (_, i) => generateMessage({ id: i }));
+
+    let targetedMessageId = 0;
+    const loadMessageIntoState = jest.fn((id) => {
+      targetedMessageId = id;
+      const newMessages = getElementsAround(messages, 'id', id);
+      channel.state.messages = newMessages;
+    });
+
+    channel.state = {
+      ...channelInitialState,
+      loadMessageIntoState,
+      messagePagination: {
+        hasNext: true,
+        hasPrev: true,
+      },
+      messages,
+      messageSets: [{ isCurrent: true, isLatest: true }],
+    };
+
+    channel.countUnread = jest.fn(() => 15);
+
+    renderComponent({ channel, initialScrollToFirstUnreadMessage: true });
+
+    await waitFor(() => {
+      expect(loadMessageIntoState).toHaveBeenCalledTimes(1);
+    });
+
+    const { result: channelMessageState } = renderHook(() => useChannelMessageDataState(channel));
+    await waitFor(() =>
+      expect(
+        channelMessageState.current.state.messages.find(
+          (message) => message.id === targetedMessageId,
+        ),
+      ).toBeDefined(),
+    );
+  });
+
+  it('should call resyncChannel when connection changed event is triggered', async () => {
+    const mockedChannel = generateChannelResponse({
+      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    renderComponent({ channel });
+
+    await waitFor(() => {
+      act(() => dispatchConnectionChanged(chatClient, false));
+    });
+
+    await waitFor(() => {
+      channel.state.addMessagesSorted(
+        Array.from({ length: 10 }, (_, i) =>
+          generateMessage({ status: 'failed', text: `message-${i}` }),
+        ),
+      );
+    });
+
+    await waitFor(() => {
+      act(() => dispatchConnectionChanged(chatClient));
+    });
+
+    await waitFor(() => {
+      expect(channel.state.messages.length).toBe(20);
+    });
+  });
+});

package/src/components/Channel/__tests__/ownCapabilities.test.js

@@ -68,249 +68,249 @@ describe('Own capabilities', () => {
   };
 
   const renderChannelAndOpenMessageActionsList = async (targetMessage, props = {}) => {
-    const { findByTestId, queryByTestId, queryByText, unmount } = render(getComponent(props));
+    const { findByTestId, queryByLabelText, queryByText, unmount } = render(getComponent(props));
     await waitFor(() => queryByText(targetMessage.text));
 
     act(() => {
       fireEvent(queryByText(targetMessage.text), 'onLongPress');
     });
 
-    await waitFor(() => expect(!!queryByTestId('message-action-list')).toBeTruthy());
+    await waitFor(() => expect(!!queryByLabelText('Message action list')).toBeTruthy());
 
-    return { findByTestId, queryByTestId, queryByText, unmount };
+    return { findByTestId, queryByLabelText, queryByText, unmount };
   };
 
   describe(`${allOwnCapabilities.sendReply} capability`, () => {
     it(`should render "Thread Reply" message action when ${allOwnCapabilities.sendReply} capability is enabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.sendReply]);
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage);
-      expect(!!queryByTestId('threadReply-list-item')).toBeTruthy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(sentMessage);
+      expect(!!queryByLabelText('threadReply action list item')).toBeTruthy();
     });
 
     it('should not render "Thread Reply" message action when "send-reply" capability is disabled', async () => {
       await generateChannelWithCapabilities();
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage);
-      expect(!!queryByTestId('threadReply-list-item')).toBeFalsy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(sentMessage);
+      expect(!!queryByLabelText('threadReply action list item')).toBeFalsy();
     });
 
     it('should override capability from "overrideOwnCapability.sendReply" prop', async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.sendReply]);
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage, {
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(sentMessage, {
         overrideOwnCapabilities: {
           sendReply: false,
         },
       });
-      expect(!!queryByTestId('threadReply-list-item')).toBeFalsy();
+      expect(!!queryByLabelText('threadReply action list item')).toBeFalsy();
     });
   });
 
   describe(`${allOwnCapabilities.banChannelMembers} capability`, () => {
     it(`should render "Ban User" message action when ${allOwnCapabilities.banChannelMembers} capability is enabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.banChannelMembers]);
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('banUser-list-item')).toBeTruthy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('banUser action list item')).toBeTruthy();
     });
 
     it(`should not render "Ban User" message action when ${allOwnCapabilities.banChannelMembers} capability is disabled`, async () => {
       await generateChannelWithCapabilities();
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('banUser-list-item')).toBeFalsy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('banUser action list item')).toBeFalsy();
     });
 
     it(`should override capability from "overrideOwnCapability.banChannelMembers" prop`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.banChannelMembers]);
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
         overrideOwnCapabilities: {
           banChannelMembers: false,
         },
       });
-      expect(!!queryByTestId('banUser-list-item')).toBeFalsy();
+      expect(!!queryByLabelText('banUser action list item')).toBeFalsy();
     });
   });
 
   describe(`${allOwnCapabilities.deleteAnyMessage} capability`, () => {
     it(`should render "Delete Message" action for received message when "${allOwnCapabilities.deleteAnyMessage}" capability is enabled`, async () => {
       await generateChannelWithCapabilities(['delete-any-message']);
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('deleteMessage-list-item')).toBeTruthy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('deleteMessage action list item')).toBeTruthy();
     });
 
     it(`should not render "Delete Message" action for received message when "${allOwnCapabilities.deleteAnyMessage}" capability is disabled`, async () => {
       await generateChannelWithCapabilities();
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('deleteMessage-list-item')).toBeFalsy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('deleteMessage action list item')).toBeFalsy();
     });
 
     it('should override capability from "overrideOwnCapability.deleteAnyMessage" prop', async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.deleteAnyMessage]);
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
         overrideOwnCapabilities: {
           deleteAnyMessage: false,
         },
       });
-      expect(!!queryByTestId('deleteMessage-list-item')).toBeFalsy();
+      expect(!!queryByLabelText('deleteMessage action list item')).toBeFalsy();
     });
   });
 
   describe(`${allOwnCapabilities.deleteOwnMessage} capability`, () => {
     it(`should render "Delete Message" action for sent message when "${allOwnCapabilities.deleteOwnMessage}" capability is enabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.deleteOwnMessage]);
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage);
-      expect(!!queryByTestId('deleteMessage-list-item')).toBeTruthy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(sentMessage);
+      expect(!!queryByLabelText('deleteMessage action list item')).toBeTruthy();
     });
 
     it(`should not render "Delete Message" action for sent message when "${allOwnCapabilities.deleteOwnMessage}" capability is disabled`, async () => {
       await generateChannelWithCapabilities();
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage);
-      expect(!!queryByTestId('deleteMessage-list-item')).toBeFalsy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(sentMessage);
+      expect(!!queryByLabelText('deleteMessage action list item')).toBeFalsy();
     });
 
     it('should override capability from "overrideOwnCapability.deleteOwnMessage" prop', async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.deleteOwnMessage]);
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(sentMessage, {
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(sentMessage, {
         overrideOwnCapabilities: {
           deleteOwnMessage: false,
         },
       });
-      expect(!!queryByTestId('deleteMessage-list-item')).toBeFalsy();
+      expect(!!queryByLabelText('deleteMessage action list item')).toBeFalsy();
     });
   });
 
   describe(`${allOwnCapabilities.updateAnyMessage} capability`, () => {
     it(`should render "Edit Message" action for received message when "${allOwnCapabilities.updateAnyMessage}" capability is enabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.updateAnyMessage]);
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('editMessage-list-item')).toBeTruthy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('editMessage action list item')).toBeTruthy();
     });
 
     it(`should not render "Edit Message" action for received message when "${allOwnCapabilities.updateAnyMessage}" capability is disabled`, async () => {
       await generateChannelWithCapabilities();
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('editMessage-list-item')).toBeFalsy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('editMessage action list item')).toBeFalsy();
     });
 
     it('should override capability from "overrideOwnCapability.updateAnyMessage" prop', async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.updateAnyMessage]);
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
         overrideOwnCapabilities: {
           updateAnyMessage: false,
         },
       });
-      expect(!!queryByTestId('editMessage-list-item')).toBeFalsy();
+      expect(!!queryByLabelText('editMessage action list item')).toBeFalsy();
     });
   });
 
   describe(`${allOwnCapabilities.flagMessage} capability`, () => {
     it(`should render "Flag Message" action for sent message when "${allOwnCapabilities.flagMessage}" capability is enabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.flagMessage]);
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('flagMessage-list-item')).toBeTruthy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('flagMessage action list item')).toBeTruthy();
     });
 
     it(`should not render "Flag Message" action for sent message when "${allOwnCapabilities.flagMessage}" capability is disabled`, async () => {
       await generateChannelWithCapabilities();
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('flagMessage-list-item')).toBeFalsy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('flagMessage action list item')).toBeFalsy();
     });
 
     it('should override capability from "overrideOwnCapability.deleteOwnMessage" prop', async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.flagMessage]);
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
         overrideOwnCapabilities: {
           flagMessage: false,
         },
       });
-      expect(!!queryByTestId('flagMessage-list-item')).toBeFalsy();
+      expect(!!queryByLabelText('flagMessage action list item')).toBeFalsy();
     });
   });
 
   describe(`${allOwnCapabilities.pinMessage} capability`, () => {
     it(`should render "Pin Message" action for sent message when "${allOwnCapabilities.pinMessage}" capability is enabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.pinMessage]);
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('pinMessage-list-item')).toBeTruthy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('pinMessage action list item')).toBeTruthy();
     });
 
     it(`should not render "Pin Message" action for sent message when "${allOwnCapabilities.pinMessage}" capability is disabled`, async () => {
       await generateChannelWithCapabilities();
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('pinMessage-list-item')).toBeFalsy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('pinMessage action list item')).toBeFalsy();
     });
 
     it('should override capability from "overrideOwnCapability.pinMessage" prop', async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.pinMessage]);
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
         overrideOwnCapabilities: {
           pinMessage: false,
         },
       });
-      expect(!!queryByTestId('pinMessage-list-item')).toBeFalsy();
+      expect(!!queryByLabelText('pinMessage action list item')).toBeFalsy();
     });
   });
 
   describe(`${allOwnCapabilities.quoteMessage} capability`, () => {
     it(`should render "Reply" action for sent message when "${allOwnCapabilities.quoteMessage}" capability is enabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.quoteMessage]);
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('quotedReply-list-item')).toBeTruthy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('quotedReply action list item')).toBeTruthy();
     });
 
     it(`should not render "Reply" action for sent message when "${allOwnCapabilities.quoteMessage}" capability is disabled`, async () => {
       await generateChannelWithCapabilities();
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('quotedReply-list-item')).toBeFalsy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('quotedReply action list item')).toBeFalsy();
     });
 
     it('should override capability from "overrideOwnCapability.quoteMessage" prop', async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.quoteMessage]);
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
         overrideOwnCapabilities: {
           quoteMessage: false,
         },
       });
-      expect(!!queryByTestId('quotedReply-list-item')).toBeFalsy();
+      expect(!!queryByLabelText('quotedReply action list item')).toBeFalsy();
     });
   });
 
   describe(`${allOwnCapabilities.sendReaction} capability`, () => {
     it(`should render reaction selector when "${allOwnCapabilities.sendReaction}" capability is enabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.sendReaction]);
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('overlay-reaction-list')).toBeTruthy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('Reaction Selector on long pressing message')).toBeTruthy();
     });
 
     it(`should not render reaction selector when "${allOwnCapabilities.sendReaction}" capability is disabled`, async () => {
       await generateChannelWithCapabilities();
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage);
-      expect(!!queryByTestId('overlay-reaction-list')).toBeFalsy();
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage);
+      expect(!!queryByLabelText('Reaction Selector on long pressing message')).toBeFalsy();
     });
 
     it('should override capability from "overrideOwnCapability.sendReaction" prop', async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.sendReaction]);
 
-      const { queryByTestId } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
+      const { queryByLabelText } = await renderChannelAndOpenMessageActionsList(receivedMessage, {
         overrideOwnCapabilities: {
           sendReaction: false,
         },
       });
-      expect(!!queryByTestId('overlay-reaction-list')).toBeFalsy();
+      expect(!!queryByLabelText('Reaction Selector on long pressing message')).toBeFalsy();
     });
   });