Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Show correct call icon for joining a call. (#31489)

Browse Source 
* Show correct call icon in header.

* fix import

* Simply useRoomCall output

* Add tests and a label

* update snap

* update test
This commit is contained in:
Will Hunt
2026-01-02 17:51:15 +00:00
committed by GitHub
parent cbe3eb1709
commit 7398a83ae4
5 changed files with 53 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
View File

@@ -582,12 +582,21 @@ describe("RoomHeader", () => {
expect(videoButton).toHaveAttribute("aria-disabled", "true");
});
it("join button is shown if there is an ongoing call", async () => {
it("join video call 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));
render(<RoomHeader room={room} />, getWrapper());
const joinButton = getByLabelText(document.body, "Join");
const joinButton = getByLabelText(document.body, "Join video call");
expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
});
it("join voice call 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, CallType.Voice));
render(<RoomHeader room={room} />, getWrapper());
const joinButton = getByLabelText(document.body, "Join voice call");
expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
});
@@ -859,7 +868,11 @@ 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 {
function createMockCall(
roomId: string = "!1:example.org",
participantCount: number = 0,
callType: CallType = CallType.Video,
): Call {
const participants = new Map();
// Create mock participants with devices
@@ -878,6 +891,7 @@ function createMockCall(roomId: string = "!1:example.org", participantCount: num
participants,
widget: { id: "test-widget" },
connectionState: "disconnected",
callType,
on: jest.fn(),
off: jest.fn(),
emit: jest.fn(),

8
test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
View File

@@ -56,7 +56,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_17e_"
aria-labelledby="_r_18c_"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -83,7 +83,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="_r_17j_"
aria-labelledby="_r_18h_"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@@ -98,7 +98,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
</button>
<button
aria-label="Threads"
aria-labelledby="_r_17o_"
aria-labelledby="_r_18m_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
@@ -125,7 +125,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
</button>
<button
aria-label="Room info"
aria-labelledby="_r_17t_"
aria-labelledby="_r_18r_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"