Skip to content

Commit

Permalink
Add tests to AdvancedPanel
Browse files Browse the repository at this point in the history
  • Loading branch information
@florianduros
florianduros committed Jan 16, 2025
1 parent b5e0c11 commit 58d2f91
Show file tree
Hide file tree
Showing 3 changed files with 344 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/components/views/settings/encryption/AdvancedPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ function EncryptionDetails({ onResetIdentityClick }: EncryptionDetails): JSX.Ele
);

return (
<div className="mx_EncryptionDetails">
<div className="mx_EncryptionDetails" data-testid="encryption-details">
<div className="mx_EncryptionDetails_session">
<h3 className="mx_EncryptionDetails_session_title">
{_t("settings|encryption|advanced|details_title")}
Expand Down
99 changes: 99 additions & 0 deletions test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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("encryption-details")).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("encryption-details")).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("other-settings")).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("other-settings")).toBeNull();
});
});
});
244 changes: 244 additions & 0 deletions ...unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,244 @@
// 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="encryption-details"
>
<div
class="mx_EncryptionDetails_session"
>
<h3
class="mx_EncryptionDetails_session_title"
>
Encryption details
</h3>
<div>
<span>
Session ID:
</span>
<span>
ABCDEFGHI
</span>
</div>
<div>
<span>
Session key:
</span>
<span>
<svg
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="encryption-details"
>
<div
class="mx_EncryptionDetails_session"
>
<h3
class="mx_EncryptionDetails_session_title"
>
Encryption details
</h3>
<div>
<span>
Session ID:
</span>
<span>
ABCDEFGHI
</span>
</div>
<div>
<span>
Session key:
</span>
<span>
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="other-settings"
>
<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>
`;

0 comments on commit 58d2f91

Please sign in to comment.