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

openvidu-components: Added e2e tests for angular apps 

- Test the structural directives in angular apps
- Test the output events
pull/707/head
csantosm 2022-03-21 14:23:50 +01:00
parent 5c209a55ba
commit f0ec449f25
24 changed files with 3443 additions and 3144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -39,3 +39,5 @@ openvidu-components-angular/webcomponent-test-e2e/dist/
openvidu-components-angular/webcomponent-test-e2e/web/openvidu-webcomponent-dev.css
openvidu-components-angular/webcomponent-test-e2e/web/openvidu-webcomponent-dev.js
openvidu-components-angular/e2e/dist/

894
openvidu-components-angular/e2e/angular.test.ts Normal file
View File

@ -0,0 +1,894 @@
import { Builder, By, until, WebDriver } from 'selenium-webdriver';
import { expect } from 'chai';
import { AngularConfig } from './selenium.conf';
const url = AngularConfig.appUrl;
const TIMEOUT = 10000;
describe('Checkout localhost app', () => {
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();
});
// ** 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);
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 not been rendered
element = await browser.findElements(By.id('custom-toolbar-additional-buttons'));
expect(element.length).equals(0);
// Check if default toolbar is not present
element = await browser.findElements(By.id('default-toolbar'));
expect(element.length).equals(0);
});
it('should inject the custom TOOLBAR with additional 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('ovToolbarAdditionalButtons-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-buttons')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
element = await browser.findElements(By.id('toolbar-additional-btn'));
expect(element.length).equals(2);
// 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}`);
element = await browser.wait(until.elementLocated(By.id('ovToolbarAdditionalButtons-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-buttons')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
element = await browser.findElements(By.id('toolbar-additional-btn'));
expect(element.length).equals(3);
// Check if custom toolbar not is present
element = await browser.findElements(By.id('custom-toolbar'));
expect(element.length).equals(0);
});
//* PANELS
it('should inject the CUSTOM PANEL without children', 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('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 panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(1);
// Check if default panel is not present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(0);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participant-panel'));
expect(element.length).equals(0);
// Check if custom participant panel is not present
element = await browser.findElements(By.id('custom-participants-panel'));
expect(element.length).equals(0);
// Click on button for opening panel
element = await browser.wait(until.elementLocated(By.id('chat-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if default chat panel is not present
element = await browser.findElements(By.id('default-chat-panel'));
expect(element.length).equals(0);
// Check if custom chat panel is not present
element = await browser.findElements(By.id('custom-chat-panel'));
expect(element.length).equals(0);
});
it('should inject the CUSTOM PANEL with CHAT 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('ovChatPanel-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 participants panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(1);
// Check if default panel is not present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(0);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participant-panel'));
expect(element.length).equals(0);
// Check if custom participant panel is not present
element = await browser.findElements(By.id('custom-participants-panel'));
expect(element.length).equals(0);
// Click on button for opening chat panel
element = await browser.wait(until.elementLocated(By.id('chat-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if default chat panel is not present
element = await browser.findElements(By.id('default-chat-panel'));
expect(element.length).equals(0);
// Check if custom chat panel is not present
element = await browser.wait(until.elementLocated(By.id('custom-chat-panel')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
});
it('should inject the CUSTOM PANEL with PARTICIPANTS PANEL only and without children', 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('ovParticipantsPanel-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 participants panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(1);
// Check if default panel is not present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(0);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participant-panel'));
expect(element.length).equals(0);
// Check if custom participant panel is not present
element = await browser.wait(until.elementLocated(By.id('custom-participants-panel')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Click on button for opening chat panel
element = await browser.wait(until.elementLocated(By.id('chat-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if default chat panel is not present
element = await browser.findElements(By.id('default-chat-panel'));
expect(element.length).equals(0);
// Check if custom chat panel is not present
element = await browser.findElements(By.id('custom-chat-panel'));
expect(element.length).equals(0);
});
it('should inject the CUSTOM PANEL with PARTICIPANTS PANEL and P ITEM 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('ovParticipantsPanel-checkbox')), TIMEOUT);
await element.click();
element = await browser.wait(until.elementLocated(By.id('ovParticipantPanelItem-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 participants panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(1);
// Check if default panel is not present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(0);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participant-panel'));
expect(element.length).equals(0);
// Check if custom participant panel is present
element = await browser.wait(until.elementLocated(By.id('custom-participants-panel')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Check if custom participant panel item is present
element = await browser.wait(until.elementLocated(By.id('custom-participants-panel-item')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Check if default participant panel item is not present
element = await browser.findElements(By.id('default-participant-panel-item'));
expect(element.length).equals(0);
});
it('should inject the CUSTOM PANEL with PARTICIPANTS PANEL and P ITEM and P ITEM ELEMENT', 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('ovParticipantsPanel-checkbox')), TIMEOUT);
await element.click();
element = await browser.wait(until.elementLocated(By.id('ovParticipantPanelItem-checkbox')), TIMEOUT);
await element.click();
element = await browser.wait(until.elementLocated(By.id('ovParticipantPanelItemElements-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 participants panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(1);
// Check if custom participant panel is present
element = await browser.wait(until.elementLocated(By.id('custom-participants-panel')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Check if custom participant panel item is present
element = await browser.wait(until.elementLocated(By.id('custom-participants-panel-item')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Check if custom participant panel item element is present
element = await browser.findElements(By.id('custom-participants-panel-item-element'));
expect(element.length).equals(1);
// Check if default panel is not present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(0);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participant-panel'));
expect(element.length).equals(0);
// Check if default participant panel item is not present
element = await browser.findElements(By.id('default-participant-panel-item'));
expect(element.length).equals(0);
});
it('should inject the CHAT PANEL only', async () => {
let element;
await browser.get(`${url}`);
element = await browser.wait(until.elementLocated(By.id('ovChatPanel-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 participants panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(0);
// Check if default panel is not present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(1);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participants-panel'));
expect(element.length).equals(1);
// Check if custom participant panel is not present
element = await browser.findElements(By.id('custom-participants-panel'));
expect(element.length).equals(0);
// Click on button for opening chat panel
element = await browser.wait(until.elementLocated(By.id('chat-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if default chat panel is not present
element = await browser.findElements(By.id('default-chat-panel'));
expect(element.length).equals(0);
// Check if custom chat panel is not present
element = await browser.wait(until.elementLocated(By.id('custom-chat-panel')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
});
it('should inject the PARTICIPANTS PANEL only', async () => {
let element;
await browser.get(`${url}`);
element = await browser.wait(until.elementLocated(By.id('ovParticipantsPanel-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 participants panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is not present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(0);
// Check if default panel is present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(1);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participant-panel'));
expect(element.length).equals(0);
// Check if custom participant panel is not present
element = await browser.wait(until.elementLocated(By.id('custom-participants-panel')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Click on button for opening chat panel
element = await browser.wait(until.elementLocated(By.id('chat-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if default chat panel is present
element = await browser.findElements(By.id('default-chat-panel'));
expect(element.length).equals(1);
// Check if custom chat panel is not present
element = await browser.findElements(By.id('custom-chat-panel'));
expect(element.length).equals(0);
});
it('should inject the PARTICIPANTS PANEL ITEM only', async () => {
let element;
await browser.get(`${url}`);
element = await browser.wait(until.elementLocated(By.id('ovParticipantPanelItem-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 participants panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is not present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(0);
// Check if default panel is present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(1);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participants-panel'));
expect(element.length).equals(1);
// Check if custom participant panel is not present
element = await browser.findElements(By.id('custom-participants-panel'));
expect(element.length).equals(0);
element = await browser.wait(until.elementLocated(By.id('custom-participants-panel-item')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Click on button for opening chat panel
element = await browser.wait(until.elementLocated(By.id('chat-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if default chat panel is present
element = await browser.findElements(By.id('default-chat-panel'));
expect(element.length).equals(1);
// Check if custom chat panel is not present
element = await browser.findElements(By.id('custom-chat-panel'));
expect(element.length).equals(0);
});
it('should inject the PARTICIPANTS PANEL ITEM ELEMENT only', async () => {
let element;
await browser.get(`${url}`);
element = await browser.wait(until.elementLocated(By.id('ovParticipantPanelItemElements-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 participants panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is not present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(0);
// Check if default panel is present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(1);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participants-panel'));
expect(element.length).equals(1);
// Check if custom participant panel is not present
element = await browser.findElements(By.id('custom-participants-panel'));
expect(element.length).equals(0);
element = await browser.findElements(By.id('custom-participants-panel-item'));
expect(element.length).equals(0);
element = await browser.findElements(By.id('custom-participants-panel-item'));
expect(element.length).equals(0);
element = await browser.findElements(By.id('custom-participants-panel-item-element'));
expect(element.length).equals(1);
// Click on button for opening chat panel
element = await browser.wait(until.elementLocated(By.id('chat-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if default chat panel is present
element = await browser.findElements(By.id('default-chat-panel'));
expect(element.length).equals(1);
// Check if custom chat panel is not present
element = await browser.findElements(By.id('custom-chat-panel'));
expect(element.length).equals(0);
});
it('should inject the CUSTOM PANEL with CHAT and PARTICIPANTS PANELS', 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('ovChatPanel-checkbox')), TIMEOUT);
await element.click();
element = await browser.wait(until.elementLocated(By.id('ovParticipantsPanel-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 participants panel
element = await browser.wait(until.elementLocated(By.id('participants-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if custom panel is present
element = await browser.findElements(By.id('custom-panels'));
expect(element.length).equals(1);
// Check if default panel is not present
element = await browser.findElements(By.id('default-panel'));
expect(element.length).equals(0);
// Check if default participant panel is not present
element = await browser.findElements(By.id('default-participant-panel'));
expect(element.length).equals(0);
// Check if custom participant panel is not present
element = await browser.wait(until.elementLocated(By.id('custom-participants-panel')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Click on button for opening chat panel
element = await browser.wait(until.elementLocated(By.id('chat-panel-btn')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
await element.click();
// Check if default chat panel is not present
element = await browser.findElements(By.id('default-chat-panel'));
expect(element.length).equals(0);
// Check if custom chat panel is not present
element = await browser.wait(until.elementLocated(By.id('custom-chat-panel')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
});
//* LAYOUT
it('should inject the custom LAYOUT WITHOUT STREAM', async () => {
await browser.get(`${url}`);
let element: any = await browser.wait(until.elementLocated(By.id('ovLayout-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 layout is present
element = await browser.wait(until.elementLocated(By.id('custom-layout')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Check if default layout is not present
element = await browser.findElements(By.id('default-layout'));
expect(element.length).equals(0);
// Check if custom stream is not present
element = await browser.findElements(By.id('custom-stream'));
expect(element.length).equals(0);
// Check if video is not present
element = await browser.findElements(By.css('video'));
expect(element.length).equals(0);
});
it('should inject the custom LAYOUT WITH STREAM', async () => {
await browser.get(`${url}`);
let element: any = await browser.wait(until.elementLocated(By.id('ovLayout-checkbox')), TIMEOUT);
await element.click();
element = await browser.wait(until.elementLocated(By.id('ovStream-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 layout is present
element = await browser.wait(until.elementLocated(By.id('custom-layout')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Check if default layout is not present
element = await browser.findElements(By.id('default-layout'));
expect(element.length).equals(0);
// Check if custom stream is present
element = await browser.wait(until.elementLocated(By.id('custom-stream')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Check if default stream is not present
element = await browser.findElements(By.id('default-stream'));
expect(element.length).equals(0);
// Check if video is present
element = await browser.findElements(By.css('video'));
expect(element.length).equals(1);
});
it('should inject the CUSTOM STREAM only', async () => {
let element;
await browser.get(`${url}`);
element = await browser.wait(until.elementLocated(By.id('ovStream-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 layout is not present
element = await browser.wait(until.elementLocated(By.id('default-layout')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Check if custom stream is present
element = await browser.wait(until.elementLocated(By.id('custom-stream')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
// Check if custom layout is not present
element = await browser.findElements(By.id('custom-layout'));
expect(element.length).equals(0);
// Check if default stream is not present
element = await browser.findElements(By.id('default-stream'));
expect(element.length).equals(0);
// Check if video is present
element = await browser.findElements(By.css('video'));
expect(element.length).equals(1);
});
// * EVENTS
// it('should receive the onJoinButtonClicked event', async () => {
// let element;
// await browser.get(`${url}`);
// element = await browser.wait(until.elementLocated(By.id('prejoin-container')), TIMEOUT);
// expect(await element.isDisplayed()).to.be.true;
// // Clicking to join button
// const joinButton = await browser.findElement(By.id('join-button'));
// expect(await joinButton.isDisplayed()).to.be.true;
// await joinButton.click();
// // Checking if onJoinButtonClicked has been received
// element = await browser.wait(until.elementLocated(By.id('onJoinButtonClicked')), TIMEOUT);
// expect(await element.isDisplayed()).to.be.true;
// });
it('should receive the onLeaveButtonClicked 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 leave button
const leaveButton = await browser.findElement(By.id('leave-btn'));
expect(await leaveButton.isDisplayed()).to.be.true;
await leaveButton.click();
// Checking if onLeaveButtonClicked has been received
element = await browser.wait(until.elementLocated(By.id('onLeaveButtonClicked')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
});
it('should receive the onCameraButtonClicked 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 leave button
const cameraButton = await browser.findElement(By.id('camera-btn'));
expect(await cameraButton.isDisplayed()).to.be.true;
await cameraButton.click();
// Checking if onCameraButtonClicked has been received
element = await browser.wait(until.elementLocated(By.id('onCameraButtonClicked')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
});
it('should receive the onMicrophoneButtonClicked 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 leave button
const cameraButton = await browser.findElement(By.id('mic-btn'));
expect(await cameraButton.isDisplayed()).to.be.true;
await cameraButton.click();
// Checking if onMicrophoneButtonClicked has been received
element = await browser.wait(until.elementLocated(By.id('onMicrophoneButtonClicked')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
});
it('should receive the onScreenshareButtonClicked 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 leave button
const screenshareButton = await browser.findElement(By.id('screenshare-btn'));
expect(await screenshareButton.isDisplayed()).to.be.true;
await screenshareButton.click();
// Checking if onScreenshareButtonClicked has been received
element = await browser.wait(until.elementLocated(By.id('onScreenshareButtonClicked')), TIMEOUT);
expect(await element.isDisplayed()).to.be.true;
});
it('should receive the onFullscreenButtonClicked 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 leave button
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;
});
});

0
openvidu-components-angular/webcomponent-test-e2e/config.ts → openvidu-components-angular/e2e/config.ts
View File

42
openvidu-components-angular/e2e/protractor.conf.js
View File

@ -1,42 +0,0 @@
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome',
chromeOptions: {
args: ['use-fake-ui-for-media-stream', 'use-fake-device-for-media-stream'],
},
acceptInsecureCerts : true
},
restartBrowserBetweenTests: true,
directConnect: !process.env.SELENIUM_URL,
seleniumAddress: process.env.SELENIUM_URL,
baseUrl: (process.env.APP_URL || 'http://localhost:4200/'),
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({
spec: {
displayStacktrace: StacktraceOption.PRETTY
}
}));
}
};

36
openvidu-components-angular/e2e/selenium.conf.ts Normal file
View File

@ -0,0 +1,36 @@
import { LAUNCH_MODE } from './config';
import * as chrome from 'selenium-webdriver/chrome';
import { Capabilities } from 'selenium-webdriver';
interface BrowserConfig {
appUrl: string;
seleniumAddress: string;
browserCapabilities: Capabilities;
browserOptions: chrome.Options;
browserName: string;
}
let chromeArguments = ['--window-size=1024,768', '--use-fake-ui-for-media-stream', '--use-fake-device-for-media-stream'];
let chromeArgumentsCI = [
'--headless',
'--disable-dev-shm-usage',
'--window-size=1024,768',
'--use-fake-ui-for-media-stream',
'--use-fake-device-for-media-stream'
];
export const WebComponentConfig: BrowserConfig = {
appUrl: 'http://localhost:8080/',
seleniumAddress: LAUNCH_MODE === 'CI' ? 'http://localhost:4444/wd/hub' : '',
browserName: 'chrome',
browserCapabilities: Capabilities.chrome().set('acceptInsecureCerts', true),
browserOptions: new chrome.Options().addArguments(...(LAUNCH_MODE === 'CI' ? chromeArgumentsCI : chromeArguments))
};
export const AngularConfig: BrowserConfig = {
appUrl: 'http://localhost:4200/#/testing',
seleniumAddress: LAUNCH_MODE === 'CI' ? 'http://localhost:4444/wd/hub' : '',
browserName: 'Chrome',
browserCapabilities: Capabilities.chrome().set('acceptInsecureCerts', true),
browserOptions: new chrome.Options().addArguments(...(LAUNCH_MODE === 'CI' ? chromeArgumentsCI : chromeArguments))
};

356
openvidu-components-angular/e2e/src/app.e2e-spec.ts
View File

@ -1,356 +0,0 @@
import { OpenViduCall } from './app.po';
import { browser, Key } from 'protractor';
import { protractor } from 'protractor/built/ptor';
describe('Connect to the room', () => {
const OVC = new OpenViduCall();
beforeEach(() => {
browser.waitForAngularEnabled(false);
browser.get('#/call/');
});
it('should navigate to OpenVidu room', () => {
const input = OVC.getRoomInput(browser);
input.clear();
input.sendKeys('OpenVidu');
OVC.getRoomJoinButton(browser).click();
expect(browser.getCurrentUrl()).toMatch('#/call/OpenVidu');
});
it('should show a short room name error', () => {
const input = OVC.getRoomInput(browser);
input.clear();
input.sendKeys('OV');
const shortError = OVC.getShortRoomNameError(browser);
expect(shortError.isDisplayed()).toBeTruthy();
OVC.getRoomJoinButton(browser).click();
expect(browser.getCurrentUrl()).toMatch('#/call/');
});
it('should show a required name room error', async () => {
const input = OVC.getRoomInput(browser);
await input.sendKeys(Key.CONTROL, 'a');
await input.sendKeys(Key.DELETE);
expect(OVC.getRequiredRoomNameError(browser).isDisplayed()).toBeTruthy();
OVC.getRoomJoinButton(browser).click();
expect(browser.getCurrentUrl()).toMatch('#/call/');
});
});
describe('Testing config card', () => {
const OVC = new OpenViduCall();
const EC = protractor.ExpectedConditions;
beforeEach(() => {
browser.waitForAngularEnabled(false);
browser.get('#/call/OpenVidu');
});
it('should show the config card', () => {
const configCard = OVC.getConfigCard(browser);
browser.wait(EC.visibilityOf(configCard), 3000);
expect(configCard.isDisplayed()).toBeTruthy();
});
it('should close the config card and go to home', () => {
browser.wait(EC.visibilityOf(OVC.getConfigCard(browser)), 3000);
expect(OVC.getConfigCard(browser).isDisplayed()).toBeTruthy();
browser.wait(EC.elementToBeClickable(OVC.getCloseButtonConfigCard(browser)), 5000);
OVC.getCloseButtonConfigCard(browser).click();
expect(browser.getCurrentUrl()).toMatch('#/call/');
// browser.wait(EC.elementToBeClickable(OVC.getCamButton(browser)), 5000);
// OVC.getCamButton(browser).click();
// browser.wait(EC.visibilityOf(OVC.getCamIcon(browser)), 5000);
// expect(OVC.getCamIcon(browser).isDisplayed()).toBeTruthy();
});
it('should be able to mute the camera', async () => {
let isVideoEnabled: boolean;
const videoEnableScript =
'const videoTrack = document.getElementsByTagName("video")[0].srcObject.getVideoTracks()[0]; return videoTrack.enabled;';
browser.wait(EC.elementToBeClickable(OVC.getConfigCardCameraButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
isVideoEnabled = await browser.executeScript(videoEnableScript);
expect(isVideoEnabled).toBe(true);
OVC.getConfigCardCameraButton(browser).click();
isVideoEnabled = await browser.executeScript(videoEnableScript);
expect(isVideoEnabled).toBe(false);
});
it('should be able to mute the microphone', async () => {
let isAudioEnabled: boolean;
const audioEnableScript =
'const audioTrack = document.getElementsByTagName("video")[0].srcObject.getAudioTracks()[0]; return audioTrack.enabled;';
browser.wait(EC.elementToBeClickable(OVC.getConfigCardMicrophoneButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
isAudioEnabled = await browser.executeScript(audioEnableScript);
expect(isAudioEnabled).toBe(true);
OVC.getConfigCardMicrophoneButton(browser).click();
isAudioEnabled = await browser.executeScript(audioEnableScript);
expect(isAudioEnabled).toBe(false);
});
// Unable to share screen in a headless chrome
xit('should be able to share the screen', async () => {
browser.wait(EC.elementToBeClickable(OVC.getConfigCardScreenShareButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getConfigCardScreenShareButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(2);
});
});
// Unable to share screen in a headless chrome
xit('should be able to share the screen and remove the camera video if it is muted', () => {
browser.wait(EC.elementToBeClickable(OVC.getConfigCardScreenShareButton(browser)), 5000);
browser.wait(EC.elementToBeClickable(OVC.getConfigCardCameraButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getConfigCardCameraButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getConfigCardScreenShareButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
});
// Unable to share screen in a headless chrome
xit('should be able to add the camera video when the screen is active clicking on camera button', () => {
browser.wait(EC.elementToBeClickable(OVC.getConfigCardScreenShareButton(browser)), 5000);
browser.wait(EC.elementToBeClickable(OVC.getConfigCardCameraButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getConfigCardCameraButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getConfigCardScreenShareButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getConfigCardCameraButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(2);
});
});
it('should be able to add the camera video disabling screen share', () => {
browser.wait(EC.elementToBeClickable(OVC.getConfigCardScreenShareButton(browser)), 5000);
browser.wait(EC.elementToBeClickable(OVC.getConfigCardCameraButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getConfigCardCameraButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getConfigCardScreenShareButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getConfigCardScreenShareButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
});
it('should be able to join to room', async () => {
browser.wait(EC.elementToBeClickable(OVC.getRoomJoinButton(browser)), 5000);
OVC.getRoomJoinButton(browser).click();
expect(OVC.getRoomContainer(browser).isDisplayed()).toBeTruthy();
});
});
describe('Testing room', () => {
const OVC = new OpenViduCall();
const EC = protractor.ExpectedConditions;
beforeEach(() => {
browser.waitForAngularEnabled(false);
browser.get('#/call/');
browser.wait(EC.elementToBeClickable(OVC.getRoomJoinButton(browser)), 5000);
OVC.getRoomJoinButton(browser).click();
browser.sleep(1000);
browser.wait(EC.elementToBeClickable(OVC.getRoomJoinButton(browser)), 5000);
OVC.getRoomJoinButton(browser).click();
browser.sleep(1000);
});
afterEach(() => {
browser.wait(EC.elementToBeClickable(OVC.getLeaveButton(browser)), 5000);
OVC.getLeaveButton(browser).click();
expect(expect(browser.getCurrentUrl()).toMatch('#/call/'));
});
it('should be able to mute the camera', async () => {
let isVideoEnabled: boolean;
const videoEnableScript =
'const videoTrack = document.getElementsByTagName("video")[0].srcObject.getVideoTracks()[0]; return videoTrack.enabled;';
browser.wait(EC.elementToBeClickable(OVC.getRoomCameraButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
isVideoEnabled = await browser.executeScript(videoEnableScript);
expect(isVideoEnabled).toBe(true);
OVC.getRoomCameraButton(browser).click();
isVideoEnabled = await browser.executeScript(videoEnableScript);
expect(isVideoEnabled).toBe(false);
// Uncomment when muted video is shown
// expect(OVC.getCameraStatusDisabled(browser).isDisplayed()).toBe(true);
});
it('should be able to mute the microphone', async () => {
let isAudioEnabled: boolean;
const audioEnableScript =
'const audioTrack = document.getElementsByTagName("video")[0].srcObject.getAudioTracks()[0]; return audioTrack.enabled;';
browser.wait(EC.elementToBeClickable(OVC.getRoomMicrophoneButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
isAudioEnabled = await browser.executeScript(audioEnableScript);
expect(isAudioEnabled).toBe(true);
OVC.getRoomMicrophoneButton(browser).click();
isAudioEnabled = await browser.executeScript(audioEnableScript);
expect(isAudioEnabled).toBe(false);
expect(OVC.getMicrophoneStatusDisabled(browser).isDisplayed()).toBe(true);
});
// Unable to share screen in a headless chrome
xit('should be able to share the screen', () => {
browser.wait(EC.elementToBeClickable(OVC.getRoomScreenButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
browser.sleep(3000);
OVC.getRoomScreenButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(2);
});
});
// Unable to share screen in a headless chrome
xit('should be able to share the screen and remove the camera video if it is muted', () => {
browser.wait(EC.elementToBeClickable(OVC.getRoomScreenButton(browser)), 5000);
browser.wait(EC.elementToBeClickable(OVC.getRoomCameraButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getRoomCameraButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getRoomScreenButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
});
// Unable to share screen in a headless chrome
xit('should be able to add the camera video disabling screen share', () => {
browser.wait(EC.elementToBeClickable(OVC.getRoomScreenButton(browser)), 5000);
browser.wait(EC.elementToBeClickable(OVC.getRoomCameraButton(browser)), 5000);
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getRoomCameraButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getRoomScreenButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
OVC.getRoomScreenButton(browser).click();
OVC.getAllVideos(browser).then((videos) => {
expect(videos.length).toEqual(1);
});
});
it('should enable and disable fullscreen', () => {
browser.wait(EC.elementToBeClickable(OVC.getFullscreenButton(browser)), 5000);
const button = OVC.getFullscreenButton(browser);
button.click();
browser.sleep(1000);
browser.driver
.manage()
.window()
.getSize()
.then((value) => {
expect(value.width === OVC.getVideo(browser).width && value.height === OVC.getVideo(browser).height);
button.click();
browser.driver
.manage()
.window()
.getSize()
.then((value2) => {
expect(value2.width !== OVC.getVideo(browser).width && value2.height !== OVC.getVideo(browser).height);
});
});
});
});

140
openvidu-components-angular/e2e/src/app.po.ts
View File

@ -1,140 +0,0 @@
import { by, protractor, ElementFinder, ProtractorBrowser } from 'protractor';
export class OpenViduCall {
constructor() {}
getRoomInput(browser: ProtractorBrowser) {
return this.getElementById(browser, 'roomInput');
}
getRoomJoinButton(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'joinButton');
}
getShortRoomNameError(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'shortNameError');
}
getRequiredRoomNameError(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'requiredNameError');
}
getConfigCard(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'roomConfig');
}
getConfigCardScreenShareButton(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'configCardScreenButton');
}
getConfigCardCameraButton(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'configCardCameraButton');
}
getConfigCardMicrophoneButton(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'configCardMicrophoneButton');
}
getRoomContainer(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'room-container');
}
getCloseButtonConfigCard(browser: ProtractorBrowser): ElementFinder {
return browser.element(by.id('closeButton'));
}
getAllVideos(browser: ProtractorBrowser){
return browser.element.all(by.tagName('video'));
}
getLeaveButton(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'navLeaveButton');
}
getRoomCameraButton(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'navCameraButton');
}
getCameraStatusDisabled(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'statusCam');
}
getFullscreenButton(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'fullscreenButton');
}
getRoomMicrophoneButton(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'navMicrophoneButton');
}
getMicrophoneStatusDisabled(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'statusMic');
}
getRoomScreenButton(browser: ProtractorBrowser): ElementFinder {
return this.getElementById(browser, 'navScreenButton');
}
openNewBrowserInTheSameRoom(browser: ProtractorBrowser): ProtractorBrowser {
return browser.forkNewDriverInstance(true);
}
getLocalNickname(browser: ProtractorBrowser): ElementFinder {
return browser.element(by.css('#localUser #nickname'));
}
getRemoteNickname(browser: ProtractorBrowser): ElementFinder {
return browser.element(by.css('#remoteUsers #nickname'));
}
getDialogNickname(browser: ProtractorBrowser): ElementFinder {
return browser.element(by.css('#dialogNickname'));
}
getChatButton(browser: ProtractorBrowser): ElementFinder {
return browser.element(by.css('#navChatButton'));
}
getVideo(browser: ProtractorBrowser): ElementFinder {
return this.getChatContent(browser).element(by.css('video'));
}
getRemoteVideoList(browser): ElementFinder {
return browser.element.all(by.css('#remoteUsers video'));
}
getChatContent(browser: ProtractorBrowser): ElementFinder {
return browser.element(by.css('#chatComponent'));
}
getChatInput(browser: ProtractorBrowser): ElementFinder {
return browser.element(by.id('chatInput'));
}
getNewMessagePoint(browser: ProtractorBrowser): ElementFinder {
return browser.element(by.css('#mat-badge-content-0'));
}
pressEnter(browser: ProtractorBrowser) {
browser.actions().sendKeys(protractor.Key.ENTER).perform();
}
getMessageList(browser: ProtractorBrowser) {
return browser.element.all(by.css('#chatComponent .message-wrap .message .msg-detail'));
}
closeSession(browser: ProtractorBrowser) {
const leaveButton = this.getLeaveButton(browser);
leaveButton.click();
browser.quit();
}
typeWithDelay(input, keys: string) {
keys.split('').forEach((c) => input.sendKeys(c));
}
private getElementById(browser: ProtractorBrowser, id: string) {
return browser.element(by.id(id));
}
}

23
openvidu-components-angular/e2e/tsconfig.json
View File

@ -1,14 +1,15 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es2018",
"types": [
"jasmine",
"jasminewd2",
"node"
]
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true,
"outDir": "./dist",
"lib": [
"es6"
],
"types": [ "mocha", "node" ],
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
}

2
openvidu-components-angular/openvidu-webcomponent-build.js
View File

@ -5,7 +5,7 @@ const VERSION = require("./package.json").version;
module.exports.buildWebcomponent = async () => {
console.log("Building OpenVidu Web Component (" + VERSION + ")");
const tutorialWcPath = "../../openvidu-tutorials/openvidu-webcomponent/web";
const e2eWcPath = "./webcomponent-test-e2e/web";
const e2eWcPath = "./e2e/webcomponent-app";
try {
await buildElement();

4512
openvidu-components-angular/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

21
openvidu-components-angular/package.json
View File

@ -8,11 +8,13 @@
"lib:build": "ng build openvidu-angular --configuration production && cd ./dist/openvidu-angular && npm pack",
"lib:copy": "cp dist/openvidu-angular/openvidu-angular-*.tgz ../openvidu-tutorials/openvidu-angular-components",
"lib:test": "ng test openvidu-angular --no-watch --code-coverage",
"lib:e2e": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/angular.test.js",
"webcomponent:build": "./node_modules/@angular/cli/bin/ng.js build openvidu-webcomponent --configuration production && node ./openvidu-webcomponent-build.js",
"webcomponent:prepare-test-e2e": "npm run lib:build && npm run webcomponent:build",
"webcomponent:serve-testapp": "npx http-server ./e2e/webcomponent-app/",
"webcomponent:e2e": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/webcomponent.test.js",
"webcomponent:e2e-ci": "cross-env LAUNCH_MODE=CI npm run webcomponent:e2e",
"bundle-report": "ng build openvidu-webcomponent --stats-json --configuration production && webpack-bundle-analyzer dist/openvidu-webcomponent/stats.json",
"lint": "ng lint",
"e2e": "ng e2e"
"lint": "ng lint"
},
"private": true,
"dependencies": {
@ -27,7 +29,6 @@
"@angular/platform-browser-dynamic": "13.0.0",
"@angular/router": "13.0.0",
"autolinker": "3.14.3",
"buffer": "^6.0.3",
"openvidu-browser": "^2.21.0",
"rxjs": "7.4.0",
"tslib": "2.3.1",
@ -39,11 +40,16 @@
"@angular/compiler": "13.0.0",
"@angular/compiler-cli": "13.0.0",
"@angular/elements": "13.0.0",
"@types/jasmine": "3.10.2",
"@types/jasminewd2": "2.0.10",
"@types/chai": "4.3.0",
"@types/mocha": "9.1.0",
"@types/node": "16.11.6",
"@types/selenium-webdriver": "4.0.18",
"chai": "4.3.6",
"chromedriver": "99.0.0",
"codelyzer": "6.0.2",
"concat": "^1.0.3",
"cross-env": "^7.0.3",
"http-server": "14.1.0",
"jasmine-core": "3.10.1",
"jasmine-spec-reporter": "7.0.0",
"karma": "^6.3.9",
@ -55,8 +61,9 @@
"karma-junit-reporter": "2.0.1",
"karma-mocha-reporter": "2.2.5",
"karma-notify-reporter": "1.3.0",
"mocha": "9.2.2",
"ng-packagr": "13.0.3",
"protractor": "7.0.0",
"selenium-webdriver": "4.1.1",
"ts-node": "10.4.0",
"tslint": "6.1.3",
"typescript": "4.4.4",

13
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
View File

@ -39,6 +39,7 @@
<ng-template #defaultToolbar>
<ov-toolbar
id="default-toolbar"
(onLeaveButtonClicked)="onLeaveButtonClicked()"
(onCameraButtonClicked)="onCameraButtonClicked()"
(onMicrophoneButtonClicked)="onMicrophoneButtonClicked()"
@ -56,7 +57,7 @@
</ng-template>
<ng-template #defaultPanel>
<ov-panel>
<ov-panel id="default-panel">
<ng-template #chatPanel>
<ng-container *ngTemplateOutlet="openviduAngularChatPanelTemplate"></ng-container>
</ng-template>
@ -68,11 +69,11 @@
</ng-template>
<ng-template #defaultChatPanel>
<ov-chat-panel></ov-chat-panel>
<ov-chat-panel id="default-chat-panel"></ov-chat-panel>
</ng-template>
<ng-template #defaultParticipantsPanel>
<ov-participants-panel>
<ov-participants-panel id="default-participants-panel">
<ng-template #participantPanelItem let-participant>
<ng-container
*ngTemplateOutlet="openviduAngularParticipantPanelItemTemplate; context: { $implicit: participant }"
@ -82,7 +83,7 @@
</ng-template>
<ng-template #defaultParticipantPanelItem let-participant>
<ov-participant-panel-item [participant]="participant">
<ov-participant-panel-item [participant]="participant" id="default-participant-panel-item">
<ng-template #participantPanelItemElements>
<ng-container *ngTemplateOutlet="openviduAngularParticipantPanelItemElementsTemplate; context: { $implicit: participant }"></ng-container>
@ -92,7 +93,7 @@
</ng-template>
<ng-template #defaultLayout>
<ov-layout>
<ov-layout id="default-layout">
<ng-template #stream let-stream>
<ng-container *ngTemplateOutlet="openviduAngularStreamTemplate; context: { $implicit: stream }"> </ng-container>
</ng-template>
@ -100,5 +101,5 @@
</ng-template>
<ng-template #defaultStream let-stream>
<ov-stream [stream]="stream"></ov-stream>
<ov-stream [stream]="stream" id="default-stream"></ov-stream>
</ng-template>

11
openvidu-components-angular/src/app/app.module.ts
View File

@ -1,4 +1,5 @@
import { BrowserModule } from '@angular/platform-browser';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app.routing.module';
@ -18,7 +19,6 @@ import { StreamTestComponent } from './components/stream-test/stream-test.compon
import {
OpenViduAngularModule,
UserSettingsComponent,
ChatPanelComponent,
ToolbarComponent,
SessionComponent,
@ -26,6 +26,8 @@ import {
VideoconferenceComponent
} from 'openvidu-angular';
import { MatButtonModule } from '@angular/material/button';
import { TestingComponent } from './testing-app/testing.component';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
declarations: [
@ -35,16 +37,19 @@ import { MatButtonModule } from '@angular/material/button';
ToolbarTestComponent,
ChatTestComponent,
LayoutTestComponent,
StreamTestComponent
StreamTestComponent,
TestingComponent
],
imports: [
BrowserModule,
MatCheckboxModule,
MatButtonModule,
MatIconModule,
BrowserAnimationsModule,
OpenViduAngularModule.forRoot(environment),
AppRoutingModule // Order is important, AppRoutingModule must be the last import for useHash working
],
providers: [VideoconferenceComponent, UserSettingsComponent, ToolbarComponent, ChatPanelComponent, SessionComponent, LayoutComponent],
providers: [VideoconferenceComponent, ToolbarComponent, ChatPanelComponent, SessionComponent, LayoutComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

4
openvidu-components-angular/src/app/app.routing.module.ts
View File

@ -6,6 +6,7 @@ import { ToolbarTestComponent } from './components/toolbar-test/toolbar-test.com
import { ChatTestComponent } from './components/chat-test/chat-test.component';
import { LayoutTestComponent } from './components/layout-test/layout-test.component';
import { StreamTestComponent } from './components/stream-test/stream-test.component';
import { TestingComponent } from './testing-app/testing.component';
const routes: Routes = [
{ path: '', component: DashboardComponent },
@ -13,7 +14,8 @@ const routes: Routes = [
{ path: 'toolbar', component: ToolbarTestComponent },
{ path: 'chat', component: ChatTestComponent },
{ path: 'layout', component: LayoutTestComponent },
{ path: 'stream', component: StreamTestComponent }
{ path: 'stream', component: StreamTestComponent },
{ path: 'testing', component: TestingComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],

2
openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts
View File

@ -12,7 +12,7 @@ export class StreamTestComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.stream = new ParticipantModel();
// this.stream = new ParticipantModel();
}
}

67
openvidu-components-angular/src/app/dashboard/dashboard.component.html
View File

@ -14,43 +14,52 @@
</a>
</div>
<div class="content" role="main">
<!-- Resources -->
<h2>OpenVidu Call APP</h2>
<p>Test the OpenVidu Call app using <b>{{title}}</b>:</p>
<div class="content" role="main" style="height: 100%;">
<div class="card-container">
<a class="card" (click)="goTo('call')">
<span>OpenVidu Call APP</span>
<div class="dashboard-section">
<div id="call-app">
<h2>OpenVidu Call APP</h2>
<p>Test the OpenVidu Call app using <b>{{title}}</b>:</p>
<div class="card-container">
<a id="call-app-btn" class="card" (click)="goTo('call')">
<span>OpenVidu Call APP</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</a>
</div>
</div>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</a>
</div>
<!-- Next Steps -->
<h2>Components</h2>
<p>What component do you want to see?</p>
<input type="hidden" #selection />
<div class="dashboard-section">
<div id="testing-app">
<h2>Testing APP</h2>
<p>App for testing openvidu-angular</p>
<input type="hidden" #selection />
<div class="card-container">
<a class="card" id="testing-app-btn" (click)="goTo('testing')">
<span>Testing App</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</a>
</div>
<div class="card-container">
<div class="card card-small" (click)="goTo('toolbar')" tabindex="0">
<span>Toolbar Component</span>
</div>
<div class="card card-small" (click)="goTo('layout')" tabindex="0">
<span>Layout Component</span>
</div>
<div class="card card-small" (click)="goTo('stream')" tabindex="0">
<span>Stream Component</span>
</div>
<div class="card card-small" (click)="goTo('chat')" tabindex="0">
<span>Chat Component</span>
</div>
</div>
</div>

47
openvidu-components-angular/src/app/dashboard/dashboard.component.scss
View File

@ -20,15 +20,58 @@
margin: 0;
}
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #3c3f3e;
color: white;
font-weight: 600;
}
.content {
display: flex;
margin: 82px auto 32px;
padding: 0 16px;
margin: 62px auto;
padding: 0px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
.dashboard-section {
height: 45%; width: 100%; text-align: center;
}
#call-app, #testing-app {
height: 95%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#call-app {
border-bottom: 3px solid;
}
#call-app-btn {
background-color: #0088AA;
color: #ffffff;
font-weight: bold;
}
#testing-app-btn {
background-color: #FFCC00;
color: #080808;
font-weight: bold;
}
svg.material-icons {
height: 24px;
width: auto;

1
openvidu-components-angular/src/app/openvidu-call/call.component.html
View File

@ -65,7 +65,6 @@
</ov-participants-panel>
</ov-panel> -->
<!-- <ov-toolbar chatPanel (onCamClicked)="onCamClicked()"></ov-toolbar> -->
<!-- <div *ovParticipantPanelItem="let participant">
<ov-participant-panel-item [participant]="participant" [muteButton]="false">

2
openvidu-components-angular/src/app/openvidu-call/call.component.ts
View File

@ -15,7 +15,7 @@ export class CallComponent implements OnInit {
closeClicked: boolean = false;
isSessionAlive: boolean = false;
constructor(private restService: RestService, private router: Router) {}
constructor(private restService: RestService) {}
async ngOnInit() {
this.tokens = {

217
openvidu-components-angular/src/app/testing-app/testing.component.html Normal file
View File

@ -0,0 +1,217 @@
<section style="padding: 20px" class="example-section" *ngIf="showDirectives">
<div *ngFor="let directive of directives; let i = index" class="directive-container">
<mat-checkbox
class="parent-directive"
[id]="directive.name + '-checkbox'"
[checked]="directive.complete"
(change)="updateSelection(directive.name, $event.checked)"
>
{{ directive.name }}
</mat-checkbox>
<span>
<ul>
<li *ngFor="let sub of directive.subDirectives">
<mat-checkbox [id]="sub.name + '-checkbox'" (change)="updateSelection(sub.name, $event.checked)">
{{ sub.name }}
</mat-checkbox>
<ul>
<li *ngFor="let subSub of sub.subDirectives">
<mat-checkbox [id]="subSub.name + '-checkbox'" (change)="updateSelection(subSub.name, $event.checked)">
{{ subSub.name }}
</mat-checkbox>
<ul>
<li *ngFor="let subSubSub of subSub.subDirectives">
<mat-checkbox
[id]="subSubSub.name + '-checkbox'"
(change)="updateSelection(subSubSub.name, $event.checked)"
>
{{ subSubSub.name }}
</mat-checkbox>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</span>
</div>
</section>
<div style="text-align: center" *ngIf="showDirectives">
<button mat-flat-button color="warn" (click)="apply()" id="apply-btn">Apply</button>
</div>
<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">
<ov-toolbar
*ovToolbar
id="custom-toolbar"
(onLeaveButtonClicked)="appendElement('onLeaveButtonClicked')"
(onCameraButtonClicked)="appendElement('onCameraButtonClicked')"
(onMicrophoneButtonClicked)="appendElement('onMicrophoneButtonClicked')"
(onScreenshareButtonClicked)="appendElement('onScreenshareButtonClicked')"
(onFullscreenButtonClicked)="appendElement('onFullscreenButtonClicked')"
(onParticipantsPanelButtonClicked)="appendElement('onParticipantsPanelButtonClicked')"
(onChatPanelButtonClicked)="appendElement('onChatPanelButtonClicked')"
>
<ng-template [ngIf]="ovToolbarAdditionalButtonsSelected">
<div *ovToolbarAdditionalButtons id="custom-toolbar-additional-buttons">
<button mat-icon-button id="toolbar-additional-btn">
<mat-icon>fullscreen_exit</mat-icon>
</button>
<button mat-icon-button id="toolbar-additional-btn">
<mat-icon>fullscreen_exit</mat-icon>
</button>
</div>
</ng-template>
</ov-toolbar>
</ng-template>
<ng-template [ngIf]="ovToolbarAdditionalButtonsSelected && !ovToolbarSelected">
<div *ovToolbarAdditionalButtons id="custom-toolbar-additional-buttons">
<button mat-icon-button id="toolbar-additional-btn">
<mat-icon>fullscreen_exit</mat-icon>
</button>
<button mat-icon-button id="toolbar-additional-btn">
<mat-icon>fullscreen_exit</mat-icon>
</button>
<button mat-icon-button id="toolbar-additional-btn">
<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]="ovChatPanelSelected">
<ov-chat-panel *ovChatPanel id="custom-chat-panel"></ov-chat-panel>
</ng-template>
<ng-template [ngIf]="ovParticipantsPanelSelected">
<ov-participants-panel *ovParticipantsPanel id="custom-participants-panel">
<ng-template [ngIf]="ovParticipantPanelItemSelected">
<div *ovParticipantPanelItem="let participant" id="custom-participants-panel-item">
<ov-participant-panel-item [participant]="participant">
<ng-template [ngIf]="ovParticipantPanelItemElementsSelected">
<div *ovParticipantPanelItemElements id="custom-participants-panel-item-element">
<button mat-icon-button id="hand-notification">
<mat-icon>front_hand</mat-icon>
</button>
<span> OK</span>
</div>
</ng-template>
</ov-participant-panel-item>
</div>
</ng-template>
<ng-template [ngIf]="!ovParticipantPanelItemSelected && ovParticipantPanelItemElementsSelected">
<div *ovParticipantPanelItemElements id="custom-participants-panel-item-element">
<button mat-icon-button id="hand-notification">
<mat-icon>front_hand</mat-icon>
</button>
<span> OK</span>
</div>
</ng-template>
</ov-participants-panel>
</ng-template>
</ov-panel>
</ng-template>
<ng-template [ngIf]="!ovPanelSelected && ovChatPanelSelected">
<ov-chat-panel *ovChatPanel id="custom-chat-panel"></ov-chat-panel>
</ng-template>
<ng-template [ngIf]="!ovPanelSelected && ovParticipantsPanelSelected">
<ov-participants-panel *ovParticipantsPanel id="custom-participants-panel">
<ng-template [ngIf]="ovParticipantPanelItemSelected">
<div *ovParticipantPanelItem="let participant" id="custom-participants-panel-item">
<ov-participant-panel-item [participant]="participant">
<ng-template [ngIf]="ovParticipantPanelItemElementsSelected">
<div *ovParticipantPanelItemElements id="custom-participants-panel-item-element">
<button mat-icon-button id="hand-notification">
<mat-icon>front_hand</mat-icon>
</button>
<span> OK</span>
</div>
</ng-template>
</ov-participant-panel-item>
</div>
</ng-template>
<ng-template [ngIf]="!ovParticipantPanelItemSelected && ovParticipantPanelItemElementsSelected">
<div *ovParticipantPanelItemElements id="custom-participants-panel-item-element">
<button mat-icon-button id="hand-notification">
<mat-icon>front_hand</mat-icon>
</button>
<span> OK</span>
</div>
</ng-template>
</ov-participants-panel>
</ng-template>
<ng-template [ngIf]="!ovPanelSelected && !ovParticipantsPanelSelected && ovParticipantPanelItemSelected">
<div *ovParticipantPanelItem="let participant" id="custom-participants-panel-item">
<ov-participant-panel-item [participant]="participant">
<ng-template [ngIf]="ovParticipantPanelItemElementsSelected">
<div *ovParticipantPanelItemElements id="custom-participants-panel-item-element">
<button mat-icon-button id="hand-notification">
<mat-icon>front_hand</mat-icon>
</button>
<span> OK</span>
</div>
</ng-template>
</ov-participant-panel-item>
</div>
</ng-template>
<ng-template
[ngIf]="
!ovPanelSelected && !ovParticipantsPanelSelected && !ovParticipantPanelItemSelected && ovParticipantPanelItemElementsSelected
"
>
<div *ovParticipantPanelItemElements id="custom-participants-panel-item-element">
<button mat-icon-button id="hand-notification">
<mat-icon>front_hand</mat-icon>
</button>
<span> OK</span>
</div>
</ng-template>
<!-- END PANELS -->
<!-- LAYOUT -->
<ng-template [ngIf]="ovLayoutSelected">
<ov-layout *ovLayout id="custom-layout">
<ng-template [ngIf]="ovStreamSelected">
<div *ovStream="let stream" id="custom-stream">
<p>EXTERNAL STREAM INSIDE OF LAYOUT</p>
<ov-stream [stream]="stream"></ov-stream>
</div>
</ng-template>
</ov-layout>
</ng-template>
<ng-template [ngIf]="!ovLayoutSelected && ovStreamSelected">
<div *ovStream="let stream" id="custom-stream">
<p>EXTERNAL STREAM INSIDE OF LAYOUT</p>
<ov-stream [stream]="stream"></ov-stream>
</div>
</ng-template>
<!-- END LAYOUT -->
</ov-videoconference>

28
openvidu-components-angular/src/app/testing-app/testing.component.scss Normal file
View File

@ -0,0 +1,28 @@
section {
display: flex;
justify-content: center;
}
ul {
list-style-type: none;
margin-top: 4px;
}
.parent-directive {
font-weight: bold;
padding: 5px;
background-color: rgb(255, 238, 153);
}
.directive-container {
border: 1px solid;
border-top: 0px;
margin: 10px;
padding: 5px;
}
h4 {
text-align: center;
font-size: larger;
color: rgb(0, 81, 83);
}

25
openvidu-components-angular/src/app/testing-app/testing.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TestingComponent } from './testing.component';
describe('TestingComponent', () => {
let component: TestingComponent;
let fixture: ComponentFixture<TestingComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ TestingComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(TestingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

129
openvidu-components-angular/src/app/testing-app/testing.component.ts Normal file
View File

@ -0,0 +1,129 @@
import { Component, OnInit } from '@angular/core';
import { RestService } from '../services/rest.service';
interface TemplateDirectives {
name: string;
subDirectives?: TemplateDirectives[];
}
enum DirectiveId {
TOOLBAR = 'ovToolbar',
TOOLBAR_BUTTONS = 'ovToolbarAdditionalButtons',
PANEL = 'ovPanel',
CHAT_PANEL = 'ovChatPanel',
PARTICIPANTS_PANEL = 'ovParticipantsPanel',
PARTICIPANTS_PANEL_ITEM = 'ovParticipantPanelItem',
PARTICIPANTS_PANEL_ITEM_ELEMENT = 'ovParticipantPanelItemElements',
LAYOUT = 'ovLayout',
STREAM = 'ovStream'
}
@Component({
selector: 'app-testing',
templateUrl: './testing.component.html',
styleUrls: ['./testing.component.scss']
})
export class TestingComponent implements OnInit {
directives: TemplateDirectives[] = [
{
name: 'ovToolbar',
subDirectives: [{ name: 'ovToolbarAdditionalButtons' }]
},
{
name: 'ovPanel',
subDirectives: [
{ name: 'ovChatPanel' },
{
name: 'ovParticipantsPanel',
subDirectives: [
{
name: 'ovParticipantPanelItem',
subDirectives: [{ name: 'ovParticipantPanelItemElements' }]
}
]
}
]
},
{
name: 'ovLayout',
subDirectives: [{ name: 'ovStream' }]
}
];
showDirectives: boolean = true;
ovToolbarSelected = false;
ovToolbarAdditionalButtonsSelected = false;
ovPanelSelected = false;
ovChatPanelSelected = false;
ovParticipantsPanelSelected = false;
ovParticipantPanelItemSelected = false;
ovParticipantPanelItemElementsSelected = false;
ovLayoutSelected = false;
ovStreamSelected = false;
tokens: { webcam: any; screen: any };
constructor(private restService: RestService) {}
async ngOnInit() {
const testingSession = `testingSession-${(Math.random() + 1).toString(36).substring(7)}`;
this.tokens = {
webcam: await this.restService.getToken(testingSession),
screen: await this.restService.getToken(testingSession)
};
}
appendElement(id: string) {
console.log(id)
const eventsDiv = document.getElementById('events');
const element = document.createElement('div');
element.setAttribute('id', id);
element.setAttribute('style', 'height: 1px;');
eventsDiv.appendChild(element);
}
updateSelection(id: string, value: boolean) {
switch (id) {
case DirectiveId.TOOLBAR:
this.ovToolbarSelected = value;
break;
case DirectiveId.TOOLBAR_BUTTONS:
this.ovToolbarAdditionalButtonsSelected = value;
break;
case DirectiveId.PANEL:
this.ovPanelSelected = value;
break;
case DirectiveId.CHAT_PANEL:
this.ovChatPanelSelected = value;
break;
case DirectiveId.PARTICIPANTS_PANEL:
this.ovParticipantsPanelSelected = value;
break;
case DirectiveId.PARTICIPANTS_PANEL_ITEM:
this.ovParticipantPanelItemSelected = value;
break;
case DirectiveId.PARTICIPANTS_PANEL_ITEM_ELEMENT:
this.ovParticipantPanelItemElementsSelected = value;
break;
case DirectiveId.LAYOUT:
this.ovLayoutSelected = value;
break;
case DirectiveId.STREAM:
this.ovStreamSelected = value;
break;
}
}
apply() {
this.showDirectives = false;
}
}

13
openvidu-components-angular/src/styles.scss
View File

@ -63,18 +63,7 @@ $openvidu-components-theme: mat.define-light-theme((
html, body { height: 100%; overflow: hidden;}
body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;}
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #2aa762;
color: white;
font-weight: 600;
}
.spacer {
flex: 1;
}