ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Added more e2e test

pull/713/head
csantosm 2022-04-07 12:54:34 +02:00
parent 70e93df54d
commit 28606b1ff7
3 changed files with 258 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
openvidu-components-angular/e2e/angular.test.ts
View File

@ -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;

32
openvidu-components-angular/src/app/testing-app/testing.component.html
View File

@ -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>

30
openvidu-components-angular/src/app/testing-app/testing.component.ts
View File

@ -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) {
this.sessionId = params.sessionId
if (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