diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js index 5ccad93f9..fa74fd31f 100644 --- a/packages/react/babel.config.js +++ b/packages/react/babel.config.js @@ -3,7 +3,7 @@ module.exports = { [ '@babel/preset-env', { - modules: false, + modules: process.env.NODE_ENV === 'test' ? 'auto' : false, bugfixes: true, targets: { browsers: '> 0.25%, ie 11, not op_mini all, not dead' }, }, diff --git a/packages/react/src/hooks/useFetchChatData.js b/packages/react/src/hooks/useFetchChatData.js index 57a564a18..85930a2d2 100644 --- a/packages/react/src/hooks/useFetchChatData.js +++ b/packages/react/src/hooks/useFetchChatData.js @@ -191,16 +191,14 @@ const useFetchChatData = (showRoles) => { const getStarredMessages = useCallback( async (anonymousMode) => { - if (isUserAuthenticated) { - try { - if (!isUserAuthenticated && !anonymousMode) { - return; - } - const { messages } = await RCInstance.getStarredMessages(); - setStarredMessages(messages); - } catch (e) { - console.error(e); + try { + if (!isUserAuthenticated && !anonymousMode) { + return; } + const { messages } = await RCInstance.getStarredMessages(); + setStarredMessages(messages); + } catch (e) { + console.error(e); } }, [isUserAuthenticated, RCInstance, setStarredMessages] @@ -208,16 +206,14 @@ const useFetchChatData = (showRoles) => { const getPinnedMessages = useCallback( async (anonymousMode) => { - if (isUserAuthenticated) { - try { - if (!isUserAuthenticated && !anonymousMode) { - return; - } - const { messages } = await RCInstance.getPinnedMessages(); - setPinnedMessages(messages); - } catch (e) { - console.error(e); + try { + if (!isUserAuthenticated && !anonymousMode) { + return; } + const { messages } = await RCInstance.getPinnedMessages(); + setPinnedMessages(messages); + } catch (e) { + console.error(e); } }, [isUserAuthenticated, RCInstance, setPinnedMessages] diff --git a/packages/react/src/hooks/useFetchChatDataMessages.test.js b/packages/react/src/hooks/useFetchChatDataMessages.test.js new file mode 100644 index 000000000..a871826be --- /dev/null +++ b/packages/react/src/hooks/useFetchChatDataMessages.test.js @@ -0,0 +1,180 @@ +/** + * @jest-environment jsdom + */ +/* global describe, test, expect, jest, beforeEach, afterEach, document */ +global.IS_REACT_ACT_ENVIRONMENT = true; +import React, { act } from 'react'; +import { createRoot } from 'react-dom/client'; +import RCContext from '../context/RCInstance'; +import { + useUserStore, + useStarredMessageStore, + usePinnedMessageStore, +} from '../store'; +import useFetchChatData from './useFetchChatData'; + +describe('useFetchChatData messages fetching in anonymousMode', () => { + let mockRCInstance; + let hookResult; + let container; + let root; + + const TestHarness = ({ showRoles = false }) => { + hookResult.current = useFetchChatData(showRoles); + return null; + }; + + const renderWithContext = async (showRoles = false) => { + hookResult = { current: null }; + await act(async () => { + root.render( + React.createElement( + RCContext.Provider, + { value: { RCInstance: mockRCInstance } }, + React.createElement(TestHarness, { showRoles }) + ) + ); + }); + }; + + beforeEach(() => { + jest.clearAllMocks(); + + container = document.createElement('div'); + document.body.appendChild(container); + root = createRoot(container); + + mockRCInstance = { + permissionInfo: jest.fn(), + getStarredMessages: jest.fn(), + getPinnedMessages: jest.fn(), + getMessages: jest.fn(), + }; + + useUserStore.setState({ + isUserAuthenticated: false, + viewUserInfoPermissions: {}, + }); + + useStarredMessageStore.setState({ + starredMessages: [], + }); + + usePinnedMessageStore.setState({ + pinnedMessages: [], + }); + }); + + afterEach(async () => { + if (root) { + await act(async () => { + root.unmount(); + }); + } + if (container && container.parentNode) { + container.parentNode.removeChild(container); + } + }); + + describe('getStarredMessages', () => { + test('does not fetch starred messages when unauthenticated and anonymousMode is false', async () => { + useUserStore.setState({ isUserAuthenticated: false }); + await renderWithContext(); + + await act(async () => { + await hookResult.current.getStarredMessages(false); + }); + + expect(mockRCInstance.getStarredMessages).not.toHaveBeenCalled(); + }); + + test('fetches starred messages when unauthenticated and anonymousMode is true', async () => { + useUserStore.setState({ isUserAuthenticated: false }); + const mockMessages = [{ _id: 'msg-star-1', msg: 'Starred text' }]; + mockRCInstance.getStarredMessages.mockResolvedValue({ + messages: mockMessages, + }); + + await renderWithContext(); + + await act(async () => { + await hookResult.current.getStarredMessages(true); + }); + + expect(mockRCInstance.getStarredMessages).toHaveBeenCalledTimes(1); + expect(useStarredMessageStore.getState().starredMessages).toEqual( + mockMessages + ); + }); + + test('fetches starred messages when authenticated', async () => { + useUserStore.setState({ isUserAuthenticated: true }); + const mockMessages = [{ _id: 'msg-star-2', msg: 'Auth starred text' }]; + mockRCInstance.getStarredMessages.mockResolvedValue({ + messages: mockMessages, + }); + + await renderWithContext(); + + await act(async () => { + await hookResult.current.getStarredMessages(false); + }); + + expect(mockRCInstance.getStarredMessages).toHaveBeenCalledTimes(1); + expect(useStarredMessageStore.getState().starredMessages).toEqual( + mockMessages + ); + }); + }); + + describe('getPinnedMessages', () => { + test('does not fetch pinned messages when unauthenticated and anonymousMode is false', async () => { + useUserStore.setState({ isUserAuthenticated: false }); + await renderWithContext(); + + await act(async () => { + await hookResult.current.getPinnedMessages(false); + }); + + expect(mockRCInstance.getPinnedMessages).not.toHaveBeenCalled(); + }); + + test('fetches pinned messages when unauthenticated and anonymousMode is true', async () => { + useUserStore.setState({ isUserAuthenticated: false }); + const mockMessages = [{ _id: 'msg-pin-1', msg: 'Pinned text' }]; + mockRCInstance.getPinnedMessages.mockResolvedValue({ + messages: mockMessages, + }); + + await renderWithContext(); + + await act(async () => { + await hookResult.current.getPinnedMessages(true); + }); + + expect(mockRCInstance.getPinnedMessages).toHaveBeenCalledTimes(1); + expect(usePinnedMessageStore.getState().pinnedMessages).toEqual( + mockMessages + ); + }); + + test('fetches pinned messages when authenticated', async () => { + useUserStore.setState({ isUserAuthenticated: true }); + const mockMessages = [{ _id: 'msg-pin-2', msg: 'Auth pinned text' }]; + mockRCInstance.getPinnedMessages.mockResolvedValue({ + messages: mockMessages, + }); + + await renderWithContext(); + + await act(async () => { + await hookResult.current.getPinnedMessages(false); + }); + + expect(mockRCInstance.getPinnedMessages).toHaveBeenCalledTimes(1); + expect(usePinnedMessageStore.getState().pinnedMessages).toEqual( + mockMessages + ); + }); + }); +});