From fae563525fd8079e5735bd4ee047db31a71290bc Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 13 Jan 2026 13:18:14 +0000 Subject: [PATCH] Address review comments --- .../rooms/EventTile/E2eMessageSharedIcon.tsx | 21 +++++++++++-------- .../views/rooms/EventTile/E2ePadlock.tsx | 9 +++++++- .../components/views/rooms/EventTile-test.tsx | 7 +++---- .../EventTile/E2eMessageSharedIcon-test.tsx | 10 ++++----- .../E2eMessageSharedIcon-test.tsx.snap | 2 ++ .../__snapshots__/E2ePadlock-test.tsx.snap | 3 +++ 6 files changed, 32 insertions(+), 20 deletions(-) diff --git a/src/components/views/rooms/EventTile/E2eMessageSharedIcon.tsx b/src/components/views/rooms/EventTile/E2eMessageSharedIcon.tsx index 24894241a1..d6dd6868eb 100644 --- a/src/components/views/rooms/EventTile/E2eMessageSharedIcon.tsx +++ b/src/components/views/rooms/EventTile/E2eMessageSharedIcon.tsx @@ -5,26 +5,29 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type JSX, useContext } from "react"; +import React, { type JSX } from "react"; import { EventTimeline } from "matrix-js-sdk/src/matrix"; -import MatrixClientContext from "../../../../contexts/MatrixClientContext.tsx"; +import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext.tsx"; import { _t } from "../../../../languageHandler.tsx"; import { E2ePadlock, E2ePadlockIcon } from "./E2ePadlock.tsx"; +/** The React properties of an {@link E2eMessageSharedIcon}. */ +interface E2eMessageSharedIconParams { + /** The ID of the user who shared the keys. */ + keyForwardingUserId: string; + + /** The ID of the room that contains the event whose keys were shared. Used to find the displayname of the user who shared the keys. */ + roomId: string; +} + /** * A small icon with tooltip, used as part of an {@link EventTile}, which indicates that the key to this event * was shared with us by another user. * * An alternative to the {@link E2ePadlock} component, which is used for UTD events and other error cases. */ -export function E2eMessageSharedIcon(props: { - /** The ID of the user who shared the keys. */ - keyForwardingUserId: string; - - /** The ID of the room that contains the event whose keys were shared. Used to find the displayname of the user who shared the keys. */ - roomId: string; -}): JSX.Element { +export function E2eMessageSharedIcon(props: E2eMessageSharedIconParams): JSX.Element { const { roomId, keyForwardingUserId } = props; const client = useMatrixClientContext(); diff --git a/src/components/views/rooms/EventTile/E2ePadlock.tsx b/src/components/views/rooms/EventTile/E2ePadlock.tsx index b3a566bb4c..a7fc925331 100644 --- a/src/components/views/rooms/EventTile/E2ePadlock.tsx +++ b/src/components/views/rooms/EventTile/E2ePadlock.tsx @@ -45,13 +45,20 @@ const icons = { /** * A small icon with tooltip, used in the left margin of an {@link EventTile}, which indicates a problem * with an encrypted event. + * + * The icon is rendered with `data-testid="e2e-padlock"`. */ export function E2ePadlock(props: IE2ePadlockProps): ReactNode { // We specify isTriggerInteractive=true and make the div interactive manually as a workaround for // https://github.com/element-hq/compound/issues/294 return ( -
+
{icons[props.icon]}
diff --git a/test/unit-tests/components/views/rooms/EventTile-test.tsx b/test/unit-tests/components/views/rooms/EventTile-test.tsx index 47297cc784..4ae1d564fb 100644 --- a/test/unit-tests/components/views/rooms/EventTile-test.tsx +++ b/test/unit-tests/components/views/rooms/EventTile-test.tsx @@ -27,6 +27,7 @@ import { EventShieldReason, } from "matrix-js-sdk/src/crypto-api"; import { mkEncryptedMatrixEvent } from "matrix-js-sdk/src/testing"; +import { getByTestId } from "@testing-library/dom"; import EventTile, { type EventTileProps } from "../../../../../src/components/views/rooms/EventTile"; import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext"; @@ -347,11 +348,9 @@ describe("EventTile", () => { } as EventEncryptionInfo); const { container } = getComponent(); - await flushPromises(); - const e2eIcons = container.getElementsByClassName("mx_EventTile_e2eIcon"); - expect(e2eIcons).toHaveLength(1); - expect(e2eIcons[0]).toHaveAccessibleName( + const e2eIcon = await waitFor(() => getByTestId(container, "e2e-padlock")); + expect(e2eIcon).toHaveAccessibleName( "@bob:example.org (@bob:example.org) shared this message since you were not in the room when it was sent.", ); }); diff --git a/test/unit-tests/components/views/rooms/EventTile/E2eMessageSharedIcon-test.tsx b/test/unit-tests/components/views/rooms/EventTile/E2eMessageSharedIcon-test.tsx index e0c67d260c..83e5afa697 100644 --- a/test/unit-tests/components/views/rooms/EventTile/E2eMessageSharedIcon-test.tsx +++ b/test/unit-tests/components/views/rooms/EventTile/E2eMessageSharedIcon-test.tsx @@ -11,8 +11,7 @@ import { mocked } from "jest-mock"; import { type RoomMember, type RoomState } from "matrix-js-sdk/src/matrix"; import { E2eMessageSharedIcon } from "../../../../../../src/components/views/rooms/EventTile/E2eMessageSharedIcon.tsx"; -import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext.tsx"; -import { createTestClient, mkStubRoom } from "../../../../../test-utils"; +import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../../../../test-utils"; describe("E2eMessageSharedIcon", () => { it("renders correctly for a known user", () => { @@ -32,7 +31,7 @@ describe("E2eMessageSharedIcon", () => { const result = render( , - withClientContextRenderOptions(mockClient), + withClientContextRenderOptions(mockClient), ); expect(result.container).toMatchSnapshot(); @@ -44,9 +43,8 @@ describe("E2eMessageSharedIcon", () => { it("renders correctly for an unknown user", () => { const mockClient = createTestClient(); const result = render( - - - , + , + withClientContextRenderOptions(mockClient), ); expect(result.container).toMatchSnapshot(); diff --git a/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap b/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap index f6cc5264f2..f5108aad36 100644 --- a/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap @@ -6,6 +6,7 @@ exports[`E2eMessageSharedIcon renders correctly for a known user 1`] = ` aria-label="State of the end-to-end encryption" aria-labelledby="_r_0_" class="mx_EventTile_e2eIcon" + data-testid="e2e-padlock" tabindex="0" >