fix: empty thread preview (RocketChat#36527)

Author: MartinSchoeler

.changeset/pretty-geckos-lick.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes an issue that caused some types of messages to generate an empty thread preview

apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx

@@ -0,0 +1,87 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './ThreadMessagePreviewBody.stories';
+
+const { Default } = composeStories(stories);
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+jest.mock('../../../../lib/utils/fireGlobalEvent', () => ({
+	fireGlobalEvent: jest.fn(),
+}));
+
+jest.mock('../../../../views/room/hooks/useGoToRoom', () => ({
+	useGoToRoom: jest.fn(),
+}));
+
+test.each(testCases)(`renders ThreadMessagePreviewBody without crashing`, async (_storyname, Story) => {
+	const view = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	expect(view.baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('ThreadMessagePreviewBody should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	const results = await axe(container);
+
+	expect(results).toHaveNoViolations();
+});
+
+it('should not show an empty thread preview', async () => {
+	const { container } = render(
+		<Default
+			message={{
+				_id: 'message-id',
+				ts: new Date(),
+				msg: 'http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf',
+				md: [
+					{
+						type: 'PARAGRAPH',
+						value: [
+							{
+								type: 'PLAIN_TEXT',
+								value: 'message attachment text quote',
+							},
+						],
+					},
+				],
+				attachments: [
+					{
+						text: 'message attachment text quote',
+						md: [
+							{
+								type: 'PARAGRAPH',
+								value: [
+									{
+										type: 'PLAIN_TEXT',
+										value: 'message attachment text quote',
+									},
+								],
+							},
+						],
+						message_link: 'http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf',
+						author_name: 'b',
+						author_icon: '/avatar/b',
+						attachments: [],
+						ts: new Date('2025-07-24T18:05:45.339Z'),
+					},
+				],
+				u: {
+					_id: 'user-id',
+					username: 'username',
+				},
+				rid: 'room-id',
+				_updatedAt: new Date(),
+			}}
+		/>,
+		{ wrapper: mockAppRoot().build() },
+	);
+	expect(container).toMatchSnapshot();
+	const text = screen.getByText('http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf');
+
+	expect(text).toBeInTheDocument;
+});

apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.stories.tsx

@@ -0,0 +1,29 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import ThreadMessagePreviewBody from './ThreadMessagePreviewBody';
+
+export default {
+	title: 'Components/ThreadMessagePreviewBody',
+	component: ThreadMessagePreviewBody,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	decorators: [mockAppRoot().withSetting('UI_Use_Real_Name', true).withJohnDoe().buildStoryDecorator()],
+	args: {
+		message: {
+			_id: 'message-id',
+			ts: new Date(),
+			msg: 'This is a message',
+			u: {
+				_id: 'user-id',
+				username: 'username',
+			},
+			rid: 'room-id',
+			_updatedAt: new Date(),
+		},
+	},
+} satisfies Meta<typeof ThreadMessagePreviewBody>;
+
+export const Default: StoryFn<ComponentProps<typeof ThreadMessagePreviewBody>> = (args) => <ThreadMessagePreviewBody {...args} />;

apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx

@@ -30,7 +30,7 @@ const ThreadMessagePreviewBody = ({ message }: ThreadMessagePreviewBodyProps): R
 			return <>{t('Message_with_attachment')}</>;
 		}
 		if (!isEncryptedMessage || message.e2e === 'done') {
-			return mdTokens ? (
+			return mdTokens?.length ? (
 				<GazzodownText>
 					<PreviewMarkup tokens={mdTokens} />
 				</GazzodownText>

apps/meteor/client/components/message/variants/threadPreview/__snapshots__/ThreadMessagePreviewBody.spec.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders ThreadMessagePreviewBody without crashing 1`] = `
+<body>
+  <div>
+    This is a message
+  </div>
+</body>
+`;
+
+exports[`should not show an empty thread preview 1`] = `
+<div>
+  http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf
+</div>
+`;