test: Display upsell modal for voice calls on community edition.

apps/meteor/client/views/room/contextualBar/TeamsVoipConfigModal.tsx

@@ -16,6 +16,7 @@ import {
 	ModalFooterControllers,
 } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
+import { useId } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { useExternalLink } from '../../../hooks/useExternalLink';
@@ -31,6 +32,7 @@ type TeamsVoipConfigModalProps = {
 const TeamsVoipConfigModal = ({ onClose, onConfirm, isAdmin, hasModule }: TeamsVoipConfigModalProps): ReactElement => {
 	const { t } = useTranslation();
 	const openExternalLink = useExternalLink();
+	const teamsVoipConfigModalId = useId();
 
 	const getCalloutWarning = () => {
 		if (isAdmin && !hasModule) {
@@ -45,11 +47,11 @@ const TeamsVoipConfigModal = ({ onClose, onConfirm, isAdmin, hasModule }: TeamsV
 	};
 
 	return (
-		<Modal>
+		<Modal aria-labelledby={`${teamsVoipConfigModalId}-title`}>
 			<ModalHeader>
 				<ModalHeaderText>
 					<ModalTagline>{t('VoIP')}</ModalTagline>
-					<ModalTitle>{t('Team_voice_call')}</ModalTitle>
+					<ModalTitle id={`${teamsVoipConfigModalId}-title`}>{t('Team_voice_call')}</ModalTitle>
 				</ModalHeaderText>
 				<ModalClose title={t('Close')} onClick={onClose} />
 			</ModalHeader>

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

@@ -299,6 +299,10 @@ export class HomeContent {
 		return this.page.locator('[data-qa-id="video-message"]');
 	}
 
+	get btnVoiceCall(): Locator {
+		return this.primaryRoomActionsToolbar.getByRole('button', { name: 'Voice call' });
+	}
+
 	get btnRecordAudio(): Locator {
 		return this.page.locator('[data-qa-id="audio-message"]');
 	}
@@ -315,6 +319,14 @@ export class HomeContent {
 		return this.userCard.locator('a');
 	}
 
+	get btnContactInformation(): Locator {
+		return this.page.getByRole('button', { name: 'User Info' });
+	}
+
+	get btnContactInfoVoiceCall(): Locator {
+		return this.page.getByRole('group').getByRole('button', { name: 'Voice call' });
+	}
+
 	get btnContactEdit(): Locator {
 		return this.page.getByRole('dialog').getByRole('button', { name: 'Edit', exact: true });
 	}

apps/meteor/tests/e2e/page-objects/fragments/modal.ts

@@ -13,6 +13,15 @@ export abstract class Modal {
 		return expect(this.root).not.toBeVisible();
 	}
 
+	private get btnClose() {
+		return this.root.getByRole('button', { name: 'Close' });
+	}
+
+	async close() {
+		await this.btnClose.click();
+		await this.waitForDismissal();
+	}
+
 	private get btnSave() {
 		return this.root.getByRole('button', { name: 'Save' });
 	}

apps/meteor/tests/e2e/page-objects/fragments/upsell-modal.ts

@@ -0,0 +1,9 @@
+import type { Page } from '@playwright/test';
+
+import { Modal } from './modal';
+
+export class VoiceCallsUpsellModal extends Modal {
+	constructor(page: Page) {
+		super(page.getByRole('dialog', { name: 'Team voice calls' }));
+	}
+}

apps/meteor/tests/e2e/voice-calls-ce.spec.ts

@@ -0,0 +1,59 @@
+import { IS_EE } from './config/constants';
+import { Users } from './fixtures/userStates';
+import { HomeChannel } from './page-objects';
+import { VoiceCallsUpsellModal } from './page-objects/fragments/upsell-modal';
+import { expect, test } from './utils/test';
+
+test.use({ storageState: Users.user1.state });
+
+test.describe('Voice Calls - Community Edition', () => {
+	test.skip(IS_EE, 'Community Edition Only');
+	let poHomeChannel: HomeChannel;
+	let upsellVoiceCallsModal: VoiceCallsUpsellModal;
+
+	test.beforeEach(async ({ page }) => {
+		poHomeChannel = new HomeChannel(page);
+		upsellVoiceCallsModal = new VoiceCallsUpsellModal(page);
+		await page.goto('/home');
+	});
+
+	test('should see upsell modal when clicked on DM > voice call button', async () => {
+		await test.step('should open direct message with user2', async () => {
+			await poHomeChannel.sidenav.openChat('user2');
+			await expect(poHomeChannel.content.inputMessage).toBeVisible();
+		});
+
+		await test.step('should click voice call from room toolbar and see upsell modal', async () => {
+			await poHomeChannel.content.btnVoiceCall.click();
+			await upsellVoiceCallsModal.waitForDisplay();
+		});
+	});
+
+	test('should see upsell modal when clicked on user info > voice call button', async () => {
+		await test.step('should open direct message with user2', async () => {
+			await poHomeChannel.sidenav.openChat('user2');
+			await expect(poHomeChannel.content.inputMessage).toBeVisible();
+		});
+
+		await test.step('should click voice call from contact information and see upsell modal', async () => {
+			await poHomeChannel.content.btnContactInformation.click();
+			await poHomeChannel.content.btnContactInfoVoiceCall.click();
+			await upsellVoiceCallsModal.waitForDisplay();
+		});
+	});
+
+	test('should see upsell modal when clicked on User menu > New voice call', async () => {
+		await test.step('should open user menu', async () => {
+			await poHomeChannel.sidenav.btnUserProfileMenu.click();
+			await poHomeChannel.sidenav.getUserProfileMenuOption('New voice call').click();
+		});
+
+		await test.step('should see upsell modal', async () => {
+			await upsellVoiceCallsModal.waitForDisplay();
+		});
+
+		await test.step('should close upsell modal', async () => {
+			await upsellVoiceCallsModal.close();
+		});
+	});
+});