nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms (#30440)

Browse Source 
* Show a blue lock instead of a grey shield for unencrypted rooms

* Update screenshots and snapshot

* Update snapshots and fix e2e test that used to expect the grey shield

* lint and add tests for shield

* Update more screen shots

* finish unit test for left icon

* Remove unneeded check

* Don't bother adding stray props to E2EIcon for data-testid

* Upate snapshots
This commit is contained in:
David Langley
2025-08-11 10:35:04 +01:00
committed by GitHub
parent 4da27eb199
commit 59531ea512
36 changed files with 128 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
test/unit-tests/components/structures/RoomView-test.tsx
View File

@@ -442,7 +442,8 @@ describe("RoomView", () => {
);
const { container } = await renderRoomView();
await waitFor(() => expect(container.querySelector(".mx_E2EIcon_normal")).toBeInTheDocument());
// We no longer show the grey shield for encrypted rooms, so it should not be there.
await waitFor(() => expect(container.querySelector(".mx_E2EIcon_normal")).not.toBeInTheDocument());
const verificationStatus = new UserVerificationStatus(true, true, false);
jest.spyOn(cli.getCrypto()!, "getUserVerificationStatus").mockResolvedValue(verificationStatus);

58
test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
View File

@@ -787,7 +787,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
</div>
<div
aria-label="Message composer"
class="mx_MessageComposer"
class="mx_MessageComposer mx_MessageComposer_e2eStatus"
role="region"
>
<div
@@ -796,6 +796,23 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<div
class="mx_MessageComposer_row"
>
<div
class="mx_MessageComposer_e2eIconWrapper"
>
<svg
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="12"
viewBox="0 0 24 24"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
/>
</svg>
</div>
<div
class="mx_SendMessageComposer"
>
@@ -1164,7 +1181,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
</div>
<div
aria-label="Message composer"
class="mx_MessageComposer"
class="mx_MessageComposer mx_MessageComposer_e2eStatus"
role="region"
>
<div
@@ -1173,6 +1190,23 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<div
class="mx_MessageComposer_row"
>
<div
class="mx_MessageComposer_e2eIconWrapper"
>
<svg
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="12"
viewBox="0 0 24 24"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
/>
</svg>
</div>
<div
class="mx_SendMessageComposer"
>
@@ -1809,6 +1843,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<div
aria-labelledby="«r3e»"
class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
data-testid="e2e-icon"
>
<div
class="mx_E2EIcon_normal"
@@ -2221,7 +2256,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</div>
<div
aria-label="Message composer"
class="mx_MessageComposer mx_MessageComposer--compact"
class="mx_MessageComposer mx_MessageComposer--compact mx_MessageComposer_e2eStatus"
role="region"
>
<div
@@ -2230,6 +2265,23 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
<div
class="mx_MessageComposer_row"
>
<div
class="mx_MessageComposer_e2eIconWrapper"
>
<svg
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="12"
viewBox="0 0 24 24"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
/>
</svg>
</div>
<div
class="mx_SendMessageComposer"
>

2
test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
View File

@@ -22,6 +22,7 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of a
>
<div
class="mx_E2EIcon mx_E2EIcon_warning"
data-testid="e2e-icon"
style="width: 24px; height: 24px;"
>
<div
@@ -100,6 +101,7 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of t
>
<div
class="mx_E2EIcon mx_E2EIcon_warning"
data-testid="e2e-icon"
style="width: 24px; height: 24px;"
>
<div

22
test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
View File

@@ -24,6 +24,7 @@ import {
import { setSelection } from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
import { createMocks } from "./utils";
import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext.tsx";
import { E2EStatus } from "../../../../../../src/utils/ShieldUtils.ts";
jest.mock("../../../../../../src/components/views/rooms/EmojiButton", () => ({
EmojiButton: ({ addEmoji }: { addEmoji: (emoji: string) => void }) => {
@@ -69,6 +70,7 @@ describe("SendWysiwygComposer", () => {
disabled = false,
isRichTextEnabled = true,
placeholder?: string,
e2eStatus?: E2EStatus,
) => {
return render(
<MatrixClientContext.Provider value={mockClient}>
@@ -80,6 +82,7 @@ describe("SendWysiwygComposer", () => {
isRichTextEnabled={isRichTextEnabled}
menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })}
placeholder={placeholder}
e2eStatus={e2eStatus}
/>
</ScopedRoomContextProvider>
</MatrixClientContext.Provider>,
@@ -322,4 +325,23 @@ describe("SendWysiwygComposer", () => {
});
},
);
describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
"Left icon when %s",
({ isRichTextEnabled }) => {
it.each([
[E2EStatus.Verified, "mx_E2EIcon_verified"],
[E2EStatus.Warning, "mx_E2EIcon_warning"],
[undefined, undefined],
])("Should render left icon when e2eStatus is %s", async (e2eStatus, expectedClass) => {
// When
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled, undefined, e2eStatus);
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
const leftIcon = screen.getByTestId("e2e-icon");
// Then
expect(leftIcon).toBeInTheDocument();
expect(leftIcon).toHaveClass(expectedClass ? `mx_E2EIcon ${expectedClass}` : `mx_E2EIcon`);
});
},
);
});