1
0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-09 08:42:50 +03:00

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
This commit is contained in:
Florian Duros
2023-04-26 12:23:32 +02:00
committed by GitHub
parent 9970ee6973
commit 5328f6e5fe
9 changed files with 739 additions and 100 deletions

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);