ov-components: add panels E2E test suite

.github/workflows/openvidu-components-angular-tests.yml

@@ -286,9 +286,9 @@ jobs:
         if: always()
         uses: ./.github/actions/cleanup
 
-  webcomponent_e2e_panels:
+  e2e_panels:
     needs: test_setup
-    name: Webcomponent panels
+    name: Panels E2E
     if: false
     runs-on: ubuntu-latest
     steps:
@@ -310,26 +310,12 @@ jobs:
         uses: ./.github/actions/setup-local-deployment
       - name: Setup OpenVidu Call Backend
         uses: ./.github/actions/setup-openvidu-call-backend
-      - name: Install dependencies
+      - name: Build and Serve openvidu-components-angular Testapp
-        run: |
+        uses: ./.github/actions/build-and-serve-components-testapp
-          cd openvidu-components-angular
-          npm install
-      - name: Build openvidu-angular
-        run: npm run lib:build --prefix openvidu-components-angular
-      - name: Build openvidu-webcomponent
-        run: npm run webcomponent:testing-build --prefix openvidu-components-angular
-      - name: Serve Webcomponent Testapp
-        run: npm run webcomponent:serve-testapp --prefix openvidu-components-angular &
-      - name: Wait for openvidu-components-angular Testapp
-        run: |
-            until curl -s -f -o /dev/null http://localhost:8080; do
-              echo "Waiting for openvidu-components-angular Testapp to be ready..."
-              sleep 5
-            done
       - name: Run Webcomponent E2E
         env:
           LAUNCH_MODE: CI
-        run: npm run e2e:webcomponent-panels --prefix openvidu-components-angular
+        run: npm run e2e:lib-panels --prefix openvidu-components-angular
       - name: Cleanup
         if: always()
         uses: ./.github/actions/cleanup

openvidu-components-angular/e2e/panels.test.ts

@@ -1,20 +1,19 @@
-import { Builder, Key, WebDriver } from 'selenium-webdriver';
+import { Builder, WebDriver } from 'selenium-webdriver';
-import { OPENVIDU_CALL_SERVER } from '../config';
+import { TestAppConfig } from './selenium.conf';
-import { getBrowserOptionsWithoutDevices, WebComponentConfig } from '../selenium.conf';
+import { OpenViduComponentsPO } from './utils.po.test';
-import { OpenViduComponentsPO } from '../utils.po.test';
 
-const url = `${WebComponentConfig.appUrl}?OV_URL=${OPENVIDU_CALL_SERVER}`;
+const url = TestAppConfig.appUrl;
 
-describe('Testing panels', () => {
+describe('Panels: UI Navigation and Section Switching', () => {
 	let browser: WebDriver;
 	let utils: OpenViduComponentsPO;
 
 	async function createChromeBrowser(): Promise<WebDriver> {
 		return await new Builder()
-			.forBrowser(WebComponentConfig.browserName)
+			.forBrowser(TestAppConfig.browserName)
-			.withCapabilities(WebComponentConfig.browserCapabilities)
+			.withCapabilities(TestAppConfig.browserCapabilities)
-			.setChromeOptions(WebComponentConfig.browserOptions)
+			.setChromeOptions(TestAppConfig.browserOptions)
-			.usingServer(WebComponentConfig.seleniumAddress)
+			.usingServer(TestAppConfig.seleniumAddress)
 			.build();
 	}
 
@@ -24,6 +23,9 @@ describe('Testing panels', () => {
 	});
 
 	afterEach(async () => {
+		try {
+			await utils.leaveRoom();
+		} catch (error) {}
 		await browser.quit();
 	});
 
@@ -61,164 +63,104 @@ describe('Testing panels', () => {
 	// 	expect(await utils.isPresent('#background-effects-container')).toBeFalse();
 	// });
 
-	it('should toggle CHAT panel', async () => {
+	it('should open and close the CHAT panel and verify its content', async () => {
 		await browser.get(`${url}&prejoin=false`);
-
 		await utils.checkLayoutPresent();
-
 		const chatButton = await utils.waitForElement('#chat-panel-btn');
 		await chatButton.click();
-
 		await utils.waitForElement('.sidenav-menu');
 		await utils.waitForElement('.input-container');
 		expect(await utils.isPresent('.input-container')).toBeTrue();
-
 		await utils.waitForElement('.messages-container');
 		expect(await utils.isPresent('.messages-container')).toBeTrue();
-
 		await chatButton.click();
-
 		expect(await utils.isPresent('.input-container')).toBeFalse();
 		expect(await utils.isPresent('.messages-container')).toBeFalse();
 	});
 
-	it('should toggle PARTICIPANTS panel', async () => {
+	it('should open and close the PARTICIPANTS panel and verify its content', async () => {
 		await browser.get(`${url}&prejoin=false`);
-
 		await utils.checkLayoutPresent();
-
 		const participantBtn = await utils.waitForElement('#participants-panel-btn');
 		await participantBtn.click();
-
 		await utils.waitForElement('.sidenav-menu');
-
 		await utils.waitForElement('.local-participant-container');
 		expect(await utils.isPresent('.local-participant-container')).toBeTrue();
-
 		await utils.waitForElement('ov-participant-panel-item');
 		expect(await utils.isPresent('ov-participant-panel-item')).toBeTrue();
-
 		await participantBtn.click();
-
 		expect(await utils.isPresent('.local-participant-container')).toBeFalse();
 		expect(await utils.isPresent('ov-participant-panel-item')).toBeFalse();
 	});
 
-	it('should toggle ACTIVITIES panel', async () => {
+	it('should open and close the ACTIVITIES panel and verify its content', async () => {
 		await browser.get(`${url}&prejoin=false`);
-
 		await utils.checkLayoutPresent();
-
-		// Get activities button and click into it
 		const activitiesBtn = await utils.waitForElement('#activities-panel-btn');
 		await activitiesBtn.click();
-
 		await utils.waitForElement('.sidenav-menu');
 		await utils.waitForElement('#activities-container');
 		expect(await utils.isPresent('#activities-container')).toBeTrue();
-
 		await utils.waitForElement('#recording-activity');
 		expect(await utils.isPresent('#recording-activity')).toBeTrue();
 		await activitiesBtn.click();
-
 		expect(await utils.isPresent('#activities-container')).toBeFalse();
 		expect(await utils.isPresent('#recording-activity')).toBeFalse();
 	});
 
-	it('should toggle SETTINGS panel', async () => {
+	it('should open the SETTINGS panel and verify its content', async () => {
 		let element;
 		await browser.get(`${url}&prejoin=false`);
-
 		await utils.checkLayoutPresent();
-
-		// Checking if toolbar is present
 		await utils.checkToolbarIsPresent();
-
 		await utils.togglePanel('settings');
-
 		element = await utils.waitForElement('.sidenav-menu');
 		expect(await utils.isPresent('#default-settings-panel')).toBeTrue();
 	});
 
-	it('should switching between PARTICIPANTS and CHAT panels', async () => {
+	it('should switch between PARTICIPANTS and CHAT panels and verify correct content is shown', async () => {
 		await browser.get(`${url}&prejoin=false`);
-
 		await utils.checkSessionIsPresent();
-
 		await utils.checkToolbarIsPresent();
-
-		// Open chat panel
 		const chatButton = await utils.waitForElement('#chat-panel-btn');
 		await chatButton.click();
-
 		await utils.waitForElement('.sidenav-menu');
 		expect(await utils.isPresent('.sidenav-menu')).toBeTrue();
-
 		await utils.waitForElement('.input-container');
 		expect(await utils.isPresent('.input-container')).toBeTrue();
-
 		expect(await utils.isPresent('.messages-container')).toBeTrue();
-
-		// Open participants panel
 		const participantBtn = await utils.waitForElement('#participants-panel-btn');
 		await participantBtn.click();
-
 		await utils.waitForElement('.sidenav-menu');
-
 		expect(await utils.isPresent('.local-participant-container')).toBeTrue();
-
 		expect(await utils.isPresent('ov-participant-panel-item')).toBeTrue();
-
-		// Switch to chat panel
 		await chatButton.click();
-
 		await utils.waitForElement('.sidenav-menu');
-
 		expect(await utils.isPresent('.input-container')).toBeTrue();
-
 		expect(await utils.isPresent('.messages-container')).toBeTrue();
-
 		expect(await utils.isPresent('.local-participant-container')).toBeFalse();
-
 		expect(await utils.isPresent('ov-participant-panel-item')).toBeFalse();
-
-		// Close chat panel
 		await chatButton.click();
 		expect(await utils.getNumberOfElements('.input-container')).toEqual(0);
 		expect(await utils.isPresent('messages-container')).toBeFalse();
 	});
 
-	it('should switching between sections in SETTINGS PANEL', async () => {
+	it('should switch between sections in the SETTINGS panel and verify correct content is shown', async () => {
 		let element;
 		await browser.get(`${url}&prejoin=false`);
-
 		await utils.checkToolbarIsPresent();
-
-		// Checking if toolbar is present
-		await utils.checkToolbarIsPresent();
-
-		// Open more options menu
 		await utils.togglePanel('settings');
-
 		await utils.waitForElement('.sidenav-menu');
 		expect(await utils.isPresent('.sidenav-menu')).toBeTrue();
-
+		await browser.sleep(500);
-		// Check if general section is shown
 		element = await utils.waitForElement('#general-opt');
 		await element.click();
-
 		expect(await utils.isPresent('ov-participant-name-input')).toBeTrue();
-
-		// Check if video section is shown
 		element = await utils.waitForElement('#video-opt');
 		await element.click();
-
 		expect(await utils.isPresent('ov-video-devices-select')).toBeTrue();
-
-		// Check if audio section is shown
 		element = await utils.waitForElement('#audio-opt');
 		await element.click();
-
 		expect(await utils.isPresent('ov-audio-devices-select')).toBeTrue();
 	});
 });

openvidu-components-angular/package.json

@@ -94,10 +94,10 @@
     "e2e:lib-chat": "tsc --project ./e2e && npx jasmine --fail-fast  ./e2e/dist/chat.test.js",
     "e2e:lib-events": "tsc --project ./e2e && npx jasmine ./e2e/dist/events.test.js",
     "e2e:lib-media-devices": "tsc --project ./e2e && npx jasmine --fail-fast  ./e2e/dist/media-devices.test.js",
+    "e2e:lib-panels": "tsc --project ./e2e && npx jasmine --fail-fast  ./e2e/dist/panels.test.js",
 
     "e2e:webcomponent-all": "tsc --project ./e2e && npx jasmine --fail-fast  ./e2e/dist/webcomponent-e2e/**/*.test.js",
     "e2e:webcomponent-captions": "tsc --project ./e2e && npx jasmine --fail-fast  ./e2e/dist/webcomponent-e2e/captions.test.js",
-    "e2e:webcomponent-panels": "tsc --project ./e2e && npx jasmine --fail-fast  ./e2e/dist/webcomponent-e2e/panels.test.js",
     "e2e:webcomponent-screensharing": "tsc --project ./e2e && npx jasmine --fail-fast  ./e2e/dist/webcomponent-e2e/screensharing.test.js",
     "e2e:webcomponent-stream": "tsc --project ./e2e && npx jasmine --fail-fast  ./e2e/dist/webcomponent-e2e/stream.test.js",
     "e2e:webcomponent-toolbar": "tsc --project ./e2e && npx jasmine --fail-fast  ./e2e/dist/webcomponent-e2e/toolbar.test.js",