diff --git a/.changeset/pretty-geckos-lick.md b/.changeset/pretty-geckos-lick.md new file mode 100644 index 00000000000..105fa7b5d9a --- /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 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 00000000000..7e25162e489 --- /dev/null +++ b/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(, { 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() }); + + 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 00000000000..24fb32c76d3 --- /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/ThreadMessagePreviewBody.tsx b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.tsx index d83db7abf8e..72c4b8cb460 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 ? ( 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 00000000000..a8388e5c6e4 --- /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 +
+`;