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

Add tests to AdvancedPanel

Browse Source
This commit is contained in:
Florian Duros
2025-01-16 15:53:55 +01:00
parent b5e0c1147f
commit cc70dcefd6
3 changed files with 358 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/views/settings/encryption/AdvancedPanel.tsx
View File

@@ -61,18 +61,20 @@ function EncryptionDetails({ onResetIdentityClick }: EncryptionDetails): JSX.Ele
);
return (
<div className="mx_EncryptionDetails">
<div className="mx_EncryptionDetails" data-testid="encryptionDetails">
<div className="mx_EncryptionDetails_session">
<h3 className="mx_EncryptionDetails_session_title">
{_t("settings|encryption|advanced|details_title")}
</h3>
<div>
<span>{_t("settings|encryption|advanced|session_id")}</span>
<span>{matrixClient.deviceId}</span>
<span data-testid="deviceId">{matrixClient.deviceId}</span>
</div>
<div>
<span>{_t("settings|encryption|advanced|session_key")}</span>
<span>{keys ? keys.ed25519 : <InlineSpinner />}</span>
<span data-testid="sessionKey">
{keys ? keys.ed25519 : <InlineSpinner aria-label={_t("common|loading")} />}
</span>
</div>
</div>
<div className="mx_EncryptionDetails_buttons">
@@ -124,7 +126,7 @@ function OtherSettings(): JSX.Element | null {
return (
<Root
data-testid="other-settings"
data-testid="otherSettings"
className="mx_OtherSettings"
onChange={async (evt) => {
const checked = new FormData(evt.currentTarget).get("neverSendEncrypted") === "on";

99
test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx Normal file
View File

@@ -0,0 +1,99 @@
/*
* Copyright 2025 New Vector 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 React from "react";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { render, screen, waitFor } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import { createTestClient, withClientContextRenderOptions } from "../../../../../test-utils";
import { AdvancedPanel } from "../../../../../../src/components/views/settings/encryption/AdvancedPanel";
import SettingsStore from "../../../../../../src/settings/SettingsStore";
import { SettingLevel } from "../../../../../../src/settings/SettingLevel";
describe("<AdvancedPanel />", () => {
let matrixClient: MatrixClient;
beforeEach(() => {
matrixClient = createTestClient();
});
async function renderAdvancedPanel(onResetIdentityClick = jest.fn()) {
const renderResult = render(
<AdvancedPanel onResetIdentityClick={onResetIdentityClick} />,
withClientContextRenderOptions(matrixClient),
);
// Wait for the device keys to be displayed
await waitFor(() => expect(screen.getByText("ed25519")).toBeInTheDocument());
return renderResult;
}
describe("<EncryptionDetails />", () => {
it("should display a spinner when loading the device keys", async () => {
jest.spyOn(matrixClient.getCrypto()!, "getOwnDeviceKeys").mockImplementation(() => new Promise(() => {}));
render(<AdvancedPanel onResetIdentityClick={jest.fn()} />, withClientContextRenderOptions(matrixClient));
expect(screen.getByTestId("encryptionDetails")).toMatchSnapshot();
});
it("should display the device keys", async () => {
await renderAdvancedPanel();
// session id
expect(screen.getByText("ABCDEFGHI")).toBeInTheDocument();
// session key
expect(screen.getByText("ed25519")).toBeInTheDocument();
expect(screen.getByTestId("encryptionDetails")).toMatchSnapshot();
});
it("should call the onResetIdentityClick callback when the reset cryptographic identity button is clicked", async () => {
const user = userEvent.setup();
const onResetIdentityClick = jest.fn();
await renderAdvancedPanel(onResetIdentityClick);
const resetIdentityButton = screen.getByRole("button", { name: "Reset cryptographic identity" });
await user.click(resetIdentityButton);
expect(onResetIdentityClick).toHaveBeenCalled();
});
});
describe("<OtherSettings />", () => {
it("should display the blacklist of unverified devices settings", async () => {
const user = userEvent.setup();
jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(true);
jest.spyOn(SettingsStore, "canSetValue").mockReturnValue(true);
jest.spyOn(SettingsStore, "setValue");
await renderAdvancedPanel();
expect(screen.getByTestId("otherSettings")).toMatchSnapshot();
const checkbox = screen.getByRole("checkbox", {
name: "Never send encrypted messages to unverified devices",
});
expect(checkbox).toBeChecked();
await user.click(checkbox);
expect(SettingsStore.setValue).toHaveBeenCalledWith(
"blacklistUnverifiedDevices",
null,
SettingLevel.DEVICE,
false,
);
});
it("should not display the section when the user can not set the value", async () => {
jest.spyOn(SettingsStore, "canSetValue").mockReturnValue(false);
jest.spyOn(SettingsStore, "setValue");
await renderAdvancedPanel();
expect(screen.queryByTestId("otherSettings")).toBeNull();
});
});
});

253
test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap Normal file
View File

@@ -0,0 +1,253 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<AdvancedPanel /> <EncryptionDetails /> should display a spinner when loading the device keys 1`] = `
<div
class="mx_EncryptionDetails"
data-testid="encryptionDetails"
>
<div
class="mx_EncryptionDetails_session"
>
<h3
class="mx_EncryptionDetails_session_title"
>
Encryption details
</h3>
<div>
<span>
Session ID:
</span>
<span
data-testid="deviceId"
>
ABCDEFGHI
</span>
</div>
<div>
<span>
Session key:
</span>
<span
data-testid="sessionKey"
>
<svg
aria-label="Loading…"
class="_icon_1ye7b_27"
fill="currentColor"
height="1em"
style="width: 20px; height: 20px;"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2Z"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
</div>
<div
class="mx_EncryptionDetails_buttons"
>
<button
class="_button_i91xf_17 _has-icon_i91xf_66"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 16a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 15V7.85L9.125 9.725c-.2.2-.433.3-.7.3-.267 0-.508-.108-.725-.325a.93.93 0 0 1-.288-.712A.977.977 0 0 1 7.7 8.3l3.6-3.6c.1-.1.208-.17.325-.212.117-.042.242-.063.375-.063s.258.02.375.063a.877.877 0 0 1 .325.212l3.6 3.6c.2.2.296.438.287.713a.977.977 0 0 1-.287.687c-.2.2-.438.304-.713.313a.93.93 0 0 1-.712-.288L13 7.85V15c0 .283-.096.52-.287.713A.968.968 0 0 1 12 16Zm-6 4c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.968.968 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
/>
</svg>
Export keys
</button>
<button
class="_button_i91xf_17 _has-icon_i91xf_66"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 15.575c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212l-3.6-3.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7c.183-.183.42-.28.712-.288.292-.008.53.08.713.263L11 12.15V5c0-.283.096-.52.287-.713A.968.968 0 0 1 12 4c.283 0 .52.096.713.287.191.192.287.43.287.713v7.15l1.875-1.875c.183-.183.42-.27.713-.263.291.009.529.105.712.288a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-3.6 3.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063ZM6 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
/>
</svg>
Import keys
</button>
</div>
<button
class="_button_i91xf_17 _destructive_i91xf_116"
data-kind="tertiary"
data-size="sm"
role="button"
tabindex="0"
>
Reset cryptographic identity
</button>
</div>
`;
exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys 1`] = `
<div
class="mx_EncryptionDetails"
data-testid="encryptionDetails"
>
<div
class="mx_EncryptionDetails_session"
>
<h3
class="mx_EncryptionDetails_session_title"
>
Encryption details
</h3>
<div>
<span>
Session ID:
</span>
<span
data-testid="deviceId"
>
ABCDEFGHI
</span>
</div>
<div>
<span>
Session key:
</span>
<span
data-testid="sessionKey"
>
ed25519
</span>
</div>
</div>
<div
class="mx_EncryptionDetails_buttons"
>
<button
class="_button_i91xf_17 _has-icon_i91xf_66"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 16a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 15V7.85L9.125 9.725c-.2.2-.433.3-.7.3-.267 0-.508-.108-.725-.325a.93.93 0 0 1-.288-.712A.977.977 0 0 1 7.7 8.3l3.6-3.6c.1-.1.208-.17.325-.212.117-.042.242-.063.375-.063s.258.02.375.063a.877.877 0 0 1 .325.212l3.6 3.6c.2.2.296.438.287.713a.977.977 0 0 1-.287.687c-.2.2-.438.304-.713.313a.93.93 0 0 1-.712-.288L13 7.85V15c0 .283-.096.52-.287.713A.968.968 0 0 1 12 16Zm-6 4c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.968.968 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
/>
</svg>
Export keys
</button>
<button
class="_button_i91xf_17 _has-icon_i91xf_66"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 15.575c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212l-3.6-3.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7c.183-.183.42-.28.712-.288.292-.008.53.08.713.263L11 12.15V5c0-.283.096-.52.287-.713A.968.968 0 0 1 12 4c.283 0 .52.096.713.287.191.192.287.43.287.713v7.15l1.875-1.875c.183-.183.42-.27.713-.263.291.009.529.105.712.288a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-3.6 3.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063ZM6 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
/>
</svg>
Import keys
</button>
</div>
<button
class="_button_i91xf_17 _destructive_i91xf_116"
data-kind="tertiary"
data-size="sm"
role="button"
tabindex="0"
>
Reset cryptographic identity
</button>
</div>
`;
exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unverified devices settings 1`] = `
<form
class="_root_ssths_24 mx_OtherSettings"
data-testid="otherSettings"
>
<h3
class="mx_OtherSettings_title"
>
Other people’s devices
</h3>
<div
class="_inline-field_ssths_40"
>
<div
class="_inline-field-control_ssths_52"
>
<div
class="_container_qnvru_18"
>
<input
aria-describedby="radix-:r7:"
checked=""
class="_input_qnvru_32"
id="radix-:r6:"
name="neverSendEncrypted"
title=""
type="checkbox"
/>
<div
class="_ui_qnvru_42"
/>
</div>
</div>
<div
class="_inline-field-body_ssths_46"
>
<label
class="_label_ssths_67"
for="radix-:r6:"
>
Never send encrypted messages to unverified devices
</label>
<span
class="_message_ssths_93 _help-message_ssths_99"
id="radix-:r7:"
>
By default in encrypted rooms, do not send encrypted messages to anyone until you’ve verified them
</span>
</div>
</div>
</form>
`;