diff --git a/app/soapbox/features/chats/components/__tests__/chat-message-list.test.tsx b/app/soapbox/features/chats/components/__tests__/chat-message-list.test.tsx index 2e41505ab..6238f5e31 100644 --- a/app/soapbox/features/chats/components/__tests__/chat-message-list.test.tsx +++ b/app/soapbox/features/chats/components/__tests__/chat-message-list.test.tsx @@ -1,5 +1,6 @@ import userEvent from '@testing-library/user-event'; import React from 'react'; +import { VirtuosoMockContext } from 'react-virtuoso'; import { ChatContext } from 'soapbox/contexts/chat-context'; import { IAccount } from 'soapbox/queries/accounts'; @@ -44,19 +45,21 @@ const chatMessages: IChatMessage[] = [ ]; // Mock scrollIntoView function. -window.HTMLElement.prototype.scrollIntoView = function() { }; +window.HTMLElement.prototype.scrollIntoView = function () { }; Object.assign(navigator, { clipboard: { - writeText: () => {}, + writeText: () => { }, }, }); const store = rootState.set('me', '1'); const renderComponentWithChatContext = () => render( - - - , + + + + + , undefined, store, ); @@ -75,7 +78,7 @@ describe('', () => { }); }); - it('displays the skeleton loader', async() => { + it('displays the skeleton loader', async () => { renderComponentWithChatContext(); expect(screen.queryAllByTestId('placeholder-chat-message')).toHaveLength(5); @@ -96,7 +99,7 @@ describe('', () => { }); }); - it('displays the intro', async() => { + it('displays the intro', async () => { renderComponentWithChatContext(); expect(screen.queryAllByTestId('chat-message-list-intro')).toHaveLength(0); @@ -106,7 +109,7 @@ describe('', () => { }); }); - it('displays the messages', async() => { + it('displays the messages', async () => { renderComponentWithChatContext(); expect(screen.queryAllByTestId('chat-message')).toHaveLength(0); @@ -117,19 +120,23 @@ describe('', () => { }); }); - it('displays the correct menu options depending on the owner of the message', async() => { + it('displays the correct menu options depending on the owner of the message', async () => { renderComponentWithChatContext(); await waitFor(() => { expect(screen.queryAllByTestId('chat-message-menu')).toHaveLength(2); }); + // my message await userEvent.click(screen.queryAllByTestId('chat-message-menu')[0].querySelector('button') as any); - expect(screen.getByTestId('dropdown-menu')).toHaveTextContent('Delete'); + expect(screen.getByTestId('dropdown-menu')).toHaveTextContent('Delete for both'); + expect(screen.getByTestId('dropdown-menu')).not.toHaveTextContent('Report'); expect(screen.getByTestId('dropdown-menu')).toHaveTextContent('Copy'); + // other user message await userEvent.click(screen.queryAllByTestId('chat-message-menu')[1].querySelector('button') as any); - expect(screen.getByTestId('dropdown-menu')).not.toHaveTextContent('Delete'); + expect(screen.getByTestId('dropdown-menu')).toHaveTextContent('Delete for me'); + expect(screen.getByTestId('dropdown-menu')).toHaveTextContent('Report'); expect(screen.getByTestId('dropdown-menu')).toHaveTextContent('Copy'); }); }); diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index 840fdd64d..8029edde3 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/app/soapbox/features/chats/components/chat-message-list.tsx @@ -135,6 +135,8 @@ const ChatMessageList: React.FC = ({ chat, autosize }) => { }, [chatMessages?.length, lastChatMessage]); + const initialTopMostItemIndex = process.env.NODE_ENV === 'test' ? 0 : cachedChatMessages.length - 1; + const getFormattedTimestamp = (chatMessage: ChatMessageEntity) => { return intl.formatDate(new Date(chatMessage.created_at), { hour12: false, @@ -272,6 +274,7 @@ const ChatMessageList: React.FC = ({ chat, autosize }) => { 'mr-2 order-1': isMyMessage, 'ml-2 order-2': !isMyMessage, })} + data-testid='chat-message-menu' > = ({ chat, autosize }) => { ref={node} alignToBottom firstItemIndex={Math.max(0, firstItemIndex)} - initialTopMostItemIndex={cachedChatMessages.length - 1} + initialTopMostItemIndex={initialTopMostItemIndex} data={cachedChatMessages} startReached={handleStartReached} + followOutput='auto' itemContent={(_index, chatMessage) => { if (chatMessage.type === 'divider') { return renderDivider(_index, chatMessage.text); @@ -423,7 +427,6 @@ const ChatMessageList: React.FC = ({ chat, autosize }) => { ); } }} - followOutput='auto' components={{ Header: () => { if (hasNextPage || isFetchingNextPage) {