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) {