From 55d9abe2b83e4f164c0e83a268678f82bafd669d Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Wed, 16 Mar 2022 16:34:55 +0100 Subject: [PATCH] openvidu-components: Added participant created event and e2e test --- .../videoconference.component.ts | 14 +- .../openvidu-webcomponent.component.ts | 19 +- .../webcomponent-test-e2e/test.ts | 164 ++++-------------- .../webcomponent-test-e2e/web/app.js | 62 ++----- 4 files changed, 66 insertions(+), 193 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts index 60e0bc5e..34b3daf6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts @@ -10,7 +10,7 @@ import { TemplateRef, ViewChild } from '@angular/core'; -import { OpenViduErrorName } from 'openvidu-browser'; +import { OpenViduErrorName, Session } from 'openvidu-browser'; import { Subscription } from 'rxjs'; import { ChatPanelDirective, @@ -102,13 +102,13 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni @Output() onToolbarChatPanelButtonClicked = new EventEmitter(); // Event sent when participant has joined the session - @Output() onParticipantJoined = new EventEmitter(); - - // Event sent when participant has left the session - // @Output() onParticipantLeft = new EventEmitter(); + // @Output() onParticipantJoined = new EventEmitter(); // Event sent when session has been created @Output() onSessionCreated = new EventEmitter(); + // Event sent when participant has been created + @Output() onParticipantCreated = new EventEmitter(); + joinSessionClicked: boolean = false; participantReady: boolean = false; @@ -148,6 +148,8 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni if (this.deviceSrv.hasVideoDeviceAvailable() || this.deviceSrv.hasAudioDeviceAvailable()) { await this.initwebcamPublisher(); } + + this.onParticipantCreated.emit(this.participantService.getLocalParticipant()); } private async initwebcamPublisher() { @@ -265,7 +267,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni onChatPanelButtonClicked() { this.onToolbarChatPanelButtonClicked.emit(); } - _onSessionCreated(event: any) { + _onSessionCreated(event: Session) { this.onSessionCreated.emit(event); } diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts index 48b02507..7335cc81 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts +++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts @@ -1,6 +1,7 @@ import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { ILogger, LoggerService, OpenViduService } from 'openvidu-angular'; import { Session } from 'openvidu-browser'; +import { ParticipantAbstractModel } from '../../../projects/openvidu-angular/src/lib/models/participant.model'; export interface TokenModel { webcam: string; @@ -37,6 +38,7 @@ export interface TokenModel { (onToolbarChatPanelButtonClicked)="_onToolbarChatPanelButtonClicked()" (onToolbarFullscreenButtonClicked)="_onToolbarFullscreenButtonClicked()" (onSessionCreated)="_onSessionCreated($event)" + (onParticipantCreated)="_onParticipantCreated($event)" > ` }) @@ -113,15 +115,14 @@ export class OpenviduWebComponentComponent implements OnInit { @Output() onToolbarLeaveButtonClicked = new EventEmitter(); @Output() onToolbarCameraButtonClicked = new EventEmitter(); @Output() onToolbarMicrophoneButtonClicked = new EventEmitter(); - @Output() onSessionCreated = new EventEmitter(); @Output() onToolbarScreenshareButtonClicked = new EventEmitter(); @Output() onToolbarParticipantsPanelButtonClicked = new EventEmitter(); @Output() onToolbarChatPanelButtonClicked = new EventEmitter(); @Output() onToolbarFullscreenButtonClicked = new EventEmitter(); + @Output() onSessionCreated = new EventEmitter(); + @Output() onParticipantCreated = new EventEmitter(); success: boolean = false; - // _sessionConfig: SessionConfig; - private log: ILogger; constructor(private loggerService: LoggerService, private host: ElementRef, private openviduService: OpenViduService) { @@ -177,18 +178,14 @@ export class OpenviduWebComponentComponent implements OnInit { this.onSessionCreated.emit(event); } + _onParticipantCreated(event: ParticipantAbstractModel) { + this.onParticipantCreated.emit(event); + } + leaveSession() { this.openviduService.disconnect(); } - // private isCorrectParams(config: SessionConfig): boolean { - // return !!config.tokens?.webcam && !!config.tokens?.screen /*&& !!config.participantName && !!config.sessionName*/; - // } - - // private isEmpty(config: SessionConfig): boolean { - // return Object.keys(config).length === 0; - // } - private castToBoolean(value: string | boolean): boolean { if (typeof value === 'boolean') { return value; diff --git a/openvidu-components-angular/webcomponent-test-e2e/test.ts b/openvidu-components-angular/webcomponent-test-e2e/test.ts index 5ea5dbd8..c6935a4a 100644 --- a/openvidu-components-angular/webcomponent-test-e2e/test.ts +++ b/openvidu-components-angular/webcomponent-test-e2e/test.ts @@ -1,17 +1,10 @@ -// require('chromedriver'); -// const assert = require('assert'); -// const webdriver = require('selenium-webdriver'); -const chrome = require('selenium-webdriver/chrome'); -// const firefox = require('selenium-webdriver/firefox'); -// const { Builder, By, Key, promise, until } = require('selenium-webdriver'); - -import { Builder, By, Capabilities, until, WebDriver, logging, Key } from 'selenium-webdriver'; +import { Builder, By, Capabilities, until, WebDriver, logging } from 'selenium-webdriver'; +import * as chrome from 'selenium-webdriver/chrome'; import { expect } from 'chai'; const url = 'http://127.0.0.1:8080/'; const FIVE_SECONDS = 5000; const ONE_SECONDS = 5000; -const sleepTimeout = 500; describe('Checkout localhost app', () => { let browser: WebDriver; @@ -555,135 +548,40 @@ describe('Checkout localhost app', () => { // * PUBLISHER EVENTS - // it('should receive publisherCreated event', async () => { - // try { - // await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); - // await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - // } catch (error) { - // console.log(error); - // } finally { - // await browser.quit(); - // } - // }); - - // it('should receive Publisher streamCreated event', async function () { - // try { - // // await browser.get(url); - // await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); - - // await browser.wait(until.elementLocated(By.id('publisher-streamCreated')), FIVE_SECONDS); - // await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - // } catch (error) { - // console.log(error); - // } finally { - // await browser.quit(); - // } - // }); - - // it('should receive Publisher streamPlaying event', async function () { - // try { - // // await browser.get(url); - // await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); - - // await browser.wait(until.elementLocated(By.id('publisher-streamPlaying')), FIVE_SECONDS); - // await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - // } catch (error) { - // console.log(error); - // } finally { - // await browser.quit(); - // } - // }); + it('should receive onParticipantCreated event from LOCAL participant', async () => { + const participantName = 'TEST_USER'; + let element; + await browser.get(`${url}?participantName=${participantName}`); + element = await browser.wait(until.elementLocated(By.id(`${participantName}-onParticipantCreated`)), FIVE_SECONDS); + expect(await element.isDisplayed()).to.be.true; + }); // * SESSION EVENTS - // it('should receive REMOTE connectionCreated event', async () => { - // try { - // // await browser.get(url); - // await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); + it('should receive connectionCreated event from LOCAL participant', async () => { + const participantName = 'TEST_USER'; + let element; + await browser.get(`${url}?prejoin=false&participantName=${participantName}`); + element = await browser.wait(until.elementLocated(By.id(`${participantName}-connectionCreated`)), FIVE_SECONDS); + expect(await element.isDisplayed()).to.be.true; + }); - // browser2 = await createFirefoxBrowser(); - // await browser2.get(url); - // await browser2.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); - // await browser2.sleep(sleepTimeout); - // var user2 = await (await browser2.wait(until.elementLocated(By.id('nickname')), FIVE_SECONDS)).getText(); - // await browser.wait(until.elementLocated(By.id(user2 + '-connectionCreated')), FIVE_SECONDS); - // await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - // await browser2.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - // } catch (error) { - // console.log(error); - // } finally { - // await browser.quit(); - // await browser2.quit(); - // } - // }); + it('should receive sessionDisconnected event from LOCAL participant', async () => { + const participantName = 'TEST_USER'; + let element; + await browser.get(`${url}?prejoin=false&participantName=${participantName}`); + element = await browser.wait(until.elementLocated(By.id('session-container')), FIVE_SECONDS); + expect(await element.isDisplayed()).to.be.true; - // it('should receive REMOTE streamDestroyed event', async function () { - // try { - // // await browser.get(url); - // await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); + // Checking if toolbar is present + element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), FIVE_SECONDS); + expect(await element.isDisplayed()).to.be.true; - // browser2 = await createFirefoxBrowser(); - // await browser2.get(url); - // await browser2.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); - // await browser2.wait(until.elementLocated(By.id('publisher-streamPlaying')), FIVE_SECONDS); + // Checking if leave button is not present + element = await browser.wait(until.elementLocated(By.id('leave-btn')), FIVE_SECONDS); + await element.click(); - // await browser2.sleep(sleepTimeout); - // var user2 = await (await browser2.wait(until.elementLocated(By.id('nickname')), FIVE_SECONDS)).getText(); - - // await browser2.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - - // await browser.wait(until.elementLocated(By.id(user2 + '-streamDestroyed')), FIVE_SECONDS); - // await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - // } catch (error) { - // console.log(error); - // } finally { - // await browser.quit(); - // await browser2.quit(); - // } - // }); - - // it('should receive Session sessionDisconnected event', async function () { - // try { - // // await browser.get(url); - // await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); - // await browser.wait(until.elementLocated(By.id('publisher-streamPlaying')), FIVE_SECONDS); - - // await browser.sleep(sleepTimeout); - // var user = await (await browser.wait(until.elementLocated(By.id('nickname')), FIVE_SECONDS)).getText(); - - // await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - - // await browser.wait(until.elementLocated(By.id(user + '-sessionDisconnected')), FIVE_SECONDS); - // } catch (error) { - // console.log(error); - // } finally { - // await browser.quit(); - // } - // }); - - // it('should receive REMOTE streamCreated event', async function () { - // try { - // // await browser.get(url); - // await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); - - // browser2 = await createFirefoxBrowser(); - // await browser2.get(url); - // await browser2.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); - // await browser2.wait(until.elementLocated(By.id('publisher-streamPlaying')), FIVE_SECONDS); - - // await browser2.sleep(sleepTimeout); - // var user2 = await (await browser2.wait(until.elementLocated(By.id('nickname')), FIVE_SECONDS)).getText(); - - // await browser.wait(until.elementLocated(By.id(user2 + '-streamCreated')), FIVE_SECONDS); - - // await browser2.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - - // await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); - // } catch (error) { - // console.log(error); - // } finally { - // await browser.quit(); - // await browser2.quit(); - // } - // }); + element = await browser.wait(until.elementLocated(By.id(`${participantName}-sessionDisconnected`)), FIVE_SECONDS); + expect(await element.isDisplayed()).to.be.true; + }); }); diff --git a/openvidu-components-angular/webcomponent-test-e2e/web/app.js b/openvidu-components-angular/webcomponent-test-e2e/web/app.js index 3f4e41e2..4b190de1 100644 --- a/openvidu-components-angular/webcomponent-test-e2e/web/app.js +++ b/openvidu-components-angular/webcomponent-test-e2e/web/app.js @@ -18,10 +18,13 @@ var PARTICIPANTS_PANEL_BUTTON; var SESSION_NAME; +var PARTICIPANT_NAME; + $(document).ready(() => { var url = new URL(window.location.href); MINIMAL = url.searchParams.get("minimal") === null ? false : url.searchParams.get("minimal") === 'true'; + 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")); @@ -61,56 +64,28 @@ $(document).ready(() => { // You can see the session documentation here // https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/session.html - // session.on('connectionCreated', (e) => { - // console.error("connectionCreated", e); - // var user = JSON.parse(e.connection.data).clientData; - // appendElement(user + '-connectionCreated'); - // }); - - // session.on('streamDestroyed', (e) => { - // console.log("streamDestroyed", e); - // var user = JSON.parse(e.stream.connection.data).clientData; - // appendElement(user + '-streamDestroyed'); - // }); - - // session.on('streamCreated', (e) => { - // console.log("streamCreated", e); - // var user = JSON.parse(e.stream.connection.data).clientData; - // appendElement(user + '-streamCreated'); - // }); - - // session.on('sessionDisconnected', (e) => { - // console.warn("sessionDisconnected ", e); - // var user = JSON.parse(e.target.connection.data).clientData; - // appendElement(user + '-sessionDisconnected'); - // }); - }); - - webComponent.addEventListener('publisherCreated', (event) => { - var publisher = event.detail; - appendElement('publisherCreated') - - // You can see the publisher documentation here - // https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/publisher.html - - publisher.on('streamCreated', (e) => { - console.warn("Publisher streamCreated", e); - appendElement('publisher-streamCreated'); + session.on('connectionCreated', (e) => { + var user = JSON.parse(e.connection.data).clientData; + appendElement(`${user}-connectionCreated`); }); - publisher.on('streamPlaying', (e) => { - appendElement('publisher-streamPlaying'); - + session.on('sessionDisconnected', (e) => { + var user = JSON.parse(e.target.connection.data).clientData; + appendElement(user + '-sessionDisconnected'); }); }); + webComponent.addEventListener('onParticipantCreated', (event) => { + var participant = event.detail; + appendElement(`${participant.nickname}-onParticipantCreated`); - webComponent.addEventListener('error', (event) => { - console.log('Error event', event.detail); }); - var user = 'user' + Math.floor(Math.random() * 100); - joinSession(SESSION_NAME, user); + // webComponent.addEventListener('error', (event) => { + // console.log('Error event', event.detail); + // }); + + joinSession(SESSION_NAME, PARTICIPANT_NAME); }); @@ -143,7 +118,8 @@ async function joinSession(sessionName, participantName) { webComponent.streamSettingsButton = SETTINGS_BUTTON; webComponent.participantPanelItemMuteButton = PARTICIPANT_MUTE_BUTTON; - webComponent.sessionConfig = { sessionName, participantName, tokens }; + webComponent.participantName = participantName; + webComponent.tokens = tokens; } /**