Skip to content

Commit 735fb0e

Browse files
carocao-msftgithub-actions[bot]
carocao-msft
and
github-actions[bot]
authored
Add tests for ACS captions (#4371)
* test * Change files * Duplicate change files for beta release * Remove unecessary stable change file * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * update closed captions tests * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * test * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * test * test * test * Update packages/react-composites CallComposite 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 1a74d0a commit 735fb0e

116 files changed

Lines changed: 295 additions & 45 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎change-beta/@azure-communication-react-ce329426-9e11-4d34-9935-7fe80f1099d8.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "prerelease",
3+
"area": "feature",
4+
"workstream": "ACS Captions",
5+
"comment": "Add UI test for ACS captions ",
6+
"packageName": "@azure/communication-react",
7+
"email": "96077406+carocao-msft@users.noreply.github.com",
8+
"dependentChangeType": "patch"
9+
}

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

Lines changed: 8 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,17 @@
33

44
import { buildUrlWithMockAdapter, defaultMockCallAdapterState, test } from './fixture';
55
import { expect } from '@playwright/test';
6-
import {
7-
dataUiId,
8-
existsOnPage,
9-
isTestProfileMobile,
10-
pageClick,
11-
stableScreenshot,
12-
waitForSelector
13-
} from '../../common/utils';
6+
import { dataUiId, isTestProfileMobile, pageClick, stableScreenshot, waitForSelector } from '../../common/utils';
147
import { IDS, captionsFeatureState, captionsFeatureStateArabic } from '../../common/constants';
158

16-
/* @conditional-compile-remove(close-captions) */
9+
/* @conditional-compile-remove(acs-close-captions) */
1710
test.describe('Closed Captions Banner tests', async () => {
1811
test('Show loading banner when start captions is clicked but captions is not started yet', async ({
1912
page,
2013
serverUrl
2114
}) => {
2215
const initialState = defaultMockCallAdapterState();
2316
if (initialState?.call) {
24-
initialState.isTeamsCall = true;
2517
initialState.call.captionsFeature = {
2618
...captionsFeatureState,
2719
isCaptionsFeatureActive: false,
@@ -36,7 +28,6 @@ test.describe('Closed Captions Banner tests', async () => {
3628
test('Show closed captions banner when enabled', async ({ page, serverUrl }) => {
3729
const initialState = defaultMockCallAdapterState();
3830
if (initialState?.call) {
39-
initialState.isTeamsCall = true;
4031
initialState.call.captionsFeature = captionsFeatureState;
4132
}
4233
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
@@ -47,7 +38,6 @@ test.describe('Closed Captions Banner tests', async () => {
4738
test('Show RTL languages from right to left', async ({ page, serverUrl }) => {
4839
const initialState = defaultMockCallAdapterState();
4940
if (initialState?.call) {
50-
initialState.isTeamsCall = true;
5141
initialState.call.captionsFeature = captionsFeatureStateArabic;
5242
}
5343
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
@@ -61,7 +51,6 @@ test.describe('Closed Captions Banner tests', async () => {
6151
}
6252
const initialState = defaultMockCallAdapterState();
6353
if (initialState?.call) {
64-
initialState.isTeamsCall = true;
6554
initialState.call.captionsFeature = captionsFeatureState;
6655
}
6756
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
@@ -72,7 +61,6 @@ test.describe('Closed Captions Banner tests', async () => {
7261
test('Hide closed captions banner when disabled', async ({ page, serverUrl }) => {
7362
const initialState = defaultMockCallAdapterState();
7463
if (initialState?.call) {
75-
initialState.isTeamsCall = true;
7664
initialState.call.captionsFeature = {
7765
...captionsFeatureState,
7866
isCaptionsFeatureActive: false,
@@ -81,7 +69,7 @@ test.describe('Closed Captions Banner tests', async () => {
8169
}
8270
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
8371
await waitForSelector(page, dataUiId(IDS.videoGallery));
84-
expect(await stableScreenshot(page)).toMatchSnapshot('hide-captions-banner.png');
72+
expect(await stableScreenshot(page)).toMatchSnapshot('captions-closed.png');
8573
});
8674

8775
test('Captions settings triggered by caption banner correctly on desktop', async ({ page, serverUrl }, testInfo) => {
@@ -90,7 +78,6 @@ test.describe('Closed Captions Banner tests', async () => {
9078
}
9179
const initialState = defaultMockCallAdapterState();
9280
if (initialState?.call) {
93-
initialState.isTeamsCall = true;
9481
initialState.call.captionsFeature = captionsFeatureState;
9582
}
9683
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
@@ -100,34 +87,21 @@ test.describe('Closed Captions Banner tests', async () => {
10087
});
10188
});
10289

103-
/* @conditional-compile-remove(close-captions) */
90+
/* @conditional-compile-remove(acs-close-captions) */
10491
test.describe('Captions buttons in call control', () => {
105-
test('Captions buttons shows when it is teams call', async ({ page, serverUrl }) => {
92+
test('Captions buttons shows when it is acs call and connected', async ({ page, serverUrl }, testInfo) => {
10693
const initialState = defaultMockCallAdapterState();
107-
if (initialState?.call) {
108-
initialState.isTeamsCall = true;
109-
}
11094
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
11195
await pageClick(page, dataUiId('common-call-composite-more-button'));
112-
expect(await stableScreenshot(page)).toMatchSnapshot(`caption-button-teams-call.png`);
113-
});
114-
115-
test('Captions buttons hides when it is not teams call', async ({ page, serverUrl }) => {
116-
const initialState = defaultMockCallAdapterState();
117-
if (initialState?.call) {
118-
initialState.isTeamsCall = false;
119-
}
120-
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
121-
if (await existsOnPage(page, dataUiId('common-call-composite-more-button'))) {
122-
await pageClick(page, dataUiId('common-call-composite-more-button'));
96+
if (isTestProfileMobile(testInfo)) {
97+
await page.locator('span:has-text("Live captions")').scrollIntoViewIfNeeded();
12398
}
124-
expect(await stableScreenshot(page)).toMatchSnapshot(`caption-button-non-teams-call.png`);
99+
expect(await stableScreenshot(page)).toMatchSnapshot(`caption-button-call.png`);
125100
});
126101

127102
test('Captions settings renders normally', async ({ page, serverUrl }, testInfo) => {
128103
const initialState = defaultMockCallAdapterState();
129104
if (initialState?.call) {
130-
initialState.isTeamsCall = true;
131105
initialState.call.captionsFeature = captionsFeatureState;
132106
}
133107
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
@@ -142,7 +116,6 @@ test.describe('Captions buttons in call control', () => {
142116
test('Captions toggle button renders correctly when caption enabled', async ({ page, serverUrl }) => {
143117
const initialState = defaultMockCallAdapterState();
144118
if (initialState?.call) {
145-
initialState.isTeamsCall = true;
146119
initialState.call.captionsFeature = captionsFeatureState;
147120
}
148121
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
@@ -154,7 +127,6 @@ test.describe('Captions buttons in call control', () => {
154127
test('Captions toggle button renders correctly when caption disabled', async ({ page, serverUrl }) => {
155128
const initialState = defaultMockCallAdapterState();
156129
if (initialState?.call) {
157-
initialState.isTeamsCall = true;
158130
initialState.call.captionsFeature.isCaptionsFeatureActive = false;
159131
}
160132
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));

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

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
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, captionsFeatureStateArabic } from '../../common/constants';
8+
9+
/* @conditional-compile-remove(close-captions) */
10+
test.describe('Teams Closed Captions Banner tests', async () => {
11+
test('Show loading banner when start captions is clicked but captions is not started yet', async ({
12+
page,
13+
serverUrl
14+
}) => {
15+
const initialState = defaultMockCallAdapterState();
16+
if (initialState?.call) {
17+
initialState.isTeamsCall = true;
18+
initialState.call.captionsFeature = {
19+
...captionsFeatureState,
20+
isCaptionsFeatureActive: false,
21+
startCaptionsInProgress: true
22+
};
23+
}
24+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
25+
await waitForSelector(page, dataUiId(IDS.videoGallery));
26+
expect(await stableScreenshot(page)).toMatchSnapshot('teams-captions-loading-banner.png');
27+
});
28+
29+
test('Show closed captions banner when enabled', async ({ page, serverUrl }) => {
30+
const initialState = defaultMockCallAdapterState();
31+
if (initialState?.call) {
32+
initialState.isTeamsCall = true;
33+
initialState.call.captionsFeature = captionsFeatureState;
34+
}
35+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
36+
await waitForSelector(page, dataUiId(IDS.videoGallery));
37+
expect(await stableScreenshot(page)).toMatchSnapshot('show-teams-captions.png');
38+
});
39+
40+
test('Show RTL languages from right to left', async ({ page, serverUrl }) => {
41+
const initialState = defaultMockCallAdapterState();
42+
if (initialState?.call) {
43+
initialState.isTeamsCall = true;
44+
initialState.call.captionsFeature = captionsFeatureStateArabic;
45+
}
46+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
47+
await waitForSelector(page, dataUiId(IDS.videoGallery));
48+
expect(await stableScreenshot(page)).toMatchSnapshot('show-teams-captions-RTL.png');
49+
});
50+
51+
test('Captions menu shows correct when clicked on desktop', async ({ page, serverUrl }, testInfo) => {
52+
if (isTestProfileMobile(testInfo)) {
53+
test.skip();
54+
}
55+
const initialState = defaultMockCallAdapterState();
56+
if (initialState?.call) {
57+
initialState.isTeamsCall = true;
58+
initialState.call.captionsFeature = captionsFeatureState;
59+
}
60+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
61+
await pageClick(page, dataUiId('captions-banner-more-button'));
62+
expect(await stableScreenshot(page)).toMatchSnapshot('show-teams-captions-menu-on-banner.png');
63+
});
64+
65+
test('Hide closed captions banner when disabled', async ({ page, serverUrl }) => {
66+
const initialState = defaultMockCallAdapterState();
67+
if (initialState?.call) {
68+
initialState.isTeamsCall = true;
69+
initialState.call.captionsFeature = {
70+
...captionsFeatureState,
71+
isCaptionsFeatureActive: false,
72+
startCaptionsInProgress: false
73+
};
74+
}
75+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
76+
await waitForSelector(page, dataUiId(IDS.videoGallery));
77+
expect(await stableScreenshot(page)).toMatchSnapshot('teams-captions-closed.png');
78+
});
79+
80+
test('Captions settings triggered by caption banner correctly on desktop', async ({ page, serverUrl }, testInfo) => {
81+
if (isTestProfileMobile(testInfo)) {
82+
test.skip();
83+
}
84+
const initialState = defaultMockCallAdapterState();
85+
if (initialState?.call) {
86+
initialState.isTeamsCall = true;
87+
initialState.call.captionsFeature = captionsFeatureState;
88+
}
89+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
90+
await pageClick(page, dataUiId('captions-banner-more-button'));
91+
await pageClick(page, `[id="common-call-composite-captions-settings-button"]`);
92+
expect(await stableScreenshot(page)).toMatchSnapshot('trigger-teams-captions-settings-from-banner.png');
93+
});
94+
});
95+
96+
/* @conditional-compile-remove(close-captions) */
97+
test.describe('Captions buttons in call control', () => {
98+
test('Captions buttons shows when it is teams call and connected', async ({ page, serverUrl }, testInfo) => {
99+
const initialState = defaultMockCallAdapterState();
100+
if (initialState?.call) {
101+
initialState.isTeamsCall = true;
102+
}
103+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
104+
await pageClick(page, dataUiId('common-call-composite-more-button'));
105+
if (isTestProfileMobile(testInfo)) {
106+
await page.locator('span:has-text("Live captions")').scrollIntoViewIfNeeded();
107+
}
108+
expect(await stableScreenshot(page)).toMatchSnapshot(`caption-button-teams-call.png`);
109+
});
110+
111+
test('Captions settings renders normally', async ({ page, serverUrl }, testInfo) => {
112+
const initialState = defaultMockCallAdapterState();
113+
if (initialState?.call) {
114+
initialState.isTeamsCall = true;
115+
initialState.call.captionsFeature = captionsFeatureState;
116+
}
117+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
118+
await pageClick(page, dataUiId('common-call-composite-more-button'));
119+
await pageClick(page, `[id="common-call-composite-captions-button"]`);
120+
if (!isTestProfileMobile(testInfo)) {
121+
await pageClick(page, `[id="common-call-composite-captions-settings-button"]`);
122+
}
123+
expect(await stableScreenshot(page)).toMatchSnapshot(`teams-caption-settings.png`);
124+
});
125+
126+
test('Captions toggle button renders correctly when caption enabled', async ({ page, serverUrl }) => {
127+
const initialState = defaultMockCallAdapterState();
128+
if (initialState?.call) {
129+
initialState.isTeamsCall = true;
130+
initialState.call.captionsFeature = captionsFeatureState;
131+
}
132+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
133+
await pageClick(page, dataUiId('common-call-composite-more-button'));
134+
await pageClick(page, `[id="common-call-composite-captions-button"]`);
135+
expect(await stableScreenshot(page)).toMatchSnapshot(`teams-caption-toggle-button.png`);
136+
});
137+
138+
test('Captions toggle button renders correctly when caption disabled', async ({ page, serverUrl }) => {
139+
const initialState = defaultMockCallAdapterState();
140+
if (initialState?.call) {
141+
initialState.isTeamsCall = true;
142+
initialState.call.captionsFeature.isCaptionsFeatureActive = false;
143+
}
144+
await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
145+
await pageClick(page, dataUiId('common-call-composite-more-button'));
146+
await pageClick(page, `[id="common-call-composite-captions-button"]`);
147+
expect(await stableScreenshot(page)).toMatchSnapshot(`teams-caption-toggle-button-disabled.png`);
148+
});
149+
});

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@ import { dataUiId, isTestProfileMobile, pageClick, stableScreenshot, waitForSele
77
import { IDS, captionsFeatureState, captionsFeatureStateArabic } from '../../common/constants';
88
import { defaultMockCallAdapterState, defaultMockRemoteParticipant } from '../../call/hermetic/fixture';
99

10-
/* @conditional-compile-remove(close-captions) */
10+
/* @conditional-compile-remove(acs-close-captions) */
1111
test.describe('Closed Captions Banner tests', async () => {
1212
test('Show loading banner when start captions is clicked but captions is not started yet', async ({
1313
page,
1414
serverUrl
1515
}) => {
1616
const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
1717
if (initialState?.call) {
18-
initialState.isTeamsCall = true;
1918
initialState.call.captionsFeature = {
2019
...captionsFeatureState,
2120
isCaptionsFeatureActive: false,
@@ -30,7 +29,6 @@ test.describe('Closed Captions Banner tests', async () => {
3029
test('Show closed captions banner when enabled', async ({ page, serverUrl }) => {
3130
const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
3231
if (initialState?.call) {
33-
initialState.isTeamsCall = true;
3432
initialState.call.captionsFeature = captionsFeatureState;
3533
}
3634
await loadCallPage(page, serverUrl, initialState);
@@ -41,7 +39,6 @@ test.describe('Closed Captions Banner tests', async () => {
4139
test('Show RTL languages from right to left', async ({ page, serverUrl }) => {
4240
const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
4341
if (initialState?.call) {
44-
initialState.isTeamsCall = true;
4542
initialState.call.captionsFeature = captionsFeatureStateArabic;
4643
}
4744
await loadCallPage(page, serverUrl, initialState);
@@ -55,7 +52,6 @@ test.describe('Closed Captions Banner tests', async () => {
5552
}
5653
const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
5754
if (initialState?.call) {
58-
initialState.isTeamsCall = true;
5955
initialState.call.captionsFeature = captionsFeatureState;
6056
}
6157
await loadCallPage(page, serverUrl, initialState);
@@ -66,7 +62,6 @@ test.describe('Closed Captions Banner tests', async () => {
6662
test('Hide closed captions banner when disabled', async ({ page, serverUrl }) => {
6763
const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
6864
if (initialState?.call) {
69-
initialState.isTeamsCall = true;
7065
initialState.call.captionsFeature = {
7166
...captionsFeatureState,
7267
isCaptionsFeatureActive: false,
@@ -84,7 +79,6 @@ test.describe('Closed Captions Banner tests', async () => {
8479
}
8580
const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
8681
if (initialState?.call) {
87-
initialState.isTeamsCall = true;
8882
initialState.call.captionsFeature = captionsFeatureState;
8983
}
9084
await loadCallPage(page, serverUrl, initialState);
@@ -99,7 +93,6 @@ test.describe('Closed Captions Banner tests', async () => {
9993
}
10094
const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
10195
if (initialState?.call) {
102-
initialState.isTeamsCall = true;
10396
initialState.call.captionsFeature = captionsFeatureState;
10497
}
10598

@@ -116,7 +109,6 @@ test.describe('Closed Captions Banner tests', async () => {
116109
}
117110
const initialState = defaultMockCallAdapterState([defaultMockRemoteParticipant('Paul Bridges')]);
118111
if (initialState?.call) {
119-
initialState.isTeamsCall = true;
120112
initialState.call.captionsFeature = captionsFeatureState;
121113
}
122114

0 commit comments

Comments
 (0)
⚡