From 5754dcfd8f054a46688fcac15cc1b0b29ca8deff Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Wed, 1 Jun 2022 18:15:44 +0200
Subject: [PATCH] openvidu-components: Updated e2e test

---
 .../e2e/angular.test.ts                       | 193 ++++++++++-
 .../e2e/selenium.conf.ts                      |   2 +-
 .../e2e/webcomponent-app/app.js               |  86 ++++-
 .../e2e/webcomponent-app/index.html           |   4 +-
 .../e2e/webcomponent.test.ts                  | 317 +++++++++++++++++-
 .../app/testing-app/testing.component.html    |  19 +-
 .../src/app/testing-app/testing.component.ts  |  16 +
 7 files changed, 617 insertions(+), 20 deletions(-)

diff --git a/openvidu-components-angular/e2e/angular.test.ts b/openvidu-components-angular/e2e/angular.test.ts
index fa4f34f8..7a07118d 100644
--- a/openvidu-components-angular/e2e/angular.test.ts
+++ b/openvidu-components-angular/e2e/angular.test.ts
@@ -317,6 +317,41 @@ describe('Testing PANEL STRUCTURAL DIRECTIVES', () => {
 		expect(await element.isDisplayed()).to.be.true;
 	});
 
+	it('should inject the CUSTOM PANEL with ACTIVITIES PANEL only', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovPanel-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('ovActivitiesPanel-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		// Check if toolbar panel buttons are present
+		element = await browser.wait(until.elementLocated(By.id('menu-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Click on button for opening chat panel
+		element = await browser.wait(until.elementLocated(By.id('activities-panel-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		// Check if default activities panel is not present
+		element = await browser.findElements(By.id('default-activities-panel'));
+		expect(element.length).equals(0);
+
+		// Check if custom chat panel is not present
+		element = await browser.findElements(By.id('custom-activities-panel'));
+		expect(element.length).equals(1);
+		element = await browser.wait(until.elementLocated(By.id('activities-panel-title')), TIMEOUT);
+		await browser.wait(until.elementTextMatches(element, /CUSTOM ACTIVITIES PANEL/), TIMEOUT);
+		expect(await element.getAttribute("innerText")).equals('CUSTOM ACTIVITIES PANEL');
+	});
+
 	it('should inject the CUSTOM PANEL with PARTICIPANTS PANEL only and without children', async () => {
 		let element;
 		await browser.get(`${url}`);
@@ -480,6 +515,35 @@ describe('Testing PANEL STRUCTURAL DIRECTIVES', () => {
 	});
 
 
+	it('should inject an ACTIVITIES PANEL only', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovActivitiesPanel-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		// Check if toolbar panel buttons are present
+		element = await browser.wait(until.elementLocated(By.id('menu-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Click on button for opening additional panel
+		const panelBtn = await browser.wait(until.elementLocated(By.id('activities-panel-btn')), TIMEOUT);
+		expect(await panelBtn.isDisplayed()).to.be.true;
+		await panelBtn.click();
+
+		// Check if default panel is not present
+		element = await browser.findElements(By.id('default-activities-panel'));
+		expect(element.length).equals(0);
+
+		// Check if custom panel is present
+		element = await browser.findElements(By.id('custom-activities-panel'));
+		expect(element.length).equals(1);
+	});
+
 	it('should inject an ADDITIONAL PANEL only', async () => {
 		let element;
 		await browser.get(`${url}`);
@@ -558,7 +622,7 @@ describe('Testing PANEL STRUCTURAL DIRECTIVES', () => {
 		element = await browser.findElements(By.id('default-chat-panel'));
 		expect(element.length).equals(0);
 
-		// Check if custom chat panel is not present
+		// Check if custom chat panel is present
 		element = await browser.wait(until.elementLocated(By.id('custom-chat-panel')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 	});
@@ -962,6 +1026,31 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
 		expect(element.length).equals(0);
 	});
 
+	it('should HIDE the ACTIVITIES PANEL BUTTON', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('activitiesPanelButton-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.wait(until.elementLocated(By.id('menu-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Check if participants button does not exist
+		element = await browser.findElements(By.id('activities-panel-btn'));
+		expect(element.length).equals(0);
+	});
+
 	it('should HIDE the DISPLAY LOGO', async () => {
 		let element;
 		await browser.get(`${url}`);
@@ -1030,6 +1119,13 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
 		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 
+		// Open more options menu
+		element = await browser.wait(until.elementLocated(By.id('more-options-btn')), TIMEOUT);
+		await element.click();
+
+		// Checking if fullscreen button is not present
+		element = await browser.wait(until.elementLocated(By.className('mat-menu-content')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
 		element = await browser.findElements(By.id('fullscreen-btn'));
 		expect(element.length).equals(0);
 	});
@@ -1078,6 +1174,8 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
 		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 
+
+
 		element = await browser.findElements(By.id('screenshare-btn'));
 		expect(element.length).equals(0);
 	});
@@ -1344,13 +1442,104 @@ describe('Testing EVENTS', () => {
 		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 
-		// Clicking to leave button
+		// Open more options menu
+		element = await browser.wait(until.elementLocated(By.id('more-options-btn')), TIMEOUT);
+		await element.click();
+
+		// Checking if fullscreen button is not present
+		element = await browser.wait(until.elementLocated(By.className('mat-menu-content')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
 		const fullscreenButton = await browser.findElement(By.id('fullscreen-btn'));
 		expect(await fullscreenButton.isDisplayed()).to.be.true;
 		await fullscreenButton.click();
 
+
 		// Checking if onFullscreenButtonClicked has been received
 		element = await browser.wait(until.elementLocated(By.id('onFullscreenButtonClicked')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 	});
+
+	it('should receive the onParticipantsPanelButtonClicked event', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Clicking to participants button
+		const participantsButton = await browser.findElement(By.id('participants-panel-btn'));
+		expect(await participantsButton.isDisplayed()).to.be.true;
+		await participantsButton.click();
+
+		// Checking if onParticipantsPanelButtonClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onParticipantsPanelButtonClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+	});
+
+	it('should receive the onChatPanelButtonClicked event', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Clicking to chat button
+		const chatButton = await browser.findElement(By.id('chat-panel-btn'));
+		expect(await chatButton.isDisplayed()).to.be.true;
+		await chatButton.click();
+
+		// Checking if onChatPanelButtonClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onChatPanelButtonClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+	});
+
+	it('should receive the onActivitiesPanelButtonClicked event', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('apply-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Clicking to activities button
+		const activitiesButton = await browser.findElement(By.id('activities-panel-btn'));
+		expect(await activitiesButton.isDisplayed()).to.be.true;
+		await activitiesButton.click();
+
+		// Checking if onActivitiesPanelButtonClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onActivitiesPanelButtonClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+	});
 });
diff --git a/openvidu-components-angular/e2e/selenium.conf.ts b/openvidu-components-angular/e2e/selenium.conf.ts
index ea9d196a..ece06491 100644
--- a/openvidu-components-angular/e2e/selenium.conf.ts
+++ b/openvidu-components-angular/e2e/selenium.conf.ts
@@ -28,7 +28,7 @@ export const WebComponentConfig: BrowserConfig = {
 };
 
 export const AngularConfig: BrowserConfig = {
-	appUrl: 'http://localhost:4200/#/testing',
+	appUrl: 'https://localhost:4200/#/testing',
 	seleniumAddress: LAUNCH_MODE === 'CI' ? 'http://localhost:4444/wd/hub' : '',
 	browserName: 'Chrome',
 	browserCapabilities: Capabilities.chrome().set('acceptInsecureCerts', true),
diff --git a/openvidu-components-angular/e2e/webcomponent-app/app.js b/openvidu-components-angular/e2e/webcomponent-app/app.js
index 4b190de1..240c4073 100644
--- a/openvidu-components-angular/e2e/webcomponent-app/app.js
+++ b/openvidu-components-angular/e2e/webcomponent-app/app.js
@@ -6,6 +6,8 @@ var AUDIO_MUTED;
 
 var SCREENSHARE_BUTTON;
 var FULLSCREEN_BUTTON;
+var ACTIVITIES_PANEL_BUTTON;
+var RECORDING_BUTTON;
 var CHAT_PANEL_BUTTON;
 var DISPLAY_LOGO;
 var DISPLAY_SESSION_NAME;
@@ -15,6 +17,8 @@ var SETTINGS_BUTTON;
 var LEAVE_BUTTON;
 var PARTICIPANT_MUTE_BUTTON;
 var PARTICIPANTS_PANEL_BUTTON;
+var ACTIVITIES_RECORDING_ACTIVITY;
+var RECORDING_ERROR;
 
 var SESSION_NAME;
 
@@ -27,13 +31,18 @@ $(document).ready(() => {
     PARTICIPANT_NAME = url.searchParams.get("participantName") || 'TEST_USER';
     PREJOIN = url.searchParams.get("prejoin") === null ? true : url.searchParams.get("prejoin") === 'true';
     VIDEO_MUTED = url.searchParams.get("videoMuted") === null ? false : url.searchParams.get("videoMuted")  === 'true';
-    console.log("video muted", url.searchParams.get("videoMuted"));
     AUDIO_MUTED = url.searchParams.get("audioMuted") === null ? false : url.searchParams.get("audioMuted") === 'true';
 	SCREENSHARE_BUTTON = url.searchParams.get("screenshareBtn") === null ? true : url.searchParams.get("screenshareBtn") === 'true';
+    RECORDING_BUTTON = url.searchParams.get("recordingBtn") === null ? true : url.searchParams.get("recordingBtn") === 'true';
 	FULLSCREEN_BUTTON = url.searchParams.get("fullscreenBtn") === null ? true : url.searchParams.get("fullscreenBtn") === 'true';
     LEAVE_BUTTON = url.searchParams.get("leaveBtn") === null ? true : url.searchParams.get("leaveBtn") === 'true';
+    ACTIVITIES_PANEL_BUTTON = url.searchParams.get("activitiesPanelBtn") === null ? true : url.searchParams.get("activitiesPanelBtn") === 'true';
 	CHAT_PANEL_BUTTON = url.searchParams.get("chatPanelBtn") === null ? true : url.searchParams.get("chatPanelBtn") === 'true';
     PARTICIPANTS_PANEL_BUTTON = url.searchParams.get("participantsPanelBtn") === null ? true : url.searchParams.get("participantsPanelBtn") === 'true';
+    ACTIVITIES_RECORDING_ACTIVITY = url.searchParams.get("activitiesPanelRecordingActivity") === null ? true : url.searchParams.get("activitiesPanelRecordingActivity") === 'true';
+    if(url.searchParams.get("recordingError") !== null) {
+        RECORDING_ERROR = url.searchParams.get("recordingError");
+    }
 
 	DISPLAY_LOGO = url.searchParams.get("displayLogo") === null ? true : url.searchParams.get("displayLogo") === 'true';
 	DISPLAY_SESSION_NAME = url.searchParams.get("displaySessionName") === null ? true : url.searchParams.get("displaySessionName") === 'true';
@@ -54,8 +63,33 @@ $(document).ready(() => {
     webComponent.addEventListener('onToolbarScreenshareButtonClicked', (event) => appendElement('onToolbarScreenshareButtonClicked'));
     webComponent.addEventListener('onToolbarParticipantsPanelButtonClicked', (event) => appendElement('onToolbarParticipantsPanelButtonClicked'));
     webComponent.addEventListener('onToolbarChatPanelButtonClicked', (event) => appendElement('onToolbarChatPanelButtonClicked'));
+    webComponent.addEventListener('onToolbarActivitiesPanelButtonClicked', (event) => appendElement('onToolbarActivitiesPanelButtonClicked'));
     webComponent.addEventListener('onToolbarFullscreenButtonClicked', (event) => appendElement('onToolbarFullscreenButtonClicked'));
 
+    webComponent.addEventListener('onToolbarStartRecordingClicked', async (event) => {
+        appendElement('onToolbarStartRecordingClicked');
+        RECORDING_ID = await startRecording(SESSION_NAME);
+
+    });
+    webComponent.addEventListener('onToolbarStopRecordingClicked', async (event) => {
+        appendElement('onToolbarStopRecordingClicked');
+        await stopRecording(RECORDING_ID);
+    });
+
+    webComponent.addEventListener('onActivitiesPanelStartRecordingClicked', async (event) => {
+        appendElement('onActivitiesPanelStartRecordingClicked');
+        RECORDING_ID = await startRecording(SESSION_NAME);
+    });
+
+    webComponent.addEventListener('onActivitiesPanelStopRecordingClicked', async (event) => {
+        appendElement('onActivitiesPanelStopRecordingClicked');
+        await stopRecording(RECORDING_ID);
+    });
+
+    webComponent.addEventListener('onActivitiesPanelDownloadRecordingClicked', (event) => appendElement('onActivitiesPanelDownloadRecordingClicked'));
+    webComponent.addEventListener('onActivitiesPanelDeleteRecordingClicked', (event) => appendElement('onActivitiesPanelDeleteRecordingClicked'));
+    webComponent.addEventListener('onActivitiesPanelPlayRecordingClicked', (event) => appendElement('onActivitiesPanelPlayRecordingClicked'));
+
     webComponent.addEventListener('onSessionCreated', (event) => {
         var session = event.detail;
         appendElement('onSessionCreated');
@@ -109,6 +143,8 @@ async function joinSession(sessionName, participantName) {
 
     webComponent.toolbarFullscreenButton = FULLSCREEN_BUTTON;
 	webComponent.toolbarLeaveButton = LEAVE_BUTTON;
+    webComponent.toolbarRecordingButton = RECORDING_BUTTON;
+    webComponent.toolbarActivitiesPanelButton = ACTIVITIES_PANEL_BUTTON;
 	webComponent.toolbarChatPanelButton = CHAT_PANEL_BUTTON;
 	webComponent.toolbarParticipantsPanelButton = PARTICIPANTS_PANEL_BUTTON;
 	webComponent.toolbarDisplayLogo = DISPLAY_LOGO;
@@ -118,6 +154,10 @@ async function joinSession(sessionName, participantName) {
 	webComponent.streamSettingsButton = SETTINGS_BUTTON;
 	webComponent.participantPanelItemMuteButton = PARTICIPANT_MUTE_BUTTON;
 
+    webComponent.recordingActivityRecordingsList = [{status: 'ready'}];
+    webComponent.activitiesPanelRecordingActivity = ACTIVITIES_RECORDING_ACTIVITY;
+    webComponent.recordingActivityRecordingError = RECORDING_ERROR;
+
     webComponent.participantName = participantName;
     webComponent.tokens = tokens;
 }
@@ -145,7 +185,7 @@ function createSession(sessionName) { // See https://docs.openvidu.io/en/stable/
     return new Promise((resolve, reject) => {
         $.ajax({
             type: 'POST',
-            url: OPENVIDU_SERVER_URL + '/api/sessions',
+            url: OPENVIDU_SERVER_URL + '/openvidu/api/sessions',
             data: JSON.stringify({ customSessionId: sessionName }),
             headers: {
                 Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
@@ -167,7 +207,7 @@ function createSession(sessionName) { // See https://docs.openvidu.io/en/stable/
                                 '"',
                         )
                     ) {
-                        location.assign(OPENVIDU_SERVER_URL + '/accept-certificate');
+                        location.assign(OPENVIDU_SERVER_URL + '/openvidu/accept-certificate');
                     }
                 }
             },
@@ -180,8 +220,8 @@ function createToken(sessionId) {
     return new Promise((resolve, reject) => {
         $.ajax({
             type: 'POST',
-            url: OPENVIDU_SERVER_URL + '/api/tokens',
-            data: JSON.stringify({ session: sessionId }),
+            url: `${OPENVIDU_SERVER_URL}/openvidu/api/sessions/${sessionId}/connection`,
+            data: JSON.stringify({ session: sessionId, role: 'MODERATOR' }),
             headers: {
                 Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
                 'Content-Type': 'application/json',
@@ -191,3 +231,39 @@ function createToken(sessionId) {
         });
     });
 }
+
+function startRecording(sessionId) {
+    return new Promise((resolve, reject) => {
+        $.ajax({
+            type: 'POST',
+            url: `${OPENVIDU_SERVER_URL}/openvidu/api/recordings/start`,
+            data: JSON.stringify({ session: sessionId }),
+            headers: {
+                Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
+                'Content-Type': 'application/json',
+            },
+            success: (response) => {console.log(response); resolve(response.id)},
+            error: (error) => {
+                reject(error)
+            },
+        });
+    });
+
+}
+
+function stopRecording(recordingId) {
+    return new Promise((resolve, reject) => {
+        $.ajax({
+            type: 'POST',
+            url: `${OPENVIDU_SERVER_URL}/openvidu/api/recordings/stop/${recordingId}`,
+            headers: {
+                Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
+                'Content-Type': 'application/json',
+            },
+            success: (response) => resolve(response),
+            error: (error) => {
+                reject(error)
+            },
+        });
+    });
+}
diff --git a/openvidu-components-angular/e2e/webcomponent-app/index.html b/openvidu-components-angular/e2e/webcomponent-app/index.html
index 56c288ef..511f45b5 100644
--- a/openvidu-components-angular/e2e/webcomponent-app/index.html
+++ b/openvidu-components-angular/e2e/webcomponent-app/index.html
@@ -2,7 +2,6 @@
 <html>
 	<head>
 		<title>openvidu-web-component</title>
-		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 		<script
 			src="https://code.jquery.com/jquery-3.3.1.min.js"
 			integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
@@ -17,11 +16,12 @@
 			:root {
 				--ov-primary-color: #303030;
 				--ov-secondary-color: #3e3f3f;
-				--ov-light-color: #e6e6e6;
 				--ov-tertiary-color: #598eff;
 				--ov-warn-color: #eb5144;
 				--ov-accent-color: #ffae35;
+				--ov-light-color: #e6e6e6;
 
+				--ov-logo-background-color: #3a3d3d;
 				--ov-text-color: #ffffff;
 
 				--ov-panel-text-color: #1d1d1d;
diff --git a/openvidu-components-angular/e2e/webcomponent.test.ts b/openvidu-components-angular/e2e/webcomponent.test.ts
index c810973e..89531a88 100644
--- a/openvidu-components-angular/e2e/webcomponent.test.ts
+++ b/openvidu-components-angular/e2e/webcomponent.test.ts
@@ -61,14 +61,18 @@ describe('Testing API Directives', () => {
 		element = await browser.findElements(By.id('screenshare-btn'));
 		expect(element.length).equals(0);
 
-		// Checking if fullscreen button is not present
-		element = await browser.findElements(By.id('fullscreen-btn'));
+		// Checking if more options button is not present
+		element = await browser.findElements(By.id('more-options-btn'));
 		expect(element.length).equals(0);
 
 		// Checking if participants panel button is not present
 		element = await browser.findElements(By.id('participants-panel-btn'));
 		expect(element.length).equals(0);
 
+		// Checking if activities panel button is not present
+		element = await browser.findElements(By.id('activities-panel-btn'));
+		expect(element.length).equals(0);
+
 		// Checking if logo is not displayed
 		element = await browser.findElements(By.id('branding-logo'));
 		expect(element.length).equals(0);
@@ -235,7 +239,13 @@ describe('Testing API Directives', () => {
 		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 
+		// Open more options menu
+		element = await browser.wait(until.elementLocated(By.id('more-options-btn')), TIMEOUT);
+		await element.click();
+
 		// Checking if fullscreen button is not present
+		element = await browser.wait(until.elementLocated(By.className('mat-menu-content')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
 		element = await browser.findElements(By.id('fullscreen-btn'));
 		expect(element.length).equals(0);
 	});
@@ -255,6 +265,21 @@ describe('Testing API Directives', () => {
 		expect(element.length).equals(0);
 	});
 
+	it('should HIDE the ACTIVITIES PANEL button', async () => {
+		let element;
+		await browser.get(`${url}?prejoin=false&activitiesPanelBtn=false`);
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if activities panel button is not present
+		element = await browser.findElements(By.id('activities-panel-btn'));
+		expect(element.length).equals(0);
+	});
+
 	it('should HIDE the CHAT PANEL button', async () => {
 		let element;
 		await browser.get(`${url}?prejoin=false&chatPanelBtn=false`);
@@ -395,6 +420,63 @@ describe('Testing API Directives', () => {
 		element = await browser.findElements(By.id('mute-btn'));
 		expect(element.length).equals(0);
 	});
+
+	it('should HIDE the RECORDING ACTIVITY in activities panel', async () => {
+		let element;
+		const fixedUrl = `${url}?prejoin=false&activitiesPanelRecordingActivity=false`;
+		await browser.get(fixedUrl);
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present and opening the activities panel
+		element = await browser.wait(until.elementLocated(By.id('menu-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		element = await browser.findElement(By.id('activities-panel-btn'));
+		await element.click();
+
+		// Checking if participatns panel is displayed
+		element = await browser.wait(until.elementLocated(By.id('default-activities-panel')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		await browser.sleep(1000);
+		// Checking if recording activity exists
+		element = await browser.findElements(By.css('ov-recording-activity'));
+		expect(element.length).equals(0);
+	});
+
+	it('should SHOW a RECORDING ERROR in activities panel', async () => {
+		let element;
+		const fixedUrl = `${url}?prejoin=false&recordingError='TEST ERROR'`;
+		await browser.get(fixedUrl);
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present and opening the activities panel
+		element = await browser.wait(until.elementLocated(By.id('menu-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		element = await browser.findElement(By.id('activities-panel-btn'));
+		await element.click();
+
+		// Checking if participatns panel is displayed
+		element = await browser.wait(until.elementLocated(By.id('default-activities-panel')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		await browser.sleep(1000);
+		// Checking if recording activity exists
+		element = await browser.findElements(By.css('ov-recording-activity'));
+		expect(element.length).equals(1);
+
+		element = await browser.findElements(By.className('failed'));
+		expect(element.length).equals(2);
+
+		// Open recording
+		element = await browser.wait(until.elementLocated(By.css('ov-recording-activity')), TIMEOUT);
+		await element.click();
+
+		await browser.sleep(1000);
+		element = await browser.findElements(By.className('recording-error'));
+		expect(element.length).equals(1);
+	});
 });
 
 describe('Testing videoconference EVENTS', () => {
@@ -527,7 +609,12 @@ describe('Testing videoconference EVENTS', () => {
 		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 
-		// Clicking to leave button
+		// Open more options menu
+		element = await browser.wait(until.elementLocated(By.id('more-options-btn')), TIMEOUT);
+		await element.click();
+
+		// Clicking to fullscreen button
+		element = await browser.wait(until.elementLocated(By.className('mat-menu-content')), TIMEOUT);
 		const fullscreenButton = await browser.findElement(By.id('fullscreen-btn'));
 		expect(await fullscreenButton.isDisplayed()).to.be.true;
 		await fullscreenButton.click();
@@ -537,6 +624,205 @@ describe('Testing videoconference EVENTS', () => {
 		expect(await element.isDisplayed()).to.be.true;
 	});
 
+	it('should receive the onToolbarChatPanelButtonClicked event', async () => {
+		let element;
+		await browser.get(`${url}?prejoin=false`);
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Clicking to chat button
+		const chatButton = await browser.findElement(By.id('chat-panel-btn'));
+		expect(await chatButton.isDisplayed()).to.be.true;
+		await chatButton.click();
+
+		// Checking if onToolbarChatPanelButtonClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onToolbarChatPanelButtonClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+	});
+
+	it('should receive the onToolbarParticipantsPanelButtonClicked event', async () => {
+		let element;
+		await browser.get(`${url}?prejoin=false`);
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Clicking to participants button
+		const participantsButton = await browser.findElement(By.id('participants-panel-btn'));
+		expect(await participantsButton.isDisplayed()).to.be.true;
+		await participantsButton.click();
+
+		// Checking if onToolbarParticipantsPanelButtonClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onToolbarParticipantsPanelButtonClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+	});
+
+	it('should receive the onToolbarActivitiesPanelButtonClicked event', async () => {
+		let element;
+		await browser.get(`${url}?prejoin=false`);
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Clicking to activities button
+		const activitiesButton = await browser.findElement(By.id('activities-panel-btn'));
+		expect(await activitiesButton.isDisplayed()).to.be.true;
+		await activitiesButton.click();
+
+		// Checking if onToolbarActivitiesPanelButtonClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onToolbarActivitiesPanelButtonClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+	});
+
+	it('should receive the onToolbarStartRecordingClicked and onToolbarStopRecordingClicked event', async () => {
+		let element;
+		await browser.get(`${url}?prejoin=false`);
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Open more options menu
+		element = await browser.wait(until.elementLocated(By.id('more-options-btn')), TIMEOUT);
+		await element.click();
+
+		// Clicking to recording button
+		element = await browser.wait(until.elementLocated(By.className('mat-menu-content')), TIMEOUT);
+		const recordingButton = await browser.findElement(By.id('recording-btn'));
+		expect(await recordingButton.isDisplayed()).to.be.true;
+		await recordingButton.click();
+
+		element = await browser.wait(until.elementLocated(By.id('recording-tag')), TIMEOUT);
+
+		// Checking if onToolbarStartRecordingClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onToolbarStartRecordingClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Open more options menu
+		element = await browser.wait(until.elementLocated(By.id('more-options-btn')), TIMEOUT);
+		await element.click();
+
+		// Clicking to recording button
+		element = await browser.wait(until.elementLocated(By.className('mat-menu-content')), TIMEOUT);
+		element = await browser.findElement(By.id('recording-btn'));
+		expect(await recordingButton.isDisplayed()).to.be.true;
+		await recordingButton.click();
+
+		// Checking if onToolbarStopRecordingClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onToolbarStopRecordingClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+	});
+
+	it('should receive the onActivitiesPanelStartRecordingClicked and onActivitiesPanelStopRecordingClicked event', async () => {
+		let element;
+		await browser.get(`${url}?prejoin=false`);
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Open activities panel
+		element = await browser.wait(until.elementLocated(By.id('activities-panel-btn')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		await browser.sleep(1000);
+
+		// Open recording
+		element = await browser.wait(until.elementLocated(By.css('ov-recording-activity')), TIMEOUT);
+		await element.click();
+
+		await browser.sleep(1000);
+
+		// Clicking to recording button
+		element = await browser.wait(until.elementLocated(By.id('start-recording-btn')), TIMEOUT);
+		await element.click();
+
+		// Wait until recording ready
+		element = await browser.wait(until.elementLocated(By.id('recording-tag')), TIMEOUT);
+
+		// Checking if onActivitiesPanelStartRecordingClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onActivitiesPanelStartRecordingClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Clicking to recording button
+		element = await browser.findElement(By.id('stop-recording-btn'));
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+
+		// Checking if onActivitiesPanelStopRecordingClicked has been received
+		element = await browser.wait(until.elementLocated(By.id('onActivitiesPanelStopRecordingClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+	});
+
+	it('should receive the PLAY, DOWNLOAD and DELETE recording events', async () => {
+		let element;
+		await browser.get(`${url}?prejoin=false`);
+
+		element = await browser.wait(until.elementLocated(By.id('session-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Checking if toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Clicking to activities button
+		const activitiesButton = await browser.findElement(By.id('activities-panel-btn'));
+		expect(await activitiesButton.isDisplayed()).to.be.true;
+		await activitiesButton.click();
+
+		await browser.sleep(1000);
+
+		// Open recording
+		element = await browser.wait(until.elementLocated(By.css('ov-recording-activity')), TIMEOUT);
+		await element.click();
+
+		await browser.sleep(1000);
+
+		// Download event
+		element = await browser.findElement(By.id('download-recording-btn'));
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+		element = await browser.wait(until.elementLocated(By.id('onActivitiesPanelDownloadRecordingClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Delete event
+		element = await browser.findElement(By.id('delete-recording-btn'));
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+		element = await browser.findElement(By.id('delete-recording-confirm-btn'));
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+		element = await browser.wait(until.elementLocated(By.id('onActivitiesPanelDeleteRecordingClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Play event
+		element = await browser.findElement(By.id('play-recording-btn'));
+		expect(await element.isDisplayed()).to.be.true;
+		await element.click();
+		element = await browser.wait(until.elementLocated(By.id('onActivitiesPanelPlayRecordingClicked')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+	});
+
 	it('should receive the onSessionCreated event', async () => {
 		let element;
 		await browser.get(`${url}?prejoin=false`);
@@ -861,6 +1147,31 @@ describe('Testing panel toggling', () => {
 		expect(element.length).equals(0);
 	});
 
+	it('should toggle ACTIVITIES panel', async () => {
+		let element;
+		await browser.get(`${url}?prejoin=false`);
+		element = await browser.wait(until.elementLocated(By.id('layout')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Get activities button and click into it
+		const activitiesBtn = await browser.findElement(By.id('activities-panel-btn'));
+		expect(await activitiesBtn.isDisplayed()).to.be.true;
+		await activitiesBtn.click();
+
+		element = await browser.wait(until.elementLocated(By.className('sidenav-menu')), TIMEOUT);
+		element = await browser.findElements(By.id('activities-container'));
+		expect(element.length).equals(1);
+		element = await browser.findElement(By.id('recording-activity'));
+		expect(await element.isDisplayed()).to.be.true;
+
+		await activitiesBtn.click();
+
+		element = await browser.findElements(By.className('activities-container'));
+		expect(element.length).equals(0);
+		element = await browser.findElements(By.id('recording-activity'));
+		expect(element.length).equals(0);
+	});
+
 	it('should switching between PARTICIPANTS and CHAT panels', async () => {
 		let element;
 		await browser.get(`${url}?prejoin=false`);
diff --git a/openvidu-components-angular/src/app/testing-app/testing.component.html b/openvidu-components-angular/src/app/testing-app/testing.component.html
index c5a1fd7d..8cfe1efc 100644
--- a/openvidu-components-angular/src/app/testing-app/testing.component.html
+++ b/openvidu-components-angular/src/app/testing-app/testing.component.html
@@ -67,13 +67,6 @@
 <div id="events"></div>
 
 <ov-videoconference *ngIf="!showDirectives" [tokens]="tokens" [prejoin]="false">
-	<!-- <div *ovParticipantPanelItemElements>
-	<p>EXTRA INFO</p>
-</div> -->
-
-	<!-- <div *ovParticipantPanelItemElements="let participant">
-	<p>N: {{participant?.nickname}}</p>
-</div> -->
 
 	<!-- TOOLBAR -->
 	<ng-template [ngIf]="ovToolbarSelected">
@@ -84,6 +77,7 @@
 			[fullscreenButton]="fullscreenBtn"
 			[leaveButton]="leaveBtn"
 			[participantsPanelButton]="participantsPanelBtn"
+			[activitiesPanelButton]="activitiesPanelBtn"
 			[chatPanelButton]="chatPanelBtn"
 			[displaySessionName]="displaySessionId"
 			[displayLogo]="displayLogo"
@@ -94,6 +88,7 @@
 			(onFullscreenButtonClicked)="appendElement('onFullscreenButtonClicked')"
 			(onParticipantsPanelButtonClicked)="appendElement('onParticipantsPanelButtonClicked')"
 			(onChatPanelButtonClicked)="appendElement('onChatPanelButtonClicked')"
+			(onActivitiesPanelButtonClicked)="appendElement('onActivitiesPanelButtonClicked')"
 		>
 			<ng-template [ngIf]="ovToolbarAdditionalButtonsSelected">
 				<div *ovToolbarAdditionalButtons id="custom-toolbar-additional-buttons">
@@ -153,6 +148,12 @@
 				</div>
 			</ng-template>
 
+			<ng-template [ngIf]="ovActivitiesPanelSelected">
+				<div *ovActivitiesPanel id="custom-activities-panel">
+					<h1 id="activities-panel-title">CUSTOM ACTIVITIES PANEL</h1>
+				</div>
+			</ng-template>
+
 			<ng-template [ngIf]="ovChatPanelSelected">
 				<ov-chat-panel *ovChatPanel id="custom-chat-panel"></ov-chat-panel>
 			</ng-template>
@@ -197,6 +198,10 @@
 		<ov-chat-panel *ovChatPanel id="custom-chat-panel"></ov-chat-panel>
 	</ng-template>
 
+	<ng-template [ngIf]="!ovPanelSelected && ovActivitiesPanelSelected">
+		<ov-activities-panel *ovActivitiesPanel id="custom-activities-panel"></ov-activities-panel>
+	</ng-template>
+
 	<ng-template [ngIf]="!ovPanelSelected && ovParticipantsPanelSelected">
 		<ov-participants-panel *ovParticipantsPanel id="custom-participants-panel">
 			<ng-template [ngIf]="ovParticipantPanelItemSelected">
diff --git a/openvidu-components-angular/src/app/testing-app/testing.component.ts b/openvidu-components-angular/src/app/testing-app/testing.component.ts
index 38af6e5e..d72db77a 100644
--- a/openvidu-components-angular/src/app/testing-app/testing.component.ts
+++ b/openvidu-components-angular/src/app/testing-app/testing.component.ts
@@ -26,6 +26,7 @@ enum StructuralDirectives {
 	PARTICIPANTS_PANEL = 'ovParticipantsPanel',
 	PARTICIPANTS_PANEL_ITEM = 'ovParticipantPanelItem',
 	PARTICIPANTS_PANEL_ITEM_ELEMENTS = 'ovParticipantPanelItemElements',
+	ACTIVITIES_PANEL = 'ovActivitiesPanel',
 	LAYOUT = 'ovLayout',
 	STREAM = 'ovStream'
 }
@@ -40,6 +41,7 @@ export enum AttributeDirective {
 	TOOLBAR_FULLSCREEN = 'fullscreenButton',
 	TOOLBAR_LEAVE = 'leaveButton',
 	TOOLBAR_PARTICIPANTS_PANEL = 'participantsPanelButton',
+	TOOLBAR_ACTIVITIES_PANEL = 'activitiesPanelButton',
 	TOOLBAR_CHAT_PANEL = 'chatPanelButton',
 	TOOLBAR_DISPLAY_SESSION = 'displaySessionName',
 	TOOLBAR_DISPLAY_LOGO = 'displayLogo',
@@ -66,6 +68,7 @@ export class TestingComponent implements OnInit {
 		{
 			name: StructuralDirectives.PANEL,
 			subDirectives: [
+				{ name: StructuralDirectives.ACTIVITIES_PANEL },
 				{ name: StructuralDirectives.ADDITIONAL_PANELS },
 				{ name: StructuralDirectives.CHAT_PANEL },
 				{
@@ -95,6 +98,7 @@ export class TestingComponent implements OnInit {
 				AttributeDirective.TOOLBAR_FULLSCREEN,
 				AttributeDirective.TOOLBAR_LEAVE,
 				AttributeDirective.TOOLBAR_PARTICIPANTS_PANEL,
+				AttributeDirective.TOOLBAR_ACTIVITIES_PANEL,
 				AttributeDirective.TOOLBAR_SCREENSHARE
 			]
 		},
@@ -117,6 +121,7 @@ export class TestingComponent implements OnInit {
 	ovToolbarAdditionalButtonsSelected = false;
 	ovToolbarAdditionalPanelButtonsSelected = false;
 	ovPanelSelected = false;
+	ovActivitiesPanelSelected = false;
 	ovAdditionalPanelsSelected = false;
 	ovChatPanelSelected = false;
 	ovParticipantsPanelSelected = false;
@@ -131,6 +136,7 @@ export class TestingComponent implements OnInit {
 	fullscreenBtn = true;
 	leaveBtn = true;
 	participantsPanelBtn = true;
+	activitiesPanelBtn = true;
 	screenshareBtn = true;
 
 	audioDetection = true;
@@ -194,6 +200,11 @@ export class TestingComponent implements OnInit {
 				this.ovAdditionalPanelsSelected = value;
 				break;
 
+			case StructuralDirectives.ACTIVITIES_PANEL:
+				debugger
+				this.ovActivitiesPanelSelected = value;
+				break;
+
 			case StructuralDirectives.CHAT_PANEL:
 				this.ovChatPanelSelected = value;
 				break;
@@ -221,6 +232,7 @@ export class TestingComponent implements OnInit {
 	}
 
 	updateApiDirective(id: string, value: boolean) {
+		console.log("AAAAAAAAAa", id + value)
 		switch (id) {
 			case AttributeDirective.TOOLBAR_CHAT_PANEL:
 				this.chatPanelBtn = value;
@@ -244,6 +256,10 @@ export class TestingComponent implements OnInit {
 			case AttributeDirective.TOOLBAR_PARTICIPANTS_PANEL:
 				this.participantsPanelBtn = value;
 				break;
+			case AttributeDirective.TOOLBAR_ACTIVITIES_PANEL:
+				this.activitiesPanelBtn = value;
+				console.warn('valor del checkbox', this.activitiesPanelBtn)
+				break;
 			case AttributeDirective.TOOLBAR_SCREENSHARE:
 				this.screenshareBtn = value;
 				break;