diff --git a/.changeset/major-coats-smash.md b/.changeset/major-coats-smash.md new file mode 100644 index 0000000000000..387bc777e041f --- /dev/null +++ b/.changeset/major-coats-smash.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Fixes test button not playing default sound in Notifications Preferences diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx index ca06eb02f41da..618e7fd88997c 100644 --- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx +++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx @@ -84,7 +84,7 @@ const NotificationPreferencesForm = ({ notificationOptions, handlePlaySound }: N optionValue={value} onChange={onChange} > - + )} /> diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.spec.tsx b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.spec.tsx new file mode 100644 index 0000000000000..f4354d3226ccb --- /dev/null +++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.spec.tsx @@ -0,0 +1,83 @@ +import { mockAppRoot } from '@rocket.chat/mock-providers'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import NotificationPreferencesWithData from './NotificationPreferencesWithData'; + +const mockPlay = jest.fn(); +const mockCloseTab = jest.fn(); +const mockUseRoomSubscription = jest.fn(); + +jest.mock('@rocket.chat/ui-contexts', () => ({ + ...jest.requireActual('@rocket.chat/ui-contexts'), + useCustomSound: () => ({ play: mockPlay, list: [] }), + useRoomToolbox: () => ({ closeTab: mockCloseTab }), + useToastMessageDispatch: () => jest.fn(), +})); + +jest.mock('../../contexts/RoomContext', () => ({ + useRoom: () => ({ _id: 'GENERAL' }), + useRoomSubscription: () => mockUseRoomSubscription(), +})); + +jest.mock('../../../../hooks/useEndpointMutation', () => ({ + useEndpointMutation: () => ({ mutateAsync: jest.fn() }), +})); + +const appRoot = (userPreferences?: Record) => + mockAppRoot() + .withUserPreference('newMessageNotification', userPreferences?.newMessageNotification ?? 'chime') + .build(); + +beforeEach(() => { + mockPlay.mockClear(); + mockUseRoomSubscription.mockReturnValue({ + disableNotifications: false, + muteGroupMentions: false, + hideUnreadStatus: false, + hideMentionStatus: false, + audioNotificationValue: undefined, // desktopSound defaults to 'default' + }); +}); + +describe('NotificationPreferencesWithData - handlePlaySound', () => { + it('plays the user newMessageNotification preference when desktopSound is "default"', async () => { + render(, { + wrapper: appRoot({ newMessageNotification: 'chime' }), + }); + + await userEvent.click(screen.getByRole('button', { name: 'Play' })); + + expect(mockPlay).toHaveBeenCalledWith('chime'); + expect(mockPlay).not.toHaveBeenCalledWith('default'); + }); + + it('plays the user preference sound even when it is not the default chime', async () => { + render(, { + wrapper: appRoot({ newMessageNotification: 'ringtone' }), + }); + + await userEvent.click(screen.getByRole('button', { name: 'Play' })); + + expect(mockPlay).toHaveBeenCalledWith('ringtone'); + }); + + it('plays the specific sound directly when desktopSound is not "default"', async () => { + mockUseRoomSubscription.mockReturnValue({ + disableNotifications: false, + muteGroupMentions: false, + hideUnreadStatus: false, + hideMentionStatus: false, + audioNotificationValue: 'door', + }); + + render(, { + wrapper: appRoot({ newMessageNotification: 'chime' }), + }); + + await userEvent.click(screen.getByRole('button', { name: 'Play' })); + + expect(mockPlay).toHaveBeenCalledWith('door'); + expect(mockPlay).not.toHaveBeenCalledWith('chime'); + }); +}); diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.tsx b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.tsx index 171c7906f5245..a478bbb294aa3 100644 --- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.tsx +++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.tsx @@ -1,5 +1,5 @@ import type { SelectOption } from '@rocket.chat/fuselage'; -import { useCustomSound, useToastMessageDispatch, useRoomToolbox } from '@rocket.chat/ui-contexts'; +import { useCustomSound, useToastMessageDispatch, useRoomToolbox, useUserPreference } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { memo } from 'react'; import { useForm, FormProvider } from 'react-hook-form'; @@ -16,6 +16,7 @@ const NotificationPreferencesWithData = (): ReactElement => { const { closeTab } = useRoomToolbox(); const customSound = useCustomSound(); const dispatchToastMessage = useToastMessageDispatch(); + const newMessageNotificationPreference = useUserPreference('newMessageNotification', 'chime') as string; const { mutateAsync: saveSettings } = useEndpointMutation('POST', '/v1/rooms.saveNotification', { onSuccess: () => { @@ -58,7 +59,7 @@ const NotificationPreferencesWithData = (): ReactElement => { const { desktopSound } = methods.watch(); const handlePlaySound = (): void => { - customSound.play(desktopSound); + customSound.play(desktopSound === 'default' ? newMessageNotificationPreference : desktopSound); }; const handleSave = methods.handleSubmit(