sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Move E2ePadlock to shared components (#33538)

Browse Source 
* Move E2ePadlock to shared components

* Add storybook images

* Move translation to shared components

* Fix E2ePadlock story accessibility

* Update E2eMessageSharedIcon test for padlock role
This commit is contained in:
Zack
2026-05-20 13:20:17 +00:00
committed by GitHub
parent ba3682074b
commit 223a861535
17 changed files with 229 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/views/rooms/EventTile/E2eMessageSharedIcon-test.tsx
+13 -9
View File
@@ -5,7 +5,7 @@ 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 { render } from "jest-matrix-react";
import { render, waitFor } from "jest-matrix-react";
import React from "react";
import { mocked } from "jest-mock";
import { type RoomMember, type RoomState } from "matrix-js-sdk/src/matrix";
@@ -14,7 +14,7 @@ import { E2eMessageSharedIcon } from "../../../../../../src/components/views/roo
import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../../../../test-utils";
describe("E2eMessageSharedIcon", () => {
it("renders correctly for a known user", () => {
it("renders correctly for a known user", async () => {
const mockClient = createTestClient();
const mockMember = { rawDisplayName: "Bob" } as RoomMember;
const mockState = {
@@ -34,22 +34,26 @@ describe("E2eMessageSharedIcon", () => {
withClientContextRenderOptions(mockClient),
);
expect(result.container).toMatchSnapshot();
expect(result.container.firstChild).toHaveAccessibleName(
"Bob (@bob:example.com) shared this message since you were not in the room when it was sent.",
await waitFor(() =>
expect(result.container.firstChild).toHaveAccessibleName(
"Bob (@bob:example.com) shared this message since you were not in the room when it was sent.",
),
);
expect(result.container).toMatchSnapshot();
});
it("renders correctly for an unknown user", () => {
it("renders correctly for an unknown user", async () => {
const mockClient = createTestClient();
const result = render(
<E2eMessageSharedIcon keyForwardingUserId="@bob:example.com" roomId="!roomId" />,
withClientContextRenderOptions(mockClient),
);
expect(result.container).toMatchSnapshot();
expect(result.container.firstChild).toHaveAccessibleName(
"@bob:example.com (@bob:example.com) shared this message since you were not in the room when it was sent.",
await waitFor(() =>
expect(result.container.firstChild).toHaveAccessibleName(
"@bob:example.com (@bob:example.com) shared this message since you were not in the room when it was sent.",
),
);
expect(result.container).toMatchSnapshot();
});
});
apps/web/test/unit-tests/components/views/rooms/EventTile/E2ePadlock-test.tsx
-28
View File
@@ -1,28 +0,0 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { render } from "jest-matrix-react";
import React from "react";
import { E2ePadlock, E2ePadlockIcon } from "../../../../../../src/components/views/rooms/EventTile/E2ePadlock.tsx";
describe("E2ePadlock", () => {
it("renders a 'Normal' icon", () => {
const result = render(<E2ePadlock icon={E2ePadlockIcon.Normal} title="Test tooltip" />);
expect(result.asFragment()).toMatchSnapshot();
});
it("renders a 'Warning' icon", () => {
const result = render(<E2ePadlock icon={E2ePadlockIcon.Warning} title="Bad" />);
expect(result.asFragment()).toMatchSnapshot();
});
it("renders a 'DecryptionFailure' icon", () => {
const result = render(<E2ePadlock icon={E2ePadlockIcon.DecryptionFailure} title="UTD" />);
expect(result.asFragment()).toMatchSnapshot();
});
});
apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap
+4 -2
View File
@@ -5,8 +5,9 @@ exports[`E2eMessageSharedIcon renders correctly for a known user 1`] = `
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_0_"
class="mx_EventTile_e2eIcon"
class="_e2ePadlock_ohpuo_8 mx_EventTile_e2eIcon"
data-testid="e2e-padlock"
role="img"
tabindex="0"
>
<svg
@@ -35,8 +36,9 @@ exports[`E2eMessageSharedIcon renders correctly for an unknown user 1`] = `
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_6_"
class="mx_EventTile_e2eIcon"
class="_e2ePadlock_ohpuo_8 mx_EventTile_e2eIcon"
data-testid="e2e-padlock"
role="img"
tabindex="0"
>
<svg
apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2ePadlock-test.tsx.snap
-81
View File
@@ -1,81 +0,0 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`E2ePadlock renders a 'DecryptionFailure' icon 1`] = `
<DocumentFragment>
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_c_"
class="mx_EventTile_e2eIcon"
data-testid="e2e-padlock"
tabindex="0"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
/>
</svg>
</div>
</DocumentFragment>
`;
exports[`E2ePadlock renders a 'Normal' icon 1`] = `
<DocumentFragment>
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_0_"
class="mx_EventTile_e2eIcon"
data-testid="e2e-padlock"
tabindex="0"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
/>
<path
clip-rule="evenodd"
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
fill-rule="evenodd"
/>
</svg>
</div>
</DocumentFragment>
`;
exports[`E2ePadlock renders a 'Warning' icon 1`] = `
<DocumentFragment>
<div
aria-label="State of the end-to-end encryption"
aria-labelledby="_r_6_"
class="mx_EventTile_e2eIcon"
data-testid="e2e-padlock"
tabindex="0"
>
<svg
color="var(--cpd-color-icon-critical-primary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
/>
</svg>
</div>
</DocumentFragment>
`;