chore: AudioMessageRecorder mount effect (#35146)

Author: juliajforesti

apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx

@@ -51,6 +51,8 @@ const AudioMessageRecorder = ({ rid, chatContext, isMicrophoneDenied }: AudioMes
 	});
 
 	const handleRecord = useEffectEvent(async () => {
+		chat?.composer?.setRecordingMode(true);
+
 		if (recordingRoomId && recordingRoomId !== rid) {
 			return;
 		}
@@ -105,7 +107,7 @@ const AudioMessageRecorder = ({ rid, chatContext, isMicrophoneDenied }: AudioMes
 	}
 
 	return (
-		<Box display='flex' position='absolute' color='default' pi={4} pb={12}>
+		<Box display='flex' position='absolute' color='default' pi={4} pb={12} role='group' aria-label={t('Audio_recorder')}>
 			{state === 'recording' && (
 				<>
 					<MessageComposerAction icon='circle-cross' title={t('Cancel_recording')} onClick={handleCancelButtonClick} />

apps/meteor/playwright.config.ts

@@ -15,7 +15,7 @@ export default {
 		launchOptions: {
 			// force GPU hardware acceleration
 			// (even in headless mode)
-			args: ['--use-gl=egl', '--use-fake-ui-for-media-stream'],
+			args: ['--use-gl=egl', '--use-fake-ui-for-media-stream', '--use-fake-device-for-media-stream'],
 		},
 		permissions: ['microphone'],
 	},

apps/meteor/tests/e2e/message-composer.spec.ts

@@ -115,4 +115,32 @@ test.describe.serial('message-composer', () => {
 			await expect(poHomeChannel.composerBoxPopup.getByText('rocket.cat')).toBeVisible();
 		});
 	});
+
+	test.describe('audio recorder', () => {
+		test('should open audio recorder', async () => {
+			await poHomeChannel.sidenav.openChat(targetChannel);
+			await poHomeChannel.composerToolbar.getByRole('button', { name: 'Audio message', exact: true }).click();
+
+			await expect(poHomeChannel.audioRecorder).toBeVisible();
+		});
+
+		test('should stop recording when clicking on cancel', async () => {
+			await poHomeChannel.sidenav.openChat(targetChannel);
+			await poHomeChannel.composerToolbar.getByRole('button', { name: 'Audio message', exact: true }).click();
+			await expect(poHomeChannel.audioRecorder).toBeVisible();
+
+			await poHomeChannel.audioRecorder.getByRole('button', { name: 'Cancel recording', exact: true }).click();
+			await expect(poHomeChannel.audioRecorder).not.toBeVisible();
+		});
+
+		test('should open file modal when clicking on "Finish recording"', async ({ page }) => {
+			await poHomeChannel.sidenav.openChat(targetChannel);
+			await poHomeChannel.composerToolbar.getByRole('button', { name: 'Audio message', exact: true }).click();
+			await expect(poHomeChannel.audioRecorder).toBeVisible();
+
+			await page.waitForTimeout(1000);
+			await poHomeChannel.audioRecorder.getByRole('button', { name: 'Finish Recording', exact: true }).click();
+			await expect(poHomeChannel.content.fileUploadModal).toBeVisible();
+		});
+	});
 });

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -112,6 +112,10 @@ export class HomeContent {
 		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--secondary');
 	}
 
+	get fileUploadModal(): Locator {
+		return this.page.getByRole('dialog', { name: 'File Upload' });
+	}
+
 	get modalFilePreview(): Locator {
 		return this.page.locator(
 			'//div[@id="modal-root"]//header//following-sibling::div[1]//div//div//img | //div[@id="modal-root"]//header//following-sibling::div[1]//div//div//div//i',

apps/meteor/tests/e2e/page-objects/home-channel.ts

@@ -116,4 +116,8 @@ export class HomeChannel {
 	get btnNotPossibleDecodeKey(): Locator {
 		return this.page.getByRole('button', { name: "Wasn't possible to decode your encryption key to be imported." });
 	}
+
+	get audioRecorder(): Locator {
+		return this.page.getByRole('group', { name: 'Audio recorder', exact: true });
+	}
 }

packages/i18n/src/locales/en.i18n.json

@@ -746,6 +746,7 @@
   "Audio_Notifications_Default_Alert": "Audio Notifications Default Alert",
   "Audio_Notifications_Value": "Default Message Notification Audio",
   "Audio_record": "Audio record",
+  "Audio_recorder": "Audio recorder",
   "Audios": "Audios",
   "Audit": "Audit",
   "Auditing": "Auditing",