diff --git a/.github/workflows/openvidu-components-angular-tests.yml b/.github/workflows/openvidu-components-angular-tests.yml index 14dc7b43..4be2718e 100644 --- a/.github/workflows/openvidu-components-angular-tests.yml +++ b/.github/workflows/openvidu-components-angular-tests.yml @@ -286,9 +286,9 @@ jobs: if: always() uses: ./.github/actions/cleanup - webcomponent_e2e_panels: + e2e_panels: needs: test_setup - name: Webcomponent panels + name: Panels E2E if: false runs-on: ubuntu-latest steps: @@ -310,26 +310,12 @@ jobs: uses: ./.github/actions/setup-local-deployment - name: Setup OpenVidu Call Backend uses: ./.github/actions/setup-openvidu-call-backend - - name: Install dependencies - run: | - cd openvidu-components-angular - npm install - - name: Build openvidu-angular - run: npm run lib:build --prefix openvidu-components-angular - - name: Build openvidu-webcomponent - run: npm run webcomponent:testing-build --prefix openvidu-components-angular - - name: Serve Webcomponent Testapp - run: npm run webcomponent:serve-testapp --prefix openvidu-components-angular & - - name: Wait for openvidu-components-angular Testapp - run: | - until curl -s -f -o /dev/null http://localhost:8080; do - echo "Waiting for openvidu-components-angular Testapp to be ready..." - sleep 5 - done + - name: Build and Serve openvidu-components-angular Testapp + uses: ./.github/actions/build-and-serve-components-testapp - name: Run Webcomponent E2E env: LAUNCH_MODE: CI - run: npm run e2e:webcomponent-panels --prefix openvidu-components-angular + run: npm run e2e:lib-panels --prefix openvidu-components-angular - name: Cleanup if: always() uses: ./.github/actions/cleanup diff --git a/openvidu-components-angular/e2e/webcomponent-e2e/panels.test.ts b/openvidu-components-angular/e2e/panels.test.ts similarity index 81% rename from openvidu-components-angular/e2e/webcomponent-e2e/panels.test.ts rename to openvidu-components-angular/e2e/panels.test.ts index cee3539d..08234d1a 100644 --- a/openvidu-components-angular/e2e/webcomponent-e2e/panels.test.ts +++ b/openvidu-components-angular/e2e/panels.test.ts @@ -1,20 +1,19 @@ -import { Builder, Key, WebDriver } from 'selenium-webdriver'; -import { OPENVIDU_CALL_SERVER } from '../config'; -import { getBrowserOptionsWithoutDevices, WebComponentConfig } from '../selenium.conf'; -import { OpenViduComponentsPO } from '../utils.po.test'; +import { Builder, WebDriver } from 'selenium-webdriver'; +import { TestAppConfig } from './selenium.conf'; +import { OpenViduComponentsPO } from './utils.po.test'; -const url = `${WebComponentConfig.appUrl}?OV_URL=${OPENVIDU_CALL_SERVER}`; +const url = TestAppConfig.appUrl; -describe('Testing panels', () => { +describe('Panels: UI Navigation and Section Switching', () => { let browser: WebDriver; let utils: OpenViduComponentsPO; async function createChromeBrowser(): Promise { return await new Builder() - .forBrowser(WebComponentConfig.browserName) - .withCapabilities(WebComponentConfig.browserCapabilities) - .setChromeOptions(WebComponentConfig.browserOptions) - .usingServer(WebComponentConfig.seleniumAddress) + .forBrowser(TestAppConfig.browserName) + .withCapabilities(TestAppConfig.browserCapabilities) + .setChromeOptions(TestAppConfig.browserOptions) + .usingServer(TestAppConfig.seleniumAddress) .build(); } @@ -24,6 +23,9 @@ describe('Testing panels', () => { }); afterEach(async () => { + try { + await utils.leaveRoom(); + } catch (error) {} await browser.quit(); }); @@ -61,164 +63,104 @@ describe('Testing panels', () => { // expect(await utils.isPresent('#background-effects-container')).toBeFalse(); // }); - it('should toggle CHAT panel', async () => { + it('should open and close the CHAT panel and verify its content', async () => { await browser.get(`${url}&prejoin=false`); - await utils.checkLayoutPresent(); - const chatButton = await utils.waitForElement('#chat-panel-btn'); await chatButton.click(); - await utils.waitForElement('.sidenav-menu'); await utils.waitForElement('.input-container'); expect(await utils.isPresent('.input-container')).toBeTrue(); - await utils.waitForElement('.messages-container'); expect(await utils.isPresent('.messages-container')).toBeTrue(); - await chatButton.click(); - expect(await utils.isPresent('.input-container')).toBeFalse(); expect(await utils.isPresent('.messages-container')).toBeFalse(); }); - it('should toggle PARTICIPANTS panel', async () => { + it('should open and close the PARTICIPANTS panel and verify its content', async () => { await browser.get(`${url}&prejoin=false`); - await utils.checkLayoutPresent(); - const participantBtn = await utils.waitForElement('#participants-panel-btn'); await participantBtn.click(); - await utils.waitForElement('.sidenav-menu'); - await utils.waitForElement('.local-participant-container'); expect(await utils.isPresent('.local-participant-container')).toBeTrue(); - await utils.waitForElement('ov-participant-panel-item'); expect(await utils.isPresent('ov-participant-panel-item')).toBeTrue(); - await participantBtn.click(); - expect(await utils.isPresent('.local-participant-container')).toBeFalse(); expect(await utils.isPresent('ov-participant-panel-item')).toBeFalse(); }); - it('should toggle ACTIVITIES panel', async () => { + it('should open and close the ACTIVITIES panel and verify its content', async () => { await browser.get(`${url}&prejoin=false`); - await utils.checkLayoutPresent(); - - // Get activities button and click into it const activitiesBtn = await utils.waitForElement('#activities-panel-btn'); await activitiesBtn.click(); - await utils.waitForElement('.sidenav-menu'); await utils.waitForElement('#activities-container'); expect(await utils.isPresent('#activities-container')).toBeTrue(); - await utils.waitForElement('#recording-activity'); expect(await utils.isPresent('#recording-activity')).toBeTrue(); await activitiesBtn.click(); - expect(await utils.isPresent('#activities-container')).toBeFalse(); expect(await utils.isPresent('#recording-activity')).toBeFalse(); }); - it('should toggle SETTINGS panel', async () => { + it('should open the SETTINGS panel and verify its content', async () => { let element; await browser.get(`${url}&prejoin=false`); - await utils.checkLayoutPresent(); - - // Checking if toolbar is present await utils.checkToolbarIsPresent(); - await utils.togglePanel('settings'); - element = await utils.waitForElement('.sidenav-menu'); expect(await utils.isPresent('#default-settings-panel')).toBeTrue(); }); - it('should switching between PARTICIPANTS and CHAT panels', async () => { + it('should switch between PARTICIPANTS and CHAT panels and verify correct content is shown', async () => { await browser.get(`${url}&prejoin=false`); - await utils.checkSessionIsPresent(); - await utils.checkToolbarIsPresent(); - - // Open chat panel const chatButton = await utils.waitForElement('#chat-panel-btn'); await chatButton.click(); - await utils.waitForElement('.sidenav-menu'); expect(await utils.isPresent('.sidenav-menu')).toBeTrue(); - await utils.waitForElement('.input-container'); expect(await utils.isPresent('.input-container')).toBeTrue(); - expect(await utils.isPresent('.messages-container')).toBeTrue(); - - // Open participants panel const participantBtn = await utils.waitForElement('#participants-panel-btn'); await participantBtn.click(); - await utils.waitForElement('.sidenav-menu'); - expect(await utils.isPresent('.local-participant-container')).toBeTrue(); - expect(await utils.isPresent('ov-participant-panel-item')).toBeTrue(); - - // Switch to chat panel await chatButton.click(); - await utils.waitForElement('.sidenav-menu'); - expect(await utils.isPresent('.input-container')).toBeTrue(); - expect(await utils.isPresent('.messages-container')).toBeTrue(); - expect(await utils.isPresent('.local-participant-container')).toBeFalse(); - expect(await utils.isPresent('ov-participant-panel-item')).toBeFalse(); - - // Close chat panel await chatButton.click(); expect(await utils.getNumberOfElements('.input-container')).toEqual(0); expect(await utils.isPresent('messages-container')).toBeFalse(); }); - it('should switching between sections in SETTINGS PANEL', async () => { + it('should switch between sections in the SETTINGS panel and verify correct content is shown', async () => { let element; await browser.get(`${url}&prejoin=false`); - await utils.checkToolbarIsPresent(); - - // Checking if toolbar is present - await utils.checkToolbarIsPresent(); - - // Open more options menu await utils.togglePanel('settings'); - await utils.waitForElement('.sidenav-menu'); expect(await utils.isPresent('.sidenav-menu')).toBeTrue(); - - // Check if general section is shown + await browser.sleep(500); element = await utils.waitForElement('#general-opt'); await element.click(); - expect(await utils.isPresent('ov-participant-name-input')).toBeTrue(); - - // Check if video section is shown element = await utils.waitForElement('#video-opt'); await element.click(); - expect(await utils.isPresent('ov-video-devices-select')).toBeTrue(); - - // Check if audio section is shown element = await utils.waitForElement('#audio-opt'); await element.click(); - expect(await utils.isPresent('ov-audio-devices-select')).toBeTrue(); }); }); diff --git a/openvidu-components-angular/package.json b/openvidu-components-angular/package.json index f25fdb8d..0c3e1bcf 100644 --- a/openvidu-components-angular/package.json +++ b/openvidu-components-angular/package.json @@ -94,10 +94,10 @@ "e2e:lib-chat": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/chat.test.js", "e2e:lib-events": "tsc --project ./e2e && npx jasmine ./e2e/dist/events.test.js", "e2e:lib-media-devices": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/media-devices.test.js", + "e2e:lib-panels": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/panels.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-panels": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/panels.test.js", "e2e:webcomponent-screensharing": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/screensharing.test.js", "e2e:webcomponent-stream": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/stream.test.js", "e2e:webcomponent-toolbar": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/toolbar.test.js",