Use EditInPlace control for Identity Server picker to improve a11y (#29280)
* Use EditInPlace for identity server picker. * Exclude picker from default dialog button styles. * Remove unused import. * Update test * Remove unused css * Update test * drop only * Add a test for setting an ID server. * Add a unit test for SetIdServer * fix tests * Reformat mx_Dialog button :not list to use a more readable selector. * Reformat other :not sections * forgot a comma * We're in 2025 now. * Update copyright + use class methods.
This commit is contained in:
Will Hunt
GitHub
101
test/unit-tests/components/views/settings/SetIdServer-test.tsx
Normal file
101
test/unit-tests/components/views/settings/SetIdServer-test.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
/*
|
||||
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 { render, waitFor } from "jest-matrix-react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import fetchMock from "fetch-mock-jest";
|
||||
|
||||
import SetIdServer from "../../../../../src/components/views/settings/SetIdServer";
|
||||
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
|
||||
import { getMockClientWithEventEmitter, mockClientMethodsUser, mockClientMethodsServer } from "../../../../test-utils";
|
||||
|
||||
describe("<SetIdServer />", () => {
|
||||
const userId = "@alice:server.org";
|
||||
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
...mockClientMethodsUser(userId),
|
||||
...mockClientMethodsServer(),
|
||||
getOpenIdToken: jest.fn().mockResolvedValue("a_token"),
|
||||
getTerms: jest.fn(),
|
||||
setAccountData: jest.fn(),
|
||||
});
|
||||
|
||||
const getComponent = () => (
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<SetIdServer missingTerms={false} />
|
||||
</MatrixClientContext.Provider>
|
||||
);
|
||||
|
||||
afterAll(() => {
|
||||
jest.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders expected fields", () => {
|
||||
const { asFragment } = render(getComponent());
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should allow setting an identity server", async () => {
|
||||
const { getByLabelText, getByRole } = render(getComponent());
|
||||
|
||||
fetchMock.get("https://identity.example.org/_matrix/identity/v2", {
|
||||
body: {},
|
||||
});
|
||||
fetchMock.get("https://identity.example.org/_matrix/identity/v2/account", {
|
||||
body: { user_id: userId },
|
||||
});
|
||||
fetchMock.post("https://identity.example.org/_matrix/identity/v2/account/register", {
|
||||
body: { token: "foobar" },
|
||||
});
|
||||
|
||||
const identServerField = getByLabelText("Enter a new identity server");
|
||||
await userEvent.type(identServerField, "https://identity.example.org");
|
||||
await userEvent.click(getByRole("button", { name: "Change" }));
|
||||
await userEvent.click(getByRole("button", { name: "Continue" }));
|
||||
});
|
||||
|
||||
it("should clear input on cancel", async () => {
|
||||
const { getByLabelText, getByRole } = render(getComponent());
|
||||
const identServerField = getByLabelText("Enter a new identity server");
|
||||
await userEvent.type(identServerField, "https://identity.example.org");
|
||||
await userEvent.click(getByRole("button", { name: "Reset" }));
|
||||
expect((identServerField as HTMLInputElement).value).toEqual("");
|
||||
});
|
||||
|
||||
it("should show error when an error occurs", async () => {
|
||||
const { getByLabelText, getByRole, getByText } = render(getComponent());
|
||||
|
||||
fetchMock.get("https://invalid.example.org/_matrix/identity/v2", {
|
||||
body: {},
|
||||
status: 404,
|
||||
});
|
||||
fetchMock.get("https://invalid.example.org/_matrix/identity/v2/account", {
|
||||
body: {},
|
||||
status: 404,
|
||||
});
|
||||
fetchMock.post("https://invalid.example.org/_matrix/identity/v2/account/register", {
|
||||
body: {},
|
||||
status: 404,
|
||||
});
|
||||
|
||||
const identServerField = getByLabelText("Enter a new identity server");
|
||||
await userEvent.type(identServerField, "https://invalid.example.org");
|
||||
await userEvent.click(getByRole("button", { name: "Change" }));
|
||||
|
||||
await waitFor(
|
||||
() => {
|
||||
expect(getByText("Not a valid identity server (status code 404)")).toBeVisible();
|
||||
},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
|
||||
// Check the error vanishes when the input is edited.
|
||||
await userEvent.type(identServerField, "https://identity2.example.org");
|
||||
expect(() => getByText("Not a valid identity server (status code 404)")).toThrow();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<SetIdServer /> renders expected fields 1`] = `
|
||||
<DocumentFragment>
|
||||
<fieldset
|
||||
class="mx_SettingsFieldset"
|
||||
>
|
||||
<legend
|
||||
class="mx_SettingsFieldset_legend"
|
||||
>
|
||||
Identity server
|
||||
</legend>
|
||||
<div
|
||||
class="mx_SettingsFieldset_description"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsection_text"
|
||||
>
|
||||
You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsFieldset_content"
|
||||
>
|
||||
<form
|
||||
class="_root_ssths_24 mx_IdentityServerPicker"
|
||||
>
|
||||
<div
|
||||
class="_field_ssths_34"
|
||||
>
|
||||
<label
|
||||
class="_label_ssths_67"
|
||||
for="radix-:r0:"
|
||||
>
|
||||
Enter a new identity server
|
||||
</label>
|
||||
<div
|
||||
class="_controls_1h4nb_17"
|
||||
>
|
||||
<input
|
||||
class="_control_9gon8_18"
|
||||
id="radix-:r0:"
|
||||
name="input"
|
||||
placeholder=""
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</fieldset>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@@ -438,33 +438,29 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
|
||||
class="mx_SettingsFieldset_content"
|
||||
>
|
||||
<form
|
||||
class="mx_SetIdServer"
|
||||
class="_root_ssths_24 mx_IdentityServerPicker"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input"
|
||||
class="_field_ssths_34"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
id="mx_Field_1"
|
||||
label="Enter a new identity server"
|
||||
placeholder=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<label
|
||||
for="mx_Field_1"
|
||||
class="_label_ssths_67"
|
||||
for="radix-:r0:"
|
||||
>
|
||||
Enter a new identity server
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm mx_AccessibleButton_disabled"
|
||||
disabled=""
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Change
|
||||
<div
|
||||
class="_controls_1h4nb_17"
|
||||
>
|
||||
<input
|
||||
class="_control_9gon8_18"
|
||||
id="radix-:r0:"
|
||||
name="input"
|
||||
placeholder=""
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user