From baf3da51c2e86bc8d79a2bdaa1758c804bc427d3 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Tue, 20 May 2025 16:51:01 +0200 Subject: [PATCH] ov-components: add end-to-end tests for attribute and structural directives --- .../attribute-directives.test.ts | 368 ++++++++++++++++++ .../e2e/nested-components/events.test.ts | 2 +- ...s.test.ts => strutural-directives.test.ts} | 295 +------------- openvidu-components-angular/package.json | 8 +- 4 files changed, 377 insertions(+), 296 deletions(-) create mode 100644 openvidu-components-angular/e2e/nested-components/attribute-directives.test.ts rename openvidu-components-angular/e2e/nested-components/{directives.test.ts => strutural-directives.test.ts} (77%) diff --git a/openvidu-components-angular/e2e/nested-components/attribute-directives.test.ts b/openvidu-components-angular/e2e/nested-components/attribute-directives.test.ts new file mode 100644 index 00000000..bec37714 --- /dev/null +++ b/openvidu-components-angular/e2e/nested-components/attribute-directives.test.ts @@ -0,0 +1,368 @@ +import { Builder, By, WebDriver } from 'selenium-webdriver'; + +import { NestedConfig } from '../selenium.conf'; +import { OpenViduComponentsPO } from '../utils.po.test'; + +const url = NestedConfig.appUrl; + +describe('OpenVidu Components ATTRIBUTE toolbar directives', () => { + let browser: WebDriver; + let utils: OpenViduComponentsPO; + + async function createChromeBrowser(): Promise { + return await new Builder() + .forBrowser(NestedConfig.browserName) + .withCapabilities(NestedConfig.browserCapabilities) + .setChromeOptions(NestedConfig.browserOptions) + .usingServer(NestedConfig.seleniumAddress) + .build(); + } + + beforeEach(async () => { + browser = await createChromeBrowser(); + utils = new OpenViduComponentsPO(browser); + }); + + afterEach(async () => { + // console.log('data:image/png;base64,' + await browser.takeScreenshot()); + await browser.quit(); + }); + + it('should HIDE the CHAT PANEL BUTTON', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovToolbar-checkbox'); + + await utils.clickOn('#chatPanelButton-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + // Check if chat button does not exist + expect(await utils.isPresent('chat-panel-btn')).toBeFalse(); + }); + + it('should HIDE the PARTICIPANTS PANEL BUTTON', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovToolbar-checkbox'); + + await utils.clickOn('#participantsPanelButton-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + // Check if participants button does not exist + expect(await utils.isPresent('participants-panel-btn')).toBeFalse(); + }); + + it('should HIDE the ACTIVITIES PANEL BUTTON', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovToolbar-checkbox'); + + await utils.clickOn('#activitiesPanelButton-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + // Check if participants button does not exist + expect(await utils.isPresent('activities-panel-btn')).toBeFalse(); + }); + + it('should HIDE the DISPLAY LOGO', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovToolbar-checkbox'); + + await utils.clickOn('#displayLogo-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + expect(await utils.isPresent('branding-logo')).toBeFalse(); + }); + + it('should HIDE the DISPLAY ROOM name', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovToolbar-checkbox'); + + await utils.clickOn('#displayRoomName-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + expect(await utils.isPresent('session-name')).toBeFalse(); + }); + + it('should HIDE the FULLSCREEN button', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovToolbar-checkbox'); + + await utils.clickOn('#fullscreenButton-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + // Open more options menu + await utils.clickOn('#more-options-btn'); + + await browser.sleep(500); + + await utils.waitForElement('#more-options-menu'); + + // Checking if fullscreen button is not present + expect(await utils.isPresent('#fullscreen-btn')).toBeFalse(); + }); + + it('should HIDE the STREAMING button', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovToolbar-checkbox'); + + await utils.clickOn('#broadcastingButton-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + // Open more options menu + await utils.clickOn('#more-options-btn'); + await browser.sleep(500); + + await utils.waitForElement('#more-options-menu'); + + // Checking if fullscreen button is not present + expect(await utils.isPresent('#broadcasting-btn')).toBeFalse(); + }); + + it('should HIDE the LEAVE button', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovToolbar-checkbox'); + + await utils.clickOn('#leaveButton-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + expect(await utils.isPresent('leave-btn')).toBeFalse(); + }); + + it('should HIDE the SCREENSHARE button', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovToolbar-checkbox'); + + await utils.clickOn('#screenshareButton-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + expect(await utils.isPresent('screenshare-btn')).toBeFalse(); + }); +}); + +describe('OpenVidu Components ATTRIBUTE stream directives', () => { + let browser: WebDriver; + let utils: OpenViduComponentsPO; + + async function createChromeBrowser(): Promise { + return await new Builder() + .forBrowser(NestedConfig.browserName) + .withCapabilities(NestedConfig.browserCapabilities) + .setChromeOptions(NestedConfig.browserOptions) + .usingServer(NestedConfig.seleniumAddress) + .build(); + } + + beforeEach(async () => { + browser = await createChromeBrowser(); + utils = new OpenViduComponentsPO(browser); + }); + + afterEach(async () => { + // console.log('data:image/png;base64,' + await browser.takeScreenshot()); + await browser.quit(); + }); + + it('should HIDE the AUDIO detector', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovStream-checkbox'); + + await utils.clickOn('#displayAudioDetection-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.waitForElement('#session-container'); + await utils.waitForElement('#custom-stream'); + + expect(await utils.isPresent('audio-wave-container')).toBeFalse(); + }); + + it('should HIDE the PARTICIPANT NAME', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovStream-checkbox'); + + await utils.clickOn('#displayParticipantName-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.waitForElement('#session-container'); + await utils.waitForElement('#custom-stream'); + + expect(await utils.isPresent('participant-name-container')).toBeFalse(); + }); + + it('should HIDE the SETTINGS button', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovStream-checkbox'); + + await utils.clickOn('#settingsButton-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.waitForElement('#custom-stream'); + + expect(await utils.isPresent('settings-container')).toBeFalse(); + }); +}); + +describe('OpenVidu Components ATTRIBUTE participant panels directives', () => { + let browser: WebDriver; + let utils: OpenViduComponentsPO; + + async function createChromeBrowser(): Promise { + return await new Builder() + .forBrowser(NestedConfig.browserName) + .withCapabilities(NestedConfig.browserCapabilities) + .setChromeOptions(NestedConfig.browserOptions) + .usingServer(NestedConfig.seleniumAddress) + .build(); + } + + beforeEach(async () => { + browser = await createChromeBrowser(); + utils = new OpenViduComponentsPO(browser); + }); + + afterEach(async () => { + // console.log('data:image/png;base64,' + await browser.takeScreenshot()); + await browser.quit(); + }); + + it('should HIDE the participant MUTE button', async () => { + const fixedSession = `${url}?sessionId=fixedNameTesting`; + await browser.get(`${fixedSession}`); + + await utils.clickOn('#ovParticipantPanelItem-checkbox'); + + await utils.clickOn('#muteButton-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkSessionIsPresent(); + await utils.checkToolbarIsPresent(); + + await utils.clickOn('#participants-panel-btn'); + + await utils.waitForElement('#participants-container'); + + // Starting new browser for adding a new participant + const newTabScript = `window.open("${fixedSession}")`; + await browser.executeScript(newTabScript); + + // Get tabs opened + const tabs = await browser.getAllWindowHandles(); + // Focus on the last tab + browser.switchTo().window(tabs[1]); + + await utils.clickOn('#apply-btn'); + + // Switch to first tab + await browser.switchTo().window(tabs[0]); + + await utils.waitForElement('#remote-participant-item'); + + expect(await utils.isPresent('mute-btn')).toBeFalse(); + }); +}); + +describe('OpenVidu Components ATTRIBUTE activity panel directives', () => { + let browser: WebDriver; + let utils: OpenViduComponentsPO; + + async function createChromeBrowser(): Promise { + return await new Builder() + .forBrowser(NestedConfig.browserName) + .withCapabilities(NestedConfig.browserCapabilities) + .setChromeOptions(NestedConfig.browserOptions) + .usingServer(NestedConfig.seleniumAddress) + .build(); + } + + beforeEach(async () => { + browser = await createChromeBrowser(); + utils = new OpenViduComponentsPO(browser); + }); + + afterEach(async () => { + // console.log('data:image/png;base64,' + await browser.takeScreenshot()); + await browser.quit(); + }); + + it('should HIDE the RECORDING activity', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovActivitiesPanel-checkbox'); + + await utils.clickOn('#recordingActivity-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + await utils.clickOn('#activities-panel-btn'); + + await browser.sleep(500); + + await utils.waitForElement('#custom-activities-panel'); + + expect(await utils.isPresent('ov-recording-activity')).toBeFalse(); + }); + + it('should HIDE the STREAMING activity', async () => { + await browser.get(`${url}`); + + await utils.clickOn('#ovActivitiesPanel-checkbox'); + + await utils.clickOn('#broadcastingActivity-checkbox'); + + await utils.clickOn('#apply-btn'); + + await utils.checkToolbarIsPresent(); + + await utils.clickOn('#activities-panel-btn'); + + await browser.sleep(500); + + await utils.waitForElement('#custom-activities-panel'); + + await utils.waitForElement('ov-recording-activity'); + + expect(await utils.isPresent('ov-broadcasting-activity')).toBeFalse(); + }); +}); diff --git a/openvidu-components-angular/e2e/nested-components/events.test.ts b/openvidu-components-angular/e2e/nested-components/events.test.ts index 64a310d0..d4aeb129 100644 --- a/openvidu-components-angular/e2e/nested-components/events.test.ts +++ b/openvidu-components-angular/e2e/nested-components/events.test.ts @@ -5,7 +5,7 @@ import { OpenViduComponentsPO } from '../utils.po.test'; const url = NestedConfig.appUrl; -describe('Testing EVENTS', () => { +describe('OpenVidu Components EVENTS', () => { let browser: WebDriver; let utils: OpenViduComponentsPO; diff --git a/openvidu-components-angular/e2e/nested-components/directives.test.ts b/openvidu-components-angular/e2e/nested-components/strutural-directives.test.ts similarity index 77% rename from openvidu-components-angular/e2e/nested-components/directives.test.ts rename to openvidu-components-angular/e2e/nested-components/strutural-directives.test.ts index b6a8341e..170e02eb 100644 --- a/openvidu-components-angular/e2e/nested-components/directives.test.ts +++ b/openvidu-components-angular/e2e/nested-components/strutural-directives.test.ts @@ -5,7 +5,7 @@ import { OpenViduComponentsPO } from '../utils.po.test'; const url = NestedConfig.appUrl; -describe('Testing TOOLBAR STRUCTURAL DIRECTIVES', () => { +describe('OpenVidu Components STRUCTURAL toolbar directives', () => { let browser: WebDriver; let utils: OpenViduComponentsPO; async function createChromeBrowser(): Promise { @@ -140,7 +140,7 @@ describe('Testing TOOLBAR STRUCTURAL DIRECTIVES', () => { }); }); -describe('Testing PANEL STRUCTURAL DIRECTIVES', () => { +describe('OpenVidu Components STRUCTURAL panel directives', () => { let browser: WebDriver; let utils: OpenViduComponentsPO; @@ -662,7 +662,7 @@ describe('Testing PANEL STRUCTURAL DIRECTIVES', () => { }); }); -describe('Testing LAYOUT STRUCTURAL DIRECTIVES', () => { +describe('OpenVidu Components STRUCTURAL layout directives', () => { let browser: WebDriver; let utils: OpenViduComponentsPO; @@ -760,292 +760,3 @@ describe('Testing LAYOUT STRUCTURAL DIRECTIVES', () => { }); }); -describe('Testing ATTRIBUTE DIRECTIVES', () => { - let browser: WebDriver; - let utils: OpenViduComponentsPO; - - async function createChromeBrowser(): Promise { - return await new Builder() - .forBrowser(NestedConfig.browserName) - .withCapabilities(NestedConfig.browserCapabilities) - .setChromeOptions(NestedConfig.browserOptions) - .usingServer(NestedConfig.seleniumAddress) - .build(); - } - - beforeEach(async () => { - browser = await createChromeBrowser(); - utils = new OpenViduComponentsPO(browser); - }); - - afterEach(async () => { - // console.log('data:image/png;base64,' + await browser.takeScreenshot()); - await browser.quit(); - }); - - it('should HIDE the CHAT PANEL BUTTON', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovToolbar-checkbox'); - - await utils.clickOn('#chatPanelButton-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - // Check if chat button does not exist - expect(await utils.isPresent('chat-panel-btn')).toBeFalse(); - }); - - it('should HIDE the PARTICIPANTS PANEL BUTTON', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovToolbar-checkbox'); - - await utils.clickOn('#participantsPanelButton-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - // Check if participants button does not exist - expect(await utils.isPresent('participants-panel-btn')).toBeFalse(); - }); - - it('should HIDE the ACTIVITIES PANEL BUTTON', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovToolbar-checkbox'); - - await utils.clickOn('#activitiesPanelButton-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - // Check if participants button does not exist - expect(await utils.isPresent('activities-panel-btn')).toBeFalse(); - }); - - it('should HIDE the DISPLAY LOGO', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovToolbar-checkbox'); - - await utils.clickOn('#displayLogo-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - expect(await utils.isPresent('branding-logo')).toBeFalse(); - }); - - it('should HIDE the DISPLAY ROOM name', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovToolbar-checkbox'); - - await utils.clickOn('#displayRoomName-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - expect(await utils.isPresent('session-name')).toBeFalse(); - }); - - it('should HIDE the FULLSCREEN button', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovToolbar-checkbox'); - - await utils.clickOn('#fullscreenButton-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - // Open more options menu - await utils.clickOn('#more-options-btn'); - - await browser.sleep(500); - - await utils.waitForElement('#more-options-menu'); - - // Checking if fullscreen button is not present - expect(await utils.isPresent('#fullscreen-btn')).toBeFalse(); - }); - - it('should HIDE the STREAMING button', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovToolbar-checkbox'); - - await utils.clickOn('#broadcastingButton-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - // Open more options menu - await utils.clickOn('#more-options-btn'); - await browser.sleep(500); - - await utils.waitForElement('#more-options-menu'); - - // Checking if fullscreen button is not present - expect(await utils.isPresent('#broadcasting-btn')).toBeFalse(); - }); - - it('should HIDE the LEAVE button', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovToolbar-checkbox'); - - await utils.clickOn('#leaveButton-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - expect(await utils.isPresent('leave-btn')).toBeFalse(); - }); - - it('should HIDE the SCREENSHARE button', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovToolbar-checkbox'); - - await utils.clickOn('#screenshareButton-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - expect(await utils.isPresent('screenshare-btn')).toBeFalse(); - }); - - it('should HIDE the AUDIO detector', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovStream-checkbox'); - - await utils.clickOn('#displayAudioDetection-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.waitForElement('#session-container'); - await utils.waitForElement('#custom-stream'); - - expect(await utils.isPresent('audio-wave-container')).toBeFalse(); - }); - - it('should HIDE the PARTICIPANT NAME', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovStream-checkbox'); - - await utils.clickOn('#displayParticipantName-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.waitForElement('#session-container'); - await utils.waitForElement('#custom-stream'); - - expect(await utils.isPresent('participant-name-container')).toBeFalse(); - }); - - it('should HIDE the SETTINGS button', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovStream-checkbox'); - - await utils.clickOn('#settingsButton-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.waitForElement('#custom-stream'); - - expect(await utils.isPresent('settings-container')).toBeFalse(); - }); - - it('should HIDE the participant MUTE button', async () => { - const fixedSession = `${url}?sessionId=fixedNameTesting`; - await browser.get(`${fixedSession}`); - - await utils.clickOn('#ovParticipantPanelItem-checkbox'); - - await utils.clickOn('#muteButton-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkSessionIsPresent(); - await utils.checkToolbarIsPresent(); - - await utils.clickOn('#participants-panel-btn'); - - await utils.waitForElement('#participants-container'); - - // Starting new browser for adding a new participant - const newTabScript = `window.open("${fixedSession}")`; - await browser.executeScript(newTabScript); - - // Get tabs opened - const tabs = await browser.getAllWindowHandles(); - // Focus on the last tab - browser.switchTo().window(tabs[1]); - - await utils.clickOn('#apply-btn'); - - // Switch to first tab - await browser.switchTo().window(tabs[0]); - - await utils.waitForElement('#remote-participant-item'); - - expect(await utils.isPresent('mute-btn')).toBeFalse(); - }); - - it('should HIDE the RECORDING activity', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovActivitiesPanel-checkbox'); - - await utils.clickOn('#recordingActivity-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - await utils.clickOn('#activities-panel-btn'); - - await browser.sleep(500); - - await utils.waitForElement('#custom-activities-panel'); - - expect(await utils.isPresent('ov-recording-activity')).toBeFalse(); - }); - - it('should HIDE the STREAMING activity', async () => { - await browser.get(`${url}`); - - await utils.clickOn('#ovActivitiesPanel-checkbox'); - - await utils.clickOn('#broadcastingActivity-checkbox'); - - await utils.clickOn('#apply-btn'); - - await utils.checkToolbarIsPresent(); - - await utils.clickOn('#activities-panel-btn'); - - await browser.sleep(500); - - await utils.waitForElement('#custom-activities-panel'); - - await utils.waitForElement('ov-recording-activity'); - - expect(await utils.isPresent('ov-broadcasting-activity')).toBeFalse(); - }); -}); diff --git a/openvidu-components-angular/package.json b/openvidu-components-angular/package.json index 3c5db4e7..5ea782b0 100644 --- a/openvidu-components-angular/package.json +++ b/openvidu-components-angular/package.json @@ -86,11 +86,13 @@ "lib:pack": "cd ./dist/openvidu-components-angular && npm pack", "lib:copy": "cp dist/openvidu-components-angular/openvidu-components-angular-*.tgz ../../openvidu-call/frontend", "lib:test": "ng test openvidu-components-angular --no-watch --code-coverage", - "e2e:lib-directives": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/api-directives.test.js", - "e2e:nested-all": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/nested-components/*.test.js", "e2e:nested-events": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/nested-components/events.test.js", - "e2e:nested-directives": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/nested-components/directives.test.js", + "e2e:nested-structural-directives": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/nested-components/structural-directives.test.js", + "e2e:nested-attribute-directives": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/nested-components/attribute-directives.test.js", + + "e2e:lib-directives": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/api-directives.test.js", + "e2e:webcomponent-all": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/**/*.test.js", "e2e:webcomponent-captions": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/captions.test.js", "e2e:webcomponent-chat": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/chat.test.js",