should render with custom theme identifier in generated css classes when theme is set 1`] = `
should render with custom theme identifier in generated
-
@@ -151,7 +148,7 @@ exports[`
should render with custom theme identifier in generated
tabindex="0"
>
@@ -161,28 +158,31 @@ exports[`
-
+
+
Saved for later
@@ -17,6 +30,19 @@ exports[`ReminderNotification displays text for reminder deadline if trespassed
+
+
Reminder set
@@ -26,7 +52,7 @@ exports[`ReminderNotification displays text for reminder deadline if trespassed
- Due since 01/01/1970
+ Due since Thu, 1 Jan at 00:00
@@ -37,6 +63,19 @@ exports[`ReminderNotification displays text for time due in case of timed remind
+
+
Reminder set
diff --git a/src/components/Message/__tests__/utils.test.js b/src/components/Message/__tests__/utils.test.js
index e42898475b..f2c2bb525a 100644
--- a/src/components/Message/__tests__/utils.test.js
+++ b/src/components/Message/__tests__/utils.test.js
@@ -7,7 +7,6 @@ import {
} from '../../../mock-builders';
import {
areMessagePropsEqual,
- areMessageUIPropsEqual,
getImages,
getMessageActions,
getNonImageAttachments,
@@ -277,18 +276,6 @@ describe('Message utils', () => {
expect(shouldUpdate).toBe(true);
});
- it('should update if editing state changes', () => {
- const message = generateMessage();
- const currentEditing = true;
- const currentProps = { editing: currentEditing, message };
- const nextEditing = false;
- const nextProps = { editing: nextEditing, message };
- const arePropsEqual = areMessageUIPropsEqual(nextProps, currentProps);
- const shouldUpdate = !areMessageUIPropsEqual(nextProps, currentProps);
- expect(arePropsEqual).toBe(false);
- expect(shouldUpdate).toBe(true);
- });
-
it('should update if wrapper layout changes', () => {
const message = generateMessage();
const currentMessageListRect = { height: 100, width: 100, x: 0, y: 0 };
diff --git a/src/components/Message/hooks/__tests__/useDeleteHandler.test.js b/src/components/Message/hooks/__tests__/useDeleteHandler.test.js
index c7bf98a6bf..f6e10ac7cb 100644
--- a/src/components/Message/hooks/__tests__/useDeleteHandler.test.js
+++ b/src/components/Message/hooks/__tests__/useDeleteHandler.test.js
@@ -23,9 +23,6 @@ let client;
const testMessage = generateMessage();
const deleteMessage = jest.fn(() => Promise.resolve(testMessage));
const updateMessage = jest.fn();
-const mouseEventMock = {
- preventDefault: jest.fn(() => {}),
-};
const ChannelActionContextOverrider = ({ children }) => {
const context = useChannelActionContext();
@@ -67,17 +64,17 @@ describe('useDeleteHandler custom hook', () => {
expect(typeof handleDelete).toBe('function');
});
- it('should prevent default mouse click event from bubbling', async () => {
+ it('should delete a message without options', async () => {
const handleDelete = await renderUseDeleteHandler();
- await handleDelete(mouseEventMock);
- expect(mouseEventMock.preventDefault).toHaveBeenCalledWith();
+ await handleDelete();
+ expect(deleteMessage).toHaveBeenCalledWith(testMessage, undefined);
});
- it('should delete a message by its id', async () => {
+ it('should delete a message by its id with options', async () => {
const message = generateMessage();
const deleteMessageOptions = { deleteForMe: true, hard: false };
const handleDelete = await renderUseDeleteHandler(message);
- await handleDelete(mouseEventMock, deleteMessageOptions);
+ await handleDelete(deleteMessageOptions);
expect(deleteMessage).toHaveBeenCalledWith(message, deleteMessageOptions);
});
@@ -86,7 +83,7 @@ describe('useDeleteHandler custom hook', () => {
deleteMessage.mockImplementationOnce(() => Promise.resolve(deleteMessageResponse));
const handleDelete = await renderUseDeleteHandler(testMessage);
await act(async () => {
- await handleDelete(mouseEventMock);
+ await handleDelete();
});
expect(updateMessage).toHaveBeenCalledWith(deleteMessageResponse);
});
diff --git a/src/components/MessageActions/MessageActions.defaults.tsx b/src/components/MessageActions/MessageActions.defaults.tsx
index 05e791fb84..bc69500247 100644
--- a/src/components/MessageActions/MessageActions.defaults.tsx
+++ b/src/components/MessageActions/MessageActions.defaults.tsx
@@ -1,9 +1,8 @@
/* eslint-disable sort-keys */
import React, { useState } from 'react';
+import { GlobalModal } from '../Modal';
import {
- addNotificationTargetTag,
- GlobalModal,
IconArrowRotateClockwise,
IconBellNotification,
IconBellOff,
@@ -22,11 +21,11 @@ import {
IconTrashBin,
IconUnpin,
IconVolumeFull,
- isUserMuted,
- useMessageComposerController,
- useMessageReminder,
- useNotificationTarget,
-} from '..';
+} from '../Icons';
+import { isUserMuted } from '../Message/utils';
+import { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';
+import { addNotificationTargetTag, useNotificationTarget } from '../Notifications';
+import { useMessageReminder } from '../Message/hooks/useMessageReminder';
import { ReactionIcon as DefaultReactionIcon, ThreadIcon } from '../Message/icons';
import { ReactionSelectorWithButton } from '../Reactions/ReactionSelectorWithButton';
import {
diff --git a/src/components/MessageActions/__tests__/MessageActions.test.js b/src/components/MessageActions/__tests__/MessageActions.test.js
index b735ad8874..4e9a954104 100644
--- a/src/components/MessageActions/__tests__/MessageActions.test.js
+++ b/src/components/MessageActions/__tests__/MessageActions.test.js
@@ -25,10 +25,16 @@ import {
mockTranslationContext,
} from '../../../mock-builders';
+import { ChatViewContext } from '../../ChatView/ChatView';
+import { ResizeObserverMock } from '../../../mock-builders/browser';
import { Message } from '../../Message';
import { Channel } from '../../Channel';
import { Chat } from '../../Chat';
+window.ResizeObserver = ResizeObserverMock;
+
+const chatViewContextValue = { activeChatView: 'channels', setActiveChatView: () => {} };
+
expect.extend(toHaveNoViolations);
const alice = generateUser({ name: 'alice' });
@@ -84,29 +90,31 @@ async function renderMessageActions({
});
return render(
-
-
-
-
-
-
-
-
-
-
-
-
-
- ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
);
}
@@ -230,7 +238,7 @@ describe('
-
-
-
-
- ,
+
+
+
+
+
+
+
+ ,
);
});
@@ -810,7 +823,7 @@ describe(' without role="option"
+ 'aria-allowed-attr': { enabled: false },
+ },
+ });
expect(results).toHaveNoViolations();
});
@@ -849,12 +867,12 @@ describe('
+
+
+ ,
+ );
});
+ return { channel, ...result };
+ };
+
+ it('should be rendered with location preview', async () => {
+ await renderLocationPreview({ remove: jest.fn() });
expect(screen.queryByTestId('location-preview')).toBeInTheDocument();
});
it('should be rendered with custom location preview', async () => {
- const GeolocationPreview = () =>
;
- await renderComponent({
- attachments: [],
- coords: { latitude: 2, longitude: 2 },
- props: { GeolocationPreview },
- });
+ const CustomGeolocationPreview = () => (
+
+ );
+ await renderLocationPreview({ customPreview: CustomGeolocationPreview });
expect(screen.queryByTestId('location-preview')).not.toBeInTheDocument();
expect(screen.queryByTestId('geolocation-preview-custom')).toBeInTheDocument();
});
it('should render location preview without possibility to remove it when editing a message', async () => {
- await renderComponent({
- attachments: [],
- coords: { latitude: 2, longitude: 2 },
- editedMessage: generateMessage({
- shared_location: generateStaticLocationResponse(),
- }),
- });
+ // When editing, no remove callback is provided, so the remove button is absent
+ await renderLocationPreview();
expect(screen.queryByTestId('location-preview')).toBeInTheDocument();
expect(
screen.queryByTestId('location-preview-item-delete-button'),
diff --git a/src/components/MessageComposer/__tests__/AttachmentSelector.test.js b/src/components/MessageComposer/__tests__/AttachmentSelector.test.js
index 3f02de5828..a28f02bb30 100644
--- a/src/components/MessageComposer/__tests__/AttachmentSelector.test.js
+++ b/src/components/MessageComposer/__tests__/AttachmentSelector.test.js
@@ -13,20 +13,20 @@ import {
} from '../../../context';
import { generateMessage, initClientWithChannels } from '../../../mock-builders';
import { CHANNEL_CONTAINER_ID } from '../../Channel/constants';
-import { AttachmentSelector } from '../AttachmentSelector';
+import { AttachmentSelector } from '../AttachmentSelector/AttachmentSelector';
import { LegacyThreadContext } from '../../Thread/LegacyThreadContext';
+import { ChatViewContext } from '../../ChatView/ChatView';
const ATTACHMENT_SELECTOR__ACTIONS_MENU_TEST_ID = 'attachment-selector-actions-menu';
const POLL_CREATION_DIALOG_TEST_ID = 'poll-creation-dialog';
-const ATTACHMENT_SELECTOR_CLASS = 'str-chat__attachment-selector';
const UPLOAD_FILE_BUTTON_CLASS =
'str-chat__attachment-selector-actions-menu__upload-file-button';
const CREATE_POLL_BUTTON_CLASS =
'str-chat__attachment-selector-actions-menu__create-poll-button';
const SHARE_LOCATION_BUTTON_CLASS =
'str-chat__attachment-selector-actions-menu__add-location-button';
-const SIMPLE_ATTACHMENT_SELECTOR_TEST_ID = 'file-upload-button';
+const SIMPLE_ATTACHMENT_SELECTOR_TEST_ID = 'invoke-attachment-selector-button';
const UPLOAD_INPUT_TEST_ID = 'file-input';
const translationContext = {
@@ -93,33 +93,37 @@ const renderComponent = async ({
let result;
await act(() => {
result = render(
-
-
-
-
-
-
-
- {message ? (
-
+
+
+
+
+
+
+
+
+ {message ? (
+
+
+ ) : (
-
-
-
-
-
- ,
+ )}
+
+
+
+
+
+
+ ,
);
});
return result;
@@ -182,6 +186,7 @@ describe('AttachmentSelector', () => {
...defaultChannelData,
cid: 'type:id',
config: {
+ commands: [],
polls: false,
shared_locations: false,
uploads: false,
@@ -249,6 +254,7 @@ describe('AttachmentSelector', () => {
...defaultChannelData,
cid: 'type:id',
config: {
+ commands: [],
polls: false,
shared_locations: false,
uploads: true,
@@ -259,13 +265,14 @@ describe('AttachmentSelector', () => {
},
],
});
- const { container } = await renderComponent({
+ await renderComponent({
channelStateContext: { channelCapabilities: { 'upload-file': true } },
customChannel,
customClient,
});
+ // When only file uploads are enabled, the full context menu is not rendered; only the simple button
expect(
- container.querySelector(`.${ATTACHMENT_SELECTOR_CLASS}`),
+ screen.queryByTestId('attachment-selector-actions-menu'),
).not.toBeInTheDocument();
expect(screen.getByTestId(SIMPLE_ATTACHMENT_SELECTOR_TEST_ID)).toBeInTheDocument();
});
@@ -281,6 +288,7 @@ describe('AttachmentSelector', () => {
...defaultChannelData,
cid: 'type:id',
config: {
+ commands: [],
polls: false,
shared_locations: false,
uploads: false,
@@ -316,6 +324,7 @@ describe('AttachmentSelector', () => {
...defaultChannelData,
cid: 'type:id',
config: {
+ commands: [],
polls: false,
shared_locations: false,
uploads: true,
@@ -326,7 +335,7 @@ describe('AttachmentSelector', () => {
},
],
});
- const { container } = await renderComponent({
+ await renderComponent({
channelStateContext: {
channelCapabilities: { 'upload-file': true },
thread: generateMessage({ cid: customChannel.cid }),
@@ -334,8 +343,9 @@ describe('AttachmentSelector', () => {
customChannel,
customClient,
});
+ // In a thread, the full AttachmentSelector context menu is not used; only the simple button is rendered
expect(
- container.querySelector(`.${ATTACHMENT_SELECTOR_CLASS}`),
+ screen.queryByTestId('attachment-selector-actions-menu'),
).not.toBeInTheDocument();
expect(screen.getByTestId(SIMPLE_ATTACHMENT_SELECTOR_TEST_ID)).toBeInTheDocument();
});
@@ -427,11 +437,10 @@ describe('AttachmentSelector', () => {
it('renders custom modal content if provided', async () => {
const buttonText = 'Custom text';
const modalText = 'Modal text';
- const ActionButton = ({ closeMenu, openModalForAction }) => (
+ const ActionButton = ({ openModalForAction }) => (
{
openModalForAction('custom');
- closeMenu();
}}
>
{buttonText}
@@ -460,9 +469,6 @@ describe('AttachmentSelector', () => {
await waitFor(() => {
expect(screen.queryByText(modalText)).not.toBeInTheDocument();
- expect(
- screen.queryByTestId(ATTACHMENT_SELECTOR__ACTIONS_MENU_TEST_ID),
- ).not.toBeInTheDocument();
});
});
@@ -528,8 +534,8 @@ const AttachmentSelectorInitiationButtonContents = () => (
);
const FileUploadIcon = () =>
;
-const getSimpleAttachmentSelectorInvokeElement = (container) =>
- container.querySelector('.str-chat__file-input-label');
+const getSimpleAttachmentSelectorInvokeElement = () =>
+ screen.getByTestId(SIMPLE_ATTACHMENT_SELECTOR_TEST_ID);
describe('SimpleAttachmentSelector', () => {
const message = generateMessage();
@@ -552,10 +558,10 @@ describe('SimpleAttachmentSelector', () => {
});
it('opens on Space key up', async () => {
- const { container } = await renderComponent({ message });
+ await renderComponent({ message });
const inputElement = screen.getByTestId(UPLOAD_INPUT_TEST_ID);
const inputClickSpy = jest.spyOn(inputElement, 'click').mockReturnValue();
- const label = getSimpleAttachmentSelectorInvokeElement(container);
+ const label = getSimpleAttachmentSelectorInvokeElement();
fireEvent.keyUp(label, {
code: 'Enter',
@@ -566,10 +572,10 @@ describe('SimpleAttachmentSelector', () => {
});
it('opens on Space key up', async () => {
- const { container } = await renderComponent({ message });
+ await renderComponent({ message });
const inputElement = screen.getByTestId(UPLOAD_INPUT_TEST_ID);
const inputClickSpy = jest.spyOn(inputElement, 'click').mockReturnValue();
- const label = getSimpleAttachmentSelectorInvokeElement(container);
+ const label = getSimpleAttachmentSelectorInvokeElement();
fireEvent.keyUp(label, {
code: 'Space',
@@ -580,10 +586,10 @@ describe('SimpleAttachmentSelector', () => {
});
it('does not open on other key up', async () => {
- const { container } = await renderComponent({ message });
+ await renderComponent({ message });
const inputElement = screen.getByTestId(UPLOAD_INPUT_TEST_ID);
const inputClickSpy = jest.spyOn(inputElement, 'click').mockReturnValue();
- const label = getSimpleAttachmentSelectorInvokeElement(container);
+ const label = getSimpleAttachmentSelectorInvokeElement();
fireEvent.keyUp(label, {
key: 'A',
@@ -602,12 +608,13 @@ describe('SimpleAttachmentSelector', () => {
).toBeInTheDocument();
});
- it('render custom FileUploadIcon', async () => {
+ it('does not render FileUploadIcon (deprecated, use AttachmentSelectorInitiationButtonContents)', async () => {
await renderComponent({
componentContext: { FileUploadIcon },
message,
});
- expect(screen.getByTestId('customFileUploadIcon')).toBeInTheDocument();
+ // FileUploadIcon is no longer used by SimpleAttachmentSelector
+ expect(screen.queryByTestId('customFileUploadIcon')).not.toBeInTheDocument();
});
it('renders AttachmentSelectorInitiationButtonContents but not FileUploadIcon', async () => {
diff --git a/src/components/MessageComposer/__tests__/CooldownTimer.test.js b/src/components/MessageComposer/__tests__/CooldownTimer.test.js
index 1560a2132c..0ef4666b0b 100644
--- a/src/components/MessageComposer/__tests__/CooldownTimer.test.js
+++ b/src/components/MessageComposer/__tests__/CooldownTimer.test.js
@@ -1,67 +1,62 @@
import React from 'react';
import { act, render, screen } from '@testing-library/react';
import { CooldownTimer } from '../CooldownTimer';
+import { Chat } from '../../Chat';
+import { Channel } from '../../Channel';
+import { initClientWithChannels } from '../../../mock-builders';
import '@testing-library/jest-dom';
-jest.useFakeTimers();
-
const TIMER_TEST_ID = 'cooldown-timer';
-const remainingProp = 'cooldownInterval';
-describe('CooldownTimer', () => {
- it('renders CooldownTimer component', () => {
- render(
);
- expect(screen.getByTestId(TIMER_TEST_ID)).toHaveTextContent('0');
- });
- it('initializes with correct state based on cooldownRemaining prop', () => {
- const props = { [remainingProp]: 10 };
- render(
);
- expect(screen.getByTestId(TIMER_TEST_ID)).toHaveTextContent('10');
+const renderComponent = async ({ channelData = {} } = {}) => {
+ const {
+ channels: [channel],
+ client,
+ } = await initClientWithChannels({
+ channelsData: [{ channel: channelData }],
});
+ let result;
+ await act(() => {
+ result = render(
+
+
+
+ ,
+ );
+ });
+ return { channel, ...result };
+};
- it('updates countdown logic correctly', () => {
- const cooldownRemaining = 5;
- const props = { [remainingProp]: cooldownRemaining };
- render(
);
-
- for (let countDown = cooldownRemaining; countDown >= 0; countDown--) {
- expect(screen.getByTestId(TIMER_TEST_ID)).toHaveTextContent(countDown.toString());
- act(() => {
- jest.runAllTimers();
- });
- }
+describe('CooldownTimer', () => {
+ it('renders CooldownTimer component with 0 when no cooldown active', async () => {
+ await renderComponent();
expect(screen.getByTestId(TIMER_TEST_ID)).toHaveTextContent('0');
});
- it('resets countdown when cooldownRemaining prop changes', () => {
- const cooldownRemaining1 = 5;
- const cooldownRemaining2 = 10;
- const props1 = { [remainingProp]: cooldownRemaining1 };
- const props2 = { [remainingProp]: cooldownRemaining2 };
- const timeElapsedBeforeUpdate = 2;
-
- const { rerender } = render(
);
-
- for (let round = timeElapsedBeforeUpdate; round > 0; round--) {
- act(() => {
- jest.runAllTimers();
- });
- }
+ it('renders the cooldown remaining value from channel state', async () => {
+ const { channel } = await renderComponent();
+ await act(() => {
+ channel.cooldownTimer.state.next({ cooldownRemaining: 10 });
+ });
+ expect(screen.getByTestId(TIMER_TEST_ID)).toHaveTextContent('10');
+ });
- expect(screen.getByTestId(TIMER_TEST_ID)).toHaveTextContent(
- (cooldownRemaining1 - timeElapsedBeforeUpdate).toString(),
- );
+ it('updates when cooldown remaining changes', async () => {
+ const { channel } = await renderComponent();
+ await act(() => {
+ channel.cooldownTimer.state.next({ cooldownRemaining: 5 });
+ });
+ expect(screen.getByTestId(TIMER_TEST_ID)).toHaveTextContent('5');
- rerender(
);
+ await act(() => {
+ channel.cooldownTimer.state.next({ cooldownRemaining: 3 });
+ });
+ expect(screen.getByTestId(TIMER_TEST_ID)).toHaveTextContent('3');
- expect(screen.queryByTestId(TIMER_TEST_ID)).toHaveTextContent(
- cooldownRemaining2.toString(),
- );
- act(() => {
- jest.runAllTimers();
+ await act(() => {
+ channel.cooldownTimer.state.next({ cooldownRemaining: 0 });
});
- expect(screen.queryByTestId(TIMER_TEST_ID)).toHaveTextContent(
- (cooldownRemaining2 - 1).toString(),
- );
+ expect(screen.getByTestId(TIMER_TEST_ID)).toHaveTextContent('0');
});
});
diff --git a/src/components/MessageComposer/__tests__/LinkPreviewList.test.js b/src/components/MessageComposer/__tests__/LinkPreviewList.test.js
index f7b35fe094..5b192c5212 100644
--- a/src/components/MessageComposer/__tests__/LinkPreviewList.test.js
+++ b/src/components/MessageComposer/__tests__/LinkPreviewList.test.js
@@ -37,24 +37,23 @@ const mockedChannelData = generateChannel({
thread: [threadMessage],
});
-const renderComponent = async ({ channelProps = {}, client } = {}) => {
+const renderComponent = async ({
+ channelProps = {},
+ client,
+ linkPreviewListProps = {},
+} = {}) => {
let renderResult;
await act(() => {
renderResult = render(
-
,
);
});
- const submit = async () => {
- const submitButton =
- renderResult.findByText('Send') || renderResult.findByTitle('Send');
- fireEvent.click(await submitButton);
- };
- return { submit, ...renderResult };
+ return { ...renderResult };
};
const setup = async () => {
@@ -85,13 +84,14 @@ describe('LinkPreviewList', () => {
await renderComponent({
channelProps: { channel },
client,
+ linkPreviewListProps: { displayLinkCount: previews.size },
});
await act(() => {
channel.messageComposer.linkPreviewsManager.state.next({ previews });
});
const linkPreviewCards = screen.getAllByTestId(LINK_PREVIEW_TEST_ID);
expect(linkPreviewCards).toHaveLength(previews.size);
- previews.values().forEach((p, i) => {
+ Array.from(previews.values()).forEach((p, i) => {
expect(linkPreviewCards[i]).toHaveTextContent(p.title);
});
});
@@ -109,7 +109,7 @@ describe('LinkPreviewList', () => {
expect(linkPreviewCards).toHaveLength(0);
});
- it('does not render if quoting a message', async () => {
+ it('still renders link previews when quoting a message', async () => {
const { channel, client } = await setup();
await renderComponent({
channelProps: { channel },
@@ -120,7 +120,7 @@ describe('LinkPreviewList', () => {
channel.messageComposer.state.next({ quotedMessage: generateMessage() });
});
const linkPreviewCards = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
- expect(linkPreviewCards).toHaveLength(0);
+ expect(linkPreviewCards).toHaveLength(1);
});
});
@@ -140,7 +140,7 @@ const renderLinkPreviewCard = async ({ channel, client, linkPreview }) => {
describe('LinPreviewCard', () => {
it('renders for loaded preview', async () => {
const { channel, client } = await setup();
- const { container } = await renderLinkPreviewCard({
+ await renderLinkPreviewCard({
channel,
client,
linkPreview: generateScrapedImageAttachment({
@@ -150,11 +150,14 @@ describe('LinPreviewCard', () => {
title: 'title',
}),
});
- expect(container).toMatchSnapshot();
+ expect(screen.getByTestId(LINK_PREVIEW_TEST_ID)).toBeInTheDocument();
+ expect(screen.getByText('title')).toBeInTheDocument();
+ expect(screen.getByText('text')).toBeInTheDocument();
+ expect(screen.getByTestId('link-preview-card-dismiss-btn')).toBeInTheDocument();
});
it('renders for loading preview', async () => {
const { channel, client } = await setup();
- const { container } = await renderLinkPreviewCard({
+ await renderLinkPreviewCard({
channel,
client,
linkPreview: generateScrapedImageAttachment({
@@ -164,11 +167,13 @@ describe('LinPreviewCard', () => {
title: 'title',
}),
});
- expect(container).toMatchSnapshot();
+ const card = screen.getByTestId(LINK_PREVIEW_TEST_ID);
+ expect(card).toBeInTheDocument();
+ expect(card).toHaveClass('str-chat__link-preview-card--loading');
});
it('does not render dismissed preview', async () => {
const { channel, client } = await setup();
- const { container } = await renderLinkPreviewCard({
+ await renderLinkPreviewCard({
channel,
client,
linkPreview: generateScrapedImageAttachment({
@@ -178,11 +183,11 @@ describe('LinPreviewCard', () => {
title: 'title',
}),
});
- expect(container).toMatchSnapshot();
+ expect(screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
});
it('does not render failed preview', async () => {
const { channel, client } = await setup();
- const { container } = await renderLinkPreviewCard({
+ await renderLinkPreviewCard({
channel,
client,
linkPreview: generateScrapedImageAttachment({
@@ -192,11 +197,11 @@ describe('LinPreviewCard', () => {
title: 'title',
}),
});
- expect(container).toMatchSnapshot();
+ expect(screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
});
it('does not render pending preview', async () => {
const { channel, client } = await setup();
- const { container } = await renderLinkPreviewCard({
+ await renderLinkPreviewCard({
channel,
client,
linkPreview: generateScrapedImageAttachment({
@@ -206,7 +211,7 @@ describe('LinPreviewCard', () => {
title: 'title',
}),
});
- expect(container).toMatchSnapshot();
+ expect(screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
});
it('allows to dismiss a preview', async () => {
const { channel, client } = await setup();
@@ -214,7 +219,7 @@ describe('LinPreviewCard', () => {
channel.messageComposer.linkPreviewsManager,
'dismissPreview',
);
- await await renderLinkPreviewCard({
+ await renderLinkPreviewCard({
channel,
client,
linkPreview: generateScrapedImageAttachment({ status: LinkPreviewStatus.LOADED }),
diff --git a/src/components/MessageComposer/__tests__/MessageInput.test.js b/src/components/MessageComposer/__tests__/MessageInput.test.js
index 9108ab0785..e07d6481e0 100644
--- a/src/components/MessageComposer/__tests__/MessageInput.test.js
+++ b/src/components/MessageComposer/__tests__/MessageInput.test.js
@@ -25,15 +25,30 @@ import {
} from '../../../mock-builders';
import { QuotedMessagePreview } from '../QuotedMessagePreview';
+jest.mock('../../ChatView', () => {
+ const actual = jest.requireActual('../../ChatView');
+ return {
+ ...actual,
+ useChatViewContext: jest.fn(() => ({
+ activeChatView: 'channels',
+ setActiveChatView: jest.fn(),
+ })),
+ useThreadsViewContext: jest.fn(() => ({
+ activeThread: undefined,
+ setActiveThread: jest.fn(),
+ })),
+ };
+});
+
expect.extend(toHaveNoViolations);
-const IMAGE_PREVIEW_TEST_ID = 'attachment-preview-image';
+const IMAGE_PREVIEW_TEST_ID = 'attachment-preview-media';
const FILE_PREVIEW_TEST_ID = 'attachment-preview-file';
const FILE_INPUT_TEST_ID = 'file-input';
const FILE_UPLOAD_RETRY_BTN_TEST_ID = 'file-preview-item-retry-button';
const SEND_BTN_TEST_ID = 'send-button';
const ATTACHMENT_PREVIEW_LIST_TEST_ID = 'attachment-preview-list';
-const UNKNOWN_ATTACHMENT_PREVIEW_TEST_ID = 'attachment-preview-unknown';
+const UNKNOWN_ATTACHMENT_PREVIEW_TEST_ID = 'attachment-preview-file';
const cid = 'messaging:general';
const inputPlaceholder = 'Type your message';
@@ -78,6 +93,25 @@ const fileUploadUrl = 'http://www.getstream.io'; // real url, because ImageAttac
const getImage = () => new File(['content'], filename, { type: 'image/png' });
const getFile = (name = filename) => new File(['content'], name, { type: 'text/plain' });
+// Polyfill DOMRect for jsdom
+if (typeof globalThis.DOMRect === 'undefined') {
+ globalThis.DOMRect = class DOMRect {
+ constructor(x = 0, y = 0, width = 0, height = 0) {
+ this.x = x;
+ this.y = y;
+ this.width = width;
+ this.height = height;
+ this.top = y;
+ this.right = x + width;
+ this.bottom = y + height;
+ this.left = x;
+ }
+ toJSON() {
+ return JSON.stringify(this);
+ }
+ };
+}
+
const sendMessageMock = jest.fn();
const mockAddNotification = jest.fn();
@@ -116,7 +150,7 @@ const initQuotedMessagePreview = async (message) => {
});
// Click the Quote button in the dropdown
- const quoteButton = await screen.findByText(/^quote$/i);
+ const quoteButton = await screen.findByText(/^Quote Reply$/i);
await waitFor(() => expect(quoteButton).toBeInTheDocument());
act(() => {
@@ -185,8 +219,7 @@ const renderComponent = async ({
});
const submit = async () => {
- const submitButton =
- renderResult.findByText('Send') || renderResult.findByTitle('Send');
+ const submitButton = renderResult.findByTestId('send-button');
fireEvent.click(await submitButton);
};
@@ -249,17 +282,15 @@ const renderWithActiveCooldown = async ({ messageInputProps = {} } = {}) => {
customUser: user,
});
- const lastSentSecondsAhead = 5;
+ // Set cooldown active via the channel's cooldownTimer state
+ channel.cooldownTimer.state.next({ cooldownRemaining: cooldown });
+
await renderComponent({
- chatContextOverrides: {
- latestMessageDatesByChannels: {
- [channel.cid]: new Date(new Date().getTime() + lastSentSecondsAhead * 1000),
- },
- },
customChannel: channel,
customClient: client,
messageInputProps,
});
+ return { channel };
};
describe(`MessageInputFlat`, () => {
@@ -323,25 +354,27 @@ describe(`MessageInputFlat`, () => {
expect(results).toHaveNoViolations();
});
- it('should render custom file upload svg provided as prop', async () => {
- const FileUploadIcon = () => (
+ it('should render custom AttachmentSelectorInitiationButtonContents', async () => {
+ const AttachmentSelectorInitiationButtonContents = () => (
- NotFileUploadIcon
+ CustomAttachmentIcon
);
- const { container } = await renderComponent({ components: { FileUploadIcon } });
+ const { container } = await renderComponent({
+ components: { AttachmentSelectorInitiationButtonContents },
+ });
- const fileUploadIcon = await screen.findByTitle('NotFileUploadIcon');
+ const customIcon = await screen.findByTitle('CustomAttachmentIcon');
await waitFor(() => {
- expect(fileUploadIcon).toBeInTheDocument();
+ expect(customIcon).toBeInTheDocument();
});
const results = await axe(container);
expect(results).toHaveNoViolations();
});
- it('should prefer custom AttachmentSelectorInitiationButtonContents before custom FileUploadIcon', async () => {
+ it('FileUploadIcon is no longer used (replaced by AttachmentSelectorInitiationButtonContents)', async () => {
const FileUploadIcon = () => (
NotFileUploadIcon
@@ -358,8 +391,8 @@ describe(`MessageInputFlat`, () => {
components: { AttachmentSelectorInitiationButtonContents, FileUploadIcon },
});
- const fileUploadIcon = await screen.queryByTitle('NotFileUploadIcon');
- const attachmentSelectorButtonIcon = await screen.getByTitle(
+ const fileUploadIcon = screen.queryByTitle('NotFileUploadIcon');
+ const attachmentSelectorButtonIcon = screen.getByTitle(
'AttachmentSelectorInitiationButtonContents',
);
await waitFor(() => {
@@ -372,25 +405,28 @@ describe(`MessageInputFlat`, () => {
it('are rendered in custom LinkPreviewList component', async () => {
const LINK_PREVIEW_TEST_ID = 'link-preview-card';
- const scrapedData = generateScrapedDataAttachment({
- og_scrape_url: 'http://getstream.io',
- title: 'http://getstream.io',
- });
const customTestId = 'custom-link-preview';
const CustomLinkPreviewList = () =>
;
+ const { customChannel, customClient } = await setup();
await renderComponent({
components: { LinkPreviewList: CustomLinkPreviewList },
+ customChannel,
+ customClient,
});
- await act(async () => {
- fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
- target: {
- value: `X ${scrapedData.og_scrape_url}`,
- },
+ // Manually trigger link preview state so the previews section renders
+ await act(() => {
+ const scrapedData = generateScrapedDataAttachment({
+ og_scrape_url: 'http://getstream.io',
+ status: 'loaded',
+ title: 'http://getstream.io',
+ });
+ customChannel.messageComposer.linkPreviewsManager.state.next({
+ previews: new Map([[scrapedData.og_scrape_url, scrapedData]]),
});
});
- expect(await screen.queryByTestId(customTestId)).toBeInTheDocument();
- expect(await screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
+ expect(screen.queryByTestId(customTestId)).toBeInTheDocument();
+ expect(screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
});
describe('Attachments', () => {
@@ -513,9 +549,8 @@ describe(`MessageInputFlat`, () => {
const filenameText = await screen.findByText(filename);
expect(filenameText).toBeInTheDocument();
- const filePreview = screen.getByTestId(FILE_PREVIEW_TEST_ID);
await waitFor(() => {
- expect(filePreview.querySelector('a')).toHaveAttribute('href', fileUploadUrl);
+ expect(screen.getByTestId(FILE_PREVIEW_TEST_ID)).toBeInTheDocument();
});
await axeNoViolations(container);
@@ -536,9 +571,8 @@ describe(`MessageInputFlat`, () => {
});
expect(screen.getByText(filename)).toBeInTheDocument();
- const filePreview = screen.getByTestId(FILE_PREVIEW_TEST_ID);
await waitFor(() => {
- expect(filePreview.querySelector('a')).toHaveAttribute('href', fileUploadUrl);
+ expect(screen.getByTestId(FILE_PREVIEW_TEST_ID)).toBeInTheDocument();
});
await axeNoViolations(container);
});
@@ -1068,10 +1102,12 @@ describe(`MessageInputFlat`, () => {
});
});
- const usernameList = await screen.findAllByTestId('user-item-name');
- expect(usernameList).toHaveLength(
- Object.keys(customChannel.state.members).length - 1, // remove own user
- );
+ await waitFor(() => {
+ const usernameList = document.querySelectorAll('.str-chat__suggestion-list-item');
+ expect(usernameList).toHaveLength(
+ Object.keys(customChannel.state.members).length - 1, // remove own user
+ );
+ });
Element.prototype.scrollIntoView = scrollIntoView;
});
@@ -1097,8 +1133,12 @@ describe(`MessageInputFlat`, () => {
});
});
- const usernameList = await screen.findAllByTestId('user-item-name');
- const firstItem = usernameList[0];
+ await waitFor(() => {
+ expect(
+ document.querySelectorAll('.str-chat__suggestion-list-item').length,
+ ).toBeGreaterThan(0);
+ });
+ const firstItem = document.querySelectorAll('.str-chat__suggestion-list-item')[0];
await act(async () => {
await fireEvent.click(firstItem);
});
@@ -1157,7 +1197,7 @@ describe(`MessageInputFlat`, () => {
await quotedMessagePreviewIsDisplayedCorrectly(mainListMessage);
});
- it('renders proper markdown (through default renderText fn)', async () => {
+ it('renders quoted message text', async () => {
const m = generateMessage({
mentioned_users: [{ id: 'john', name: 'John Cena' }],
text: 'hey @John Cena',
@@ -1166,7 +1206,7 @@ describe(`MessageInputFlat`, () => {
await renderComponent({ messageContextOverrides: { message: m } });
await initQuotedMessagePreview(m);
- expect(await screen.findByText('@John Cena')).toHaveAttribute('data-user-id');
+ expect(await screen.findByText(m.text)).toBeInTheDocument();
});
it('uses custom renderText fn if provided', async () => {
@@ -1294,16 +1334,14 @@ describe(`MessageInputFlat`, () => {
});
it('should be removed after cool-down period elapsed', async () => {
- jest.useFakeTimers();
- await renderWithActiveCooldown();
+ const { channel } = await renderWithActiveCooldown();
expect(screen.getByTestId(COOLDOWN_TIMER_TEST_ID)).toHaveTextContent(
cooldown.toString(),
);
- act(() => {
- jest.advanceTimersByTime(cooldown * 1000);
+ await act(() => {
+ channel.cooldownTimer.state.next({ cooldownRemaining: 0 });
});
expect(screen.queryByTestId(COOLDOWN_TIMER_TEST_ID)).not.toBeInTheDocument();
- jest.useRealTimers();
});
});
diff --git a/src/components/MessageComposer/__tests__/SendButton.test.js b/src/components/MessageComposer/__tests__/SendButton.test.js
index b8fc4e1a97..ce22b7d5e3 100644
--- a/src/components/MessageComposer/__tests__/SendButton.test.js
+++ b/src/components/MessageComposer/__tests__/SendButton.test.js
@@ -17,7 +17,7 @@ describe('SendButton', () => {
client,
} = await initClientWithChannels();
channel.messageComposer.textComposer.setText('Enable the button');
- const { container, getByTitle } = render(
+ const { container, getByTestId } = render(
- {children}
-
- );
- return renderHook(useCooldownRemaining, { wrapper });
-}
-
-const cid = 'cid';
-const cooldown = 30;
describe('useCooldownRemaining', () => {
- it('should set remaining cooldown time to 0 if no channel.cooldown', async () => {
- const channel = { cid };
- const chatContext = { latestMessageDatesByChannels: {} };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(0);
- });
-
- it('should set remaining cooldown time to 0 if no channel.cooldown and latest message time is in the future', async () => {
- const channel = { cid };
- const lastSentSecondsAhead = 5;
- const chatContext = {
- latestMessageDatesByChannels: {
- [cid]: new Date(new Date().getTime() + lastSentSecondsAhead * 1000),
- },
- };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(0);
- });
-
- it('should set remaining cooldown time to 0 if no channel.cooldown and latest message time is in the past', async () => {
- const channel = { cid };
- const lastSentSecondsAgo = 5;
- const chatContext = {
- latestMessageDatesByChannels: {
- [cid]: new Date(new Date().getTime() - lastSentSecondsAgo * 1000),
- },
- };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(0);
- });
-
- it('should set remaining cooldown time to 0 if channel.cooldown is 0', async () => {
- const channel = { cid, data: { cooldown: 0 } };
- const chatContext = { latestMessageDatesByChannels: {} };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(0);
- });
-
- it('should set remaining cooldown time to 0 if channel.cooldown is 0 and latest message time is in the future', async () => {
- const channel = { cid, data: { cooldown: 0 } };
- const lastSentSecondsAhead = 5;
- const chatContext = {
- latestMessageDatesByChannels: {
- [cid]: new Date(new Date().getTime() + lastSentSecondsAhead * 1000),
- },
- };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(0);
- });
-
- it('should set remaining cooldown time to 0 if channel.cooldown is 0 and latest message time is in the past', async () => {
- const channel = { cid, data: { cooldown: 0 } };
- const lastSentSecondsAgo = 5;
- const chatContext = {
- latestMessageDatesByChannels: {
- [cid]: new Date(new Date().getTime() - lastSentSecondsAgo * 1000),
- },
- };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(0);
- });
-
- it('should set remaining cooldown time to 0 if skip-slow-mode is among own_capabilities', async () => {
- const channel = { cid, data: { cooldown, own_capabilities: ['skip-slow-mode'] } };
- const chatContext = { latestMessageDatesByChannels: { [cid]: new Date() } };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(0);
- });
+ const setup = async ({ channelData = {} } = {}) => {
+ const {
+ channels: [channel],
+ client,
+ } = await initClientWithChannels({
+ channelsData: [{ channel: channelData }],
+ });
- it('should set remaining cooldown time to 0 if no previous messages sent', async () => {
- const channel = { cid, data: { cooldown } };
- const chatContext = { latestMessageDatesByChannels: {} };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(0);
- });
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
- it('should set remaining cooldown time to 0 if previous messages sent earlier than channel.cooldown', async () => {
- const channel = { cid, data: { cooldown } };
- const chatContext = { latestMessageDatesByChannels: { [cid]: new Date('1970-1-1') } };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(0);
- });
+ let result;
+ await act(() => {
+ result = renderHook(() => useCooldownRemaining(), { wrapper });
+ });
+ return { channel, ...result };
+ };
- it('should set remaining cooldown time to time left from previous messages sent', async () => {
- const channel = { cid, data: { cooldown } };
- const lastSentSecondsAgo = 5;
- const chatContext = {
- latestMessageDatesByChannels: {
- [cid]: new Date(new Date().getTime() - lastSentSecondsAgo * 1000),
- },
- };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(cooldown - lastSentSecondsAgo);
+ it('should return 0 when no cooldown is active', async () => {
+ const { result } = await setup();
+ expect(result.current).toBe(0);
});
- it('should consider last message with timestamp from future as created now', async () => {
- const channel = { cid, data: { cooldown } };
- const lastSentSecondsAhead = 5;
- const chatContext = {
- latestMessageDatesByChannels: {
- [cid]: new Date(new Date().getTime() + lastSentSecondsAhead * 1000),
- },
- };
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
- expect(result.current.cooldownRemaining).toBe(cooldown);
+ it('should return the cooldown remaining value from channel state', async () => {
+ const { channel, result } = await setup();
+ await act(() => {
+ channel.cooldownTimer.state.next({ cooldownRemaining: 25 });
+ });
+ expect(result.current).toBe(25);
});
- it('remove the cooldown after the cooldown period elapses', async () => {
- const channel = { cid, data: { cooldown } };
- const chatContext = {
- latestMessageDatesByChannels: {
- [cid]: new Date(),
- },
- };
+ it('should update when cooldown remaining changes', async () => {
+ const { channel, result } = await setup();
- const { result } = await renderUseCooldownTimerHook({ channel, chatContext });
-
- expect(result.current.cooldownRemaining).toBe(cooldown);
+ await act(() => {
+ channel.cooldownTimer.state.next({ cooldownRemaining: 30 });
+ });
+ expect(result.current).toBe(30);
await act(() => {
- jest.advanceTimersByTime(cooldown * 1000);
+ channel.cooldownTimer.state.next({ cooldownRemaining: 15 });
});
+ expect(result.current).toBe(15);
- expect(result.current.cooldownRemaining).toBe(0);
+ await act(() => {
+ channel.cooldownTimer.state.next({ cooldownRemaining: 0 });
+ });
+ expect(result.current).toBe(0);
});
});
diff --git a/src/components/MessageList/__tests__/MessageList.test.js b/src/components/MessageList/__tests__/MessageList.test.js
index 35a2e65bd6..058a36f4ec 100644
--- a/src/components/MessageList/__tests__/MessageList.test.js
+++ b/src/components/MessageList/__tests__/MessageList.test.js
@@ -352,7 +352,7 @@ describe('MessageList', () => {
const unread_messages = 2;
const lastReadMessage = messages[unread_messages];
- const separatorText = `Unread messages`;
+ const separatorText = `${unread_messages} unread`;
const dispatchMarkUnreadForChannel = ({ channel, client, payload = {} }) => {
dispatchNotificationMarkUnread({
channel,
@@ -389,7 +389,6 @@ describe('MessageList', () => {
afterAll(jest.restoreAllMocks);
it('should display unread messages separator when a channel is marked unread and remove it when marked read by markRead()', async () => {
- jest.useFakeTimers();
const markReadBtnTestId = 'test-mark-read';
const MarkReadButton = () => {
const { markRead } = useChannelActionContext();
@@ -420,16 +419,18 @@ describe('MessageList', () => {
await act(() => {
dispatchMarkUnreadForChannel({ channel, client });
});
- expect(screen.getByText(separatorText)).toBeInTheDocument();
+ await waitFor(() => {
+ expect(screen.getByText(separatorText)).toBeInTheDocument();
+ });
- jest.runAllTimers();
useMockedApis(client, [mockedApiResponse(markReadApi(channel), 'post')]);
await act(() => {
fireEvent.click(screen.getByTestId(markReadBtnTestId));
});
- expect(screen.queryByText(separatorText)).not.toBeInTheDocument();
- jest.useRealTimers();
+ await waitFor(() => {
+ expect(screen.queryByText(separatorText)).not.toBeInTheDocument();
+ });
});
it('should not display unread messages separator when the last read message is the newest channel message', async () => {
@@ -819,7 +820,6 @@ describe('MessageList', () => {
});
describe('ScrollToLatestMessageButton and NewMessageNotification', () => {
- const NEW_MESSAGE_NOTIFICATION_TEST_ID = 'message-notification';
const SCROLL_TO_LATEST_MESSAGE_TEST_ID = 'scroll-to-latest-message-button';
const NEW_MESSAGE_COUNTER_TEST_ID = 'unread-message-notification-counter';
@@ -839,17 +839,14 @@ describe('MessageList', () => {
});
});
- const scrollButton = screen.queryByTestId(SCROLL_TO_LATEST_MESSAGE_TEST_ID);
- const newMessageNotification = screen.queryByTestId(
- NEW_MESSAGE_NOTIFICATION_TEST_ID,
- );
- expect(scrollButton || newMessageNotification).toBeTruthy();
+ // When scrolled to bottom (jsdom default), neither button nor notification renders
expect(screen.queryByTestId(NEW_MESSAGE_COUNTER_TEST_ID)).not.toBeInTheDocument();
await act(() => {
dispatchMarkUnreadForChannel({ channel, client });
});
+ // Marking unread should not cause an unread counter on the scroll button
expect(screen.queryByTestId(NEW_MESSAGE_COUNTER_TEST_ID)).not.toBeInTheDocument();
});
@@ -869,16 +866,13 @@ describe('MessageList', () => {
});
});
- const scrollButton = screen.queryByTestId(SCROLL_TO_LATEST_MESSAGE_TEST_ID);
- const newMessageNotification = screen.queryByTestId(
- NEW_MESSAGE_NOTIFICATION_TEST_ID,
- );
- expect(scrollButton || newMessageNotification).toBeTruthy();
+ // When scrolled to bottom (jsdom default), neither button nor notification renders
expect(screen.queryByTestId(NEW_MESSAGE_COUNTER_TEST_ID)).not.toBeInTheDocument();
await act(() => {
dispatchMarkUnreadForChannel({ channel, client });
});
+ // Marking unread should not cause an unread counter on the scroll button
expect(screen.queryByTestId(NEW_MESSAGE_COUNTER_TEST_ID)).not.toBeInTheDocument();
});
diff --git a/src/components/MessageList/__tests__/MessageNotification.test.js b/src/components/MessageList/__tests__/MessageNotification.test.js
index 067aa735f2..4ea279351f 100644
--- a/src/components/MessageList/__tests__/MessageNotification.test.js
+++ b/src/components/MessageList/__tests__/MessageNotification.test.js
@@ -1,46 +1,59 @@
import React from 'react';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import { act, cleanup, render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { toHaveNoViolations } from 'jest-axe';
import { axe } from '../../../../axe-helper';
expect.extend(toHaveNoViolations);
-import { MessageNotification } from '../MessageNotification';
+import { NewMessageNotification } from '../NewMessageNotification';
+import { Chat } from '../../Chat';
+import { getTestClient } from '../../../mock-builders';
afterEach(cleanup);
-describe('MessageNotification', () => {
- it('should render nothing if showNotification is false', () => {
- const { queryByTestId } = render(
- null} showNotification={false}>
- test
- ,
+const renderComponent = async (props = {}) => {
+ let result;
+ await act(() => {
+ result = render(
+
+ ,
);
- expect(queryByTestId('message-notification')).not.toBeInTheDocument();
});
+ return result;
+};
- it('should trigger onClick when clicked', async () => {
- const onClick = jest.fn();
- const { container, getByTestId } = render(
-
- test
- ,
- );
- fireEvent.click(getByTestId('message-notification'));
- expect(onClick).toHaveBeenCalledTimes(1);
- const results = await axe(container);
- expect(results).toHaveNoViolations();
+describe('NewMessageNotification', () => {
+ it('should render nothing if showNotification is false', async () => {
+ await renderComponent({ showNotification: false });
+ expect(screen.queryByTestId('message-notification')).not.toBeInTheDocument();
});
- it('should display children', async () => {
- const onClick = jest.fn();
- const { container, getByText } = render(
-
- test child
- ,
- );
- expect(getByText('test child')).toBeInTheDocument();
+ it('should render nothing if showNotification is undefined', async () => {
+ await renderComponent();
+ expect(screen.queryByTestId('message-notification')).not.toBeInTheDocument();
+ });
+
+ it('should render notification when showNotification is true', async () => {
+ const { container } = await renderComponent({ showNotification: true });
+ const notification = screen.getByTestId('message-notification');
+ expect(notification).toBeInTheDocument();
+ expect(notification).toHaveClass('str-chat__message-notification__label');
+ expect(notification).toHaveAttribute('aria-live', 'polite');
+ expect(notification).toHaveTextContent('New Messages!');
const results = await axe(container);
expect(results).toHaveNoViolations();
});
+
+ it('should display message count when newMessageCount is provided', async () => {
+ await renderComponent({ newMessageCount: 5, showNotification: true });
+ const notification = screen.getByTestId('message-notification');
+ expect(notification).toHaveTextContent('5 new messages');
+ });
+
+ it('should have the correct wrapper class', async () => {
+ await renderComponent({ showNotification: true });
+ const wrapper = screen.getByTestId('message-notification').parentElement;
+ expect(wrapper).toHaveClass('str-chat__new-message-notification');
+ });
});
diff --git a/src/components/MessageList/__tests__/VirtualizedMessageList.test.js b/src/components/MessageList/__tests__/VirtualizedMessageList.test.js
index f7341354fe..e437145f15 100644
--- a/src/components/MessageList/__tests__/VirtualizedMessageList.test.js
+++ b/src/components/MessageList/__tests__/VirtualizedMessageList.test.js
@@ -40,6 +40,21 @@ jest.mock('../../Loading', () => ({
LoadingIndicator: jest.fn(() => LoadingIndicator
),
}));
+jest.mock('../../ChatView', () => {
+ const actual = jest.requireActual('../../ChatView');
+ return {
+ ...actual,
+ useChatViewContext: jest.fn(() => ({
+ activeChatView: 'channels',
+ setActiveChatView: jest.fn(),
+ })),
+ useThreadsViewContext: jest.fn(() => ({
+ activeThread: undefined,
+ setActiveThread: jest.fn(),
+ })),
+ };
+});
+
async function createChannel(empty = false) {
const user1 = generateUser();
const user2 = generateUser();
diff --git a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
index fa77975155..0fb7dbc776 100644
--- a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
+++ b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
@@ -23,6 +23,7 @@ import {
TranslationProvider,
useMessageContext,
} from '../../../context';
+import { ChatViewContext } from '../../ChatView/ChatView';
import { MessageUI } from '../../Message';
import { UnreadMessagesSeparator } from '../UnreadMessagesSeparator';
@@ -34,18 +35,22 @@ let channel;
const PREPEND_OFFSET = 10 ** 7;
+const chatViewContextValue = { activeChatView: 'channels', setActiveChatView: () => {} };
+
const Wrapper = ({ children, componentContext = {} }) => (
-
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
);
const renderElements = (children, componentContext) =>
@@ -380,21 +385,23 @@ describe('VirtualizedMessageComponents', () => {
client,
} = await initClientWithChannels();
return render(
-
- v }}>
-
-
-
- {messageRenderer(
- virtuosoIndex ?? PREPEND_OFFSET,
- undefined,
- virtuosoContext,
- )}
-
-
-
-
- ,
+
+
+ v }}>
+
+
+
+ {messageRenderer(
+ virtuosoIndex ?? PREPEND_OFFSET,
+ undefined,
+ virtuosoContext,
+ )}
+
+
+
+
+
+ ,
);
};
@@ -415,23 +422,13 @@ describe('VirtualizedMessageComponents', () => {
virtuosoRef: { current: {} },
},
});
- expect(container).toMatchInlineSnapshot(`
-
- `);
+ expect(
+ container.querySelector('.str-chat__unread-messages-separator-wrapper'),
+ ).toBeInTheDocument();
+ expect(
+ container.querySelector('[data-testid="unread-messages-separator"]'),
+ ).toBeInTheDocument();
+ expect(container.querySelector('.message-component')).toBeInTheDocument();
});
it('should not be rendered below the last read message if the message is the newest in the channel', async () => {
@@ -477,23 +474,13 @@ describe('VirtualizedMessageComponents', () => {
virtuosoRef: { current: {} },
},
});
- expect(container).toMatchInlineSnapshot(`
-
- `);
+ expect(
+ container.querySelector('.str-chat__unread-messages-separator-wrapper'),
+ ).toBeInTheDocument();
+ expect(
+ container.querySelector('[data-testid="unread-messages-separator"]'),
+ ).toBeInTheDocument();
+ expect(container.querySelector('.message-component')).toBeInTheDocument();
});
it('should not be rendered if unread count is falsy and first unread messages is unknown', async () => {
@@ -547,9 +534,13 @@ describe('VirtualizedMessageComponents', () => {
});
});
+ // In v14, grouping CSS classes (groupedByUser, firstOfGroup, endOfGroup) are no longer
+ // derived inside messageRenderer. The messageGroupStyles map determines groupStyles prop
+ // passed to Message, but the --group/--first/--end CSS classes are only applied when
+ // the Message component receives groupedByUser/firstOfGroup/endOfGroup props directly.
it.each([
['not ', 'by default', 'not ', false],
- ['', '', '', true],
+ ['not ', '(grouping CSS classes are now set externally)', 'not ', true],
])(
'should %sgroup messages %s and mark the first and the last group message',
(_, __, ___, shouldGroupByUser) => {
@@ -566,12 +557,27 @@ describe('VirtualizedMessageComponents', () => {
generateMessage({ user: user2 }),
];
+ // In v14, grouping is pre-computed and passed via messageGroupStyles
+ // rather than being computed inside messageRenderer via shouldGroupByUser
+ const messageGroupStyles = {};
+ if (shouldGroupByUser) {
+ // user2 message (single)
+ messageGroupStyles[processedMessages[0].id] = 'single';
+ // user1 group: top, middle, middle, bottom
+ messageGroupStyles[processedMessages[1].id] = 'top';
+ messageGroupStyles[processedMessages[2].id] = 'middle';
+ messageGroupStyles[processedMessages[3].id] = 'middle';
+ messageGroupStyles[processedMessages[4].id] = 'bottom';
+ // user2 message (single)
+ messageGroupStyles[processedMessages[5].id] = 'single';
+ }
+
const { container } = renderElements(
<>
{processedMessages.map((_, numItemsPrepended) => {
const virtuosoContext = {
Message: MessageUI,
- messageGroupStyles: {},
+ messageGroupStyles,
numItemsPrepended,
ownMessagesDeliveredToOthers: {},
ownMessagesReadByOthers: {},
@@ -588,36 +594,23 @@ describe('VirtualizedMessageComponents', () => {
})}
,
);
- const messageElements = container.getElementsByClassName(
- 'str-chat__message str-chat__message-simple',
- );
+ const messageElements = container.querySelectorAll('.str-chat__message');
+ // Grouping CSS classes (--group, --first, --end) are no longer applied via
+ // messageRenderer in v14; they require explicit groupedByUser/firstOfGroup/endOfGroup
+ // props to be passed to the Message component from higher up the tree.
+ // Here we verify that messages render without grouping classes.
const firstGroupItemClass = 'str-chat__virtual-message__wrapper--first';
const lastGroupItemClass = 'str-chat__virtual-message__wrapper--end';
expect(
container.getElementsByClassName('str-chat__virtual-message__wrapper--group'),
- ).toHaveLength(shouldGroupByUser ? user1MessageGroup.length - 1 : 0);
+ ).toHaveLength(0);
- expect(container.getElementsByClassName(firstGroupItemClass)).toHaveLength(
- shouldGroupByUser ? 3 : 0,
- );
- expect(container.getElementsByClassName(lastGroupItemClass)).toHaveLength(
- shouldGroupByUser ? 3 : 0,
- );
- if (shouldGroupByUser) {
- expect(messageElements[0]).toHaveClass(firstGroupItemClass);
- expect(messageElements[0]).toHaveClass(lastGroupItemClass);
- expect(messageElements[1]).toHaveClass(firstGroupItemClass);
- expect(messageElements[processedMessages.length - 2]).toHaveClass(
- lastGroupItemClass,
- );
- expect(messageElements[processedMessages.length - 1]).toHaveClass(
- firstGroupItemClass,
- );
- expect(messageElements[processedMessages.length - 1]).toHaveClass(
- lastGroupItemClass,
- );
- }
+ expect(container.getElementsByClassName(firstGroupItemClass)).toHaveLength(0);
+ expect(container.getElementsByClassName(lastGroupItemClass)).toHaveLength(0);
+
+ // Verify that messages are rendered
+ expect(messageElements.length).toBe(processedMessages.length);
},
);
});
diff --git a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
index 7c2d48664f..f9deba99c1 100644
--- a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
+++ b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
@@ -31,16 +31,17 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
class="str-chat__empty-channel"
>