feat(tests): Adds self view, display name and end conference tests. (#15432)

* feat(tests): Use shorter display names for screenshots.

* feat(tests): Adds self view tests.

* feat(tests): Adds display name test.

* feat(tests): Adds end conference test.

tests/helpers/Participant.ts

@@ -1,6 +1,7 @@
 /* global APP $ */
 
 import { multiremotebrowser } from '@wdio/globals';
+import { Key } from 'webdriverio';
 
 import { IConfig } from '../../react/features/base/config/configType';
 import { urlObjectToString } from '../../react/features/base/util/uri';
@@ -134,7 +135,7 @@ export class Participant {
         if (!options.skipDisplayName) {
             // @ts-ignore
             config.userInfo = {
-                displayName: this._name
+                displayName: options.displayName || this._name
             };
         }
 
@@ -441,16 +442,40 @@ export class Participant {
     }
 
     /**
-     * Returns the local display name.
+     * Returns the local display name element.
+     * @private
      */
-    async getLocalDisplayName() {
+    private async getLocalDisplayNameElement() {
         const localVideoContainer = this.driver.$('span[id="localVideoContainer"]');
 
         await localVideoContainer.moveTo();
 
-        const localDisplayName = localVideoContainer.$('span[id="localDisplayName"]');
+        return localVideoContainer.$('span[id="localDisplayName"]');
+    }
+
+    /**
+     * Returns the local display name.
+     */
+    async getLocalDisplayName() {
+        return await (await this.getLocalDisplayNameElement()).getText();
+    }
+
+    /**
+     * Sets the display name of the local participant.
+     */
+    async setLocalDisplayName(displayName: string) {
+        const localDisplayName = await this.getLocalDisplayNameElement();
+
+        await localDisplayName.click();
 
-        return await localDisplayName.getText();
+        await this.driver.keys(displayName);
+        await this.driver.keys(Key.Return);
+
+        // just click somewhere to lose focus, to make sure editing has ended
+        const localVideoContainer = this.driver.$('span[id="localVideoContainer"]');
+
+        await localVideoContainer.moveTo();
+        await localVideoContainer.click();
     }
 
     /**

tests/helpers/participants.ts

@@ -16,12 +16,7 @@ const SUBJECT_XPATH = '//div[starts-with(@class, "subject-text")]';
  * @returns {Promise<void>}
  */
 export async function ensureOneParticipant(ctx: IContext, options?: IJoinOptions): Promise<void> {
-    ctx.p1 = new Participant('participant1');
-
-    await ctx.p1.joinConference(ctx, {
-        ...options,
-        skipInMeetingChecks: true
-    });
+    await joinTheModeratorAsP1(ctx, options);
 }
 
 /**
@@ -31,22 +26,71 @@ export async function ensureOneParticipant(ctx: IContext, options?: IJoinOptions
  * @param {IJoinOptions} options - The options to use when joining the participant.
  * @returns {Promise<void>}
  */
-export async function ensureThreeParticipants(ctx: IContext, options?: IJoinOptions): Promise<void> {
+export async function ensureThreeParticipants(ctx: IContext, options: IJoinOptions = {}): Promise<void> {
+    await joinTheModeratorAsP1(ctx, options);
+
+    // these need to be all, so we get the error when one fails
+    await Promise.all([
+        _joinParticipant('participant2', ctx.p2, p => {
+            ctx.p2 = p;
+        }, {
+            displayName: 'p2',
+            ...options
+        }),
+        _joinParticipant('participant3', ctx.p3, p => {
+            ctx.p3 = p;
+        }, {
+            displayName: 'p3',
+            ...options
+        })
+    ]);
+
+    const { skipInMeetingChecks } = options;
+
+    await Promise.all([
+        skipInMeetingChecks ? Promise.resolve() : ctx.p2.waitForRemoteStreams(2),
+        skipInMeetingChecks ? Promise.resolve() : ctx.p3.waitForRemoteStreams(2)
+    ]);
+}
+
+/**
+ * Ensure that there are four participants.
+ *
+ * @param {Object} ctx - The context.
+ * @param {IJoinOptions} options - The options to use when joining the participant.
+ * @returns {Promise<void>}
+ */
+export async function ensureFourParticipants(ctx: IContext, options: IJoinOptions = {}): Promise<void> {
     await joinTheModeratorAsP1(ctx, options);
 
     // these need to be all, so we get the error when one fails
     await Promise.all([
         _joinParticipant('participant2', ctx.p2, p => {
             ctx.p2 = p;
-        }, options),
+        }, {
+            displayName: 'p2',
+            ...options
+        }),
         _joinParticipant('participant3', ctx.p3, p => {
             ctx.p3 = p;
-        }, options)
+        }, {
+            displayName: 'p3',
+            ...options
+        }),
+        _joinParticipant('participant4', ctx.p4, p => {
+            ctx.p4 = p;
+        }, {
+            displayName: 'p4',
+            ...options
+        })
     ]);
 
+    const { skipInMeetingChecks } = options;
+
     await Promise.all([
-        ctx.p2.waitForRemoteStreams(2),
-        ctx.p3.waitForRemoteStreams(2)
+        skipInMeetingChecks ? Promise.resolve() : ctx.p2.waitForRemoteStreams(3),
+        skipInMeetingChecks ? Promise.resolve() : ctx.p3.waitForRemoteStreams(3),
+        skipInMeetingChecks ? Promise.resolve() : ctx.p3.waitForRemoteStreams(3)
     ]);
 }
 
@@ -58,7 +102,7 @@ export async function ensureThreeParticipants(ctx: IContext, options?: IJoinOpti
  * @returns {Promise<void>}
  */
 async function joinTheModeratorAsP1(ctx: IContext, options?: IJoinOptions) {
-    const p1DisplayName = 'participant1';
+    const p1DisplayName = 'p1';
     let token;
 
     // if it is jaas create the first one to be moderator and second not moderator
@@ -67,9 +111,10 @@ async function joinTheModeratorAsP1(ctx: IContext, options?: IJoinOptions) {
     }
 
     // make sure the first participant is moderator, if supported by deployment
-    await _joinParticipant(p1DisplayName, ctx.p1, p => {
+    await _joinParticipant('participant1', ctx.p1, p => {
         ctx.p1 = p;
     }, {
+        displayName: p1DisplayName,
         ...options,
         skipInMeetingChecks: true
     }, token);
@@ -89,7 +134,10 @@ export async function ensureTwoParticipants(ctx: IContext, options: IJoinOptions
     await Promise.all([
         _joinParticipant('participant2', ctx.p2, p => {
             ctx.p2 = p;
-        }, options),
+        }, {
+            displayName: 'p2',
+            ...options
+        }),
         skipInMeetingChecks ? Promise.resolve() : ctx.p1.waitForRemoteStreams(1),
         skipInMeetingChecks ? Promise.resolve() : ctx.p2.waitForRemoteStreams(1)
     ]);

tests/helpers/types.ts

@@ -24,6 +24,11 @@ export type IJoinOptions = {
      */
     configOverwrite?: IConfig;
 
+    /**
+     * The display name to use.
+     */
+    displayName?: string;
+
     /**
      * Whether to skip setting display name.
      */

tests/pageobjects/Filmstrip.ts

@@ -3,6 +3,11 @@ import { Participant } from '../helpers/Participant';
 import BaseDialog from './BaseDialog';
 import BasePageObject from './BasePageObject';
 
+const LOCAL_VIDEO_XPATH = '//span[@id="localVideoContainer"]';
+const LOCAL_VIDEO_MENU_TRIGGER = '#local-video-menu-trigger';
+const LOCAL_USER_CONTROLS = 'aria/Local user controls';
+const HIDE_SELF_VIEW_BUTTON_XPATH = '//div[contains(@class, "popover")]//div[@id="hideselfviewButton"]';
+
 /**
  * Filmstrip elements.
  */
@@ -121,4 +126,31 @@ export default class Filmstrip extends BasePageObject {
     async muteVideo(participant: Participant) {
         await this.clickOnRemoteMenuLink(await participant.getEndpointId(), 'mutevideolink', true);
     }
+
+    /**
+     * Clicks on the hide self view button from local video.
+     */
+    async hideSelfView() {
+        // open local video menu
+        await this.participant.driver.$(LOCAL_VIDEO_MENU_TRIGGER).moveTo();
+        await this.participant.driver.$(LOCAL_USER_CONTROLS).moveTo();
+
+        // click Hide self view button
+        const hideSelfViewButton = this.participant.driver.$(HIDE_SELF_VIEW_BUTTON_XPATH);
+
+        await hideSelfViewButton.waitForExist();
+        await hideSelfViewButton.waitForClickable();
+        await hideSelfViewButton.click();
+    }
+
+    /**
+     * Checks whether the local self view is displayed or not.
+     */
+    async assertSelfViewIsHidden(hidden: boolean) {
+        await this.participant.driver.$(LOCAL_VIDEO_XPATH).waitForDisplayed({
+            reverse: hidden,
+            timeout: 5000,
+            timeoutMsg: `Local video thumbnail is${hidden ? '' : ' not'} displayed for ${this.participant.name}`
+        });
+    }
 }

tests/pageobjects/Notifications.ts

@@ -5,6 +5,8 @@ const JOIN_ONE_TEST_ID = 'notify.connectedOneMember';
 const JOIN_TWO_TEST_ID = 'notify.connectedTwoMembers';
 const JOIN_MULTIPLE_TEST_ID = 'notify.connectedThreePlusMembers';
 const RAISE_HAND_NOTIFICATION_ID = 'notify.raisedHand';
+const REENABLE_SELF_VIEW_NOTIFICATION_ID = 'notify.selfViewTitle';
+const REENABLE_SELF_VIEW_CLOSE_NOTIFICATION = 'notify.selfViewTitle-dismiss';
 
 /**
  * Gathers all notifications logic in the UI and obtaining those.
@@ -41,4 +43,23 @@ export default class Notifications extends BasePageObject {
             [ `${JOIN_ONE_TEST_ID}-dismiss`, `${JOIN_TWO_TEST_ID}-dismiss`, `${JOIN_MULTIPLE_TEST_ID}-dismiss` ]
                 .map(async id => this.participant.driver.$(`#${id}"]`).click()));
     }
+
+    /**
+     * Waits for the self view notification to be displayed.
+     */
+    async waitForReEnableSelfViewNotification() {
+        const el
+            = this.participant.driver.$(`div[data-testid="${REENABLE_SELF_VIEW_NOTIFICATION_ID}"]`);
+
+        await el.waitForExist({ timeout: 2000 });
+        await el.waitForDisplayed();
+
+    }
+
+    /**
+     * Closes the self view notification.
+     */
+    async closeReEnableSelfViewNotification() {
+        await this.participant.driver.$(`div[data-testid="${REENABLE_SELF_VIEW_CLOSE_NOTIFICATION}"]`).click();
+    }
 }

tests/pageobjects/SettingsDialog.ts

@@ -1,7 +1,9 @@
 import BaseDialog from './BaseDialog';
 
 const EMAIL_FIELD = '#setEmail';
+const HIDE_SELF_VIEW_CHECKBOX = '//input[@name="hide-self-view"]';
 const SETTINGS_DIALOG_CONTENT = '.settings-pane';
+const X_PATH_MORE_TAB = '//div[contains(@class, "settings-dialog")]//*[text()="General"]';
 const X_PATH_PROFILE_TAB = '//div[contains(@class, "settings-dialog")]//*[text()="Profile"]';
 
 /**
@@ -34,6 +36,13 @@ export default class SettingsDialog extends BaseDialog {
         await this.openTab(X_PATH_PROFILE_TAB);
     }
 
+    /**
+     * Selects the Profile tab to be displayed.
+     */
+    async openMoreTab() {
+        await this.openTab(X_PATH_MORE_TAB);
+    }
+
     /**
      * Enters the passed in email into the email field.
      * @param email
@@ -59,4 +68,21 @@ export default class SettingsDialog extends BaseDialog {
     async submit() {
         await this.clickOkButton();
     }
+
+    /**
+     * Sets the state checked/selected of a checkbox in the settings dialog.
+     */
+    async setHideSelfView(hideSelfView: boolean) {
+        await this.openMoreTab();
+
+        const checkbox = this.participant.driver.$(HIDE_SELF_VIEW_CHECKBOX);
+
+        await checkbox.waitForExist();
+
+        if (hideSelfView !== await checkbox.isSelected()) {
+            // we show a div with svg and text after the input and those elements grab the click
+            // so we need to click on the parent element
+            await this.participant.driver.$(`${HIDE_SELF_VIEW_CHECKBOX}//ancestor::div[1]`).click();
+        }
+    }
 }

tests/pageobjects/Toolbar.ts

@@ -5,11 +5,15 @@ const AUDIO_UNMUTE = 'Unmute microphone';
 const CHAT = 'Open chat';
 const CLOSE_CHAT = 'Close chat';
 const CLOSE_PARTICIPANTS_PANE = 'Close participants pane';
+const HANGUP = 'Leave the meeting';
 const OVERFLOW_MENU = 'More actions menu';
 const OVERFLOW = 'More actions';
 const PARTICIPANTS = 'Open participants pane';
 const PROFILE = 'Edit your profile';
 const RAISE_HAND = 'Raise your hand';
+const SETTINGS = 'Open settings';
+const ENTER_TILE_VIEW_BUTTON = 'Enter tile view';
+const EXIT_TILE_VIEW_BUTTON = 'Exit tile view';
 const VIDEO_QUALITY = 'Manage video quality';
 const VIDEO_MUTE = 'Stop camera';
 const VIDEO_UNMUTE = 'Start camera';
@@ -160,6 +164,35 @@ export default class Toolbar extends BasePageObject {
         await this.getButton(CLOSE_CHAT).click();
     }
 
+    /**
+     * Clicks on the tile view button which enables tile layout.
+     */
+    async clickEnterTileViewButton() {
+        await this.getButton(ENTER_TILE_VIEW_BUTTON).click();
+    }
+
+    /**
+     * Clicks on the tile view button which exits tile layout.
+     */
+    async clickExitTileViewButton() {
+        await this.getButton(EXIT_TILE_VIEW_BUTTON).click();
+    }
+
+    /**
+     * Clicks on the hangup button that ends the conference.
+     */
+    async clickHangupButton(): Promise<void> {
+        this.participant.log('Clicking on: Hangup Button');
+        await this.getButton(HANGUP).click();
+    }
+
+    /**
+     * Clicks on the settings toolbar button which opens or closes the settings panel.
+     */
+    async clickSettingsButton() {
+        await this.clickButtonInOverflowMenu(SETTINGS);
+    }
+
     /**
      * Ensure the overflow menu is open and clicks on a specified button.
      * @param accessibilityLabel The accessibility label of the button to be clicked.
@@ -168,6 +201,10 @@ export default class Toolbar extends BasePageObject {
     private async clickButtonInOverflowMenu(accessibilityLabel: string) {
         await this.openOverflowMenu();
 
+        // sometimes the overflow button tooltip is over the last entry in the menu,
+        // so let's move focus away before clicking the button
+        await this.participant.driver.$('#overflow-context-menu').moveTo();
+
         this.participant.log(`Clicking on: ${accessibilityLabel}`);
         await this.getButton(accessibilityLabel).click();
 

tests/specs/2way/displayName.spec.ts

@@ -0,0 +1,45 @@
+import { ensureTwoParticipants } from '../../helpers/participants';
+
+describe('DisplayName - ', () => {
+    it('joining the meeting', async () => {
+        await ensureTwoParticipants(ctx, {
+            skipDisplayName: true
+        });
+    });
+
+    it('check change', async () => {
+        const { p1, p2 } = ctx;
+
+        // default remote display name
+        const defaultDisplayName = await p1.driver.execute(() => config.defaultRemoteDisplayName);
+        const p1EndpointId = await p1.getEndpointId();
+        const p2EndpointId = await p2.getEndpointId();
+
+        // Checks whether default display names are set and shown, when both sides still miss the display name.
+        expect(await p1.getFilmstrip().getRemoteDisplayName(p2EndpointId)).toBe(defaultDisplayName);
+        expect(await p2.getFilmstrip().getRemoteDisplayName(p1EndpointId)).toBe(defaultDisplayName);
+
+        const randomName = `Name${Math.trunc(Math.random() * 1_000_000)}`;
+
+        await p2.setLocalDisplayName(randomName);
+        expect(await p2.getLocalDisplayName()).toBe(randomName);
+        expect(await p1.getFilmstrip().getRemoteDisplayName(p2EndpointId)).toBe(randomName);
+    });
+
+    it('check persistence', async () => {
+        const { p2 } = ctx;
+        const randomName = `Name${Math.trunc(Math.random() * 1_000_000)}`;
+
+        await p2.setLocalDisplayName(randomName);
+
+        expect(await p2.getLocalDisplayName()).toBe(randomName);
+
+        await p2.hangup();
+
+        await ensureTwoParticipants(ctx, {
+            skipDisplayName: true
+        });
+
+        expect(await p2.getLocalDisplayName()).toBe(randomName);
+    });
+});

tests/specs/2way/endConference.spec.ts

@@ -0,0 +1,22 @@
+import { ensureTwoParticipants } from '../../helpers/participants';
+
+describe('End Conference - ', () => {
+    it('joining the meeting', async () => {
+        await ensureTwoParticipants(ctx);
+    });
+
+    it('hangup call and check', async () => {
+        const { p1 } = ctx;
+        const url = await p1.driver.getUrl();
+
+        await p1.getToolbar().clickHangupButton();
+
+        await p1.driver.waitUntil(
+            async () => await p1.driver.getUrl() !== url,
+            {
+                timeout: 5000,
+                timeoutMsg: 'p1 did not navigate away from the conference'
+            }
+        );
+    });
+});

tests/specs/2way/selfView.spec.ts

@@ -0,0 +1,70 @@
+import type { Participant } from '../../helpers/Participant';
+import { ensureTwoParticipants } from '../../helpers/participants';
+
+describe('Self view - ', () => {
+    it('joining the meeting', async () => {
+        await ensureTwoParticipants(ctx);
+    });
+
+    it('hide from menu', async () => {
+        const { p1 } = ctx;
+
+        await checkSelfViewHidden(p1, false);
+
+        await p1.getFilmstrip().hideSelfView();
+
+        await checkSelfViewHidden(p1, true, true);
+
+        await p1.getToolbar().clickEnterTileViewButton();
+
+        await checkSelfViewHidden(p1, true);
+    });
+
+    it('show from settings', async () => {
+        const { p1 } = ctx;
+
+        await toggleSelfViewFromSettings(p1, false);
+
+        await checkSelfViewHidden(p1, false);
+    });
+
+    it('hide from settings', async () => {
+        const { p1 } = ctx;
+
+        await toggleSelfViewFromSettings(p1, true);
+        await checkSelfViewHidden(p1, true, true);
+    });
+
+    it('check in alone meeting', async () => {
+        const { p1, p2 } = ctx;
+
+        await checkSelfViewHidden(p1, true);
+        await p2.hangup();
+        await checkSelfViewHidden(p1, true);
+    });
+});
+
+/**
+ * Toggles the self view option from the settings dialog.
+ */
+async function toggleSelfViewFromSettings(participant: Participant, hide: boolean) {
+    await participant.getToolbar().clickSettingsButton();
+
+    const settings = participant.getSettingsDialog();
+
+    await settings.waitForDisplay();
+    await settings.setHideSelfView(hide);
+    await settings.submit();
+}
+
+/**
+ * Checks whether the local self view is displayed or not.
+ */
+async function checkSelfViewHidden(participant: Participant, hidden: boolean, checkNotification = false) {
+    if (checkNotification) {
+        await participant.getNotifications().waitForReEnableSelfViewNotification();
+        await participant.getNotifications().closeReEnableSelfViewNotification();
+    }
+
+    await participant.getFilmstrip().assertSelfViewIsHidden(hidden);
+}

tests/wdio.conf.ts

@@ -47,7 +47,7 @@ if (process.env.HEADLESS === 'true') {
     chromeArgs.push('--window-size=1280,720');
 }
 if (process.env.VIDEO_CAPTURE_FILE) {
-    chromeArgs.push(`use-file-for-fake-video-capture=${process.env.VIDEO_CAPTURE_FILE}`);
+    chromeArgs.push(`--use-file-for-fake-video-capture=${process.env.VIDEO_CAPTURE_FILE}`);
 }
 
 const chromePreferences = {