Refactor EncryptionEvent using MVVM and move to shared-components (#32531)
* Refactor EncryptionEvent using MVVM and move to shared-components * Added viewmodel and unit tests for bothe viewmodel and component. * Added test for custom-class * Update EventTileFactory and RoomView to use the new component * Clean up unused language strings from element-web * Changed how the view model is created * Make sure the initial snapshot mimics the previous component * Optimizing viewmodel initial snapshot and update * Updated playwright screenshots
This commit is contained in:
rbondesson
@@ -1,145 +0,0 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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 React from "react";
|
||||
import { mocked } from "jest-mock";
|
||||
import { type MatrixClient, type MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
|
||||
import { render, screen } from "jest-matrix-react";
|
||||
import { waitFor } from "@testing-library/dom";
|
||||
|
||||
import EncryptionEvent from "../../../../../src/components/views/messages/EncryptionEvent";
|
||||
import { createTestClient, mkMessage } from "../../../../test-utils";
|
||||
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
|
||||
import { LocalRoom } from "../../../../../src/models/LocalRoom";
|
||||
import DMRoomMap from "../../../../../src/utils/DMRoomMap";
|
||||
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
|
||||
|
||||
const renderEncryptionEvent = (client: MatrixClient, event: MatrixEvent) => {
|
||||
render(
|
||||
<MatrixClientContext.Provider value={client}>
|
||||
<EncryptionEvent mxEvent={event} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
};
|
||||
|
||||
const checkTexts = async (title: string, subTitle: string) => {
|
||||
await screen.findByText(title);
|
||||
await screen.findByText(subTitle);
|
||||
};
|
||||
|
||||
describe("EncryptionEvent", () => {
|
||||
const roomId = "!room:example.com";
|
||||
const algorithm = "m.megolm.v1.aes-sha2";
|
||||
let client: MatrixClient;
|
||||
let event: MatrixEvent;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
client = createTestClient();
|
||||
jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
|
||||
jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(client);
|
||||
event = mkMessage({
|
||||
event: true,
|
||||
room: roomId,
|
||||
user: client.getUserId()!,
|
||||
});
|
||||
jest.spyOn(DMRoomMap, "shared").mockReturnValue({
|
||||
getUserIdForRoomId: jest.fn(),
|
||||
} as unknown as DMRoomMap);
|
||||
});
|
||||
|
||||
describe("for an encrypted room", () => {
|
||||
beforeEach(() => {
|
||||
event.event.content!.algorithm = algorithm;
|
||||
jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
|
||||
const room = new Room(roomId, client, client.getUserId()!);
|
||||
mocked(client.getRoom).mockReturnValue(room);
|
||||
});
|
||||
|
||||
it("should show the expected texts", async () => {
|
||||
renderEncryptionEvent(client, event);
|
||||
await waitFor(() =>
|
||||
checkTexts(
|
||||
"Encryption enabled",
|
||||
"Messages in this room are end-to-end encrypted. " +
|
||||
"When people join, you can verify them in their profile, just tap on their profile picture.",
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
it("should show the expected texts for experimental state event encryption", async () => {
|
||||
client.enableEncryptedStateEvents = true;
|
||||
event.event.content!["io.element.msc4362.encrypt_state_events"] = true;
|
||||
renderEncryptionEvent(client, event);
|
||||
await waitFor(() =>
|
||||
checkTexts(
|
||||
"Experimental state encryption enabled",
|
||||
"Messages and state events in this room are end-to-end encrypted. " +
|
||||
"When people join, you can verify them in their profile, " +
|
||||
"just tap on their profile picture.",
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
describe("with same previous algorithm", () => {
|
||||
beforeEach(() => {
|
||||
jest.spyOn(event, "getPrevContent").mockReturnValue({
|
||||
algorithm: algorithm,
|
||||
});
|
||||
});
|
||||
|
||||
it("should show the expected texts", async () => {
|
||||
renderEncryptionEvent(client, event);
|
||||
await waitFor(() => checkTexts("Encryption enabled", "Some encryption parameters have been changed."));
|
||||
});
|
||||
});
|
||||
|
||||
describe("with unknown algorithm", () => {
|
||||
beforeEach(() => {
|
||||
event.event.content!.algorithm = "unknown";
|
||||
});
|
||||
|
||||
it("should show the expected texts", async () => {
|
||||
renderEncryptionEvent(client, event);
|
||||
await waitFor(() => checkTexts("Encryption enabled", "Ignored attempt to disable encryption"));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("for an unencrypted room", () => {
|
||||
beforeEach(() => {
|
||||
jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
|
||||
renderEncryptionEvent(client, event);
|
||||
});
|
||||
|
||||
it("should show the expected texts", async () => {
|
||||
expect(client.getCrypto()!.isEncryptionEnabledInRoom).toHaveBeenCalledWith(roomId);
|
||||
await waitFor(() =>
|
||||
checkTexts("Encryption not enabled", "The encryption used by this room isn't supported."),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("for an encrypted local room", () => {
|
||||
let localRoom: LocalRoom;
|
||||
|
||||
beforeEach(() => {
|
||||
event.event.content!.algorithm = algorithm;
|
||||
// jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
|
||||
localRoom = new LocalRoom(roomId, client, client.getUserId()!);
|
||||
jest.spyOn(localRoom, "isEncryptionEnabled").mockReturnValue(true);
|
||||
mocked(client.getRoom).mockReturnValue(localRoom);
|
||||
renderEncryptionEvent(client, event);
|
||||
});
|
||||
|
||||
it("should show the expected texts", async () => {
|
||||
expect(localRoom.isEncryptionEnabled).toHaveBeenCalled();
|
||||
await checkTexts("Encryption enabled", "Messages in this chat will be end-to-end encrypted.");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,192 @@
|
||||
/*
|
||||
* 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 { waitFor } from "@testing-library/dom";
|
||||
import { mocked } from "jest-mock";
|
||||
import { RoomStateEvent, type MatrixClient, type MatrixEvent, type Room } from "matrix-js-sdk/src/matrix";
|
||||
import { EncryptionEventState } from "@element-hq/web-shared-components";
|
||||
|
||||
import type { RoomEncryptionEventContent } from "matrix-js-sdk/src/types";
|
||||
import { EncryptionEventViewModel } from "../../../src/viewmodels/event-tiles/EncryptionEventViewModel";
|
||||
import { LocalRoom } from "../../../src/models/LocalRoom";
|
||||
import DMRoomMap from "../../../src/utils/DMRoomMap";
|
||||
import { mkEvent, stubClient } from "../../test-utils";
|
||||
|
||||
describe("EncryptionEventViewModel", () => {
|
||||
const roomId = "!room:example.com";
|
||||
const algorithm = "m.megolm.v1.aes-sha2";
|
||||
let client: MatrixClient;
|
||||
let event: MatrixEvent;
|
||||
let room: Room;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
client = stubClient();
|
||||
room = client.getRoom(roomId)!;
|
||||
mocked(client.getRoom).mockReturnValue(room);
|
||||
event = mkEvent({
|
||||
event: true,
|
||||
room: roomId,
|
||||
user: client.getUserId()!,
|
||||
type: "m.room.encryption",
|
||||
content: {
|
||||
algorithm,
|
||||
},
|
||||
prev_content: {},
|
||||
});
|
||||
jest.spyOn(DMRoomMap, "shared").mockReturnValue({
|
||||
getUserIdForRoomId: jest.fn(),
|
||||
} as unknown as DMRoomMap);
|
||||
});
|
||||
|
||||
const setRoomEncrypted = (encrypted: boolean): void => {
|
||||
const crypto = client.getCrypto()!;
|
||||
mocked(crypto.isEncryptionEnabledInRoom).mockResolvedValue(encrypted);
|
||||
};
|
||||
|
||||
const createVm = (
|
||||
props: Partial<ConstructorParameters<typeof EncryptionEventViewModel>[0]> = {},
|
||||
): EncryptionEventViewModel =>
|
||||
new EncryptionEventViewModel({
|
||||
mxEvent: event,
|
||||
cli: client,
|
||||
...props,
|
||||
});
|
||||
|
||||
it("sets ENABLED for encrypted room", async () => {
|
||||
setRoomEncrypted(true);
|
||||
|
||||
const vm = createVm();
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.ENABLED));
|
||||
expect(vm.getSnapshot()).toMatchObject({
|
||||
state: EncryptionEventState.ENABLED,
|
||||
className: "mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon",
|
||||
encryptedStateEvents: false,
|
||||
});
|
||||
});
|
||||
|
||||
it("uses synchronous room encryption state for the initial snapshot", () => {
|
||||
jest.spyOn(room, "hasEncryptionStateEvent").mockReturnValue(true);
|
||||
setRoomEncrypted(false);
|
||||
|
||||
const vm = createVm();
|
||||
expect(vm.getSnapshot().state).toBe(EncryptionEventState.ENABLED);
|
||||
});
|
||||
|
||||
it("sets ENABLED with encryptedStateEvents=true for encrypted state events", async () => {
|
||||
setRoomEncrypted(true);
|
||||
client.enableEncryptedStateEvents = true;
|
||||
(event.getContent() as RoomEncryptionEventContent)["io.element.msc4362.encrypt_state_events"] = true;
|
||||
|
||||
const vm = createVm();
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.ENABLED));
|
||||
expect(vm.getSnapshot().encryptedStateEvents).toBe(true);
|
||||
});
|
||||
|
||||
it("sets CHANGED when previous algorithm is already megolm", async () => {
|
||||
setRoomEncrypted(true);
|
||||
event = mkEvent({
|
||||
event: true,
|
||||
room: roomId,
|
||||
user: client.getUserId()!,
|
||||
type: "m.room.encryption",
|
||||
content: {
|
||||
algorithm,
|
||||
rotation_period_ms: 1,
|
||||
},
|
||||
prev_content: { algorithm },
|
||||
});
|
||||
|
||||
const vm = createVm();
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.CHANGED));
|
||||
});
|
||||
|
||||
it("sets DISABLE_ATTEMPT for unknown algorithm in encrypted room", async () => {
|
||||
setRoomEncrypted(true);
|
||||
event = mkEvent({
|
||||
event: true,
|
||||
room: roomId,
|
||||
user: client.getUserId()!,
|
||||
type: "m.room.encryption",
|
||||
content: { algorithm: "unknown" },
|
||||
prev_content: {},
|
||||
});
|
||||
|
||||
const vm = createVm();
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.DISABLE_ATTEMPT));
|
||||
});
|
||||
|
||||
it("sets UNSUPPORTED for unencrypted room", async () => {
|
||||
setRoomEncrypted(false);
|
||||
|
||||
const vm = createVm();
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.UNSUPPORTED));
|
||||
expect(vm.getSnapshot().className).toBe("mx_EventTileBubble mx_cryptoEvent");
|
||||
});
|
||||
|
||||
it("sets ENABLED_DM with partner display name", async () => {
|
||||
setRoomEncrypted(true);
|
||||
jest.spyOn(DMRoomMap, "shared").mockReturnValue({
|
||||
getUserIdForRoomId: jest.fn().mockReturnValue("@alice:example.com"),
|
||||
} as unknown as DMRoomMap);
|
||||
mocked(room.getMember).mockReturnValue({
|
||||
rawDisplayName: "Alice",
|
||||
} as unknown as ReturnType<typeof room.getMember>);
|
||||
|
||||
const vm = createVm();
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.ENABLED_DM));
|
||||
expect(vm.getSnapshot().userName).toBe("Alice");
|
||||
});
|
||||
|
||||
it("sets ENABLED_LOCAL for encrypted local room", async () => {
|
||||
const localRoomId = "local+123";
|
||||
const localRoom = new LocalRoom(localRoomId, client, client.getUserId()!);
|
||||
jest.spyOn(localRoom, "isEncryptionEnabled").mockReturnValue(true);
|
||||
mocked(client.getRoom).mockReturnValue(localRoom);
|
||||
event = mkEvent({
|
||||
event: true,
|
||||
room: localRoomId,
|
||||
user: client.getUserId()!,
|
||||
type: "m.room.encryption",
|
||||
content: { algorithm },
|
||||
prev_content: {},
|
||||
});
|
||||
jest.spyOn(DMRoomMap, "shared").mockReturnValue({
|
||||
getUserIdForRoomId: jest.fn(),
|
||||
} as unknown as DMRoomMap);
|
||||
|
||||
const vm = createVm();
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.ENABLED_LOCAL));
|
||||
expect(localRoom.isEncryptionEnabled).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("recomputes snapshot on RoomStateEvent.Update", async () => {
|
||||
setRoomEncrypted(false);
|
||||
const vm = createVm();
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.UNSUPPORTED));
|
||||
|
||||
setRoomEncrypted(true);
|
||||
room.emit(RoomStateEvent.Update, room.currentState);
|
||||
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.ENABLED));
|
||||
});
|
||||
|
||||
it("does not emit updates when snapshot is unchanged", async () => {
|
||||
setRoomEncrypted(true);
|
||||
const vm = createVm();
|
||||
await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.ENABLED));
|
||||
|
||||
const listener = jest.fn();
|
||||
const unsubscribe = vm.subscribe(listener);
|
||||
|
||||
room.emit(RoomStateEvent.Update, room.currentState);
|
||||
|
||||
await waitFor(() => expect(mocked(client.getCrypto()!.isEncryptionEnabledInRoom)).toHaveBeenCalledTimes(2));
|
||||
expect(listener).not.toHaveBeenCalled();
|
||||
unsubscribe();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user