mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Added e2e tests for angular apps
- Test the structural directives in angular apps - Test the output eventspull/707/head
csantosm
parent
5c209a55ba
commit
f0ec449f25
|
|
@ -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/
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -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
|
||||
}
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
|
@ -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))
|
||||
};
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
|
|
|
|||
|
|
@ -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 })],
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export class StreamTestComponent implements OnInit {
|
|||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.stream = new ParticipantModel();
|
||||
// this.stream = new ParticipantModel();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue