480 lines
20 KiB
TypeScript
480 lines
20 KiB
TypeScript
import type { Participant } from '../../helpers/Participant';
|
|
import { setTestProperties } from '../../helpers/TestProperties';
|
|
import {
|
|
checkForScreensharingTile,
|
|
ensureSixParticipants,
|
|
ensureThreeParticipants,
|
|
hangupAllParticipants
|
|
} from '../../helpers/participants';
|
|
import { muteAudioAndCheck } from '../helpers/mute';
|
|
|
|
setTestProperties(__filename, {
|
|
usesBrowsers: [ 'p1', 'p2', 'p3', 'p4', 'p5', 'p6' ]
|
|
});
|
|
|
|
describe('Active speaker', () => {
|
|
it('testActiveSpeaker', async () => {
|
|
await ensureThreeParticipants();
|
|
const { p1, p2, p3 } = ctx;
|
|
|
|
await muteAudioAndCheck(p1, p2);
|
|
await muteAudioAndCheck(p2, p1);
|
|
await muteAudioAndCheck(p3, p1);
|
|
|
|
// participant1 becomes active speaker - check from participant2's perspective
|
|
await testActiveSpeaker(p1, p2, p3);
|
|
|
|
// participant3 becomes active speaker - check from participant2's perspective
|
|
await testActiveSpeaker(p3, p2, p1);
|
|
|
|
// participant2 becomes active speaker - check from participant1's perspective
|
|
await testActiveSpeaker(p2, p1, p3);
|
|
|
|
// check the displayed speakers, there should be only one speaker
|
|
await assertOneDominantSpeaker(p1);
|
|
await assertOneDominantSpeaker(p2);
|
|
await assertOneDominantSpeaker(p3);
|
|
|
|
await hangupAllParticipants();
|
|
});
|
|
|
|
/**
|
|
* Test that the dominant speaker appears in the filmstrip in stage view
|
|
* even when alphabetically last with limited visible slots.
|
|
* This tests the fix for the bug where dominant speakers at the bottom of
|
|
* the alphabetically sorted list would not appear when slots were limited.
|
|
*
|
|
* Note: This test verifies filmstrip ordering via Redux state
|
|
* (visibleRemoteParticipants), not large video behavior.
|
|
*/
|
|
it.skip('testDominantSpeakerInFilmstripWithLimitedSlots', async () => {
|
|
await ensureSixParticipants({
|
|
configOverwrite: {
|
|
startWithAudioMuted: true
|
|
}
|
|
});
|
|
const { p1, p2, p3, p4, p5, p6 } = ctx;
|
|
|
|
// Resize p1's window to limit filmstrip slots to 2-3 tiles
|
|
// This creates the condition where not all participants fit in the filmstrip
|
|
await p1.driver.setWindowSize(1024, 600);
|
|
await p1.driver.pause(1000); // Wait for layout to adjust
|
|
|
|
// Set display names to create alphabetical ordering
|
|
// Names chosen so p6 ("Zoe") is alphabetically last: Alice, Bob, Charlie, Eve, Frank, Zoe
|
|
await setAlphabeticalDisplayNames(p1, p2, p3, p4, p5, p6);
|
|
|
|
// Test with multiple speakers: Eve (p4), Frank (p5), and Zoe (p6)
|
|
// This verifies the fix works for different alphabetical positions
|
|
const speakersToTest = [
|
|
{ participant: p4, name: 'Eve' },
|
|
{ participant: p5, name: 'Frank' },
|
|
{ participant: p6, name: 'Zoe' }
|
|
];
|
|
|
|
for (const { participant, name } of speakersToTest) {
|
|
const participantId = await participant.getEndpointId();
|
|
|
|
await p1.log(`Testing ${name} (${participantId}) as dominant speaker`);
|
|
|
|
// Make this participant the dominant speaker by unmuting
|
|
await participant.getToolbar().clickAudioUnmuteButton();
|
|
|
|
// Wait for the dominant speaker to be detected
|
|
await waitForDominantSpeaker(p1, participantId, name);
|
|
|
|
// Verify that the participant appears in the visible remote participants
|
|
const filmstripState = await getFilmstripState(p1);
|
|
|
|
await p1.log(`Dominant speaker: ${filmstripState.dominantSpeaker}`);
|
|
await p1.log(`Visible remote participants: ${JSON.stringify(filmstripState.visibleRemoteParticipants)}`);
|
|
await p1.log(`${name} endpoint ID: ${participantId}`);
|
|
await p1.log(`Total remote: ${filmstripState.remoteParticipants.length}, Visible: ${filmstripState.visibleRemoteParticipants.length}`);
|
|
|
|
// Verify we actually have slot limitation (fewer visible than total)
|
|
expect(filmstripState.visibleRemoteParticipants.length).toBeLessThan(filmstripState.remoteParticipants.length);
|
|
|
|
// Assert that the dominant speaker is in the visible participants
|
|
// This is the key test - even though they may be alphabetically late and slots are limited,
|
|
// they should still be visible because the fix reserves a slot for dominant speaker
|
|
expect(filmstripState.visibleRemoteParticipants).toContain(participantId);
|
|
|
|
// Verify the dominant speaker thumbnail is visible in the filmstrip
|
|
await p1.driver.$(`//span[@id='participant_${participantId}']`).waitForDisplayed({
|
|
timeout: 5_000,
|
|
timeoutMsg: `${name} dominant speaker thumbnail not visible in filmstrip`
|
|
});
|
|
|
|
// Mute this participant back before testing the next one
|
|
await participant.getToolbar().clickAudioMuteButton();
|
|
await p1.driver.pause(2000);
|
|
}
|
|
|
|
await hangupAllParticipants();
|
|
});
|
|
|
|
/**
|
|
* Test dominant speaker in filmstrip with screensharing active.
|
|
* Verifies that dominant speaker is still visible when screen shares
|
|
* take up some of the visible slots.
|
|
*/
|
|
it.skip('testDominantSpeakerWithScreensharing', async () => {
|
|
await ensureSixParticipants({
|
|
configOverwrite: {
|
|
startWithAudioMuted: true
|
|
}
|
|
});
|
|
const { p1, p2, p3, p4, p5, p6 } = ctx;
|
|
|
|
// Resize p1's window to limit filmstrip slots
|
|
await p1.driver.setWindowSize(1024, 600);
|
|
await p1.driver.pause(1000); // Wait for layout to adjust
|
|
|
|
// Set display names
|
|
await setAlphabeticalDisplayNames(p1, p2, p3, p4, p5, p6);
|
|
|
|
// Start screensharing from p2
|
|
await p2.getToolbar().clickDesktopSharingButton();
|
|
await checkForScreensharingTile(p2, p1);
|
|
|
|
// Test with multiple speakers while screensharing is active
|
|
const speakersToTest = [
|
|
{ participant: p4, name: 'Eve' },
|
|
{ participant: p5, name: 'Frank' },
|
|
{ participant: p6, name: 'Zoe' }
|
|
];
|
|
|
|
for (const { participant, name } of speakersToTest) {
|
|
const participantId = await participant.getEndpointId();
|
|
|
|
await p1.log(`Testing ${name} (${participantId}) as dominant speaker with screensharing`);
|
|
|
|
// Make this participant the dominant speaker by unmuting
|
|
await participant.getToolbar().clickAudioUnmuteButton();
|
|
|
|
// Wait for the dominant speaker to be detected
|
|
await waitForDominantSpeaker(p1, participantId, name);
|
|
|
|
// Verify dominant speaker is still visible in filmstrip despite screenshare
|
|
const filmstripState = await getFilmstripState(p1);
|
|
|
|
await p1.log(`Dominant speaker (with screenshare): ${filmstripState.dominantSpeaker}`);
|
|
await p1.log(`Visible remote participants with screenshare: ${JSON.stringify(filmstripState.visibleRemoteParticipants)}`);
|
|
await p1.log(`${name} endpoint ID: ${participantId}`);
|
|
await p1.log(`Total remote: ${filmstripState.remoteParticipants.length}, Visible: ${filmstripState.visibleRemoteParticipants.length}`);
|
|
|
|
// Verify we have slot limitation even with screensharing
|
|
expect(filmstripState.visibleRemoteParticipants.length).toBeLessThan(filmstripState.remoteParticipants.length);
|
|
|
|
// The dominant speaker should still be in the visible participants despite screenshare taking slots
|
|
expect(filmstripState.visibleRemoteParticipants).toContain(participantId);
|
|
|
|
// Verify thumbnail visibility
|
|
await p1.driver.$(`//span[@id='participant_${participantId}']`).waitForDisplayed({
|
|
timeout: 5_000,
|
|
timeoutMsg: `${name} not visible with screensharing active`
|
|
});
|
|
|
|
// Mute this participant back before testing the next one
|
|
await participant.getToolbar().clickAudioMuteButton();
|
|
await p1.driver.pause(1000);
|
|
}
|
|
|
|
// Clean up - stop screensharing
|
|
await p2.getToolbar().clickStopDesktopSharingButton();
|
|
|
|
await hangupAllParticipants();
|
|
});
|
|
|
|
/**
|
|
* Test that filmstrip maintains stable ordering when multiple speakers alternate.
|
|
* Verifies that the alphabetical sorting prevents visual reordering when the same
|
|
* set of speakers take turns speaking.
|
|
*/
|
|
it.skip('testFilmstripStableOrderingWithMultipleSpeakers', async () => {
|
|
await ensureSixParticipants({
|
|
configOverwrite: {
|
|
startWithAudioMuted: true
|
|
}
|
|
});
|
|
const { p1, p2, p3, p4, p5, p6 } = ctx;
|
|
|
|
// Resize p1's window to limit filmstrip slots
|
|
await p1.driver.setWindowSize(1024, 600);
|
|
await p1.driver.pause(1000); // Wait for layout to adjust
|
|
|
|
// Set display names
|
|
await setAlphabeticalDisplayNames(p1, p2, p3, p4, p5, p6);
|
|
|
|
// First, have Eve, Frank, and Zoe all speak to get them into the active speakers list
|
|
const speakersToTest = [
|
|
{ participant: p4, name: 'Eve' },
|
|
{ participant: p5, name: 'Frank' },
|
|
{ participant: p6, name: 'Zoe' }
|
|
];
|
|
|
|
await p1.log('Initial round: getting all three speakers into active speakers list');
|
|
|
|
for (const { participant, name } of speakersToTest) {
|
|
const participantId = await participant.getEndpointId();
|
|
|
|
await p1.log(`${name} (${participantId}) speaking for the first time`);
|
|
await participant.getToolbar().clickAudioUnmuteButton();
|
|
await waitForDominantSpeaker(p1, participantId, name);
|
|
await participant.getToolbar().clickAudioMuteButton();
|
|
await p1.driver.pause(1000);
|
|
}
|
|
|
|
// Now cycle through them again and verify they maintain alphabetical order (Eve, Frank, Zoe)
|
|
await p1.log('Second round: verifying stable alphabetical ordering when speakers alternate');
|
|
|
|
const states = [];
|
|
|
|
for (const { participant, name } of speakersToTest) {
|
|
const participantId = await participant.getEndpointId();
|
|
|
|
await p1.log(`Testing ${name} (${participantId}) for stable ordering`);
|
|
|
|
// Make this participant the dominant speaker
|
|
await participant.getToolbar().clickAudioUnmuteButton();
|
|
|
|
// Wait for the dominant speaker to be detected
|
|
await waitForDominantSpeaker(p1, participantId, name);
|
|
|
|
// Capture filmstrip state
|
|
const filmstripState = await getFilmstripState(p1);
|
|
|
|
states.push({ name, id: participantId, state: filmstripState });
|
|
|
|
// Mute back
|
|
await participant.getToolbar().clickAudioMuteButton();
|
|
await p1.driver.pause(1000);
|
|
}
|
|
|
|
const [ eveState, frankState, zoeState ] = states;
|
|
|
|
// Helper function to get participant names in the order they appear
|
|
const getVisibleParticipantNames = async (visibleIds: string[]) => {
|
|
return await p1.execute(ids => {
|
|
const state = APP.store.getState();
|
|
const participants = state['features/base/participants'];
|
|
|
|
return ids.map(id => {
|
|
const participant = participants.remote.get(id);
|
|
|
|
return participant?.name || 'Unknown';
|
|
});
|
|
}, visibleIds);
|
|
};
|
|
|
|
// Get the names of visible participants for each state
|
|
const eveVisibleNames = await getVisibleParticipantNames(eveState.state.visibleRemoteParticipants);
|
|
const frankVisibleNames = await getVisibleParticipantNames(frankState.state.visibleRemoteParticipants);
|
|
const zoeVisibleNames = await getVisibleParticipantNames(zoeState.state.visibleRemoteParticipants);
|
|
|
|
await p1.log(`Visible participants when Eve is dominant: ${JSON.stringify(eveVisibleNames)}`);
|
|
await p1.log(`Visible participants when Frank is dominant: ${JSON.stringify(frankVisibleNames)}`);
|
|
await p1.log(`Visible participants when Zoe is dominant: ${JSON.stringify(zoeVisibleNames)}`);
|
|
|
|
await p1.log(`Eve visible count: ${eveState.state.visibleRemoteParticipants.length}, total remote: ${eveState.state.remoteParticipants.length}`);
|
|
await p1.log(`Frank visible count: ${frankState.state.visibleRemoteParticipants.length}, total remote: ${frankState.state.remoteParticipants.length}`);
|
|
await p1.log(`Zoe visible count: ${zoeState.state.visibleRemoteParticipants.length}, total remote: ${zoeState.state.remoteParticipants.length}`);
|
|
|
|
// Verify that each dominant speaker appears in visible participants
|
|
expect(eveState.state.visibleRemoteParticipants).toContain(eveState.id);
|
|
expect(frankState.state.visibleRemoteParticipants).toContain(frankState.id);
|
|
expect(zoeState.state.visibleRemoteParticipants).toContain(zoeState.id);
|
|
|
|
// Helper function to get the relative order of Eve, Frank, and Zoe
|
|
const getSpeakersOrder = (names: string[]) => {
|
|
return names.filter(n => [ 'Eve', 'Frank', 'Zoe' ].includes(n));
|
|
};
|
|
|
|
const eveOrder = getSpeakersOrder(eveVisibleNames);
|
|
const frankOrder = getSpeakersOrder(frankVisibleNames);
|
|
const zoeOrder = getSpeakersOrder(zoeVisibleNames);
|
|
|
|
await p1.log(`Speakers order when Eve is dominant: ${JSON.stringify(eveOrder)}`);
|
|
await p1.log(`Speakers order when Frank is dominant: ${JSON.stringify(frankOrder)}`);
|
|
await p1.log(`Speakers order when Zoe is dominant: ${JSON.stringify(zoeOrder)}`);
|
|
|
|
// Verify that the dominant speaker is always in the visible list (this tests the bug fix)
|
|
expect(eveOrder).toContain('Eve');
|
|
expect(frankOrder).toContain('Frank');
|
|
expect(zoeOrder).toContain('Zoe');
|
|
|
|
// Helper to check if array is alphabetically sorted
|
|
const isAlphabeticallySorted = (names: string[]) => {
|
|
for (let i = 0; i < names.length - 1; i++) {
|
|
if (names[i].localeCompare(names[i + 1]) > 0) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
// Verify that whatever speakers ARE visible maintain alphabetical order
|
|
// This is the key test - when the same speakers alternate, visible speakers stay in alphabetical order
|
|
expect(isAlphabeticallySorted(eveOrder)).toBe(true);
|
|
expect(isAlphabeticallySorted(frankOrder)).toBe(true);
|
|
expect(isAlphabeticallySorted(zoeOrder)).toBe(true);
|
|
|
|
// Additionally verify order consistency: if multiple speakers are visible in multiple states,
|
|
// their relative order should be the same
|
|
// For example, if Eve and Frank are both visible when Zoe speaks, they should be [Eve, Frank]
|
|
if (eveOrder.includes('Frank') && frankOrder.includes('Eve')) {
|
|
// Both Eve and Frank visible in both states
|
|
const eveAndFrankInEveState = eveOrder.filter(n => [ 'Eve', 'Frank' ].includes(n));
|
|
const eveAndFrankInFrankState = frankOrder.filter(n => [ 'Eve', 'Frank' ].includes(n));
|
|
|
|
expect(eveAndFrankInEveState).toEqual(eveAndFrankInFrankState);
|
|
}
|
|
|
|
await p1.log('Filmstrip maintains alphabetical ordering of visible speakers when dominant speaker changes');
|
|
|
|
await hangupAllParticipants();
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Tries to make given participant an active speaker by unmuting it.
|
|
* Verifies from {@code participant2}'s perspective that the active speaker
|
|
* has been displayed on the large video area. Mutes him back.
|
|
*
|
|
* @param {Participant} activeSpeaker - <tt>Participant</tt> instance of the participant who will be tested as an
|
|
* active speaker.
|
|
* @param {Participant} otherParticipant1 - <tt>Participant</tt> of the participant who will be observing and verifying
|
|
* active speaker change.
|
|
* @param {Participant} otherParticipant2 - Used only to print some debugging info.
|
|
*/
|
|
async function testActiveSpeaker(
|
|
activeSpeaker: Participant, otherParticipant1: Participant, otherParticipant2: Participant) {
|
|
await activeSpeaker.log(`Start testActiveSpeaker for participant: ${activeSpeaker.name}`);
|
|
|
|
const speakerEndpoint = await activeSpeaker.getEndpointId();
|
|
|
|
// just a debug print to go in logs
|
|
await activeSpeaker.log('Unmuting in testActiveSpeaker');
|
|
|
|
// Unmute
|
|
await activeSpeaker.getToolbar().clickAudioUnmuteButton();
|
|
|
|
// just a debug print to go in logs
|
|
await otherParticipant1.log(`Participant unmuted in testActiveSpeaker ${speakerEndpoint}`);
|
|
await otherParticipant2.log(`Participant unmuted in testActiveSpeaker ${speakerEndpoint}`);
|
|
|
|
await activeSpeaker.getFilmstrip().assertAudioMuteIconIsDisplayed(activeSpeaker, true);
|
|
|
|
// Verify that the user is now an active speaker from otherParticipant1's perspective
|
|
const otherParticipant1Driver = otherParticipant1.driver;
|
|
|
|
await otherParticipant1Driver.waitUntil(
|
|
async () => await otherParticipant1.getLargeVideo().getResource() === speakerEndpoint,
|
|
{
|
|
timeout: 30_000, // 30 seconds
|
|
timeoutMsg: 'Active speaker not displayed on large video.'
|
|
});
|
|
|
|
// just a debug print to go in logs
|
|
await activeSpeaker.log('Muting in testActiveSpeaker');
|
|
|
|
// Mute back again
|
|
await activeSpeaker.getToolbar().clickAudioMuteButton();
|
|
|
|
// just a debug print to go in logs
|
|
await otherParticipant1.log(`Participant muted in testActiveSpeaker ${speakerEndpoint}`);
|
|
await otherParticipant2.log(`Participant muted in testActiveSpeaker ${speakerEndpoint}`);
|
|
|
|
await otherParticipant1.getFilmstrip().assertAudioMuteIconIsDisplayed(activeSpeaker);
|
|
}
|
|
|
|
/**
|
|
* Asserts that the number of small videos with the dominant speaker
|
|
* indicator displayed equals 1.
|
|
*
|
|
* @param {Participant} participant - The participant to check.
|
|
*/
|
|
async function assertOneDominantSpeaker(participant: Participant) {
|
|
expect(await participant.driver.$$(
|
|
'//span[not(contains(@class, "tile-view"))]//span[contains(@class,"dominant-speaker")]').length).toBe(1);
|
|
}
|
|
|
|
/**
|
|
* Wait for a participant to be detected as the dominant speaker.
|
|
*
|
|
* @param {Participant} observer - The participant observing the dominant speaker state.
|
|
* @param {string} participantId - The endpoint ID of the expected dominant speaker.
|
|
* @param {string} participantName - The name of the participant for logging.
|
|
*/
|
|
async function waitForDominantSpeaker(
|
|
observer: Participant,
|
|
participantId: string,
|
|
participantName: string
|
|
): Promise<void> {
|
|
await observer.driver.waitUntil(
|
|
async () => {
|
|
const state = await observer.execute(() => {
|
|
const participants = APP.store.getState()['features/base/participants'];
|
|
|
|
return participants.dominantSpeaker;
|
|
});
|
|
|
|
return state === participantId;
|
|
},
|
|
{
|
|
timeout: 10000,
|
|
timeoutMsg: `${participantName} (${participantId}) was not detected as dominant speaker within 10 seconds`
|
|
}
|
|
);
|
|
|
|
// Wait a bit more for filmstrip state to update after dominant speaker changes
|
|
await observer.driver.pause(1000);
|
|
}
|
|
|
|
/**
|
|
* Get the current filmstrip state from Redux.
|
|
*
|
|
* @param {Participant} participant - The participant to query.
|
|
* @returns {Promise<FilmstripState>} The filmstrip state.
|
|
*/
|
|
async function getFilmstripState(participant: Participant): Promise<{
|
|
dominantSpeaker: string | null;
|
|
remoteParticipants: string[];
|
|
visibleRemoteParticipants: string[];
|
|
}> {
|
|
return await participant.execute(() => {
|
|
const state = APP.store.getState();
|
|
const filmstrip = state['features/filmstrip'];
|
|
const participants = state['features/base/participants'];
|
|
|
|
return {
|
|
dominantSpeaker: participants.dominantSpeaker,
|
|
remoteParticipants: filmstrip.remoteParticipants,
|
|
visibleRemoteParticipants: Array.from(filmstrip.visibleRemoteParticipants)
|
|
};
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Set display names for all 6 participants to create alphabetical ordering.
|
|
*/
|
|
async function setAlphabeticalDisplayNames(
|
|
p1: Participant,
|
|
p2: Participant,
|
|
p3: Participant,
|
|
p4: Participant,
|
|
p5: Participant,
|
|
p6: Participant
|
|
): Promise<void> {
|
|
await p1.setLocalDisplayName('Alice');
|
|
await p2.setLocalDisplayName('Bob');
|
|
await p3.setLocalDisplayName('Charlie');
|
|
await p4.setLocalDisplayName('Eve');
|
|
await p5.setLocalDisplayName('Frank');
|
|
await p6.setLocalDisplayName('Zoe');
|
|
|
|
// Wait for display names to propagate
|
|
await p1.driver.pause(2000);
|
|
}
|