frontend: update enhance UI feature preferences tests with new helper functions and openvidu-components-angular to version 3.3.0-dev1

frontend/package-lock.json

@@ -21,7 +21,7 @@
 				"core-js": "^3.38.1",
 				"jwt-decode": "^4.0.0",
 				"livekit-server-sdk": "^2.10.2",
-				"openvidu-components-angular": "^3.2.1",
+				"openvidu-components-angular": "^3.3.0-dev1",
 				"rxjs": "7.8.1",
 				"tslib": "^2.3.0",
 				"unique-names-generator": "^4.7.1",
@@ -13899,9 +13899,9 @@
 			}
 		},
 		"node_modules/openvidu-components-angular": {
-			"version": "3.2.1",
+			"version": "3.3.0-dev1",
-			"resolved": "https://registry.npmjs.org/openvidu-components-angular/-/openvidu-components-angular-3.2.1.tgz",
+			"resolved": "https://registry.npmjs.org/openvidu-components-angular/-/openvidu-components-angular-3.3.0-dev1.tgz",
-			"integrity": "sha512-voQo+CQEOkrEXwge3TQ608x2JfrdBLyBMuRNTYUXJIdx7lylREDYIBjsaUoz+jm9UOepLO7BV1BKcIExnzta0A==",
+			"integrity": "sha512-AlfIXD9CNj2T/4cCU7ae9Iw23FlzGhYBE2HXFlr8MTOWCiLu03jNm8k8wcfe+BdhLKvqKmIBAr4kWvp+clnv5A==",
 			"dependencies": {
 				"tslib": "^2.3.0"
 			},

frontend/package.json

@@ -37,7 +37,7 @@
 		"core-js": "^3.38.1",
 		"jwt-decode": "^4.0.0",
 		"livekit-server-sdk": "^2.10.2",
-		"openvidu-components-angular": "^3.2.1",
+		"openvidu-components-angular": "^3.3.0-dev1",
 		"rxjs": "7.8.1",
 		"tslib": "^2.3.0",
 		"unique-names-generator": "^4.7.1",

frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html

@@ -43,7 +43,9 @@
 			<mat-card class="recordings-card">
 				<div class="recordings-content">
 					<h3>View recordings</h3>
-					<button mat-stroked-button color="accent" (click)="goToRecordings()">Go to recordings</button>
+					<button id="view-recordings-btn" mat-stroked-button color="accent" (click)="goToRecordings()">
+						Go to recordings
+					</button>
 				</div>
 			</mat-card>
 		</div>
@@ -63,8 +65,8 @@
 		[toolbarRecordingButton]="(features$ | async)?.showRecording ?? true"
 		[toolbarBroadcastingButton]="false"
 		[toolbarBackgroundEffectsButton]="(features$ | async)?.showBackgrounds ?? true"
-		[toolbarActivitiesPanelButton]="true"
+		[toolbarActivitiesPanelButton]="(features$ | async)?.showRecording ?? true"
-		[activitiesPanelRecordingActivity]="true"
+		[activitiesPanelRecordingActivity]="(features$ | async)?.showRecording ?? true"
 		[activitiesPanelBroadcastingActivity]="false"
 		(onTokenRequested)="onTokenRequested()"
 		(onParticipantConnected)="onParticipantConnected($event)"

frontend/webcomponent/tests/e2e/ui-feature-preferences.test.ts

@@ -10,8 +10,7 @@ import {
 	leaveRoom,
 	openMoreOptionsMenu,
 	prepareForJoiningRoom,
-	saveScreenshot,
+	updateRoomPreferences,
-	startStopRecording,
 	waitForElementInIframe,
 	waitForVirtualBackgroundToApply
 } from '../helpers/function-helpers';
@@ -22,62 +21,9 @@ let subscribedToAppErrors = false;
 test.describe('UI Feature Preferences Tests', () => {
 	const testAppUrl = 'http://localhost:5080';
 	const testRoomPrefix = 'ui-feature-testing-room';
-	const meetApiUrl = 'http://localhost:6080/meet/internal-api/v1';
 	let participantName: string;
 	let roomId: string;
 
-	// Helper function to login and get admin cookie
-	const loginAsAdmin = async () => {
-		const response = await fetch(`${meetApiUrl}/auth/login`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify({
-				username: 'admin',
-				password: 'admin'
-			})
-		});
-
-		if (!response.ok || response.status !== 200) {
-			console.error('Login failed:', await response.text());
-			throw new Error(`Failed to login: ${response.status}`);
-		}
-
-		const cookies = response.headers.get('set-cookie') || '';
-		if (!cookies) {
-			throw new Error('No cookies received from login');
-		}
-
-		// Extract the access token cookie
-		const accessTokenCookie = cookies.split(';').find((cookie) => cookie.trim().startsWith('OvMeetAccessToken='));
-
-		if (!accessTokenCookie) {
-			throw new Error('Access token cookie not found');
-		}
-
-		return accessTokenCookie.trim();
-	};
-
-	// Helper function to update room preferences via REST API
-	const updateRoomPreferences = async (preferences: any) => {
-		const adminCookie = await loginAsAdmin();
-		const response = await fetch(`${meetApiUrl}/rooms/${roomId}`, {
-			method: 'PUT',
-			headers: {
-				'Content-Type': 'application/json',
-				Cookie: adminCookie
-			},
-			body: JSON.stringify(preferences)
-		});
-
-		if (!response.ok) {
-			throw new Error(`Failed to update room preferences: ${response.status} ${await response.text()}`);
-		}
-
-		return response.json();
-	};
-
 	// ==========================================
 	// SETUP & TEARDOWN
 	// ==========================================
@@ -112,17 +58,17 @@ test.describe('UI Feature Preferences Tests', () => {
 		await tempContext.close();
 	});
 
-	test.afterEach(async ({ page }) => {
-		try {
-			await leaveRoom(page);
-		} catch (error) {}
-	});
-
 	// ==========================================
 	// CHAT FEATURE TESTS
 	// ==========================================
 
 	test.describe('Chat Feature', () => {
+		test.afterEach(async ({ page }) => {
+			try {
+				await leaveRoom(page);
+			} catch (error) {}
+		});
+
 		test('should show chat button when chat is enabled', async ({ page }) => {
 			roomId = await createTestRoom(testRoomPrefix, {
 				chatPreferences: { enabled: true },
@@ -169,7 +115,13 @@ test.describe('UI Feature Preferences Tests', () => {
 	// ==========================================
 
 	test.describe('Recording Feature', () => {
-		test('should show recording button when recording is enabled for moderator', async ({ page }) => {
+		test.afterEach(async ({ page }) => {
+			try {
+				await leaveRoom(page);
+			} catch (error) {}
+		});
+
+		test('should show recording button for moderators', async ({ page }) => {
 			roomId = await createTestRoom(testRoomPrefix, {
 				chatPreferences: { enabled: true },
 				recordingPreferences: {
@@ -199,7 +151,27 @@ test.describe('UI Feature Preferences Tests', () => {
 			await waitForElementInIframe(page, 'ov-recording-activity', { state: 'visible' });
 		});
 
-		test('should hide recording button when recording is disabled', async ({ page }) => {
+		test('should not show recording button for publisher', async ({ page }) => {
+			// Ensure recording is enabled but only for moderators
+			roomId = await createTestRoom(testRoomPrefix, {
+				chatPreferences: { enabled: true },
+				recordingPreferences: {
+					enabled: true,
+					allowAccessTo: MeetRecordingAccess.ADMIN_MODERATOR
+				},
+				virtualBackgroundPreferences: { enabled: true }
+			});
+
+			await page.reload();
+			await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
+			await joinRoomAs('publisher', participantName, page);
+
+			// Check that recording button is not visible for publisher
+			const recordingButton = page.frameLocator('openvidu-meet >>> iframe').locator('#recording-btn');
+			await expect(recordingButton).toBeHidden();
+		});
+
+		test('should not show recording button for moderators when recording is disabled', async ({ page }) => {
 			// Disable recording via API
 			roomId = await createTestRoom(testRoomPrefix, {
 				chatPreferences: { enabled: true },
@@ -223,26 +195,6 @@ test.describe('UI Feature Preferences Tests', () => {
 				state: 'hidden'
 			});
 		});
-
-		test('should not show recording button for publisher when recording is enabled', async ({ page }) => {
-			// Ensure recording is enabled but only for moderators
-			roomId = await createTestRoom(testRoomPrefix, {
-				chatPreferences: { enabled: true },
-				recordingPreferences: {
-					enabled: true,
-					allowAccessTo: MeetRecordingAccess.ADMIN_MODERATOR
-				},
-				virtualBackgroundPreferences: { enabled: true }
-			});
-
-			await page.reload();
-			await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
-			await joinRoomAs('publisher', participantName, page);
-
-			// Check that recording button is not visible for publisher
-			const recordingButton = page.frameLocator('openvidu-meet >>> iframe').locator('#recording-btn');
-			await expect(recordingButton).toBeHidden();
-		});
 	});
 
 	// ==========================================
@@ -250,6 +202,11 @@ test.describe('UI Feature Preferences Tests', () => {
 	// ==========================================
 
 	test.describe('Virtual Background Feature', () => {
+		test.afterEach(async ({ page }) => {
+			try {
+				await leaveRoom(page);
+			} catch (error) {}
+		});
 		test('should show virtual background button when enabled', async ({ page }) => {
 			// Ensure virtual backgrounds are enabled
 			roomId = await createTestRoom(testRoomPrefix, {
@@ -320,7 +277,7 @@ test.describe('UI Feature Preferences Tests', () => {
 			await waitForVirtualBackgroundToApply(page);
 
 			// Now disable virtual backgrounds
-			const { preferences: updatedPreferences } = await updateRoomPreferences({
+			const { preferences: updatedPreferences } = await updateRoomPreferences(roomId, {
 				chatPreferences: { enabled: true },
 				recordingPreferences: {
 					enabled: true,

frontend/webcomponent/tests/helpers/function-helpers.ts

@@ -125,6 +125,58 @@ export const createTestRoom = async (
 	return room.roomId;
 };
 
+// Helper function to update room preferences via REST API
+export const updateRoomPreferences = async (roomId: string, preferences: any) => {
+	const adminCookie = await loginAsAdmin();
+	const response = await fetch(`http://localhost:6080/meet/internal-api/v1/rooms/${roomId}`, {
+		method: 'PUT',
+		headers: {
+			'Content-Type': 'application/json',
+			Cookie: adminCookie
+		},
+		body: JSON.stringify(preferences)
+	});
+
+	if (!response.ok) {
+		throw new Error(`Failed to update room preferences: ${response.status} ${await response.text()}`);
+	}
+
+	return response.json();
+};
+
+// Helper function to login and get admin cookie
+const loginAsAdmin = async () => {
+	const response = await fetch(`http://localhost:6080/meet/internal-api/v1/auth/login`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({
+			username: 'admin',
+			password: 'admin'
+		})
+	});
+
+	if (!response.ok || response.status !== 200) {
+		console.error('Login failed:', await response.text());
+		throw new Error(`Failed to login: ${response.status}`);
+	}
+
+	const cookies = response.headers.get('set-cookie') || '';
+	if (!cookies) {
+		throw new Error('No cookies received from login');
+	}
+
+	// Extract the access token cookie
+	const accessTokenCookie = cookies.split(';').find((cookie) => cookie.trim().startsWith('OvMeetAccessToken='));
+
+	if (!accessTokenCookie) {
+		throw new Error('Access token cookie not found');
+	}
+
+	return accessTokenCookie.trim();
+};
+
 // Helper function to delete a room
 export const deleteTestRoom = async (roomIdToDelete: string) => {
 	await fetch(`http://localhost:6080/meet/api/v1/rooms/${roomIdToDelete}`, {