Skip to content

Commit aad160a

Browse files
BillCarsonFrBillCarsonFr
committed
Merge branch 'livekit' into valere/default_route
2 parents fc61a36 + b40feae commit aad160a

File tree

12 files changed

+123
-138
lines changed

12 files changed

+123
-138
lines changed

‎playwright/create-call.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ test("Start a new call then leave and show the feedback screen", async ({
2222
await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
2323

2424
// Check the button toolbar
25-
// await expect(page.getByRole('button', { name: 'Mute microphone' })).toBeVisible();
26-
// await expect(page.getByRole('button', { name: 'Stop video' })).toBeVisible();
25+
// await expect(page.getByRole('switch', { name: 'Mute microphone' })).toBeVisible();
26+
// await expect(page.getByRole('switch', { name: 'Stop video' })).toBeVisible();
2727
await expect(page.getByRole("button", { name: "Settings" })).toBeVisible();
2828
await expect(page.getByRole("button", { name: "End call" })).toBeVisible();
2929

‎playwright/reconnect.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,12 @@ test("can only interact with header and footer while reconnecting", async ({
4949
).toBeVisible();
5050

5151
// Tab order should jump directly from header to footer, skipping media tiles
52-
await page.getByRole("button", { name: "Mute microphone" }).focus();
52+
await page.getByRole("switch", { name: "Mute microphone" }).focus();
5353
await expect(
54-
page.getByRole("button", { name: "Mute microphone" }),
54+
page.getByRole("switch", { name: "Mute microphone" }),
5555
).toBeFocused();
5656
await page.keyboard.press("Tab");
57-
await expect(page.getByRole("button", { name: "Stop video" })).toBeFocused();
57+
await expect(page.getByRole("switch", { name: "Stop video" })).toBeFocused();
5858
// Most critically, we should be able to press the hangup button
5959
await page.getByRole("button", { name: "End call" }).click();
6060
});

‎playwright/widget/huddle-call.test.ts‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,10 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
5555
const frame = user.page
5656
.locator('iframe[title="Element Call"]')
5757
.contentFrame();
58-
5958
// No lobby, should start with video on
60-
// The only way to know if it is muted or not is to look at the data-kind attribute..
61-
const videoButton = frame.getByTestId("incall_videomute");
62-
await expect(videoButton).toBeVisible();
63-
// video should be on
64-
await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
59+
await expect(
60+
frame.getByRole("switch", { name: "Stop video", checked: true }),
61+
).toBeVisible();
6562
}
6663

6764
// We should see 5 video tiles everywhere now
@@ -101,13 +98,15 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
10198
const florianFrame = florian.page
10299
.locator('iframe[title="Element Call"]')
103100
.contentFrame();
104-
const florianMuteButton = florianFrame.getByTestId("incall_videomute");
105-
await florianMuteButton.click();
101+
const florianVideoButton = florianFrame.getByRole("switch", {
102+
name: /video/,
103+
});
104+
await expect(florianVideoButton).toHaveAccessibleName("Stop video");
105+
await expect(florianVideoButton).toBeChecked();
106+
await florianVideoButton.click();
106107
// Now the button should indicate we can start video
107-
await expect(florianMuteButton).toHaveAttribute(
108-
"aria-label",
109-
/^Start video$/,
110-
);
108+
await expect(florianVideoButton).toHaveAccessibleName("Start video");
109+
await expect(florianVideoButton).not.toBeChecked();
111110

112111
// wait a bit for the state to propagate
113112
await valere.page.waitForTimeout(3000);

‎playwright/widget/pip-call-button-interaction.test.ts‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,22 +49,27 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => {
4949

5050
{
5151
// Check for a bug where the video had the wrong fit in PIP
52-
const hangupBtn = iFrame.getByRole("button", { name: "End call" });
53-
const audioBtn = iFrame.getByTestId("incall_mute");
54-
const videoBtn = iFrame.getByTestId("incall_videomute");
55-
await expect(hangupBtn).toBeVisible();
52+
const audioBtn = iFrame.getByRole("switch", { name: /microphone/ });
53+
const videoBtn = iFrame.getByRole("switch", { name: /video/ });
54+
await expect(
55+
iFrame.getByRole("button", { name: "End call" }),
56+
).toBeVisible();
5657
await expect(audioBtn).toBeVisible();
5758
await expect(videoBtn).toBeVisible();
58-
await expect(audioBtn).toHaveAttribute("aria-label", /^Mute microphone$/);
59-
await expect(videoBtn).toHaveAttribute("aria-label", /^Stop video$/);
59+
await expect(audioBtn).toHaveAccessibleName("Mute microphone");
60+
await expect(audioBtn).toBeChecked();
61+
await expect(videoBtn).toHaveAccessibleName("Stop video");
62+
await expect(videoBtn).toBeChecked();
6063

6164
await videoBtn.click();
6265
await audioBtn.click();
6366

6467
// stop hovering on any of the buttons
6568
await iFrame.getByTestId("videoTile").hover();
6669

67-
await expect(audioBtn).toHaveAttribute("aria-label", /^Unmute microphone$/);
68-
await expect(videoBtn).toHaveAttribute("aria-label", /^Start video$/);
70+
await expect(audioBtn).toHaveAccessibleName("Unmute microphone");
71+
await expect(audioBtn).toBeChecked();
72+
await expect(videoBtn).toHaveAccessibleName("Start video");
73+
await expect(videoBtn).not.toBeChecked();
6974
}
7075
});

‎playwright/widget/pip-call.test.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,14 @@ widgetTest("Put call in PIP", async ({ addUser, browserName }) => {
4545

4646
await TestHelpers.joinCallInCurrentRoom(timo.page);
4747

48-
{
49-
const frame = timo.page
50-
.locator('iframe[title="Element Call"]')
51-
.contentFrame();
48+
const frame = timo.page
49+
.locator('iframe[title="Element Call"]')
50+
.contentFrame();
5251

53-
const videoButton = frame.getByTestId("incall_videomute");
54-
await expect(videoButton).toBeVisible();
55-
// check that the video is on
56-
await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
57-
}
52+
// check that the video is on
53+
await expect(
54+
frame.getByRole("switch", { name: "Stop video", checked: true }),
55+
).toBeVisible();
5856

5957
// Switch to the other room, the call should go to PIP
6058
await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask");

‎playwright/widget/test-helpers.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,10 +152,10 @@ export class TestHelpers {
152152
}
153153
}
154154

155-
public static async maybeDismissBackupChatsToast(page: Page): Promise<void> {
155+
private static async maybeDismissKeyBackupToast(page: Page): Promise<void> {
156156
const toast = page
157157
.locator(".mx_Toast_toast")
158-
.getByRole("heading", { name: "Back up your chats" });
158+
.getByText("Back up your chats");
159159

160160
try {
161161
await expect(toast).toBeVisible({ timeout: 700 });
@@ -183,6 +183,7 @@ export class TestHelpers {
183183
await page.getByRole("button", { name: "Create room" }).click();
184184
await expect(page.getByText("You created this room.")).toBeVisible();
185185
await expect(page.getByText("Encryption enabled")).toBeVisible();
186+
await TestHelpers.maybeDismissKeyBackupToast(page);
186187

187188
// Invite users if any
188189
if (andInvite.length > 0) {
@@ -217,6 +218,7 @@ export class TestHelpers {
217218
await expect(
218219
page.getByRole("main").getByRole("heading", { name: roomName }),
219220
).toBeVisible();
221+
await TestHelpers.maybeDismissKeyBackupToast(page);
220222
}
221223

222224
/**

‎playwright/widget/voice-call-dm.spec.ts‎

Lines changed: 52 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -54,34 +54,36 @@ widgetTest(
5454
.contentFrame();
5555

5656
// ASSERT the button states for whistler (the callee)
57-
{
58-
// The only way to know if it is muted or not is to look at the data-kind attribute..
59-
const videoButton = whistlerFrame.getByTestId("incall_videomute");
60-
// video should be off by default in a voice call
61-
await expect(videoButton).toHaveAttribute("aria-label", /^Start video$/);
62-
63-
const audioButton = whistlerFrame.getByTestId("incall_mute");
64-
// audio should be on for the voice call
65-
await expect(audioButton).toHaveAttribute(
66-
"aria-label",
67-
/^Mute microphone$/,
68-
);
69-
}
57+
// video should be off by default in a voice call
58+
await expect(
59+
whistlerFrame.getByRole("switch", {
60+
name: "Start video",
61+
checked: false,
62+
}),
63+
).toBeVisible();
64+
// audio should be on for the voice call
65+
await expect(
66+
whistlerFrame.getByRole("switch", {
67+
name: "Mute microphone",
68+
checked: true,
69+
}),
70+
).toBeVisible();
7071

7172
// ASSERT the button states for brools (the caller)
72-
{
73-
// The only way to know if it is muted or not is to look at the data-kind attribute..
74-
const videoButton = brooksFrame.getByTestId("incall_videomute");
75-
// video should be off by default in a voice call
76-
await expect(videoButton).toHaveAttribute("aria-label", /^Start video$/);
77-
78-
const audioButton = brooksFrame.getByTestId("incall_mute");
79-
// audio should be on for the voice call
80-
await expect(audioButton).toHaveAttribute(
81-
"aria-label",
82-
/^Mute microphone$/,
83-
);
84-
}
73+
// video should be off by default in a voice call
74+
await expect(
75+
whistlerFrame.getByRole("switch", {
76+
name: "Start video",
77+
checked: false,
78+
}),
79+
).toBeVisible();
80+
// audio should be on for the voice call
81+
await expect(
82+
whistlerFrame.getByRole("switch", {
83+
name: "Mute microphone",
84+
checked: true,
85+
}),
86+
).toBeVisible();
8587

8688
// In order to confirm that the call is disconnected we will check that the message composer is shown again.
8789
// So first we need to confirm that it is hidden when in the call.
@@ -93,10 +95,7 @@ widgetTest(
9395
).not.toBeVisible();
9496

9597
// ASSERT hanging up on one side ends the call for both
96-
{
97-
const hangupButton = brooksFrame.getByTestId("incall_leave");
98-
await hangupButton.click();
99-
}
98+
await brooksFrame.getByRole("button", { name: "End call" }).click();
10099

101100
// The widget should be closed on both sides and the timeline should be back on screen
102101
await expect(
@@ -148,34 +147,30 @@ widgetTest(
148147
.contentFrame();
149148

150149
// ASSERT the button states for whistler (the callee)
151-
{
152-
// The only way to know if it is muted or not is to look at the data-kind attribute..
153-
const videoButton = whistlerFrame.getByTestId("incall_videomute");
154-
// video should be on by default in a voice call
155-
await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
156-
157-
const audioButton = whistlerFrame.getByTestId("incall_mute");
158-
// audio should be on for the voice call
159-
await expect(audioButton).toHaveAttribute(
160-
"aria-label",
161-
/^Mute microphone$/,
162-
);
163-
}
150+
// video should be off by default in a video call
151+
await expect(
152+
whistlerFrame.getByRole("switch", { name: "Stop video", checked: true }),
153+
).toBeVisible();
154+
// audio should be on too
155+
await expect(
156+
whistlerFrame.getByRole("switch", {
157+
name: "Mute microphone",
158+
checked: true,
159+
}),
160+
).toBeVisible();
164161

165162
// ASSERT the button states for brools (the caller)
166-
{
167-
// The only way to know if it is muted or not is to look at the data-kind attribute..
168-
const videoButton = brooksFrame.getByTestId("incall_videomute");
169-
// video should be on by default in a voice call
170-
await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
171-
172-
const audioButton = brooksFrame.getByTestId("incall_mute");
173-
// audio should be on for the voice call
174-
await expect(audioButton).toHaveAttribute(
175-
"aria-label",
176-
/^Mute microphone$/,
177-
);
178-
}
163+
// video should be off by default in a video call
164+
await expect(
165+
whistlerFrame.getByRole("switch", { name: "Stop video", checked: true }),
166+
).toBeVisible();
167+
// audio should be on too
168+
await expect(
169+
whistlerFrame.getByRole("switch", {
170+
name: "Mute microphone",
171+
checked: true,
172+
}),
173+
).toBeVisible();
179174

180175
// In order to confirm that the call is disconnected we will check that the message composer is shown again.
181176
// So first we need to confirm that it is hidden when in the call.
@@ -187,10 +182,7 @@ widgetTest(
187182
).not.toBeVisible();
188183

189184
// ASSERT hanging up on one side ends the call for both
190-
{
191-
const hangupButton = brooksFrame.getByTestId("incall_leave");
192-
await hangupButton.click();
193-
}
185+
await brooksFrame.getByRole("button", { name: "End call" }).click();
194186

195187
// The widget should be closed on both sides and the timeline should be back on screen
196188
await expect(

‎src/__snapshots__/AppBar.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ exports[`AppBar > renders 1`] = `
1414
>
1515
<button
1616
aria-labelledby="_r_0_"
17-
class="_icon-button_1pz9o_8"
17+
class="_icon-button_1215g_8"
1818
data-kind="primary"
1919
role="button"
2020
style="--cpd-icon-button-size: 32px;"

‎src/button/Button.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,10 @@ export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
3737
<Tooltip label={label}>
3838
<CpdButton
3939
iconOnly
40-
aria-label={label}
4140
Icon={Icon}
4241
kind={enabled ? "primary" : "secondary"}
42+
role="switch"
43+
aria-checked={enabled}
4344
{...props}
4445
/>
4546
</Tooltip>
@@ -62,9 +63,10 @@ export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
6263
<Tooltip label={label}>
6364
<CpdButton
6465
iconOnly
65-
aria-label={label}
6666
Icon={Icon}
6767
kind={enabled ? "primary" : "secondary"}
68+
role="switch"
69+
aria-checked={enabled}
6870
{...props}
6971
/>
7072
</Tooltip>
@@ -91,6 +93,8 @@ export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
9193
iconOnly
9294
Icon={ShareScreenSolidIcon}
9395
kind={enabled ? "primary" : "secondary"}
96+
role="switch"
97+
aria-checked={enabled}
9498
{...props}
9599
/>
96100
</Tooltip>
@@ -112,7 +116,6 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
112116
<CpdButton
113117
className={classNames(className, styles.endCall)}
114118
iconOnly
115-
aria-label={t("hangup_button_label")}
116119
Icon={EndCallIcon}
117120
destructive
118121
{...props}

0 commit comments

Comments
 (0)