stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

package/src/components/MessageMenu/ReactionButton.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { IconProps } from '../../icons';
+
+type ReactionButtonProps = {
+  /**
+   * Icon to display for the reaction button
+   */
+  Icon: React.ComponentType<IconProps>;
+  /**
+   * Whether the reaction button is selected
+   */
+  selected: boolean;
+  /**
+   * The type of reaction
+   */
+  type: string;
+  /**
+   * Function to call when the reaction button is pressed
+   * @param reactionType
+   * @returns
+   */
+  onPress?: (reactionType: string) => void;
+};
+
+export const ReactionButton = (props: ReactionButtonProps) => {
+  const { Icon, onPress, selected, type } = props;
+  const {
+    theme: {
+      colors: { light_blue, white },
+      messageMenu: {
+        reactionButton: { filledColor, unfilledColor },
+        reactionPicker: { buttonContainer, reactionIconSize },
+      },
+    },
+  } = useTheme();
+
+  const onPressHandler = () => {
+    if (onPress) {
+      onPress(type);
+    }
+  };
+
+  return (
+    <Pressable
+      accessibilityLabel={`reaction-button-${type}-${selected ? 'selected' : 'unselected'}`}
+      onPress={onPressHandler}
+      style={({ pressed }) => [
+        styles.reactionButton,
+        { backgroundColor: pressed || selected ? light_blue : white },
+        buttonContainer,
+      ]}
+    >
+      <Icon
+        height={reactionIconSize}
+        pathFill={selected ? filledColor : unfilledColor}
+        width={reactionIconSize}
+      />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  reactionButton: {
+    alignItems: 'center',
+    borderRadius: 8,
+    justifyContent: 'center',
+    padding: 8,
+  },
+});

package/src/components/MessageMenu/__tests__/MessageActionList.test.tsx

@@ -0,0 +1,48 @@
+// MessageActionList.test.tsx
+
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { MessageActionList } from '../MessageActionList';
+import { MessageActionListItemProps } from '../MessageActionListItem';
+
+const MockMessageActionListItem = (props: MessageActionListItemProps) => <Text>{props.title}</Text>;
+
+const defaultProps = {
+  MessageActionListItem: MockMessageActionListItem,
+  messageActions: [
+    { action: jest.fn(), actionType: 'copyMessage', title: 'Copy Message' },
+    { action: jest.fn(), actionType: 'deleteMessage', title: 'Delete Message' },
+  ],
+};
+
+describe('MessageActionList', () => {
+  it('should render correctly with provided message actions', () => {
+    const { getByLabelText, getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageActionList {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    expect(getByLabelText('Message action list')).toBeTruthy();
+
+    expect(getByText('Copy Message')).toBeTruthy();
+    expect(getByText('Delete Message')).toBeTruthy();
+  });
+
+  it('should pass the correct props to MessageActionListItem', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageActionList {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    expect(getByText('Copy Message')).toBeTruthy();
+    expect(getByText('Delete Message')).toBeTruthy();
+  });
+});

package/src/components/MessageMenu/__tests__/MessageActionListItem.test.tsx

@@ -0,0 +1,48 @@
+// MessageActionListItem.test.tsx
+
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { MessageActionListItem } from '../MessageActionListItem';
+
+describe('MessageActionListItem', () => {
+  const mockAction = jest.fn();
+
+  const defaultProps = {
+    action: mockAction,
+    actionType: 'copyMessage',
+    icon: <Text>Icon</Text>,
+    title: 'Copy Message',
+  };
+
+  it('should render correctly with given props', () => {
+    const { getByLabelText, getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageActionListItem {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    expect(getByText('Copy Message')).toBeTruthy();
+
+    expect(getByText('Icon')).toBeTruthy();
+
+    expect(getByLabelText('copyMessage action list item')).toBeTruthy();
+  });
+
+  it('should call the action callback when pressed', () => {
+    const { getByLabelText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageActionListItem {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    fireEvent.press(getByLabelText('copyMessage action list item'));
+
+    expect(mockAction).toHaveBeenCalled();
+  });
+});

package/src/components/MessageMenu/__tests__/MessageReactionPicker.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import {
+  MessagesContextValue,
+  MessagesProvider,
+} from '../../../contexts/messagesContext/MessagesContext';
+import {
+  OwnCapabilitiesContextValue,
+  OwnCapabilitiesProvider,
+} from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { triggerHaptic } from '../../../native';
+import { MessageReactionPicker } from '../MessageReactionPicker';
+
+jest.mock('../../../native', () => ({
+  triggerHaptic: jest.fn(),
+}));
+
+const mockSupportedReactions = [
+  { Icon: () => null, type: 'like' },
+  { Icon: () => null, type: 'love' },
+];
+
+const defaultProps = {
+  dismissOverlay: jest.fn(),
+  handleReaction: jest.fn(),
+  ownReactionTypes: ['like'],
+};
+
+const renderComponent = (props = {}, ownCapabilities = { sendReaction: true }) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <OwnCapabilitiesProvider value={{ ...ownCapabilities } as OwnCapabilitiesContextValue}>
+        <MessagesProvider
+          value={{ supportedReactions: mockSupportedReactions } as unknown as MessagesContextValue}
+        >
+          <MessageReactionPicker {...defaultProps} {...props} />
+        </MessagesProvider>
+      </OwnCapabilitiesProvider>
+    </ThemeProvider>,
+  );
+
+describe('MessageReactionPicker', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly with supported reactions', () => {
+    const { getAllByLabelText, getByLabelText } = renderComponent();
+    expect(getByLabelText('Reaction Selector on long pressing message')).toBeTruthy();
+    expect(getAllByLabelText(/\breaction-button[^\s]+/)).toHaveLength(
+      mockSupportedReactions.length,
+    );
+  });
+
+  it('does not render when sendReaction capability is false', () => {
+    const { queryByLabelText } = renderComponent({}, { sendReaction: false });
+    expect(queryByLabelText('Reaction Selector on long pressing message')).toBeNull();
+  });
+
+  it('marks own reactions as selected', () => {
+    const { getAllByLabelText } = renderComponent();
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-selected');
+    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
+  });
+
+  it('calls handleReaction and dismissOverlay when a reaction is pressed', () => {
+    const { getAllByLabelText } = renderComponent();
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    fireEvent.press(reactionButtons[1]);
+
+    expect(defaultProps.handleReaction).toHaveBeenCalledWith('love');
+    expect(defaultProps.dismissOverlay).toHaveBeenCalled();
+    expect(triggerHaptic).toHaveBeenCalledWith('impactLight');
+  });
+
+  it("doesn't call handleReaction when it's not provided", () => {
+    const { getAllByLabelText } = renderComponent({ handleReaction: undefined });
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    fireEvent.press(reactionButtons[1]);
+
+    expect(defaultProps.handleReaction).not.toHaveBeenCalled();
+  });
+
+  it('uses provided supportedReactions prop over context value', () => {
+    const customSupportedReactions = [
+      { Icon: () => null, type: 'wow' },
+      { Icon: () => null, type: 'haha' },
+    ];
+    const { getAllByLabelText } = renderComponent({ supportedReactions: customSupportedReactions });
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    expect(reactionButtons).toHaveLength(customSupportedReactions.length);
+  });
+});

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ReactionResponse } from 'stream-chat';
+
+import {
+  MessagesContextValue,
+  MessagesProvider,
+} from '../../../contexts/messagesContext/MessagesContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import {
+  TranslationContextValue,
+  TranslationProvider,
+} from '../../../contexts/translationContext/TranslationContext';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { MessageType } from '../../MessageList/hooks/useMessageList';
+import * as useFetchReactionsModule from '../hooks/useFetchReactions';
+import { MessageUserReactions } from '../MessageUserReactions';
+import { MessageUserReactionsItemProps } from '../MessageUserReactionsItem';
+
+const mockTranslations = {
+  t: jest.fn((key) => key),
+};
+
+const mockSupportedReactions = [
+  { Icon: () => null, type: 'like' },
+  { Icon: () => null, type: 'love' },
+];
+
+const defaultProps = {
+  message: {
+    ...generateMessage(),
+    reaction_groups: { like: { count: 1, sum_scores: 1 }, love: { count: 1, sum_scores: 1 } },
+  } as unknown as MessageType,
+  supportedReactions: mockSupportedReactions,
+};
+
+describe('MessageUserReactions when the supportedReactions are defined', () => {
+  beforeAll(() => {
+    const mockLoadNextPage = jest.fn();
+
+    const mockUseFetchReactions = jest.spyOn(useFetchReactionsModule, 'useFetchReactions');
+    mockUseFetchReactions.mockReturnValue({
+      loading: false,
+      loadNextPage: mockLoadNextPage,
+      reactions: [
+        {
+          type: 'like',
+          user: { id: '1', image: 'user1.jpg', name: 'User 1' },
+        } as unknown as ReactionResponse,
+        {
+          type: 'love',
+          user: { id: '2', image: 'user2.jpg', name: 'User 2' },
+        } as unknown as ReactionResponse,
+      ],
+    });
+  });
+  const renderComponent = (props = {}) =>
+    render(
+      <ThemeProvider theme={defaultTheme}>
+        <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
+          <MessagesProvider
+            value={
+              {
+                MessageUserReactionsAvatar: () => null,
+                MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
+                  <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
+                ),
+              } as unknown as MessagesContextValue
+            }
+          >
+            <MessageUserReactions {...defaultProps} {...props} />
+          </MessagesProvider>
+        </TranslationProvider>
+      </ThemeProvider>,
+    );
+
+  it('renders correctly', () => {
+    const { getByLabelText, getByText } = renderComponent();
+    expect(getByLabelText('User Reactions on long press message')).toBeTruthy();
+    expect(getByText('Message Reactions')).toBeTruthy();
+  });
+
+  it('renders reaction buttons', () => {
+    const { getByLabelText } = renderComponent();
+    const likeReactionButton = getByLabelText('reaction-button-like-selected');
+    expect(likeReactionButton).toBeDefined();
+    const loveReactionButton = getByLabelText('reaction-button-love-unselected');
+    expect(loveReactionButton).toBeDefined();
+  });
+
+  it('selects the first reaction by default', () => {
+    const { getAllByLabelText } = renderComponent();
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-selected');
+    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
+  });
+
+  it('changes selected reaction when a reaction button is pressed', () => {
+    const { getAllByLabelText } = renderComponent();
+    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    fireEvent.press(reactionButtons[1]);
+
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
+    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-selected');
+  });
+
+  it('renders reactions list', async () => {
+    const { getByText } = renderComponent();
+    const reactionItems = await getByText('1 like');
+    expect(reactionItems).toBeDefined();
+  });
+
+  it('uses provided reactions when passed as a prop', () => {
+    const propReactions = [{ id: '3', image: 'user3.jpg', name: 'User 3', type: 'wow' }];
+    const { getByText } = renderComponent({ reactions: propReactions });
+    const reactionItem = getByText('3 wow');
+    expect(reactionItem).toBeDefined();
+  });
+
+  it("don't render reaction buttons that is of unsupported type", () => {
+    const { queryAllByLabelText } = renderComponent({
+      message: { ...generateMessage(), reaction_groups: { money: 1 } },
+    });
+    const reactionButtons = queryAllByLabelText(/\breaction-button[^\s]+/);
+
+    expect(reactionButtons.length).toBe(0);
+  });
+});
+
+const renderComponent = (props = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
+        <MessagesProvider
+          value={
+            {
+              MessageUserReactionsAvatar: () => null,
+              MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
+                <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
+              ),
+            } as unknown as MessagesContextValue
+          }
+        >
+          <MessageUserReactions {...defaultProps} {...props} />
+        </MessagesProvider>
+      </TranslationProvider>
+    </ThemeProvider>,
+  );
+
+describe("MessageUserReactions when the supportedReactions aren't defined", () => {
+  it("don't render reaction buttons that is of unsupported type", () => {
+    const { queryAllByLabelText } = renderComponent({
+      message: { ...generateMessage(), reaction_groups: undefined },
+      supportedReactions: undefined,
+    });
+    const reactionButtons = queryAllByLabelText(/\breaction-button[^\s]+/);
+
+    expect(reactionButtons.length).toBe(0);
+  });
+});
+
+describe('MessageUserReactions when the reactions are in loading phase', () => {
+  beforeAll(() => {
+    const mockLoadNextPage = jest.fn();
+
+    const mockUseFetchReactions = jest.spyOn(useFetchReactionsModule, 'useFetchReactions');
+    mockUseFetchReactions.mockReturnValue({
+      loading: true,
+      loadNextPage: mockLoadNextPage,
+      reactions: [],
+    });
+  });
+
+  it("don't render reactions flatlist when loading is false", () => {
+    const { queryByLabelText } = renderComponent();
+    const reactionsFlatList = queryByLabelText('reaction-flat-list');
+
+    expect(reactionsFlatList).toBeNull();
+  });
+});

package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { MessageUserReactionsAvatar } from '../MessageUserReactionsAvatar';
+
+describe('MessageUserReactionsAvatar', () => {
+  const reaction = { id: 'test-user', image: 'image-url', name: 'Test User', type: 'like' }; // Mock reaction data
+
+  it('should render Avatar with correct image, name, and default size', () => {
+    const { queryByTestId } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageUserReactionsAvatar reaction={reaction} />
+      </ThemeProvider>,
+    );
+
+    // Check if the mocked Avatar component is rendered with correct props
+    expect(queryByTestId(`avatar-image`)).toBeTruthy();
+  });
+
+  it('should render Avatar with correct image, name, and custom size', () => {
+    const customSize = 40;
+
+    const { queryByTestId } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <MessageUserReactionsAvatar reaction={reaction} size={customSize} />
+      </ThemeProvider>,
+    );
+
+    // Check if the mocked Avatar component is rendered with correct custom size
+    expect(queryByTestId(`avatar-image`)).toBeTruthy();
+  });
+});

package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+
+import { Colors, defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { MessageUserReactionsItem } from '../MessageUserReactionsItem';
+
+jest.mock('../../../icons', () => ({
+  Unknown: () => null,
+}));
+
+const mockReaction = {
+  id: 'user1',
+  name: 'John Doe',
+  type: 'like',
+};
+
+const mockSupportedReactions = [
+  { Icon: () => null, type: 'like' },
+  { Icon: () => null, type: 'love' },
+];
+
+const MockOverlayReactionsAvatar = () => null;
+
+const renderComponent = async (props = {}, clientUserID = 'user2') =>
+  render(
+    <ChatProvider
+      value={{ client: await getTestClientWithUser({ id: clientUserID }) } as ChatContextValue}
+    >
+      <ThemeProvider theme={defaultTheme}>
+        <MessageUserReactionsItem
+          MessageUserReactionsAvatar={MockOverlayReactionsAvatar}
+          reaction={mockReaction}
+          supportedReactions={mockSupportedReactions}
+          {...props}
+        />
+      </ThemeProvider>
+    </ChatProvider>,
+  );
+
+describe('MessageUserReactionsItem', () => {
+  it('renders correctly', async () => {
+    const { getByLabelText, getByText } = await renderComponent();
+    expect(getByLabelText('Individual User Reaction on long press message')).toBeTruthy();
+    expect(getByText('John Doe')).toBeTruthy();
+  });
+
+  it('aligns reaction bubble to the right for other users', async () => {
+    const { getByLabelText } = await renderComponent();
+    const container = getByLabelText('Individual User Reaction on long press message');
+    const reactionBubble = container.props.children[0].props.children[1];
+    expect(reactionBubble.props.style[1].borderColor).toBe(Colors.grey_gainsboro);
+  });
+
+  it('aligns reaction bubble to the left for the current user', async () => {
+    const { getByLabelText } = await renderComponent({}, 'user1');
+    const container = getByLabelText('Individual User Reaction on long press message');
+    const reactionBubble = container.props.children[0].props.children[1];
+    expect(reactionBubble.props.style[1].borderColor).toBe(Colors.white);
+  });
+
+  it('uses Unknown icon for unsupported reaction types', async () => {
+    const { getByLabelText } = await renderComponent({
+      reaction: { ...mockReaction, type: 'unsupported' },
+    });
+    const container = getByLabelText('Individual User Reaction on long press message');
+    const reactionIcon = container.props.children[0].props.children[1].props.children;
+    expect(reactionIcon.type.name).toBe('Unknown');
+  });
+
+  it('uses correct icon for supported reaction types', async () => {
+    const { getByLabelText } = await renderComponent();
+    const container = getByLabelText('Individual User Reaction on long press message');
+    const reactionIcon = container.props.children[0].props.children[1].props.children;
+    expect(reactionIcon.type).not.toBe('Unknown');
+  });
+});

package/src/components/MessageMenu/__tests__/ReactionButton.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { cleanup, fireEvent, render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { IconProps } from '../../../icons';
+import { ReactionButton } from '../ReactionButton';
+
+const MockIcon = (props: IconProps) => <Text>{props?.pathFill?.toString() || ''}</Text>;
+
+describe('ReactionButton', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  const mockOnPress = jest.fn();
+
+  const defaultProps = {
+    Icon: MockIcon,
+    onPress: mockOnPress,
+    selected: false,
+    type: 'like',
+  };
+
+  it('should render correctly with given props', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <ReactionButton {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    // Check if the unselected pathFill color is rendered by the mock Icon
+    expect(
+      getByText(defaultTheme.messageMenu.reactionButton.unfilledColor.toString()),
+    ).toBeTruthy();
+  });
+
+  it('should call onPress function with the correct reaction type when pressed', () => {
+    const { getByLabelText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <ReactionButton {...defaultProps} />
+      </ThemeProvider>,
+    );
+
+    // Simulate a press event
+    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
+
+    // Verify if the mock function has been called with the correct reaction type
+    expect(mockOnPress).toHaveBeenCalledWith('like');
+  });
+
+  it('should not call onPress when the onPress prop is not provided', () => {
+    const { getByLabelText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <ReactionButton {...defaultProps} onPress={undefined} />
+      </ThemeProvider>,
+    );
+
+    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
+
+    expect(mockOnPress).not.toHaveBeenCalled();
+  });
+
+  it('should apply selected styles correctly when selected is true', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <ReactionButton {...defaultProps} selected={true} />
+      </ThemeProvider>,
+    );
+
+    expect(getByText(defaultTheme.messageMenu.reactionButton.filledColor.toString())).toBeTruthy();
+  });
+});

package/src/components/{MessageOverlay → MessageMenu}/hooks/useFetchReactions.ts

@@ -80,6 +80,8 @@ export const useFetchReactions = <
   }, [fetchReactions]);
 
   useEffect(() => {
+    setReactions([]);
+    setNext(undefined);
     fetchReactions();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageId, reactionType, sortString]);