OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Element-R: Populate device list for right-panel (#10671) 

* Use `getUserDeviceInfo` instead of `downloadKeys` and `getStoredDevicesForUser`

* Use new `getUserDeviceInfo` api in `UserInfo.tsx` and `UserInfo-test.tsx`

* Fix missing fields

* Use `getUserDeviceInfo` instead of `downloadKeys`

* Move `ManualDeviceKeyVerificationDialog.tsx` from class to functional component and add tests

* Fix strict errors

* Update snapshot

* Add snapshot test to `UserInfo-test.tsx`

* Add test for <BasicUserInfo />

* Remove useless TODO comment

* Add test for ambiguous device

* Rework `<BasicUserInfo />` test
pull/28217/head
Florian Duros 2023-04-26 12:23:32 +02:00 committed by GitHub
parent 9970ee6973
commit 5328f6e5fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 739 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx
View File

@ -18,72 +18,80 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
import React, { useCallback } from "react";
import { Device } from "matrix-js-sdk/src/models/device";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import * as FormattingUtils from "../../../utils/FormattingUtils";
import { _t } from "../../../languageHandler";
import QuestionDialog from "./QuestionDialog";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
interface IProps {
interface IManualDeviceKeyVerificationDialogProps {
userId: string;
device: DeviceInfo;
onFinished(confirm?: boolean): void;
device: Device;
onFinished?(confirm?: boolean): void;
}
export default class ManualDeviceKeyVerificationDialog extends React.Component<IProps> {
private onLegacyFinished = (confirm: boolean): void => {
if (confirm) {
MatrixClientPeg.get().setDeviceVerified(this.props.userId, this.props.device.deviceId, true);
}
this.props.onFinished(confirm);
};
export function ManualDeviceKeyVerificationDialog({
userId,
device,
onFinished,
}: IManualDeviceKeyVerificationDialogProps): JSX.Element {
const mxClient = useMatrixClientContext();
public render(): React.ReactNode {
let text;
if (MatrixClientPeg.get().getUserId() === this.props.userId) {
text = _t("Confirm by comparing the following with the User Settings in your other session:");
} else {
text = _t("Confirm this user's session by comparing the following with their User Settings:");
}
const onLegacyFinished = useCallback(
(confirm: boolean) => {
if (confirm && mxClient) {
mxClient.setDeviceVerified(userId, device.deviceId, true);
}
onFinished?.(confirm);
},
[mxClient, userId, device, onFinished],
);
const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
const body = (
<div>
<p>{text}</p>
<div className="mx_DeviceVerifyDialog_cryptoSection">
<ul>
<li>
<label>{_t("Session name")}:</label> <span>{this.props.device.getDisplayName()}</span>
</li>
<li>
<label>{_t("Session ID")}:</label>{" "}
<span>
<code>{this.props.device.deviceId}</code>
</span>
</li>
<li>
<label>{_t("Session key")}:</label>{" "}
<span>
<code>
<b>{key}</b>
</code>
</span>
</li>
</ul>
</div>
<p>{_t("If they don't match, the security of your communication may be compromised.")}</p>
</div>
);
return (
<QuestionDialog
title={_t("Verify session")}
description={body}
button={_t("Verify session")}
onFinished={this.onLegacyFinished}
/>
);
let text;
if (mxClient?.getUserId() === userId) {
text = _t("Confirm by comparing the following with the User Settings in your other session:");
} else {
text = _t("Confirm this user's session by comparing the following with their User Settings:");
}
const fingerprint = device.getFingerprint();
const key = fingerprint && FormattingUtils.formatCryptoKey(fingerprint);
const body = (
<div>
<p>{text}</p>
<div className="mx_DeviceVerifyDialog_cryptoSection">
<ul>
<li>
<label>{_t("Session name")}:</label> <span>{device.displayName}</span>
</li>
<li>
<label>{_t("Session ID")}:</label>{" "}
<span>
<code>{device.deviceId}</code>
</span>
</li>
<li>
<label>{_t("Session key")}:</label>{" "}
<span>
<code>
<b>{key}</b>
</code>
</span>
</li>
</ul>
</div>
<p>{_t("If they don't match, the security of your communication may be compromised.")}</p>
</div>
);
return (
<QuestionDialog
title={_t("Verify session")}
description={body}
button={_t("Verify session")}
onFinished={onLegacyFinished}
/>
);
}

2
src/components/views/dialogs/UntrustedDeviceDialog.tsx
View File

@ -59,7 +59,7 @@ const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) =
<div className="mx_Dialog_content" id="mx_Dialog_content">
<p>{newSessionText}</p>
<p>
{device.getDisplayName()} ({device.deviceId})
{device.displayName} ({device.deviceId})
</p>
<p>{askToVerifyText}</p>
</div>

37
src/components/views/right_panel/UserInfo.tsx
View File

@ -30,7 +30,7 @@ import { logger } from "matrix-js-sdk/src/logger";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { UserTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
import { Device } from "matrix-js-sdk/src/models/device";
import dis from "../../../dispatcher/dispatcher";
import Modal from "../../../Modal";
@ -81,14 +81,14 @@ import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-me
import { SdkContextClass } from "../../../contexts/SDKContext";
import { asyncSome } from "../../../utils/arrays";
export interface IDevice extends DeviceInfo {
export interface IDevice extends Device {
ambiguous?: boolean;
}
export const disambiguateDevices = (devices: IDevice[]): void => {
const names = Object.create(null);
for (let i = 0; i < devices.length; i++) {
const name = devices[i].getDisplayName() ?? "";
const name = devices[i].displayName ?? "";
const indexList = names[name] || [];
indexList.push(i);
names[name] = indexList;
@ -149,7 +149,8 @@ function useHasCrossSigningKeys(
}
setUpdating(true);
try {
await cli.downloadKeys([member.userId]);
// We call it to populate the user keys and devices
await cli.getCrypto()?.getUserDeviceInfo([member.userId], true);
const xsi = cli.getStoredCrossSigningForUser(member.userId);
const key = xsi && xsi.getId();
return !!key;
@ -195,12 +196,10 @@ export function DeviceItem({ userId, device }: { userId: string; device: IDevice
};
let deviceName;
if (!device.getDisplayName()?.trim()) {
if (!device.displayName?.trim()) {
deviceName = device.deviceId;
} else {
deviceName = device.ambiguous
? device.getDisplayName() + " (" + device.deviceId + ")"
: device.getDisplayName();
deviceName = device.ambiguous ? device.displayName + " (" + device.deviceId + ")" : device.displayName;
}
let trustedLabel: string | undefined;
@ -1190,6 +1189,19 @@ export const PowerLevelEditor: React.FC<{
);
};
async function getUserDeviceInfo(
userId: string,
cli: MatrixClient,
downloadUncached = false,
): Promise<Device[] | undefined> {
const userDeviceMap = await cli.getCrypto()?.getUserDeviceInfo([userId], downloadUncached);
const devicesMap = userDeviceMap?.get(userId);
if (!devicesMap) return;
return Array.from(devicesMap.values());
}
export const useDevices = (userId: string): IDevice[] | undefined | null => {
const cli = useContext(MatrixClientContext);
@ -1203,10 +1215,9 @@ export const useDevices = (userId: string): IDevice[] | undefined | null => {
async function downloadDeviceList(): Promise<void> {
try {
await cli.downloadKeys([userId], true);
const devices = cli.getStoredDevicesForUser(userId);
const devices = await getUserDeviceInfo(userId, cli, true);
if (cancelled) {
if (cancelled || !devices) {
// we got cancelled - presumably a different user now
return;
}
@ -1229,8 +1240,8 @@ export const useDevices = (userId: string): IDevice[] | undefined | null => {
useEffect(() => {
let cancel = false;
const updateDevices = async (): Promise<void> => {
const newDevices = cli.getStoredDevicesForUser(userId);
if (cancel) return;
const newDevices = await getUserDeviceInfo(userId, cli);
if (cancel || !newDevices) return;
setDevices(newDevices);
};
const onDevicesUpdated = (users: string[]): void => {

2
src/verification.ts
View File

@ -26,7 +26,7 @@ import { RightPanelPhases } from "./stores/right-panel/RightPanelStorePhases";
import { accessSecretStorage } from "./SecurityManager";
import UntrustedDeviceDialog from "./components/views/dialogs/UntrustedDeviceDialog";
import { IDevice } from "./components/views/right_panel/UserInfo";
import ManualDeviceKeyVerificationDialog from "./components/views/dialogs/ManualDeviceKeyVerificationDialog";
import { ManualDeviceKeyVerificationDialog } from "./components/views/dialogs/ManualDeviceKeyVerificationDialog";
import RightPanelStore from "./stores/right-panel/RightPanelStore";
import { IRightPanelCardState } from "./stores/right-panel/RightPanelStoreIPanelState";
import { findDMForUser } from "./utils/dm/findDMForUser";

113
test/components/views/dialogs/ManualDeviceKeyVerificationDialog-test.tsx Normal file
View File

@ -0,0 +1,113 @@
/*
* Copyright 2023 The Matrix.org Foundation C.I.C.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from "react";
import { render, screen } from "@testing-library/react";
import { Device } from "matrix-js-sdk/src/models/device";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { stubClient } from "../../../test-utils";
import { ManualDeviceKeyVerificationDialog } from "../../../../src/components/views/dialogs/ManualDeviceKeyVerificationDialog";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
describe("ManualDeviceKeyVerificationDialog", () => {
let mockClient: MatrixClient;
function renderDialog(userId: string, device: Device, onLegacyFinished: (confirm: boolean) => void) {
return render(
<MatrixClientContext.Provider value={mockClient}>
<ManualDeviceKeyVerificationDialog userId={userId} device={device} onFinished={onLegacyFinished} />
</MatrixClientContext.Provider>,
);
}
beforeEach(() => {
mockClient = stubClient();
});
it("should display the device", () => {
// When
const deviceId = "XYZ";
const device = new Device({
userId: mockClient.getUserId()!,
deviceId,
displayName: "my device",
algorithms: [],
keys: new Map([[`ed25519:${deviceId}`, "ABCDEFGH"]]),
});
const { container } = renderDialog(mockClient.getUserId()!, device, jest.fn());
// Then
expect(container).toMatchSnapshot();
});
it("should display the device of another user", () => {
// When
const userId = "@alice:example.com";
const deviceId = "XYZ";
const device = new Device({
userId,
deviceId,
displayName: "my device",
algorithms: [],
keys: new Map([[`ed25519:${deviceId}`, "ABCDEFGH"]]),
});
const { container } = renderDialog(userId, device, jest.fn());
// Then
expect(container).toMatchSnapshot();
});
it("should call onFinished and matrixClient.setDeviceVerified", () => {
// When
const deviceId = "XYZ";
const device = new Device({
userId: mockClient.getUserId()!,
deviceId,
displayName: "my device",
algorithms: [],
keys: new Map([[`ed25519:${deviceId}`, "ABCDEFGH"]]),
});
const onFinished = jest.fn();
renderDialog(mockClient.getUserId()!, device, onFinished);
screen.getByRole("button", { name: "Verify session" }).click();
// Then
expect(onFinished).toHaveBeenCalledWith(true);
expect(mockClient.setDeviceVerified).toHaveBeenCalledWith(mockClient.getUserId(), deviceId, true);
});
it("should call onFinished and not matrixClient.setDeviceVerified", () => {
// When
const deviceId = "XYZ";
const device = new Device({
userId: mockClient.getUserId()!,
deviceId,
displayName: "my device",
algorithms: [],
keys: new Map([[`ed25519:${deviceId}`, "ABCDEFGH"]]),
});
const onFinished = jest.fn();
renderDialog(mockClient.getUserId()!, device, onFinished);
screen.getByRole("button", { name: "Cancel" }).click();
// Then
expect(onFinished).toHaveBeenCalledWith(false);
expect(mockClient.setDeviceVerified).not.toHaveBeenCalled();
});
});

231
test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap Normal file
View File

@ -0,0 +1,231 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
<div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
aria-describedby="mx_Dialog_content"
aria-labelledby="mx_BaseDialog_title"
class="mx_QuestionDialog mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
>
<h2
class="mx_Heading_h2 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Verify session
</h2>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
class="mx_Dialog_content"
id="mx_Dialog_content"
>
<div>
<p>
Confirm by comparing the following with the User Settings in your other session:
</p>
<div
class="mx_DeviceVerifyDialog_cryptoSection"
>
<ul>
<li>
<label>
Session name
:
</label>
<span>
my device
</span>
</li>
<li>
<label>
Session ID
:
</label>
<span>
<code>
XYZ
</code>
</span>
</li>
<li>
<label>
Session key
:
</label>
<span>
<code>
<b>
ABCD EFGH
</b>
</code>
</span>
</li>
</ul>
</div>
<p>
If they don't match, the security of your communication may be compromised.
</p>
</div>
</div>
<div
class="mx_Dialog_buttons"
>
<span
class="mx_Dialog_buttons_row"
>
<button
data-testid="dialog-cancel-button"
type="button"
>
Cancel
</button>
<button
class="mx_Dialog_primary"
data-testid="dialog-primary-button"
type="button"
>
Verify session
</button>
</span>
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
`;
exports[`ManualDeviceKeyVerificationDialog should display the device of another user 1`] = `
<div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
aria-describedby="mx_Dialog_content"
aria-labelledby="mx_BaseDialog_title"
class="mx_QuestionDialog mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
>
<h2
class="mx_Heading_h2 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Verify session
</h2>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
class="mx_Dialog_content"
id="mx_Dialog_content"
>
<div>
<p>
Confirm this user's session by comparing the following with their User Settings:
</p>
<div
class="mx_DeviceVerifyDialog_cryptoSection"
>
<ul>
<li>
<label>
Session name
:
</label>
<span>
my device
</span>
</li>
<li>
<label>
Session ID
:
</label>
<span>
<code>
XYZ
</code>
</span>
</li>
<li>
<label>
Session key
:
</label>
<span>
<code>
<b>
ABCD EFGH
</b>
</code>
</span>
</li>
</ul>
</div>
<p>
If they don't match, the security of your communication may be compromised.
</p>
</div>
</div>
<div
class="mx_Dialog_buttons"
>
<span
class="mx_Dialog_buttons_row"
>
<button
data-testid="dialog-cancel-button"
type="button"
>
Cancel
</button>
<button
class="mx_Dialog_primary"
data-testid="dialog-primary-button"
type="button"
>
Verify session
</button>
</span>
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
`;

98
test/components/views/right_panel/UserInfo-test.tsx
View File

@ -30,7 +30,7 @@ import {
} from "matrix-js-sdk/src/matrix";
import { Phase, VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
import { UserTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
import { Device } from "matrix-js-sdk/src/models/device";
import { defer } from "matrix-js-sdk/src/utils";
import UserInfo, {
@ -127,6 +127,7 @@ beforeEach(() => {
mockCrypto = mocked({
getDeviceVerificationStatus: jest.fn(),
getUserDeviceInfo: jest.fn(),
} as unknown as CryptoApi);
mockClient = mocked({
@ -155,6 +156,7 @@ beforeEach(() => {
downloadKeys: jest.fn(),
getStoredDevicesForUser: jest.fn(),
getCrypto: jest.fn().mockReturnValue(mockCrypto),
getStoredCrossSigningForUser: jest.fn(),
} as unknown as MatrixClient);
jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
@ -265,14 +267,18 @@ describe("<UserInfo />", () => {
beforeEach(() => {
mockClient.isCryptoEnabled.mockReturnValue(true);
mockClient.checkUserTrust.mockReturnValue(new UserTrustLevel(false, false, false));
mockClient.doesServerSupportUnstableFeature.mockResolvedValue(true);
const device1 = DeviceInfo.fromStorage(
{
unsigned: { device_display_name: "my device" },
},
"d1",
);
mockClient.getStoredDevicesForUser.mockReturnValue([device1]);
const device = new Device({
deviceId: "d1",
userId: defaultUserId,
displayName: "my device",
algorithms: [],
keys: new Map(),
});
const devicesMap = new Map<string, Device>([[device.deviceId, device]]);
const userDeviceMap = new Map<string, Map<string, Device>>([[defaultUserId, devicesMap]]);
mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap);
});
it("renders a device list which can be expanded", async () => {
@ -291,6 +297,18 @@ describe("<UserInfo />", () => {
// ... which should contain the device name
expect(within(deviceButton).getByText("my device")).toBeInTheDocument();
});
it("renders <BasicUserInfo />", async () => {
const { container } = renderComponent({
phase: RightPanelPhases.SpaceMemberInfo,
verificationRequest,
room: mockRoom,
});
await act(flushPromises);
await waitFor(() => expect(screen.getByRole("button", { name: "Verify" })).toBeInTheDocument());
expect(container).toMatchSnapshot();
});
});
describe("with an encrypted room", () => {
@ -363,7 +381,7 @@ describe("<UserInfoHeader />", () => {
});
describe("<DeviceItem />", () => {
const device = { deviceId: "deviceId", getDisplayName: () => "deviceName" } as DeviceInfo;
const device = { deviceId: "deviceId", displayName: "deviceName" } as Device;
const defaultProps = {
userId: defaultUserId,
device,
@ -410,7 +428,7 @@ describe("<DeviceItem />", () => {
renderComponent();
await act(flushPromises);
expect(screen.getByRole("button", { name: device.getDisplayName()! })).toBeInTheDocument;
expect(screen.getByRole("button", { name: device.displayName! })).toBeInTheDocument();
expect(screen.queryByText(/trusted/i)).not.toBeInTheDocument();
});
@ -419,7 +437,7 @@ describe("<DeviceItem />", () => {
renderComponent();
await act(flushPromises);
expect(screen.getByRole("button", { name: `${device.getDisplayName()} Not trusted` })).toBeInTheDocument;
expect(screen.getByRole("button", { name: `${device.displayName} Not trusted` })).toBeInTheDocument();
});
it("with verified device only, displays no button without a label", async () => {
@ -427,7 +445,7 @@ describe("<DeviceItem />", () => {
renderComponent();
await act(flushPromises);
expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
expect(screen.getByText(device.displayName!)).toBeInTheDocument();
expect(screen.queryByText(/trusted/)).not.toBeInTheDocument();
});
@ -441,8 +459,9 @@ describe("<DeviceItem />", () => {
setMockDeviceTrust(false, true);
// expect to see no button in this case
// TODO `toBeInTheDocument` is not called, if called the test is failing
expect(screen.queryByRole("button")).not.toBeInTheDocument;
expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
expect(screen.getByText(device.displayName!)).toBeInTheDocument();
});
it("with verified user and device, displays no button and a 'Trusted' label", async () => {
@ -451,8 +470,8 @@ describe("<DeviceItem />", () => {
renderComponent();
await act(flushPromises);
expect(screen.queryByRole("button")).not.toBeInTheDocument;
expect(screen.getByText(device.getDisplayName()!)).toBeInTheDocument();
expect(screen.queryByRole("button")).not.toBeInTheDocument();
expect(screen.getByText(device.displayName!)).toBeInTheDocument();
expect(screen.getByText("Trusted")).toBeInTheDocument();
});
@ -461,8 +480,8 @@ describe("<DeviceItem />", () => {
renderComponent();
await act(flushPromises);
const button = screen.getByRole("button", { name: device.getDisplayName()! });
expect(button).toBeInTheDocument;
const button = screen.getByRole("button", { name: device.displayName! });
expect(button).toBeInTheDocument();
await userEvent.click(button);
expect(mockVerifyDevice).not.toHaveBeenCalled();
@ -476,13 +495,36 @@ describe("<DeviceItem />", () => {
renderComponent();
await act(flushPromises);
const button = screen.getByRole("button", { name: device.getDisplayName()! });
expect(button).toBeInTheDocument;
const button = screen.getByRole("button", { name: device.displayName! });
expect(button).toBeInTheDocument();
await userEvent.click(button);
expect(mockVerifyDevice).toHaveBeenCalledTimes(1);
expect(mockVerifyDevice).toHaveBeenCalledWith(defaultUser, device);
});
it("with display name", async () => {
const { container } = renderComponent();
await act(flushPromises);
expect(container).toMatchSnapshot();
});
it("without display name", async () => {
const device = { deviceId: "deviceId" } as Device;
const { container } = renderComponent({ device, userId: defaultUserId });
await act(flushPromises);
expect(container).toMatchSnapshot();
});
it("ambiguous display name", async () => {
const device = { deviceId: "deviceId", ambiguous: true, displayName: "my display name" };
const { container } = renderComponent({ device, userId: defaultUserId });
await act(flushPromises);
expect(container).toMatchSnapshot();
});
});
describe("<UserOptionsSection />", () => {
@ -1099,9 +1141,9 @@ describe("<RoomAdminToolsContainer />", () => {
describe("disambiguateDevices", () => {
it("does not add ambiguous key to unique names", () => {
const initialDevices = [
{ deviceId: "id1", getDisplayName: () => "name1" } as DeviceInfo,
{ deviceId: "id2", getDisplayName: () => "name2" } as DeviceInfo,
{ deviceId: "id3", getDisplayName: () => "name3" } as DeviceInfo,
{ deviceId: "id1", displayName: "name1" } as Device,
{ deviceId: "id2", displayName: "name2" } as Device,
{ deviceId: "id3", displayName: "name3" } as Device,
];
disambiguateDevices(initialDevices);
@ -1113,14 +1155,14 @@ describe("disambiguateDevices", () => {
it("adds ambiguous key to all ids with non-unique names", () => {
const uniqueNameDevices = [
{ deviceId: "id3", getDisplayName: () => "name3" } as DeviceInfo,
{ deviceId: "id4", getDisplayName: () => "name4" } as DeviceInfo,
{ deviceId: "id6", getDisplayName: () => "name6" } as DeviceInfo,
{ deviceId: "id3", displayName: "name3" } as Device,
{ deviceId: "id4", displayName: "name4" } as Device,
{ deviceId: "id6", displayName: "name6" } as Device,
];
const nonUniqueNameDevices = [
{ deviceId: "id1", getDisplayName: () => "nonUnique" } as DeviceInfo,
{ deviceId: "id2", getDisplayName: () => "nonUnique" } as DeviceInfo,
{ deviceId: "id5", getDisplayName: () => "nonUnique" } as DeviceInfo,
{ deviceId: "id1", displayName: "nonUnique" } as Device,
{ deviceId: "id2", displayName: "nonUnique" } as Device,
{ deviceId: "id5", displayName: "nonUnique" } as Device,
];
const initialDevices = [...uniqueNameDevices, ...nonUniqueNameDevices];
disambiguateDevices(initialDevices);

233
test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap Normal file
View File

@ -0,0 +1,233 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DeviceItem /> ambiguous display name 1`] = `
<div>
<div
class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
role="button"
tabindex="0"
title="deviceId"
>
<div
class="mx_E2EIcon mx_E2EIcon_normal"
/>
<div
class="mx_UserInfo_device_name"
>
my display name (deviceId)
</div>
<div
class="mx_UserInfo_device_trusted"
/>
</div>
</div>
`;
exports[`<DeviceItem /> with display name 1`] = `
<div>
<div
class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
role="button"
tabindex="0"
title="deviceId"
>
<div
class="mx_E2EIcon mx_E2EIcon_normal"
/>
<div
class="mx_UserInfo_device_name"
>
deviceName
</div>
<div
class="mx_UserInfo_device_trusted"
/>
</div>
</div>
`;
exports[`<DeviceItem /> without display name 1`] = `
<div>
<div
class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
role="button"
tabindex="0"
title="deviceId"
>
<div
class="mx_E2EIcon mx_E2EIcon_normal"
/>
<div
class="mx_UserInfo_device_name"
>
deviceId
</div>
<div
class="mx_UserInfo_device_trusted"
/>
</div>
</div>
`;
exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
<div>
<div
class="mx_BaseCard mx_UserInfo"
>
<div
class="mx_BaseCard_header"
>
<div
class="mx_AccessibleButton mx_BaseCard_close"
data-testid="base-card-close-button"
role="button"
tabindex="0"
title="Close"
/>
<div
class="mx_UserInfo_avatar"
>
<div
class="mx_UserInfo_avatar_transition"
>
<div
class="mx_UserInfo_avatar_transition_child"
>
<span
aria-label="Avatar"
aria-live="off"
class="mx_AccessibleButton mx_BaseAvatar"
role="button"
tabindex="0"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 299.52px; width: 460.79999999999995px; line-height: 460.79999999999995px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 460.79999999999995px; height: 460.79999999999995px;"
/>
</span>
</div>
</div>
</div>
<div
class="mx_UserInfo_container mx_UserInfo_separator"
>
<div
class="mx_UserInfo_profile"
>
<div>
<h2>
<span
aria-label="@user:example.com"
dir="auto"
title="@user:example.com"
>
@user:example.com
</span>
</h2>
</div>
<div
class="mx_UserInfo_profile_mxid"
>
customUserIdentifier
</div>
<div
class="mx_UserInfo_profileStatus"
>
<div
class="mx_PresenceLabel"
>
Unknown
</div>
</div>
</div>
</div>
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
>
<div
class="mx_UserInfo_container"
>
<h3>
Security
</h3>
<p>
Messages in this room are not end-to-end encrypted.
</p>
<div
class="mx_UserInfo_container_verifyButton"
>
<div
class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_verifyButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
role="button"
tabindex="0"
>
Verify
</div>
</div>
<div
class="mx_UserInfo_devices"
>
<div />
<div>
<div
class="mx_AccessibleButton mx_UserInfo_expand mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
role="button"
tabindex="0"
>
<div
class="mx_E2EIcon mx_E2EIcon_normal"
/>
<div>
1 session
</div>
</div>
</div>
</div>
</div>
<div
class="mx_UserInfo_container"
>
<h3>
Options
</h3>
<div>
<div
class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
role="button"
tabindex="0"
>
Message
</div>
<div
class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
role="button"
tabindex="0"
>
Share Link to User
</div>
<div
class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_destructive mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
role="button"
tabindex="0"
>
Ignore
</div>
</div>
</div>
</div>
</div>
</div>
`;

1
test/test-utils/test-utils.ts
View File

@ -234,6 +234,7 @@ export function createTestClient(): MatrixClient {
}),
searchUserDirectory: jest.fn().mockResolvedValue({ limited: false, results: [] }),
setDeviceVerified: jest.fn(),
} as unknown as MatrixClient;
client.reEmitter = new ReEmitter(client);