Skip to content

Commit a304c50

Browse files
carocao-msftgithub-actions[bot]
carocao-msft
and
github-actions[bot]
authored
RTT Hermetic tests (#5762)
* Tests * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 4875617 commit a304c50

39 files changed

Lines changed: 248 additions & 2 deletions

File tree

‎packages/react-components/src/components/CaptionsBanner.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,7 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
395395
>
396396
<Text className={titleClassName}>{getTitle()}</Text>
397397
<IconButton
398+
data-ui-id="captions-banner-expand-icon"
398399
iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}
399400
ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}
400401
onClick={() => setExpandBannerHeight(!expandBannerHeight)}

‎packages/react-components/src/components/RealTimeTextModal.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,11 @@ export const RealTimeTextModal = (props: RealTimeTextModalProps): JSX.Element =>
105105
<Text>{strings?.realTimeTextModalText}</Text>
106106

107107
<Stack horizontal horizontalAlign="end" className={buttonsContainerClassName}>
108-
<PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>
108+
<PrimaryButton
109+
styles={buttonStyles(theme)}
110+
onClick={onConfirm}
111+
data-ui-id="realTimeText-modal-confirm-button"
112+
>
109113
<span>{strings?.realTimeTextConfirmButtonLabel}</span>
110114
</PrimaryButton>
111115
<DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>

‎packages/react-composites/src/composites/common/ControlBar/DesktopMoreButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element =>
205205

206206
moreButtonContextualMenuItems.push({
207207
key: 'realTimeTextKey',
208-
id: 'common-call-composite-captions-button',
208+
id: 'common-call-composite-rtt-button',
209209
text: localeStrings.strings.call.realTimeTextLabel,
210210
iconProps: { iconName: 'RealTimeTextIcon', styles: { root: { lineHeight: 0 } } },
211211
itemProps: {

‎packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -645,6 +645,7 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
645645

646646
realTimeTextDrawerItems.push({
647647
itemKey: 'ToggleRTTKey',
648+
id: 'common-call-composite-rtt-start-button',
648649
text: localeStrings.strings.call.startRealTimeTextLabel,
649650
ariaLabel: rttDisabled
650651
? localeStrings.strings.call.disabledStartRealTimeTextLabel

‎packages/react-composites/tests/browser/call/hermetic/RealTimeText.test.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import { buildUrlWithMockAdapter, defaultMockCallAdapterState, test } from './fixture';
5+
import { expect } from '@playwright/test';
6+
import { dataUiId, isTestProfileMobile, pageClick, stableScreenshot, waitForSelector } from '../../common/utils';
7+
import { IDS, captionsFeatureState, realTimeTextFeatureState } from '../../common/constants';
8+
9+
/* @conditional-compile-remove(rtt) */
10+
test.describe('Real Time Text tests', async () => {
11+
test('Show Real Time Text', async ({ page, serverUrl }, testInfo) => {
12+
const initialState = defaultMockCallAdapterState();
13+
if (initialState?.call) {
14+
initialState.call.realTimeTextFeature = realTimeTextFeatureState;
15+
}
16+
17+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
18+
await waitForSelector(page, dataUiId(IDS.videoGallery));
19+
//click on expand button if it is mobile
20+
if (isTestProfileMobile(testInfo)) {
21+
await pageClick(page, dataUiId('captions-banner-expand-icon'));
22+
}
23+
expect(await stableScreenshot(page)).toMatchSnapshot('show-realTimeText.png');
24+
});
25+
26+
test('Show Real Time Text With Captions', async ({ page, serverUrl }, testInfo) => {
27+
const initialState = defaultMockCallAdapterState();
28+
if (initialState?.call) {
29+
initialState.call.realTimeTextFeature = realTimeTextFeatureState;
30+
initialState.call.captionsFeature = captionsFeatureState;
31+
}
32+
33+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
34+
await waitForSelector(page, dataUiId(IDS.videoGallery));
35+
//click on expand button if it is mobile
36+
if (isTestProfileMobile(testInfo)) {
37+
await pageClick(page, dataUiId('captions-banner-expand-icon'));
38+
}
39+
expect(await stableScreenshot(page)).toMatchSnapshot('show-realTimeText-caption.png');
40+
});
41+
42+
test('Real Time Text buttons shows when it is acs call and connected', async ({ page, serverUrl }, testInfo) => {
43+
const initialState = defaultMockCallAdapterState();
44+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
45+
await pageClick(page, dataUiId('common-call-composite-more-button'));
46+
if (isTestProfileMobile(testInfo)) {
47+
await page.locator('span:has-text("Real-time text")').scrollIntoViewIfNeeded();
48+
}
49+
expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-button-call.png`);
50+
});
51+
52+
test('Real Time Text Modal renders normally', async ({ page, serverUrl }, testInfo) => {
53+
//skip this test for mobile
54+
if (isTestProfileMobile(testInfo)) {
55+
test.skip();
56+
}
57+
const initialState = defaultMockCallAdapterState();
58+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
59+
await pageClick(page, dataUiId('common-call-composite-more-button'));
60+
await pageClick(page, `[id="common-call-composite-rtt-button"]`);
61+
await pageClick(page, `[id="common-call-composite-rtt-start-button"]`);
62+
expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-modal.png`);
63+
});
64+
65+
test('Real Time Text Banner renders normally after start button is clicked', async ({
66+
page,
67+
serverUrl
68+
}, testInfo) => {
69+
const initialState = defaultMockCallAdapterState();
70+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
71+
await pageClick(page, dataUiId('common-call-composite-more-button'));
72+
await pageClick(page, `[id="common-call-composite-rtt-button"]`);
73+
await pageClick(page, `[id="common-call-composite-rtt-start-button"]`);
74+
if (!isTestProfileMobile(testInfo)) {
75+
// need to click start for the modal
76+
await pageClick(page, dataUiId('realTimeText-modal-confirm-button'));
77+
}
78+
expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-banner.png`);
79+
});
80+
81+
test('Real Time Text toggle button is disabled when real time text enabled', async ({ page, serverUrl }) => {
82+
const initialState = defaultMockCallAdapterState();
83+
if (initialState?.call) {
84+
initialState.call.realTimeTextFeature = realTimeTextFeatureState;
85+
}
86+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
87+
await pageClick(page, dataUiId('common-call-composite-more-button'));
88+
await pageClick(page, `[id="common-call-composite-rtt-button"]`);
89+
expect(await stableScreenshot(page)).toMatchSnapshot(`rtt-disabled-toggle-button.png`);
90+
});
91+
});

‎packages/react-composites/tests/browser/callwithchat/hermetic/RealTimeText.test.ts‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import { defaultMockCallAdapterState } from '../../call/hermetic/fixture';
5+
import { expect } from '@playwright/test';
6+
import { dataUiId, isTestProfileMobile, pageClick, stableScreenshot, waitForSelector } from '../../common/utils';
7+
import { IDS, captionsFeatureState, realTimeTextFeatureState } from '../../common/constants';
8+
import { loadCallPage, test } from './fixture';
9+
10+
/* @conditional-compile-remove(rtt) */
11+
test.describe('Real Time Text tests', async () => {
12+
test('Show Real Time Text', async ({ page, serverUrl }, testInfo) => {
13+
const initialState = defaultMockCallAdapterState();
14+
if (initialState?.call) {
15+
initialState.call.realTimeTextFeature = realTimeTextFeatureState;
16+
}
17+
18+
await loadCallPage(page, serverUrl, initialState);
19+
await waitForSelector(page, dataUiId(IDS.videoGallery));
20+
//click on expand button if it is mobile
21+
if (isTestProfileMobile(testInfo)) {
22+
await pageClick(page, dataUiId('captions-banner-expand-icon'));
23+
}
24+
expect(await stableScreenshot(page)).toMatchSnapshot('show-realTimeText.png');
25+
});
26+
27+
test('Show Real Time Text With Captions', async ({ page, serverUrl }, testInfo) => {
28+
const initialState = defaultMockCallAdapterState();
29+
if (initialState?.call) {
30+
initialState.call.realTimeTextFeature = realTimeTextFeatureState;
31+
initialState.call.captionsFeature = captionsFeatureState;
32+
}
33+
34+
await loadCallPage(page, serverUrl, initialState);
35+
await waitForSelector(page, dataUiId(IDS.videoGallery));
36+
//click on expand button if it is mobile
37+
if (isTestProfileMobile(testInfo)) {
38+
await pageClick(page, dataUiId('captions-banner-expand-icon'));
39+
}
40+
expect(await stableScreenshot(page)).toMatchSnapshot('show-realTimeText-caption.png');
41+
});
42+
43+
test('Real Time Text buttons shows when it is acs call and connected', async ({ page, serverUrl }, testInfo) => {
44+
const initialState = defaultMockCallAdapterState();
45+
await loadCallPage(page, serverUrl, initialState);
46+
await pageClick(page, dataUiId('common-call-composite-more-button'));
47+
if (isTestProfileMobile(testInfo)) {
48+
await page.locator('span:has-text("Real-time text")').scrollIntoViewIfNeeded();
49+
}
50+
expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-button-call.png`);
51+
});
52+
53+
test('Real Time Text Modal renders normally', async ({ page, serverUrl }, testInfo) => {
54+
//skip this test for mobile
55+
if (isTestProfileMobile(testInfo)) {
56+
test.skip();
57+
}
58+
const initialState = defaultMockCallAdapterState();
59+
await loadCallPage(page, serverUrl, initialState);
60+
await pageClick(page, dataUiId('common-call-composite-more-button'));
61+
await pageClick(page, `[id="common-call-composite-rtt-button"]`);
62+
await pageClick(page, `[id="common-call-composite-rtt-start-button"]`);
63+
expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-modal.png`);
64+
});
65+
66+
test('Real Time Text Banner renders normally after start button is clicked', async ({
67+
page,
68+
serverUrl
69+
}, testInfo) => {
70+
const initialState = defaultMockCallAdapterState();
71+
await loadCallPage(page, serverUrl, initialState);
72+
await pageClick(page, dataUiId('common-call-composite-more-button'));
73+
await pageClick(page, `[id="common-call-composite-rtt-button"]`);
74+
await pageClick(page, `[id="common-call-composite-rtt-start-button"]`);
75+
if (!isTestProfileMobile(testInfo)) {
76+
// need to click start for the modal
77+
await pageClick(page, dataUiId('realTimeText-modal-confirm-button'));
78+
}
79+
expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-banner.png`);
80+
});
81+
82+
test('Real Time Text toggle button is disabled when real time text enabled', async ({ page, serverUrl }) => {
83+
const initialState = defaultMockCallAdapterState();
84+
if (initialState?.call) {
85+
initialState.call.realTimeTextFeature = realTimeTextFeatureState;
86+
}
87+
await loadCallPage(page, serverUrl, initialState);
88+
await pageClick(page, dataUiId('common-call-composite-more-button'));
89+
await pageClick(page, `[id="common-call-composite-rtt-button"]`);
90+
expect(await stableScreenshot(page)).toMatchSnapshot(`rtt-disabled-toggle-button.png`);
91+
});
92+
});

‎packages/react-composites/tests/browser/common/constants.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// Copyright (c) Microsoft Corporation.
22
// Licensed under the MIT License.
3+
/* @conditional-compile-remove(rtt) */
4+
import { RealTimeTextCallFeatureState } from '@internal/calling-stateful-client';
35

46
export const CHAT_TOPIC_NAME = 'Cowabunga';
57

@@ -336,3 +338,58 @@ export const togetherModeSeatingPosition_w_700_h_500 = {
336338
height: 60.03450980392157
337339
}
338340
};
341+
342+
/* @conditional-compile-remove(rtt) */
343+
export const realTimeTextFeatureState: RealTimeTextCallFeatureState = {
344+
realTimeTexts: {
345+
completedMessages: [
346+
{
347+
message: 'I am on top and I am finalized.',
348+
sequenceId: 1,
349+
sender: {
350+
identifier: { communicationUserId: '1', kind: 'communicationUser' as const },
351+
endpointDetails: [{ participantId: '1' }]
352+
},
353+
resultType: 'Final',
354+
receivedTimestamp: new Date(0),
355+
updatedTimestamp: new Date(1)
356+
},
357+
{
358+
message: 'Hi there! I am finalized and I come in second.',
359+
sequenceId: 2,
360+
sender: {
361+
identifier: { communicationUserId: '2', kind: 'communicationUser' as const },
362+
endpointDetails: [{ participantId: '2' }]
363+
},
364+
resultType: 'Final',
365+
receivedTimestamp: new Date(1),
366+
updatedTimestamp: new Date(2)
367+
}
368+
],
369+
currentInProgress: [
370+
{
371+
message: 'Hi I am in progress and I am always at the bottom.',
372+
sequenceId: 5,
373+
sender: {
374+
identifier: { communicationUserId: '2', kind: 'communicationUser' as const },
375+
endpointDetails: [{ participantId: '2' }]
376+
},
377+
resultType: 'Partial',
378+
receivedTimestamp: new Date(2.1),
379+
updatedTimestamp: new Date(2.2)
380+
}
381+
],
382+
myInProgress: {
383+
message: 'Hi! I am local participant and in progress, I am always at the very bottom',
384+
sequenceId: 6,
385+
sender: {
386+
identifier: { communicationUserId: '5', kind: 'communicationUser' as const },
387+
endpointDetails: [{ participantId: '5' }]
388+
},
389+
resultType: 'Partial',
390+
receivedTimestamp: new Date(5),
391+
updatedTimestamp: new Date(5)
392+
}
393+
},
394+
isRealTimeTextFeatureActive: true
395+
};

‎packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/RealTimeText.test.ts-snapshots/realTimeText-banner-Desktop-Chrome-linux.png‎

28.8 KB
Loading

‎packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/RealTimeText.test.ts-snapshots/realTimeText-banner-Mobile-Android-Landscape-linux.png‎

38.1 KB
Loading

‎packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/RealTimeText.test.ts-snapshots/realTimeText-banner-Mobile-Android-Portrait-linux.png‎

68 KB
Loading

0 commit comments

Comments
 (0)
⚡