fix: test button not playing default sound in notification preferences (#40335)

Author: nazabucciarelli

.changeset/major-coats-smash.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes test button not playing default sound in Notifications Preferences

apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx

@@ -84,7 +84,7 @@ const NotificationPreferencesForm = ({ notificationOptions, handlePlaySound }: N
 									optionValue={value}
 									onChange={onChange}
 								>
-									<IconButton icon='play' mis={4} onClick={handlePlaySound} />
+									<IconButton icon='play' mis={4} onClick={handlePlaySound} aria-label={t('Play')} />
 								</NotificationPreference>
 							)}
 						/>

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<string, unknown>) =>
+	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(<NotificationPreferencesWithData />, {
+			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(<NotificationPreferencesWithData />, {
+			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(<NotificationPreferencesWithData />, {
+			wrapper: appRoot({ newMessageNotification: 'chime' }),
+		});
+
+		await userEvent.click(screen.getByRole('button', { name: 'Play' }));
+
+		expect(mockPlay).toHaveBeenCalledWith('door');
+		expect(mockPlay).not.toHaveBeenCalledWith('chime');
+	});
+});

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<string>('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(