From 5322a8f25aeac918b9beff6b04917f7127b0f358 Mon Sep 17 00:00:00 2001 From: MartinSchoeler Date: Thu, 24 Jul 2025 16:45:09 -0300 Subject: [PATCH 1/3] test: test for empty thread previews --- .../ThreadMessagePreviewBody.spec.tsx | 88 +++++++++++++++++++ .../ThreadMessagePreviewBody.stories.tsx | 29 ++++++ .../ThreadMessagePreviewBody.spec.tsx.snap | 15 ++++ 3 files changed, 132 insertions(+) create mode 100644 apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx create mode 100644 apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.stories.tsx create mode 100644 apps/meteor/client/components/message/variants/threadPreview/__snapshots__/ThreadMessagePreviewBody.spec.tsx.snap diff --git a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx new file mode 100644 index 0000000000000..69f901a4eb08e --- /dev/null +++ b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx @@ -0,0 +1,88 @@ +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(, { wrapper: mockAppRoot().build() }); + + expect(view.baseElement).toMatchSnapshot(); +}); + +test.each(testCases)('ThreadMessagePreviewBody should have no a11y violations', async (_storyname, Story) => { + const { container } = render(, { wrapper: mockAppRoot().build() }); + + // Today we do not have exactly a pattern to handle menu cells that don't have a header + const results = await axe(container); + + expect(results).toHaveNoViolations(); +}); + +it('should not show an empty thread preview', async () => { + const { container } = render( + , + { wrapper: mockAppRoot().build() }, + ); + expect(container).toMatchSnapshot(); + const text = screen.getByText('http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf'); + + expect(text).toBeInTheDocument; +}); diff --git a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.stories.tsx b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.stories.tsx new file mode 100644 index 0000000000000..24fb32c76d3e5 --- /dev/null +++ b/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; + +export const Default: StoryFn> = (args) => ; diff --git a/apps/meteor/client/components/message/variants/threadPreview/__snapshots__/ThreadMessagePreviewBody.spec.tsx.snap b/apps/meteor/client/components/message/variants/threadPreview/__snapshots__/ThreadMessagePreviewBody.spec.tsx.snap new file mode 100644 index 0000000000000..a8388e5c6e4d1 --- /dev/null +++ b/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`] = ` + +
+ This is a message +
+ +`; + +exports[`should not show an empty thread preview 1`] = ` +
+ http://localhost:3000/group/ds?msg=ZoX9pDowqNb4BiWxf +
+`; From 8df4002606287d9a878410d52f236a0d74c3619b Mon Sep 17 00:00:00 2001 From: MartinSchoeler Date: Thu, 24 Jul 2025 16:49:25 -0300 Subject: [PATCH 2/3] .. --- .../variants/threadPreview/ThreadMessagePreviewBody.spec.tsx | 1 - .../message/variants/threadPreview/ThreadMessagePreviewBody.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx index 69f901a4eb08e..7e25162e48958 100644 --- a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx +++ b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.spec.tsx @@ -26,7 +26,6 @@ test.each(testCases)(`renders ThreadMessagePreviewBody without crashing`, async test.each(testCases)('ThreadMessagePreviewBody should have no a11y violations', async (_storyname, Story) => { const { container } = render(, { wrapper: mockAppRoot().build() }); - // Today we do not have exactly a pattern to handle menu cells that don't have a header const results = await axe(container); expect(results).toHaveNoViolations(); diff --git a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx index d83db7abf8e3d..72c4b8cb460dd 100644 --- a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx +++ b/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 ? ( From 1ae11df735365335ff282dc2cd176d073622e156 Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Thu, 31 Jul 2025 10:52:26 -0300 Subject: [PATCH 3/3] Create pretty-geckos-lick.md --- .changeset/pretty-geckos-lick.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/pretty-geckos-lick.md diff --git a/.changeset/pretty-geckos-lick.md b/.changeset/pretty-geckos-lick.md new file mode 100644 index 0000000000000..105fa7b5d9a23 --- /dev/null +++ b/.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