should match the snapshot 1`] = `
should support events with 1`] = `
should render 1`] = `
should restore key backup when the key is ca
should restore key backup when the key is in
Using this widget may share data
renders correctly 1`] = `
class="mx_ImageView_toolbar"
>
renders map correctly 1`] = `
class="mx_ZoomButtons"
>
has button to edit topic 1`] = `
aria-hidden="true"
class="_input_19o42_24"
id="«rv»"
+ role="switch"
type="checkbox"
/>
renders the room summary 1`] = `
aria-hidden="true"
class="_input_19o42_24"
id="«r5»"
+ role="switch"
type="checkbox"
/>
renders the room topic in the summary 1`] = `
aria-hidden="true"
class="_input_19o42_24"
id="«ri»"
+ role="switch"
type="checkbox"
/>
should render 1`] = `
class="_input_19o42_24"
id="radix-«rr»"
name="compactLayout"
+ role="switch"
title=""
type="checkbox"
/>
diff --git a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index 487a6742743..01f5b8b0978 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -34,6 +34,7 @@ exports[` custom theme should display custom theme 1`] = `
class="_input_19o42_24"
id="radix-«r28»"
name="systemTheme"
+ role="switch"
title=""
type="checkbox"
/>
@@ -312,6 +313,7 @@ exports[` custom theme should render the custom theme sectio
class="_input_19o42_24"
id="radix-«r10»"
name="systemTheme"
+ role="switch"
title=""
type="checkbox"
/>
@@ -590,6 +592,7 @@ exports[` renders the theme choice UI 1`] = `
class="_input_19o42_24"
id="radix-«r0»"
name="systemTheme"
+ role="switch"
title=""
type="checkbox"
/>
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
index 6fc4a568417..886f93fc949 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
@@ -224,6 +224,7 @@ exports[` should display the blacklist of unv
class="_input_19o42_24"
id="radix-«r6»"
name="neverSendEncrypted"
+ role="switch"
title=""
type="checkbox"
/>
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 6c0407a9e8e..464e665fc56 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -561,6 +561,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="_input_19o42_24"
id="radix-«ru»"
name="compactLayout"
+ role="switch"
title=""
type="checkbox"
/>
From 19e6aaf1c443f6c2b99223f0e9a007267c887909 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 5 Aug 2025 11:24:03 +0100
Subject: [PATCH 03/25] Update tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
playwright/e2e/crypto/utils.ts | 10 +++++-----
.../e2e/settings/appearance-user-settings-tab/index.ts | 4 ++--
.../encryption-user-tab/encryption-tab.spec.ts | 2 +-
.../components/views/settings/LayoutSwitcher-test.tsx | 6 +++---
.../views/settings/ThemeChoicePanel-test.tsx | 8 ++++----
.../views/settings/encryption/AdvancedPanel-test.tsx | 2 +-
6 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/playwright/e2e/crypto/utils.ts b/playwright/e2e/crypto/utils.ts
index 289b123e86e..12640bfb3ef 100644
--- a/playwright/e2e/crypto/utils.ts
+++ b/playwright/e2e/crypto/utils.ts
@@ -300,9 +300,9 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle {
const encryptionTab = await app.settings.openUserSettings("Encryption");
- const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+ const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
if (!(await keyStorageToggle.isChecked())) {
- await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+ await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
}
await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
@@ -323,11 +323,11 @@ export async function enableKeyBackup(app: ElementAppPage): Promise {
export async function disableKeyBackup(app: ElementAppPage): Promise {
const encryptionTab = await app.settings.openUserSettings("Encryption");
- const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+ const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
if (await keyStorageToggle.isChecked()) {
- await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+ await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
- await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible();
+ await encryptionTab.getByRole("switch", { name: "Allow key storage" }).isVisible();
// Wait for the update to account data to stick
await new Promise((resolve) => setTimeout(resolve, 2000));
diff --git a/playwright/e2e/settings/appearance-user-settings-tab/index.ts b/playwright/e2e/settings/appearance-user-settings-tab/index.ts
index 29e51fb0ddc..e6eccac15a9 100644
--- a/playwright/e2e/settings/appearance-user-settings-tab/index.ts
+++ b/playwright/e2e/settings/appearance-user-settings-tab/index.ts
@@ -85,7 +85,7 @@ class Helpers {
* Return the system theme toggle
*/
getMatchSystemThemeCheckbox() {
- return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" });
+ return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
}
/**
@@ -219,7 +219,7 @@ class Helpers {
* Return the compact layout checkbox
*/
getCompactLayoutCheckbox() {
- return this.getMessageLayoutPanel().getByRole("checkbox", { name: "Show compact text and messages" });
+ return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
}
/**
diff --git a/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts b/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
index ed1daecf350..20450f46f6a 100644
--- a/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
+++ b/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
@@ -117,7 +117,7 @@ test.describe("Encryption tab", () => {
await verifySession(app, recoveryKey.encodedPrivateKey);
await util.openEncryptionTab();
- await page.getByRole("checkbox", { name: "Allow key storage" }).click();
+ await page.getByRole("switch", { name: "Allow key storage" }).click();
await expect(
page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }),
diff --git a/test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx b/test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx
index 5d3f1709e29..5ff5f888c79 100644
--- a/test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx
+++ b/test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx
@@ -70,12 +70,12 @@ describe("", () => {
await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
await renderLayoutSwitcher();
- expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeChecked();
+ expect(screen.getByRole("switch", { name: "Show compact text and messages" })).toBeChecked();
});
it("should change the setting when toggled", async () => {
await renderLayoutSwitcher();
- act(() => screen.getByRole("checkbox", { name: "Show compact text and messages" }).click());
+ act(() => screen.getByRole("switch", { name: "Show compact text and messages" }).click());
await waitFor(() => expect(SettingsStore.getValue("useCompactLayout")).toBe(true));
});
@@ -83,7 +83,7 @@ describe("", () => {
it("should be disabled when the modern layout is not enabled", async () => {
await SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
await renderLayoutSwitcher();
- expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeDisabled();
+ expect(screen.getByRole("switch", { name: "Show compact text and messages" })).toBeDisabled();
});
});
});
diff --git a/test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx b/test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx
index f1dbc9a2e0d..5332845d1be 100644
--- a/test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx
+++ b/test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx
@@ -56,24 +56,24 @@ describe("", () => {
describe("system theme", () => {
it("should disable Match system theme", async () => {
render();
- expect(screen.getByRole("checkbox", { name: "Match system theme" })).not.toBeChecked();
+ expect(screen.getByRole("switch", { name: "Match system theme" })).not.toBeChecked();
});
it("should enable Match system theme", async () => {
await enableSystemTheme(true);
render();
- expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked();
+ expect(screen.getByRole("switch", { name: "Match system theme" })).toBeChecked();
});
it("should change the system theme when clicked", async () => {
jest.spyOn(SettingsStore, "setValue");
render();
- act(() => screen.getByRole("checkbox", { name: "Match system theme" }).click());
+ act(() => screen.getByRole("switch", { name: "Match system theme" }).click());
// The system theme should be enabled
- expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked();
+ expect(screen.getByRole("switch", { name: "Match system theme" })).toBeChecked();
expect(SettingsStore.setValue).toHaveBeenCalledWith("use_system_theme", null, "device", true);
});
});
diff --git a/test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx b/test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx
index ad98fa4e438..1876b607bb5 100644
--- a/test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx
+++ b/test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx
@@ -74,7 +74,7 @@ describe("", () => {
await renderAdvancedPanel();
expect(screen.getByTestId("otherSettings")).toMatchSnapshot();
- const checkbox = screen.getByRole("checkbox", {
+ const checkbox = screen.getByRole("switch", {
name: "In encrypted rooms, only send messages to verified users",
});
expect(checkbox).toBeChecked();
From b578393d1672d60ae84cf7159538623b3e0ec76d Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 09:16:32 +0100
Subject: [PATCH 04/25] Make BaseDialog's div keyboard focusable and fix test.
---
src/components/views/dialogs/BaseDialog.tsx | 3 +++
test/unit-tests/components/views/dialogs/BaseDialog-test.tsx | 1 +
2 files changed, 4 insertions(+)
diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx
index 56f6d0c5289..a946a44e911 100644
--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/src/components/views/dialogs/BaseDialog.tsx
@@ -145,6 +145,9 @@ export default class BaseDialog extends React.Component {
const lockProps: Record = {
"onKeyDown": this.onKeyDown,
"role": "dialog",
+ // Allow the dialog to be keyboard focusable
+ // So the escape key handling works in more cases (say you select the header)
+ "tabIndex": -1,
// This should point to a node describing the dialog.
// If we were about to completely follow this recommendation we'd need to
// make all the components relying on BaseDialog to be aware of it.
diff --git a/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx b/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
index e8737fe88d5..2bbf3ea0240 100644
--- a/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
@@ -16,6 +16,7 @@ describe("BaseDialog", () => {
const onFinished = jest.fn();
render();
await userEvent.keyboard("{Escape}");
+ await userEvent.keyboard("{Escape}");
expect(onFinished).toHaveBeenCalled();
});
});
From f76a5354394b2d34c17b809f281f5dea220afb51 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 10:46:30 +0100
Subject: [PATCH 05/25] Update more e2e tests to use switch instead of checkbox
---
playwright/e2e/crypto/toasts.spec.ts | 4 ++--
.../e2e/settings/encryption-user-tab/encryption-tab.spec.ts | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/playwright/e2e/crypto/toasts.spec.ts b/playwright/e2e/crypto/toasts.spec.ts
index 7b838edaacd..592076afa01 100644
--- a/playwright/e2e/crypto/toasts.spec.ts
+++ b/playwright/e2e/crypto/toasts.spec.ts
@@ -126,7 +126,7 @@ test.describe("'Turn on key storage' toast", () => {
await toast.getByRole("button", { name: "Continue" }).click();
// Then we see the Encryption settings dialog with an option to turn on key storage
- await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+ await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
// And when we close that
await page.getByRole("button", { name: "Close dialog" }).click();
@@ -153,7 +153,7 @@ test.describe("'Turn on key storage' toast", () => {
await page.getByRole("button", { name: "Go to Settings" }).click();
// Then we see Encryption settings again
- await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+ await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
// And when we close that, see the toast, click Dismiss, and Yes, Dismiss
await page.getByRole("button", { name: "Close dialog" }).click();
diff --git a/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts b/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
index 20450f46f6a..73bb48e2f69 100644
--- a/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
+++ b/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
@@ -136,7 +136,7 @@ test.describe("Encryption tab", () => {
await page.getByRole("button", { name: "Delete key storage" }).click();
- await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
+ await expect(page.getByRole("switch", { name: "Allow key storage" })).not.toBeChecked();
for (const prom of deleteRequestPromises) {
const request = await prom;
From e06d76e3f74d8f77e33247e9f4708bb39aebdce0 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 14:50:45 +0100
Subject: [PATCH 06/25] fix useParticipants incorrectly returning an array when
a map is expected
---
src/hooks/useCall.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index db0660df2bf..cc32b46bc86 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -45,7 +45,7 @@ export const useParticipants = (call: Call | null): Map>
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? call?.participants ?? [], [call]),
+ useCallback((state) => state ?? call?.participants ?? new Map(), [call]),
);
};
From c45ad3063f97cad6989ec3fe44dacf6f0904a4e1 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 15:15:41 +0100
Subject: [PATCH 07/25] Try again to fix calParticipants
---
src/hooks/useCall.ts | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index cc32b46bc86..9f1fb010cbe 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -42,10 +42,11 @@ export const useConnectionState = (call: Call | null): ConnectionState =>
);
export const useParticipants = (call: Call | null): Map> => {
+ const participants = call?.participants;
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? call?.participants ?? new Map(), [call]),
+ useCallback((state) => state ?? participants ?? new Map(), [participants]),
);
};
From f83093cc44586b881d0918e4e4dee60d3263d44b Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 16:22:53 +0100
Subject: [PATCH 08/25] try fix RoomHeader tests again by also mocking
useParticipants
---
src/hooks/useCall.ts | 3 +-
.../rooms/RoomHeader/RoomHeader-test.tsx | 42 +++++++++++++------
2 files changed, 31 insertions(+), 14 deletions(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index 9f1fb010cbe..cc32b46bc86 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -42,11 +42,10 @@ export const useConnectionState = (call: Call | null): ConnectionState =>
);
export const useParticipants = (call: Call | null): Map> => {
- const participants = call?.participants;
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? participants ?? new Map(), [participants]),
+ useCallback((state) => state ?? call?.participants ?? new Map(), [call]),
);
};
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index a9f02532c8e..da9add1b542 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -554,7 +554,9 @@ describe("RoomHeader", () => {
});
it("join button is shown if there is an ongoing call", async () => {
- mockRoomMembers(room, 3);
+ const members = mockRoomMembers(room, 3);
+ const participants = mockParticipants(members);
+ jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
render(, getWrapper());
const joinButton = getByLabelText(document.body, "Join");
@@ -562,7 +564,9 @@ describe("RoomHeader", () => {
});
it("join button is disabled if there is an other ongoing call", async () => {
- mockRoomMembers(room, 3);
+ const members = mockRoomMembers(room, 3);
+ const participants = mockParticipants(members);
+ jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
new Set([{ roomId: "some_other_room" } as Call]),
@@ -582,7 +586,9 @@ describe("RoomHeader", () => {
});
it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
- mockRoomMembers(room, 3);
+ const members = mockRoomMembers(room, 3);
+ const participants = mockParticipants(members);
+ jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
@@ -792,20 +798,32 @@ describe("RoomHeader", () => {
/**
*
* @param count the number of users to create
+ * @returns the created members
*/
function mockRoomMembers(room: Room, count: number) {
const members = Array(count)
.fill(0)
- .map((_, index) => ({
- userId: `@user-${index}:example.org`,
- name: `Member ${index}`,
- rawDisplayName: `Member ${index}`,
- roomId: room.roomId,
- membership: KnownMembership.Join,
- getAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
- getMxcAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
- }));
+ .map((_, index) => {
+ const userId = `@user-${index}:example.org`;
+ const member = new RoomMember(room.roomId, userId);
+ member.name = `Member ${index}`;
+ member.rawDisplayName = `Member ${index}`;
+ member.membership = KnownMembership.Join;
+ member.getAvatarUrl = () => `mxc://avatar.url/user-${index}.png`;
+ member.getMxcAvatarUrl = () => `mxc://avatar.url/user-${index}.png`;
+ return member;
+ });
room.currentState.setJoinedMemberCount(members.length);
room.getJoinedMembers = jest.fn().mockReturnValue(members);
+ return members;
+}
+
+/**
+ * Creates a participants map from room members
+ * @param members the room members to convert to participants
+ * @returns Map of participants with device sets
+ */
+function mockParticipants(members: RoomMember[]): Map> {
+ return new Map(members.map((member, index) => [member, new Set([`device${index + 1}`])]));
}
From e456782efd5ea860cb6679be3adf440788fe40a4 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 16:40:12 +0100
Subject: [PATCH 09/25] Revert "try fix RoomHeader tests again by also mocking
useParticipants"
This reverts commit f83093cc44586b881d0918e4e4dee60d3263d44b.
---
src/hooks/useCall.ts | 3 +-
.../rooms/RoomHeader/RoomHeader-test.tsx | 42 ++++++-------------
2 files changed, 14 insertions(+), 31 deletions(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index cc32b46bc86..9f1fb010cbe 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -42,10 +42,11 @@ export const useConnectionState = (call: Call | null): ConnectionState =>
);
export const useParticipants = (call: Call | null): Map> => {
+ const participants = call?.participants;
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? call?.participants ?? new Map(), [call]),
+ useCallback((state) => state ?? participants ?? new Map(), [participants]),
);
};
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index da9add1b542..a9f02532c8e 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -554,9 +554,7 @@ describe("RoomHeader", () => {
});
it("join button is shown if there is an ongoing call", async () => {
- const members = mockRoomMembers(room, 3);
- const participants = mockParticipants(members);
- jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
+ mockRoomMembers(room, 3);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
render(, getWrapper());
const joinButton = getByLabelText(document.body, "Join");
@@ -564,9 +562,7 @@ describe("RoomHeader", () => {
});
it("join button is disabled if there is an other ongoing call", async () => {
- const members = mockRoomMembers(room, 3);
- const participants = mockParticipants(members);
- jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
+ mockRoomMembers(room, 3);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
new Set([{ roomId: "some_other_room" } as Call]),
@@ -586,9 +582,7 @@ describe("RoomHeader", () => {
});
it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
- const members = mockRoomMembers(room, 3);
- const participants = mockParticipants(members);
- jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
+ mockRoomMembers(room, 3);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
@@ -798,32 +792,20 @@ describe("RoomHeader", () => {
/**
*
* @param count the number of users to create
- * @returns the created members
*/
function mockRoomMembers(room: Room, count: number) {
const members = Array(count)
.fill(0)
- .map((_, index) => {
- const userId = `@user-${index}:example.org`;
- const member = new RoomMember(room.roomId, userId);
- member.name = `Member ${index}`;
- member.rawDisplayName = `Member ${index}`;
- member.membership = KnownMembership.Join;
- member.getAvatarUrl = () => `mxc://avatar.url/user-${index}.png`;
- member.getMxcAvatarUrl = () => `mxc://avatar.url/user-${index}.png`;
- return member;
- });
+ .map((_, index) => ({
+ userId: `@user-${index}:example.org`,
+ name: `Member ${index}`,
+ rawDisplayName: `Member ${index}`,
+ roomId: room.roomId,
+ membership: KnownMembership.Join,
+ getAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
+ getMxcAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
+ }));
room.currentState.setJoinedMemberCount(members.length);
room.getJoinedMembers = jest.fn().mockReturnValue(members);
- return members;
-}
-
-/**
- * Creates a participants map from room members
- * @param members the room members to convert to participants
- * @returns Map of participants with device sets
- */
-function mockParticipants(members: RoomMember[]): Map> {
- return new Map(members.map((member, index) => [member, new Set([`device${index + 1}`])]));
}
From fb502a68a08bd0227ace807fdaf394ed8719d92a Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 20:00:33 +0100
Subject: [PATCH 10/25] Try with no dependencies
---
src/hooks/useCall.ts | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index 9f1fb010cbe..6ace5a70e69 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -42,11 +42,10 @@ export const useConnectionState = (call: Call | null): ConnectionState =>
);
export const useParticipants = (call: Call | null): Map> => {
- const participants = call?.participants;
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? participants ?? new Map(), [participants]),
+ useCallback((state) => state ?? call?.participants ?? new Map(), []),
);
};
From 92034aaff9b46fd135ee4dbcd93dd62ad5985e5e Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 20:44:53 +0100
Subject: [PATCH 11/25] try mocking useCall rather than just
useParticipantCount
---
.../rooms/RoomHeader/RoomHeader-test.tsx | 40 +++++++++++++++++--
1 file changed, 37 insertions(+), 3 deletions(-)
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index a9f02532c8e..9391af0049c 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -96,6 +96,9 @@ describe("RoomHeader", () => {
setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
+
+ // Mock useCall to return a Call object with stable participants to prevent React dependency errors
+ jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall());
});
afterEach(() => {
@@ -555,7 +558,8 @@ describe("RoomHeader", () => {
it("join button is shown if there is an ongoing call", async () => {
mockRoomMembers(room, 3);
- jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
+ // Mock a call with 3 participants instead of mocking useParticipantCount
+ jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
render(, getWrapper());
const joinButton = getByLabelText(document.body, "Join");
expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
@@ -563,7 +567,8 @@ describe("RoomHeader", () => {
it("join button is disabled if there is an other ongoing call", async () => {
mockRoomMembers(room, 3);
- jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
+ // Mock a call with 3 participants instead of mocking useParticipantCount
+ jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
new Set([{ roomId: "some_other_room" } as Call]),
);
@@ -583,7 +588,8 @@ describe("RoomHeader", () => {
it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
mockRoomMembers(room, 3);
- jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
+ // Mock a call with 3 participants instead of mocking useParticipantCount
+ jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
render(, getWrapper());
@@ -789,6 +795,34 @@ describe("RoomHeader", () => {
});
});
+/**
+ * Creates a mock Call object with stable participants to prevent React dependency errors
+ */
+function createMockCall(roomId: string = "!1:example.org", participantCount: number = 0): Call {
+ const participants = new Map();
+
+ // Create mock participants with devices
+ for (let i = 0; i < participantCount; i++) {
+ const mockMember = {
+ userId: `@user-${i}:example.org`,
+ name: `Member ${i}`,
+ } as RoomMember;
+
+ const deviceSet = new Set([`device-${i}`]);
+ participants.set(mockMember, deviceSet);
+ }
+
+ return {
+ roomId,
+ participants,
+ widget: { id: "test-widget" },
+ connectionState: "disconnected",
+ on: jest.fn(),
+ off: jest.fn(),
+ emit: jest.fn(),
+ } as unknown as Call;
+}
+
/**
*
* @param count the number of users to create
From 644be3155c434a309fcfd90a21370a732bb7bdd5 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 20:57:17 +0100
Subject: [PATCH 12/25] Mock the call store rather than the hook
---
.../views/rooms/RoomHeader/RoomHeader-test.tsx | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index 9391af0049c..0871d728716 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -52,7 +52,6 @@ import * as ShieldUtils from "../../../../../../src/utils/ShieldUtils";
import { Container, WidgetLayoutStore } from "../../../../../../src/stores/widgets/WidgetLayoutStore";
import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
import { _t } from "../../../../../../src/languageHandler";
-import * as UseCall from "../../../../../../src/hooks/useCall";
import { SdkContextClass } from "../../../../../../src/contexts/SDKContext";
import WidgetStore, { type IApp } from "../../../../../../src/stores/WidgetStore";
import { UIFeature } from "../../../../../../src/settings/UIFeature";
@@ -97,8 +96,9 @@ describe("RoomHeader", () => {
setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
- // Mock useCall to return a Call object with stable participants to prevent React dependency errors
- jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall());
+ // Mock CallStore.instance.getCall to return a Call object with stable participants
+ // This prevents React dependency errors without disrupting hook execution order
+ jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall());
});
afterEach(() => {
@@ -558,8 +558,8 @@ describe("RoomHeader", () => {
it("join button is shown if there is an ongoing call", async () => {
mockRoomMembers(room, 3);
- // Mock a call with 3 participants instead of mocking useParticipantCount
- jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
+ // Mock CallStore to return a call with 3 participants
+ jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
render(, getWrapper());
const joinButton = getByLabelText(document.body, "Join");
expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
@@ -567,8 +567,8 @@ describe("RoomHeader", () => {
it("join button is disabled if there is an other ongoing call", async () => {
mockRoomMembers(room, 3);
- // Mock a call with 3 participants instead of mocking useParticipantCount
- jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
+ // Mock CallStore to return a call with 3 participants
+ jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
new Set([{ roomId: "some_other_room" } as Call]),
);
@@ -588,8 +588,8 @@ describe("RoomHeader", () => {
it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
mockRoomMembers(room, 3);
- // Mock a call with 3 participants instead of mocking useParticipantCount
- jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
+ // Mock CallStore to return a call with 3 participants
+ jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
render(, getWrapper());
From 043d812b1defe75eb7d9c56546317f176b4ba34e Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 21:28:13 +0100
Subject: [PATCH 13/25] Only mock the call object for tests that expect it.
---
.../components/views/rooms/RoomHeader/RoomHeader-test.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index 0871d728716..7c7cb375f9f 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -96,9 +96,9 @@ describe("RoomHeader", () => {
setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
- // Mock CallStore.instance.getCall to return a Call object with stable participants
- // This prevents React dependency errors without disrupting hook execution order
- jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall());
+ // Mock CallStore.instance.getCall to return null by default
+ // Individual tests can override this when they need a specific Call object
+ jest.spyOn(CallStore.instance, "getCall").mockReturnValue(null);
});
afterEach(() => {
From 8e67cfe3c46e13e40b46137499dc8bee31b666ac Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 22:03:27 +0100
Subject: [PATCH 14/25] Revert "Only mock the call object for tests that expect
it."
This reverts commit 043d812b1defe75eb7d9c56546317f176b4ba34e.
---
.../components/views/rooms/RoomHeader/RoomHeader-test.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index 7c7cb375f9f..0871d728716 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -96,9 +96,9 @@ describe("RoomHeader", () => {
setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
- // Mock CallStore.instance.getCall to return null by default
- // Individual tests can override this when they need a specific Call object
- jest.spyOn(CallStore.instance, "getCall").mockReturnValue(null);
+ // Mock CallStore.instance.getCall to return a Call object with stable participants
+ // This prevents React dependency errors without disrupting hook execution order
+ jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall());
});
afterEach(() => {
From 667827eeb3084c98064fa1589bf1ecee63ca9110 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 22:03:40 +0100
Subject: [PATCH 15/25] Revert "Mock the call store rather than the hook"
This reverts commit 644be3155c434a309fcfd90a21370a732bb7bdd5.
---
.../views/rooms/RoomHeader/RoomHeader-test.tsx | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index 0871d728716..9391af0049c 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -52,6 +52,7 @@ import * as ShieldUtils from "../../../../../../src/utils/ShieldUtils";
import { Container, WidgetLayoutStore } from "../../../../../../src/stores/widgets/WidgetLayoutStore";
import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
import { _t } from "../../../../../../src/languageHandler";
+import * as UseCall from "../../../../../../src/hooks/useCall";
import { SdkContextClass } from "../../../../../../src/contexts/SDKContext";
import WidgetStore, { type IApp } from "../../../../../../src/stores/WidgetStore";
import { UIFeature } from "../../../../../../src/settings/UIFeature";
@@ -96,9 +97,8 @@ describe("RoomHeader", () => {
setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
- // Mock CallStore.instance.getCall to return a Call object with stable participants
- // This prevents React dependency errors without disrupting hook execution order
- jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall());
+ // Mock useCall to return a Call object with stable participants to prevent React dependency errors
+ jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall());
});
afterEach(() => {
@@ -558,8 +558,8 @@ describe("RoomHeader", () => {
it("join button is shown if there is an ongoing call", async () => {
mockRoomMembers(room, 3);
- // Mock CallStore to return a call with 3 participants
- jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
+ // Mock a call with 3 participants instead of mocking useParticipantCount
+ jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
render(, getWrapper());
const joinButton = getByLabelText(document.body, "Join");
expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
@@ -567,8 +567,8 @@ describe("RoomHeader", () => {
it("join button is disabled if there is an other ongoing call", async () => {
mockRoomMembers(room, 3);
- // Mock CallStore to return a call with 3 participants
- jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
+ // Mock a call with 3 participants instead of mocking useParticipantCount
+ jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
new Set([{ roomId: "some_other_room" } as Call]),
);
@@ -588,8 +588,8 @@ describe("RoomHeader", () => {
it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
mockRoomMembers(room, 3);
- // Mock CallStore to return a call with 3 participants
- jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
+ // Mock a call with 3 participants instead of mocking useParticipantCount
+ jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
render(, getWrapper());
From 3900a1e20dcd154cdcc48365b7e44b2a7952eb40 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 22:03:48 +0100
Subject: [PATCH 16/25] Revert "try mocking useCall rather than just
useParticipantCount"
This reverts commit 92034aaff9b46fd135ee4dbcd93dd62ad5985e5e.
---
.../rooms/RoomHeader/RoomHeader-test.tsx | 40 ++-----------------
1 file changed, 3 insertions(+), 37 deletions(-)
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index 9391af0049c..a9f02532c8e 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -96,9 +96,6 @@ describe("RoomHeader", () => {
setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
-
- // Mock useCall to return a Call object with stable participants to prevent React dependency errors
- jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall());
});
afterEach(() => {
@@ -558,8 +555,7 @@ describe("RoomHeader", () => {
it("join button is shown if there is an ongoing call", async () => {
mockRoomMembers(room, 3);
- // Mock a call with 3 participants instead of mocking useParticipantCount
- jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
+ jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
render(, getWrapper());
const joinButton = getByLabelText(document.body, "Join");
expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
@@ -567,8 +563,7 @@ describe("RoomHeader", () => {
it("join button is disabled if there is an other ongoing call", async () => {
mockRoomMembers(room, 3);
- // Mock a call with 3 participants instead of mocking useParticipantCount
- jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
+ jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
new Set([{ roomId: "some_other_room" } as Call]),
);
@@ -588,8 +583,7 @@ describe("RoomHeader", () => {
it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
mockRoomMembers(room, 3);
- // Mock a call with 3 participants instead of mocking useParticipantCount
- jest.spyOn(UseCall, 'useCall').mockReturnValue(createMockCall(ROOM_ID, 3));
+ jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
render(, getWrapper());
@@ -795,34 +789,6 @@ describe("RoomHeader", () => {
});
});
-/**
- * Creates a mock Call object with stable participants to prevent React dependency errors
- */
-function createMockCall(roomId: string = "!1:example.org", participantCount: number = 0): Call {
- const participants = new Map();
-
- // Create mock participants with devices
- for (let i = 0; i < participantCount; i++) {
- const mockMember = {
- userId: `@user-${i}:example.org`,
- name: `Member ${i}`,
- } as RoomMember;
-
- const deviceSet = new Set([`device-${i}`]);
- participants.set(mockMember, deviceSet);
- }
-
- return {
- roomId,
- participants,
- widget: { id: "test-widget" },
- connectionState: "disconnected",
- on: jest.fn(),
- off: jest.fn(),
- emit: jest.fn(),
- } as unknown as Call;
-}
-
/**
*
* @param count the number of users to create
From f396b28c68a554ba19fbadd6f892b427441e17a7 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 22:03:57 +0100
Subject: [PATCH 17/25] Revert "Try with no dependencies"
This reverts commit fb502a68a08bd0227ace807fdaf394ed8719d92a.
---
src/hooks/useCall.ts | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index 6ace5a70e69..9f1fb010cbe 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -42,10 +42,11 @@ export const useConnectionState = (call: Call | null): ConnectionState =>
);
export const useParticipants = (call: Call | null): Map> => {
+ const participants = call?.participants;
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? call?.participants ?? new Map(), []),
+ useCallback((state) => state ?? participants ?? new Map(), [participants]),
);
};
From 6cf8dc570bbc528888b75a21d0337243c03cce61 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 22:04:01 +0100
Subject: [PATCH 18/25] Reapply "try fix RoomHeader tests again by also mocking
useParticipants"
This reverts commit e456782efd5ea860cb6679be3adf440788fe40a4.
---
src/hooks/useCall.ts | 3 +-
.../rooms/RoomHeader/RoomHeader-test.tsx | 42 +++++++++++++------
2 files changed, 31 insertions(+), 14 deletions(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index 9f1fb010cbe..cc32b46bc86 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -42,11 +42,10 @@ export const useConnectionState = (call: Call | null): ConnectionState =>
);
export const useParticipants = (call: Call | null): Map> => {
- const participants = call?.participants;
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? participants ?? new Map(), [participants]),
+ useCallback((state) => state ?? call?.participants ?? new Map(), [call]),
);
};
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index a9f02532c8e..da9add1b542 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -554,7 +554,9 @@ describe("RoomHeader", () => {
});
it("join button is shown if there is an ongoing call", async () => {
- mockRoomMembers(room, 3);
+ const members = mockRoomMembers(room, 3);
+ const participants = mockParticipants(members);
+ jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
render(, getWrapper());
const joinButton = getByLabelText(document.body, "Join");
@@ -562,7 +564,9 @@ describe("RoomHeader", () => {
});
it("join button is disabled if there is an other ongoing call", async () => {
- mockRoomMembers(room, 3);
+ const members = mockRoomMembers(room, 3);
+ const participants = mockParticipants(members);
+ jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
new Set([{ roomId: "some_other_room" } as Call]),
@@ -582,7 +586,9 @@ describe("RoomHeader", () => {
});
it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
- mockRoomMembers(room, 3);
+ const members = mockRoomMembers(room, 3);
+ const participants = mockParticipants(members);
+ jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
@@ -792,20 +798,32 @@ describe("RoomHeader", () => {
/**
*
* @param count the number of users to create
+ * @returns the created members
*/
function mockRoomMembers(room: Room, count: number) {
const members = Array(count)
.fill(0)
- .map((_, index) => ({
- userId: `@user-${index}:example.org`,
- name: `Member ${index}`,
- rawDisplayName: `Member ${index}`,
- roomId: room.roomId,
- membership: KnownMembership.Join,
- getAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
- getMxcAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
- }));
+ .map((_, index) => {
+ const userId = `@user-${index}:example.org`;
+ const member = new RoomMember(room.roomId, userId);
+ member.name = `Member ${index}`;
+ member.rawDisplayName = `Member ${index}`;
+ member.membership = KnownMembership.Join;
+ member.getAvatarUrl = () => `mxc://avatar.url/user-${index}.png`;
+ member.getMxcAvatarUrl = () => `mxc://avatar.url/user-${index}.png`;
+ return member;
+ });
room.currentState.setJoinedMemberCount(members.length);
room.getJoinedMembers = jest.fn().mockReturnValue(members);
+ return members;
+}
+
+/**
+ * Creates a participants map from room members
+ * @param members the room members to convert to participants
+ * @returns Map of participants with device sets
+ */
+function mockParticipants(members: RoomMember[]): Map> {
+ return new Map(members.map((member, index) => [member, new Set([`device${index + 1}`])]));
}
From db50519ccab66804a17f54c0c12860251345b8d1 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 22:04:04 +0100
Subject: [PATCH 19/25] Revert "try fix RoomHeader tests again by also mocking
useParticipants"
This reverts commit f83093cc44586b881d0918e4e4dee60d3263d44b.
---
src/hooks/useCall.ts | 3 +-
.../rooms/RoomHeader/RoomHeader-test.tsx | 42 ++++++-------------
2 files changed, 14 insertions(+), 31 deletions(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index cc32b46bc86..9f1fb010cbe 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -42,10 +42,11 @@ export const useConnectionState = (call: Call | null): ConnectionState =>
);
export const useParticipants = (call: Call | null): Map> => {
+ const participants = call?.participants;
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? call?.participants ?? new Map(), [call]),
+ useCallback((state) => state ?? participants ?? new Map(), [participants]),
);
};
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
index da9add1b542..a9f02532c8e 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
@@ -554,9 +554,7 @@ describe("RoomHeader", () => {
});
it("join button is shown if there is an ongoing call", async () => {
- const members = mockRoomMembers(room, 3);
- const participants = mockParticipants(members);
- jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
+ mockRoomMembers(room, 3);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
render(, getWrapper());
const joinButton = getByLabelText(document.body, "Join");
@@ -564,9 +562,7 @@ describe("RoomHeader", () => {
});
it("join button is disabled if there is an other ongoing call", async () => {
- const members = mockRoomMembers(room, 3);
- const participants = mockParticipants(members);
- jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
+ mockRoomMembers(room, 3);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
new Set([{ roomId: "some_other_room" } as Call]),
@@ -586,9 +582,7 @@ describe("RoomHeader", () => {
});
it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
- const members = mockRoomMembers(room, 3);
- const participants = mockParticipants(members);
- jest.spyOn(UseCall, "useParticipants").mockReturnValue(participants);
+ mockRoomMembers(room, 3);
jest.spyOn(UseCall, "useParticipantCount").mockReturnValue(3);
jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
@@ -798,32 +792,20 @@ describe("RoomHeader", () => {
/**
*
* @param count the number of users to create
- * @returns the created members
*/
function mockRoomMembers(room: Room, count: number) {
const members = Array(count)
.fill(0)
- .map((_, index) => {
- const userId = `@user-${index}:example.org`;
- const member = new RoomMember(room.roomId, userId);
- member.name = `Member ${index}`;
- member.rawDisplayName = `Member ${index}`;
- member.membership = KnownMembership.Join;
- member.getAvatarUrl = () => `mxc://avatar.url/user-${index}.png`;
- member.getMxcAvatarUrl = () => `mxc://avatar.url/user-${index}.png`;
- return member;
- });
+ .map((_, index) => ({
+ userId: `@user-${index}:example.org`,
+ name: `Member ${index}`,
+ rawDisplayName: `Member ${index}`,
+ roomId: room.roomId,
+ membership: KnownMembership.Join,
+ getAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
+ getMxcAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
+ }));
room.currentState.setJoinedMemberCount(members.length);
room.getJoinedMembers = jest.fn().mockReturnValue(members);
- return members;
-}
-
-/**
- * Creates a participants map from room members
- * @param members the room members to convert to participants
- * @returns Map of participants with device sets
- */
-function mockParticipants(members: RoomMember[]): Map> {
- return new Map(members.map((member, index) => [member, new Set([`device${index + 1}`])]));
}
From f67825cff3c586ee0cc136285676f303d90840fa Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 22:04:14 +0100
Subject: [PATCH 20/25] Revert "Try again to fix calParticipants"
This reverts commit c45ad3063f97cad6989ec3fe44dacf6f0904a4e1.
---
src/hooks/useCall.ts | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index 9f1fb010cbe..cc32b46bc86 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -42,11 +42,10 @@ export const useConnectionState = (call: Call | null): ConnectionState =>
);
export const useParticipants = (call: Call | null): Map> => {
- const participants = call?.participants;
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? participants ?? new Map(), [participants]),
+ useCallback((state) => state ?? call?.participants ?? new Map(), [call]),
);
};
From fecb387c52380e9517908a8230789ee61b556f48 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Wed, 27 Aug 2025 22:04:22 +0100
Subject: [PATCH 21/25] Revert "fix useParticipants incorrectly returning an
array when a map is expected"
This reverts commit e06d76e3f74d8f77e33247e9f4708bb39aebdce0.
---
src/hooks/useCall.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index cc32b46bc86..db0660df2bf 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -45,7 +45,7 @@ export const useParticipants = (call: Call | null): Map>
return useTypedEventEmitterState(
call ?? undefined,
CallEvent.Participants,
- useCallback((state) => state ?? call?.participants ?? new Map(), [call]),
+ useCallback((state) => state ?? call?.participants ?? [], [call]),
);
};
From 11641410d85c7e65c38232586077a9fc57b945e0 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Thu, 28 Aug 2025 10:01:39 +0100
Subject: [PATCH 22/25] bump compound-web
---
yarn.lock | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index d22c9a3b4b5..20b1e49b95f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4699,9 +4699,9 @@
"@vector-im/compound-web@^8.1.2":
- version "8.2.0"
- resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.2.0.tgz#64193ce8d0c62a99e566cdb3bf4602160575ef3e"
- integrity sha512-we+EQ/pw2YCEl7EMPdpeqP3HZpnQcCuOHoiAYKFwF4doXBDENLpTyA8ZdX0cViT3sqvExPT0RHZ2Nlt5Y6dQNQ==
+ version "8.2.1"
+ resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.2.1.tgz#e16ce566c836e6c0fa3318128e57fda0a4542514"
+ integrity sha512-mqIMbBtnY3RvpCOVBhE8YouSGwU/efllJR3q4Ds1/Z/rS0/dh3Mok2frG4zRg8wdDa91VI9XHBEjeugUrpRbzw==
dependencies:
"@floating-ui/react" "^0.27.0"
"@radix-ui/react-context-menu" "^2.2.1"
From 35019df356cd280e3472aad009d9a01cfbc9af19 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Thu, 28 Aug 2025 10:02:42 +0100
Subject: [PATCH 23/25] Update snapshots
---
.../__snapshots__/PinnedEventTile-test.tsx.snap | 4 ++--
.../ThreadsActivityCentre-test.tsx.snap | 16 ++++++++--------
2 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index 26a121a88aa..0201e030732 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -185,7 +185,7 @@ exports[` should render the menu with all the options 1`] = `
aria-label="Open menu"
aria-labelledby="radix-«r10»"
aria-orientation="vertical"
- class="_menu_19sse_8"
+ class="_menu_1glhz_8"
data-align="start"
data-orientation="vertical"
data-radix-menu-content=""
@@ -376,7 +376,7 @@ exports[` should render the menu without unpin and delete 1`]
aria-label="Open menu"
aria-labelledby="radix-«rl»"
aria-orientation="vertical"
- class="_menu_19sse_8"
+ class="_menu_1glhz_8"
data-align="start"
data-orientation="vertical"
data-radix-menu-content=""
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index 2e778b51203..9bf572b78fc 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
Threads activity
@@ -230,7 +230,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
Threads activity
@@ -273,7 +273,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
Threads activity
@@ -307,7 +307,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
Threads activity
From 0c907c53ae47e6c9e2a7876041bbb12ed4a478f7 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Thu, 28 Aug 2025 11:59:55 +0100
Subject: [PATCH 24/25] Fix bad merge, we don't need the second call to escape.
The comment a couple of lines up explains things.
---
test/unit-tests/components/views/dialogs/BaseDialog-test.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx b/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
index d32d26615f1..41a396c5b6a 100644
--- a/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
@@ -21,7 +21,6 @@ describe("BaseDialog", () => {
const dialog = container.querySelector('[role="dialog"]') as HTMLElement;
dialog?.focus();
await userEvent.keyboard("{Escape}");
- await userEvent.keyboard("{Escape}");
expect(onFinished).toHaveBeenCalled();
});
});
From e2c1be49ca07cafe92eaf875e9433964fee78b52 Mon Sep 17 00:00:00 2001
From: David Langley
Date: Thu, 28 Aug 2025 13:05:28 +0100
Subject: [PATCH 25/25] Trigger build to fix licence/cla check