openvidu-components: Added more e2e test

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

@@ -6,7 +6,7 @@ import { AngularConfig } from './selenium.conf';
 const url = AngularConfig.appUrl;
 const TIMEOUT = 10000;
 
-describe('Checkout localhost app', () => {
+describe('Testing TOOLBAR STRUCTURAL DIRECTIVES', () => {
 	let browser: WebDriver;
 	async function createChromeBrowser(): Promise<WebDriver> {
 		return await new Builder()
@@ -25,8 +25,6 @@ describe('Checkout localhost app', () => {
 		await browser.quit();
 	});
 
-	// ** STRUCTURAL Directives
-
 	it('should inject the custom TOOLBAR without additional buttons', async () => {
 		await browser.get(`${url}`);
 		let element: any = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
@@ -78,6 +76,34 @@ describe('Checkout localhost app', () => {
 		expect(element.length).equals(0);
 	});
 
+	it('should inject the custom TOOLBAR with additional PANEL buttons', async () => {
+		await browser.get(`${url}`);
+		let element: any = await browser.wait(until.elementLocated(By.id('ovToolbar-checkbox')), TIMEOUT);
+		await element.click();
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbarAdditionalPanelButtons-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 custom toolbar is present in DOM
+		element = await browser.wait(until.elementLocated(By.id('custom-toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Check if additional buttons element has been rendered
+		element = await browser.wait(until.elementLocated(By.id('custom-toolbar-additional-panel-buttons')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('toolbar-additional-panel-btn'));
+		expect(element.length).equals(1);
+
+		// Check if default toolbar is not present
+		element = await browser.findElements(By.id('default-toolbar'));
+		expect(element.length).equals(0);
+	});
+
 	it('should inject the TOOLBAR ADDITIONAL BUTTONS only', async () => {
 		let element;
 		await browser.get(`${url}`);
@@ -105,7 +131,52 @@ describe('Checkout localhost app', () => {
 		expect(element.length).equals(0);
 	});
 
-	// //* PANELS
+	it('should inject the TOOLBAR ADDITIONAL PANEL BUTTONS only', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovToolbarAdditionalPanelButtons-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 default toolbar is present
+		element = await browser.wait(until.elementLocated(By.id('default-toolbar')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		// Check if additional buttons are present
+		element = await browser.wait(until.elementLocated(By.id('custom-toolbar-additional-panel-buttons')), TIMEOUT);
+		expect(await element.isDisplayed()).to.be.true;
+
+		element = await browser.findElements(By.id('toolbar-additional-panel-btn'));
+		expect(element.length).equals(2);
+
+		// Check if custom toolbar not is present
+		element = await browser.findElements(By.id('custom-toolbar'));
+		expect(element.length).equals(0);
+	});
+});
+
+describe('Testing PANEL STRUCTURAL DIRECTIVES', () => {
+	let browser: WebDriver;
+	async function createChromeBrowser(): Promise<WebDriver> {
+		return await new Builder()
+			.forBrowser(AngularConfig.browserName)
+			.withCapabilities(AngularConfig.browserCapabilities)
+			.setChromeOptions(AngularConfig.browserOptions)
+			.usingServer(AngularConfig.seleniumAddress)
+			.build();
+	}
+
+	beforeEach(async () => {
+		browser = await createChromeBrowser();
+	});
+
+	afterEach(async () => {
+		await browser.quit();
+	});
 
 	it('should inject the CUSTOM PANEL without children', async () => {
 		let element;
@@ -157,6 +228,42 @@ describe('Checkout localhost app', () => {
 		expect(element.length).equals(0);
 	});
 
+	it('should inject the CUSTOM PANEL with ADDITIONAL 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('ovAdditionalPanels-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('toolbar-additional-panel-btn')), TIMEOUT);
+		expect(await panelBtn.isDisplayed()).to.be.true;
+		await panelBtn.click();
+
+		// Check if custom panel is present
+		element = await browser.findElements(By.id('custom-additional-panel'));
+		expect(element.length).equals(1);
+		element = await browser.wait(until.elementLocated(By.id('additional-panel-title')), TIMEOUT);
+		await browser.wait(until.elementTextMatches(element, /NEW PANEL/), TIMEOUT);
+		expect(await element.getAttribute("innerText")).equals('NEW PANEL');
+
+		await panelBtn.click();
+
+		element = await browser.findElements(By.id('custom-additional-panel'));
+		expect(element.length).equals(0);
+	});
+
 	it('should inject the CUSTOM PANEL with CHAT PANEL only', async () => {
 		let element;
 		await browser.get(`${url}`);
@@ -372,6 +479,40 @@ describe('Checkout localhost app', () => {
 		expect(element.length).equals(0);
 	});
 
+
+	it('should inject an ADDITIONAL PANEL only', async () => {
+		let element;
+		await browser.get(`${url}`);
+
+		element = await browser.wait(until.elementLocated(By.id('ovAdditionalPanels-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('toolbar-additional-panel-btn')), TIMEOUT);
+		expect(await panelBtn.isDisplayed()).to.be.true;
+		await panelBtn.click();
+
+		// Check if custom panel is present
+		element = await browser.findElements(By.id('custom-additional-panel'));
+		expect(element.length).equals(1);
+		element = await browser.wait(until.elementLocated(By.id('additional-panel-title')), TIMEOUT);
+		await browser.wait(until.elementTextMatches(element, /NEW PANEL/), TIMEOUT);
+		expect(await element.getAttribute("innerText")).equals('NEW PANEL');
+
+		await panelBtn.click();
+
+		element = await browser.findElements(By.id('custom-additional-panel'));
+		expect(element.length).equals(0);
+	});
+
 	it('should inject the CHAT PANEL only', async () => {
 		let element;
 		await browser.get(`${url}`);
@@ -639,8 +780,26 @@ describe('Checkout localhost app', () => {
 		element = await browser.wait(until.elementLocated(By.id('custom-chat-panel')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 	});
+});
 
-	//* LAYOUT
+describe('Testing LAYOUT STRUCTURAL DIRECTIVES', () => {
+	let browser: WebDriver;
+	async function createChromeBrowser(): Promise<WebDriver> {
+		return await new Builder()
+			.forBrowser(AngularConfig.browserName)
+			.withCapabilities(AngularConfig.browserCapabilities)
+			.setChromeOptions(AngularConfig.browserOptions)
+			.usingServer(AngularConfig.seleniumAddress)
+			.build();
+	}
+
+	beforeEach(async () => {
+		browser = await createChromeBrowser();
+	});
+
+	afterEach(async () => {
+		await browser.quit();
+	});
 
 	it('should inject the custom LAYOUT WITHOUT STREAM', async () => {
 		await browser.get(`${url}`);
@@ -732,8 +891,26 @@ describe('Checkout localhost app', () => {
 		element = await browser.findElements(By.css('video'));
 		expect(element.length).equals(1);
 	});
+});
 
-	// * Attribute directives
+describe('Testing ATTRIBUTE DIRECTIVES', () => {
+	let browser: WebDriver;
+	async function createChromeBrowser(): Promise<WebDriver> {
+		return await new Builder()
+			.forBrowser(AngularConfig.browserName)
+			.withCapabilities(AngularConfig.browserCapabilities)
+			.setChromeOptions(AngularConfig.browserOptions)
+			.usingServer(AngularConfig.seleniumAddress)
+			.build();
+	}
+
+	beforeEach(async () => {
+		browser = await createChromeBrowser();
+	});
+
+	afterEach(async () => {
+		await browser.quit();
+	});
 
 	it('should HIDE the CHAT PANEL BUTTON', async () => {
 		let element;
@@ -1016,8 +1193,26 @@ describe('Checkout localhost app', () => {
 		element = await browser.findElements(By.id('mute-btn'));
 		expect(element.length).equals(0);
 	});
+});
 
-	// * EVENTS
+describe('Testing EVENTS', () => {
+	let browser: WebDriver;
+	async function createChromeBrowser(): Promise<WebDriver> {
+		return await new Builder()
+			.forBrowser(AngularConfig.browserName)
+			.withCapabilities(AngularConfig.browserCapabilities)
+			.setChromeOptions(AngularConfig.browserOptions)
+			.usingServer(AngularConfig.seleniumAddress)
+			.build();
+	}
+
+	beforeEach(async () => {
+		browser = await createChromeBrowser();
+	});
+
+	afterEach(async () => {
+		await browser.quit();
+	});
 
 	it('should receive the onLeaveButtonClicked event', async () => {
 		let element;

openvidu-components-angular/src/app/testing-app/testing.component.html

@@ -105,6 +105,14 @@
 					</button>
 				</div>
 			</ng-template>
+
+			<ng-template [ngIf]="ovToolbarAdditionalPanelButtonsSelected">
+				<div *ovToolbarAdditionalPanelButtons id="custom-toolbar-additional-panel-buttons">
+					<button mat-icon-button id="toolbar-additional-panel-btn">
+						<mat-icon>star</mat-icon>
+					</button>
+				</div>
+			</ng-template>
 		</ov-toolbar>
 	</ng-template>
 
@@ -122,11 +130,29 @@
 		</div>
 	</ng-template>
 
+	<ng-template [ngIf]="(ovToolbarAdditionalPanelButtonsSelected && !ovToolbarSelected) || ovAdditionalPanelsSelected">
+		<div *ovToolbarAdditionalPanelButtons id="custom-toolbar-additional-panel-buttons">
+			<button mat-icon-button id="toolbar-additional-panel-btn" (click)="toggleMyPanel('my-panel')">
+				<mat-icon>fullscreen_exit</mat-icon>
+			</button>
+			<button mat-icon-button id="toolbar-additional-panel-btn" (click)="toggleMyPanel('my-panel')">
+				<mat-icon>star</mat-icon>
+			</button>
+		</div>
+	</ng-template>
+
 	<!-- END TOOLBAR -->
 
 	<!-- PANELS -->
 	<ng-template [ngIf]="ovPanelSelected">
 		<ov-panel *ovPanel id="custom-panels">
+
+			<ng-template [ngIf]="ovAdditionalPanelsSelected">
+				<div *ovAdditionalPanels id="custom-additional-panel">
+					<h1 id="additional-panel-title">NEW PANEL</h1>
+				</div>
+			</ng-template>
+
 			<ng-template [ngIf]="ovChatPanelSelected">
 				<ov-chat-panel *ovChatPanel id="custom-chat-panel"></ov-chat-panel>
 			</ng-template>
@@ -161,6 +187,12 @@
 		</ov-panel>
 	</ng-template>
 
+	<ng-template [ngIf]="!ovPanelSelected && ovAdditionalPanelsSelected">
+		<div *ovAdditionalPanels id="custom-additional-panel">
+			<h1 id="additional-panel-title">NEW PANEL</h1>
+		</div>
+	</ng-template>
+
 	<ng-template [ngIf]="!ovPanelSelected && ovChatPanelSelected">
 		<ov-chat-panel *ovChatPanel id="custom-chat-panel"></ov-chat-panel>
 	</ng-template>

openvidu-components-angular/src/app/testing-app/testing.component.ts

@@ -4,6 +4,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Subscription, throwError as observableThrowError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { ActivatedRoute } from '@angular/router';
+import { PanelService } from 'openvidu-angular';
 
 interface TemplateDirectives {
 	name: string;
@@ -18,7 +19,9 @@ interface APIDirectives {
 enum StructuralDirectives {
 	TOOLBAR = 'ovToolbar',
 	TOOLBAR_BUTTONS = 'ovToolbarAdditionalButtons',
+	TOOLBAR_PANEL_BUTTONS = 'ovToolbarAdditionalPanelButtons',
 	PANEL = 'ovPanel',
+	ADDITIONAL_PANELS = 'ovAdditionalPanels',
 	CHAT_PANEL = 'ovChatPanel',
 	PARTICIPANTS_PANEL = 'ovParticipantsPanel',
 	PARTICIPANTS_PANEL_ITEM = 'ovParticipantPanelItem',
@@ -58,11 +61,12 @@ export class TestingComponent implements OnInit {
 	templateDirectives: TemplateDirectives[] = [
 		{
 			name: StructuralDirectives.TOOLBAR,
-			subDirectives: [{ name: StructuralDirectives.TOOLBAR_BUTTONS }]
+			subDirectives: [{ name: StructuralDirectives.TOOLBAR_BUTTONS }, { name: StructuralDirectives.TOOLBAR_PANEL_BUTTONS }]
 		},
 		{
 			name: StructuralDirectives.PANEL,
 			subDirectives: [
+				{ name: StructuralDirectives.ADDITIONAL_PANELS },
 				{ name: StructuralDirectives.CHAT_PANEL },
 				{
 					name: StructuralDirectives.PARTICIPANTS_PANEL,
@@ -111,7 +115,9 @@ export class TestingComponent implements OnInit {
 	showDirectives: boolean = true;
 	ovToolbarSelected = false;
 	ovToolbarAdditionalButtonsSelected = false;
+	ovToolbarAdditionalPanelButtonsSelected = false;
 	ovPanelSelected = false;
+	ovAdditionalPanelsSelected = false;
 	ovChatPanelSelected = false;
 	ovParticipantsPanelSelected = false;
 	ovParticipantPanelItemSelected = false;
@@ -136,19 +142,18 @@ export class TestingComponent implements OnInit {
 
 	subscription: Subscription;
 
-	constructor(private httpClient: HttpClient, private route: ActivatedRoute) {}
+	constructor(private httpClient: HttpClient, private route: ActivatedRoute, private panelService: PanelService) {}
 
 	ngOnInit() {
 		this.subscription = this.route.queryParams.subscribe(async (params) => {
-
 			console.warn(params);
-			if(params?.sessionId) {
+			if (params?.sessionId) {
-				this.sessionId = params.sessionId
+				this.sessionId = params.sessionId;
 			} else {
 				this.sessionId = `testingSession-${(Math.random() + 1).toString(36).substring(7)}`;
 			}
 
-			console.warn('SESSION ID', this.sessionId)
+			console.warn('SESSION ID', this.sessionId);
 			this.tokens = {
 				webcam: await this.getToken(this.sessionId),
 				screen: await this.getToken(this.sessionId)
@@ -176,10 +181,19 @@ export class TestingComponent implements OnInit {
 				this.ovToolbarAdditionalButtonsSelected = value;
 				break;
 
+			case StructuralDirectives.TOOLBAR_PANEL_BUTTONS:
+				this.ovToolbarAdditionalPanelButtonsSelected = value;
+				break;
+
 			case StructuralDirectives.PANEL:
 				this.ovPanelSelected = value;
 				break;
 
+			case StructuralDirectives.ADDITIONAL_PANELS:
+				debugger
+				this.ovAdditionalPanelsSelected = value;
+				break;
+
 			case StructuralDirectives.CHAT_PANEL:
 				this.ovChatPanelSelected = value;
 				break;
@@ -253,6 +267,10 @@ export class TestingComponent implements OnInit {
 		this.showDirectives = false;
 	}
 
+	toggleMyPanel(type: string) {
+		this.panelService.togglePanel(type);
+	}
+
 	/**
 	 * --------------------------
 	 * SERVER-SIDE RESPONSIBILITY